/* ============================================
   Nestia Booking Plugin — Frontend Styles
   ============================================ */

:root {
    --nb-green:       #314B3B;
    --nb-green-dark:  #243829;
    --nb-rust:        #B7644E;
    --nb-gold:        #C8A25D;
    --nb-gold-light:  #e8d5b0;
    --nb-cream:       #F3EEE7;
    --nb-cream-dark:  #ece5dc;
    --nb-text:        #314B3B;
    --nb-text-mid:    #53606b;
    --nb-text-light:  #888;
    --nb-border:      rgba(49,75,59,.12);
    --nb-shadow:      0 2px 16px rgba(49,75,59,.1);
}

/* ============================================
   BUTTONS
   ============================================ */
.nestia-btn {
    display: inline-block;
    padding: 14px 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
    line-height: 1;
    border-radius: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.nestia-btn-primary { background: var(--nb-gold); color: #fff !important; }
.nestia-btn-primary:hover { background: var(--nb-green); color: #fff !important; }
.nestia-btn-secondary { background: transparent; color: var(--nb-text-mid); border: 1px solid var(--nb-border); }
.nestia-btn-secondary:hover { border-color: var(--nb-green); color: var(--nb-green); }

/* ============================================
   CALENDAR WRAP
   ============================================ */
.nestia-calendar-wrap {
    font-family: 'Montserrat', sans-serif;
    background: var(--nb-cream);
    padding: 0;
    border: 1px solid var(--nb-border);
}

/* ============================================
   LEGEND
   ============================================ */
.nestia-calendar-legend {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--nb-border);
    flex-wrap: wrap;
}
.nestia-calendar-legend span {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--nb-text-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}
.nestia-legend-available::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--nb-green); }
.nestia-legend-booked::before    { content: ''; display: inline-block; width: 10px; height: 10px; background: #ccc; }
.nestia-legend-selected::before  { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--nb-gold); }
.nestia-legend-min-nights { color: var(--nb-text-light) !important; font-style: italic; }

/* ============================================
   CALENDAR NAVIGATION
   ============================================ */
.nestia-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nb-border);
    background: var(--nb-cream);
}
.nestia-calendar-nav-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--nb-green);
    letter-spacing: .04em;
}
.nestia-month-prev,
.nestia-month-next {
    background: none;
    border: 1px solid var(--nb-border);
    color: var(--nb-green);
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    padding: 0;
}
.nestia-month-prev:hover,
.nestia-month-next:hover { background: var(--nb-green); color: #fff; border-color: var(--nb-green); }
.nestia-month-prev:disabled { opacity: .3; cursor: default; }

/* ============================================
   CALENDAR GRID
   PHP outputs: .nestia-month / .nestia-month-header / .nestia-month-days-header / .nestia-month-days
   ============================================ */
.nestia-calendar-grid { padding: 16px; }

.nestia-month,
.nestia-calendar-month { margin-bottom: 16px; }
.nestia-month:last-child,
.nestia-calendar-month:last-child { margin-bottom: 0; }

.nestia-month-header,
.nestia-calendar-month-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nb-green);
    margin-bottom: 10px;
    text-align: center;
    padding: 0;
}

.nestia-month-days-header,
.nestia-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.nestia-month-days-header span,
.nestia-calendar-weekday {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nb-text-mid);
    padding: 4px 0;
}

.nestia-month-days,
.nestia-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.nestia-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--nb-text-mid);
    cursor: default;
    border-radius: 0;
    position: relative;
    transition: all .15s;
}
.nestia-day-available { color: var(--nb-green); cursor: pointer; font-weight: 600; }
.nestia-day-available:hover { background: var(--nb-gold); color: #fff; }
.nestia-day-booked { color: #ccc; text-decoration: line-through; }
.nestia-day-past { color: #ddd; }
.nestia-day-selected { background: var(--nb-gold) !important; color: #fff !important; font-weight: 700; }
.nestia-day-in-range { background: rgba(200,162,93,.15); color: var(--nb-green); }
.nestia-day-empty { visibility: hidden; }

/* ============================================
   SELECTION PANEL
   ============================================ */
.nestia-calendar-selection {
    padding: 16px;
    border-top: 1px solid var(--nb-border);
    background: #fff;
}
.nestia-selection-dates {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.nestia-selection-checkin,
.nestia-selection-checkout,
.nestia-selection-guests {
    padding: 10px 12px;
    border: 1px solid var(--nb-border);
    background: var(--nb-cream);
}
.nestia-selection-checkin label,
.nestia-selection-checkout label,
.nestia-selection-guests label {
    display: block;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nb-text-mid);
    font-weight: 600;
    margin-bottom: 4px;
}
.nestia-checkin-display,
.nestia-checkout-display {
    font-size: 13px;
    color: var(--nb-text);
    font-weight: 500;
    display: block;
}
.nestia-checkin-display.is-set,
.nestia-checkout-display.is-set { color: var(--nb-green); font-weight: 600; }

.nestia-guests-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.nestia-guests-minus,
.nestia-guests-plus {
    background: none;
    border: 1px solid var(--nb-border);
    color: var(--nb-green);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    padding: 0;
    border-radius: 0;
    line-height: 1;
    flex-shrink: 0;
}
.nestia-guests-minus:hover,
.nestia-guests-plus:hover { background: var(--nb-green); color: #fff; border-color: var(--nb-green); }
.nestia-guests-count {
    font-size: 15px;
    font-weight: 600;
    color: var(--nb-green);
    min-width: 18px;
    text-align: center;
}

.nestia-calendar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nestia-get-quote { width: 100%; }
.nestia-clear-selection {
    width: 100%;
    font-size: 11px;
    padding: 10px;
    color: var(--nb-text-mid);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.nestia-clear-selection:hover { color: var(--nb-rust); }

/* ============================================
   QUOTE RESULT
   ============================================ */
.nestia-quote-result {
    padding: 16px;
    border-top: 1px solid var(--nb-border);
    background: #fff;
}
.nestia-quote-title {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nb-text-mid);
    font-weight: 700;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}
.nestia-quote-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    border-top: 1px solid var(--nb-border);
}
.nestia-quote-breakdown li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--nb-border);
    font-size: 13px;
    color: var(--nb-text-mid);
    font-family: 'Montserrat', sans-serif;
}
.nestia-quote-breakdown li span:last-child { font-weight: 600; color: var(--nb-green); }
.nestia-quote-discount { color: #2e7d32 !important; }
.nestia-quote-discount span:first-child { color: #2e7d32 !important; font-style: italic; }
.nestia-quote-discount span:last-child { color: #2e7d32 !important; }
.nestia-quote-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0 16px;
    border-top: 2px solid var(--nb-green);
    font-family: 'Montserrat', sans-serif;
}
.nestia-quote-total span:first-child {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nb-text-mid);
}
.nestia-quote-total-amount {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--nb-rust) !important;
}
.nestia-quote-unavailable {
    font-size: 13px;
    color: var(--nb-rust);
    font-family: 'Montserrat', sans-serif;
    padding: 8px 0;
}

/* ============================================
   BOOKING FORM
   ============================================ */
.nestia-booking-form-wrap {
    font-family: 'Montserrat', sans-serif;
}

/*
 * Step visibility:
 * Step 1 = always visible (no inline style in PHP)
 * Steps 2 & 3 = hidden via inline style="display:none;" in PHP
 * JS shows/hides steps 2 & 3 using fadeIn/fadeOut
 * DO NOT set .nestia-form-step { display:none } — it breaks step 1
 */
.nestia-form-step { display: block; }

.nestia-form-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--nb-green);
    margin: 0 0 16px;
}

.nestia-form-group { margin-bottom: 16px; }

.nestia-form-group label,
.nestia-form-label {
    display: block;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nb-text-mid);
    font-weight: 600;
    margin-bottom: 6px;
}

.nestia-required { color: var(--nb-rust); }
.nestia-optional { color: var(--nb-text-light); font-weight: 400; }

.nestia-input,
.nestia-form-input,
.nestia-textarea {
    width: 100%;
    background: var(--nb-cream);
    border: 1px solid var(--nb-border);
    border-radius: 0;
    color: var(--nb-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    padding: 12px 14px;
    transition: border-color .2s;
    box-sizing: border-box;
}
.nestia-input:focus,
.nestia-form-input:focus,
.nestia-textarea:focus { outline: none; border-color: var(--nb-gold); }
.nestia-textarea { resize: vertical; min-height: 80px; }

.nestia-form-row { display: grid; gap: 12px; }
.nestia-form-row-half { grid-template-columns: 1fr 1fr; }

.nestia-booking-summary {
    background: var(--nb-cream);
    border: 1px solid var(--nb-border);
    padding: 16px;
    margin-bottom: 20px;
}
.nestia-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--nb-border);
    font-size: 13px;
}
.nestia-summary-item:last-child { border-bottom: none; }
.nestia-summary-label {
    color: var(--nb-text-mid);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}
.nestia-summary-value { color: var(--nb-text); font-weight: 600; }
.nestia-summary-total {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--nb-rust) !important;
}

.nestia-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.nestia-form-actions .nestia-btn { width: auto; flex: 1; }

.nestia-form-note {
    font-size: 11px;
    color: var(--nb-text-light);
    margin-top: 12px;
    line-height: 1.5;
}

.nestia-form-error {
    padding: 14px 16px;
    font-size: 13px;
    margin-top: 12px;
    border-left: 3px solid var(--nb-rust);
    background: var(--nb-cream);
    color: var(--nb-rust);
    font-family: 'Montserrat', sans-serif;
}

.nestia-booking-message {
    padding: 14px 16px;
    font-size: 13px;
    margin-top: 12px;
    border-left: 3px solid var(--nb-gold);
    background: var(--nb-cream);
    font-family: 'Montserrat', sans-serif;
}
.nestia-booking-message.success { border-color: var(--nb-green); color: var(--nb-green); }
.nestia-booking-message.error   { border-color: var(--nb-rust);  color: var(--nb-rust); }

/* ============================================
   CONFIRMATION STEP
   ============================================ */
.nestia-confirmation-wrap { text-align: center; padding: 40px 20px; }
.nestia-confirmation-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--nb-green);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.nestia-confirmation-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--nb-green);
    margin-bottom: 12px;
}
.nestia-confirmation-message { font-size: 15px; color: var(--nb-text-mid); margin-bottom: 20px; }
.nestia-confirmation-code {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--nb-rust);
    letter-spacing: .05em;
    margin: 4px 0;
}
.nestia-confirmation-note { font-size: 12px; color: var(--nb-text-light); margin-top: 20px; line-height: 1.6; }

/* ============================================
   LOADING
   ============================================ */
.nestia-loading {
    display: flex;
    align-items: center;
    padding: 16px 0;
    font-size: 13px;
    color: var(--nb-text-mid);
    font-family: 'Montserrat', sans-serif;
}
.nestia-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--nb-gold-light);
    border-top-color: var(--nb-gold);
    border-radius: 50%;
    animation: nestia-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}
@keyframes nestia-spin { to { transform: rotate(360deg); } }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .nestia-selection-dates { grid-template-columns: 1fr 1fr; }
    .nestia-selection-guests { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
    .nestia-date-inputs { grid-template-columns: 1fr; }
    .nestia-form-row-half { grid-template-columns: 1fr; }
    .nestia-day { font-size: 11px; }
    .nestia-selection-dates { grid-template-columns: 1fr; }
    .nestia-form-actions { flex-direction: column; }
}