/**
 * Park Booking System - Frontend Styles
 *
 * @package ParkBooking
 * @version 1.1.0
 */

/* =========================================================
   PALETTE MAPPING: inherit from the active theme (rs-*) with a
   hardcoded fallback so the widget works standalone.

   Parco del Sele palette (green). The previous bordeaux/gold values
   (#8B2E3B / #A8936A) were leftovers from the Beach Booking fork and
   never matched this park.

   Anche i neutri beige/marrone (#F5F0EB / #FFFDF9 / #2C1810 / #6B5B52)
   venivano dallo stesso fork: sostituiti con neutri a base verde.

   Contrast (WCAG 2.1, computed on --pb-card #FFFFFF):
     #1B5E20 on #FFFFFF -> 7.87:1  (text: AAA)
     #2E7D32 on #FFFFFF -> 5.13:1  (text: AA)
     #FFFFFF on #2E7D32 -> 5.13:1  (button label: AA)
     #1B5E20 on #A5D6A7 -> 4.79:1  (chip hover: AA)
     #1F2A22 on #F2F6F1 -> 13.61:1 (body text: AAA)
     #55605A on #F2F6F1 ->  6.00:1 (muted: AA)
   --pb-secondary (#A5D6A7) is a LIGHT green: decorative only, never
   used as a text colour and never behind white text. Text that used
   to be --pb-secondary now uses --pb-secondary-text.
   ========================================================= */
.pb-booking-wrapper {
    --pb-primary:       var(--rs-primary,     #2E7D32);
    --pb-secondary:     var(--rs-secondary,   #A5D6A7);
    /* Neutri allineati al brand verde/arancio. I precedenti #F5F0EB (beige) e
       #2C1810 (marrone) erano ereditati dal fork Beach Booking e stonavano
       con il verde. Contrasti verificati, nessuna regressione:
       #1F2A22 su #F2F6F1 = 13.61:1 (AAA), muted #55605A = 6.00:1 (AA, era 5.72). */
    --pb-bg:            var(--rs-bg,          #F2F6F1);
    --pb-card:          var(--rs-card,        #FFFFFF);
    --pb-text:          var(--rs-text,        #1F2A22);
    --pb-text-muted:    var(--rs-text-muted,  #55605A);
    --pb-success:       var(--rs-success,     #2F7A4A);
    --pb-error:         var(--rs-error,       #C0392B);
    --pb-radius:        var(--rs-r,           8px);
    --pb-radius-lg:     var(--rs-r-lg,        16px);
    --pb-shadow:        var(--rs-shadow,      0 4px 24px rgba(31,42,34,.10));
    --pb-shadow-lg:     0 8px 40px rgba(31,42,34,.15);
    --pb-font-body:     var(--rs-b-font,      system-ui, -apple-system, 'Segoe UI', sans-serif);
    --pb-font-heading:  var(--rs-h-font,      Georgia, 'Times New Roman', serif);

    /* Text-safe green for small copy that used to be --pb-secondary */
    --pb-secondary-text: var(--rs-secondary-text, #1B5E20);

    /* Legacy aliases kept for backward compat with older CSS blocks */
    --pb-primary-dark:  var(--rs-primary-dark, #1B5E20);
    --pb-accent:        var(--rs-accent,       #E65100);
    --pb-warning:       #E65100;
    --pb-danger:        var(--pb-error);
    --pb-border:        rgba(31,42,34,.14);
    --pb-white:         #ffffff;
    --pb-radius-sm:     var(--pb-radius);
    --pb-transition:    all .25s cubic-bezier(.4,0,.2,1);
    --pb-font:          var(--pb-font-body);

    font-family: var(--pb-font-body);
}

.pb-booking-wrapper h2,
.pb-booking-wrapper h3 {
    font-family: var(--pb-font-heading);
    color: var(--pb-primary);
}

/* =========================================================
   CSS VARIABLES (root-level fallback for elements outside wrapper)
   ========================================================= */
:root {
    --pb-primary:       #2E7D32;
    --pb-primary-dark:  #1B5E20;
    --pb-secondary:     #A5D6A7;
    --pb-secondary-text:#1B5E20;
    --pb-accent:        #E65100;
    --pb-success:       #2F7A4A;
    --pb-warning:       #E65100;
    --pb-danger:        #C0392B;
    --pb-error:         #C0392B;
    --pb-text:          #1F2A22;
    --pb-text-muted:    #55605A;
    --pb-border:        rgba(31,42,34,.14);
    --pb-bg:            #F2F6F1;
    --pb-card:          #FFFFFF;
    --pb-white:         #ffffff;
    --pb-radius:        8px;
    --pb-radius-sm:     8px;
    --pb-radius-lg:     16px;
    --pb-shadow:        0 4px 24px rgba(31,42,34,.10);
    --pb-shadow-lg:     0 8px 40px rgba(31,42,34,.15);
    --pb-transition:    all .25s cubic-bezier(.4,0,.2,1);
    --pb-font:          system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pb-font-body:     system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pb-font-heading:  Georgia, 'Times New Roman', serif;
}

/* =========================================================
   WRAPPER
   ========================================================= */
.pb-booking-wrapper {
    font-family: var(--pb-font);
    color: var(--pb-text);
    /* Keep in sync with booking-form.css — a single authoritative width */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* =========================================================
   HEADER
   ========================================================= */
.pb-booking-header {
    text-align: center;
    padding: 48px 0 32px;
}

.pb-booking-header h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--pb-primary), var(--pb-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
}

.pb-subtitle {
    color: var(--pb-text-muted);
    font-size: 1rem;
    margin: 0;
}

/* =========================================================
   STEP INDICATOR
   ========================================================= */
.pb-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    position: relative;
}

.pb-steps-indicator::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
    height: 2px;
    background: var(--pb-border);
    z-index: 0;
}

.pb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.pb-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pb-border);
    color: var(--pb-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    transition: var(--pb-transition);
    border: 3px solid var(--pb-white);
    box-shadow: 0 0 0 2px var(--pb-border);
}

.pb-step.active .pb-step-number,
.pb-step.completed .pb-step-number {
    background: linear-gradient(135deg, var(--pb-primary), var(--pb-primary-dark));
    color: var(--pb-white);
    box-shadow: 0 0 0 2px var(--pb-primary);
}

.pb-step-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--pb-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pb-step.active .pb-step-label {
    color: var(--pb-primary);
}

/* =========================================================
   STEP CONTENT CARD
   ========================================================= */
.pb-step-content {
    background: var(--pb-white);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow);
    padding: 36px;
    margin-bottom: 24px;
    border: 1px solid var(--pb-border);
    animation: bbFadeIn .3s ease;
}

@keyframes bbFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pb-step-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pb-text);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--pb-border);
}

/* =========================================================
   BOOKING TYPE TOGGLE
   ========================================================= */
.pb-booking-type-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.pb-radio-card {
    flex: 1;
    cursor: pointer;
}

.pb-radio-card input[type="radio"] {
    display: none;
}

.pb-radio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--pb-border);
    border-radius: var(--pb-radius-sm);
    transition: var(--pb-transition);
    text-align: center;
}

.pb-radio-card input:checked + .pb-radio-content {
    border-color: var(--pb-primary);
    background: rgba(46,125,50,.06);
    color: var(--pb-primary);
}

.pb-radio-content strong {
    font-size: .95rem;
    font-weight: 700;
}

.pb-radio-content small {
    font-size: .8rem;
    color: var(--pb-text-muted);
    margin-top: 2px;
}

/* =========================================================
   DATE INPUT
   ========================================================= */
.pb-date-input-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.pb-date-input-wrapper label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    color: var(--pb-text);
    margin-bottom: 8px;
}

.pb-date-input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border: 2px solid var(--pb-border);
    border-radius: var(--pb-radius-sm);
    font-size: 1rem;
    font-family: var(--pb-font);
    color: var(--pb-text);
    background: var(--pb-white);
    transition: var(--pb-transition);
    box-sizing: border-box;
    cursor: pointer;
}

.pb-date-input:focus {
    outline: none;
    border-color: var(--pb-primary);
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.pb-date-icon {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 1.2rem;
    pointer-events: none;
}

.pb-date-summary {
    background: rgba(46,125,50,.06);
    border: 1px solid rgba(46,125,50,.2);
    border-radius: var(--pb-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .9rem;
}

.pb-date-summary p {
    margin: 4px 0;
}

/* =========================================================
   MAP CONTROLS / PARK MAP
   -----------------------------------------------------------------
   Intentionally NOT styled here. `.pb-map-controls`, `.pb-zoom-controls`,
   `.pb-btn-icon`, `.pb-btn-auto-suggest` and `.pb-park-map` live in
   park-map.css, which is the single source of truth for the map widget.
   The duplicates that used to sit here had identical specificity, so the
   winner depended on stylesheet load order (frontend.css and park-map.css
   are enqueued from two different callbacks) and the map rendered
   differently depending on which one happened to print last.
   ========================================================= */

.pb-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.8);
    gap: 12px;
}

.pb-map-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pb-border);
    border-top-color: var(--pb-primary);
    border-radius: 50%;
    animation: bbSpin .8s linear infinite;
}

@keyframes bbSpin {
    to { transform: rotate(360deg); }
}

.pb-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.pb-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--pb-text-muted);
}

.pb-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pb-selection-info {
    background: rgba(46,125,50,.06);
    border: 1px solid rgba(46,125,50,.2);
    border-radius: var(--pb-radius-sm);
    padding: 10px 16px;
    margin-top: 12px;
    font-size: .9rem;
}

/* =========================================================
   CONFIGURATION FORM
   ========================================================= */
.pb-form-group {
    margin-bottom: 24px;
}

.pb-form-group label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    color: var(--pb-text);
    margin-bottom: 8px;
}

.pb-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--pb-border);
    border-radius: var(--pb-radius-sm);
    font-size: 1rem;
    font-family: var(--pb-font);
    color: var(--pb-text);
    background: var(--pb-white);
    transition: var(--pb-transition);
    box-sizing: border-box;
}

.pb-form-input:focus {
    outline: none;
    border-color: var(--pb-primary);
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

/* Counter — 3 elementi liberi (− input +), niente wrapper visibile.
   Il vecchio design univa tutto dentro un bordo unico che appariva
   più grande del contenuto. Ora ogni pulsante è un bottone circolare
   isolato e l'input è in mezzo senza bordi separatori. */
.pb-counter {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    background: transparent;
}

.pb-counter-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--pb-primary, #2E7D32);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pb-primary, #2E7D32);
    transition: var(--pb-transition, all .15s);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pb-counter-btn:hover {
    background: var(--pb-primary, #2E7D32);
    color: #fff;
}

.pb-counter-input {
    width: 56px;
    height: 40px;
    border: 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pb-text, #1a1a1a);
    background: transparent;
    -moz-appearance: textfield;
    padding: 0;
}

.pb-counter-input::-webkit-outer-spin-button,
.pb-counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Services Grid */
.pb-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.pb-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--pb-border);
    border-radius: var(--pb-radius-sm);
    cursor: pointer;
    transition: var(--pb-transition);
}

.pb-service-item:hover {
    border-color: var(--pb-primary);
}

.pb-service-item input:checked ~ .pb-service-content {
    color: var(--pb-primary);
}

.pb-service-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-service-price {
    font-size: .8rem;
    color: var(--pb-text-muted);
}

/* Customer Info */
.pb-customer-info {
    border-top: 2px solid var(--pb-border);
    padding-top: 24px;
    margin-top: 8px;
}

.pb-customer-info h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 20px;
}

/* =========================================================
   PRICE SUMMARY
   ========================================================= */
.pb-price-summary {
    background: linear-gradient(135deg, rgba(46,125,50,.06), rgba(27,94,32,.06));
    border: 1px solid rgba(46,125,50,.2);
    border-radius: var(--pb-radius-sm);
    padding: 20px;
    margin: 24px 0;
}

.pb-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: .95rem;
    border-bottom: 1px solid rgba(46,125,50,.1);
}

.pb-price-row:last-child {
    border-bottom: none;
}

.pb-price-total {
    padding-top: 12px;
    margin-top: 4px;
    font-size: 1.1rem;
    border-top: 2px solid rgba(46,125,50,.2);
    border-bottom: none !important;
}

/* =========================================================
   CHECKOUT
   ========================================================= */
.pb-order-summary {
    background: var(--pb-bg);
    border-radius: var(--pb-radius-sm);
    padding: 20px;
    margin-bottom: 24px;
}

.pb-order-summary h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 16px;
}

#pb-payment-element {
    min-height: 200px;
}

.pb-error-message {
    background: rgba(252,92,125,.1);
    border: 1px solid rgba(252,92,125,.3);
    color: #c53030;
    border-radius: var(--pb-radius-sm);
    padding: 12px 16px;
    font-size: .9rem;
    margin-bottom: 16px;
}

/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */
.pb-success-message {
    text-align: center;
    padding: 60px 36px;
    background: var(--pb-white);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow);
    border: 1px solid var(--pb-border);
}

.pb-success-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.pb-success-message h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pb-success);
    margin: 0 0 12px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: var(--pb-radius-sm);
    font-size: .95rem;
    font-weight: 600;
    font-family: var(--pb-font);
    cursor: pointer;
    transition: var(--pb-transition);
    text-decoration: none;
    min-height: 44px;
}

.pb-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.pb-btn-primary {
    background: linear-gradient(135deg, var(--pb-primary), var(--pb-primary-dark));
    color: var(--pb-white);
    box-shadow: 0 4px 14px rgba(46,125,50,.35);
}

.pb-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46,125,50,.45);
}

.pb-btn-secondary {
    background: var(--pb-white);
    color: var(--pb-text);
    border: 2px solid var(--pb-border);
}

.pb-btn-secondary:hover:not(:disabled) {
    border-color: var(--pb-primary);
    color: var(--pb-primary);
}

.pb-btn-success {
    background: linear-gradient(135deg, var(--pb-success), #38a169);
    color: var(--pb-white);
    box-shadow: 0 4px 14px rgba(72,187,120,.35);
}

.pb-btn-success:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(72,187,120,.45);
}

.pb-step-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 2px solid var(--pb-border);
    gap: 12px;
}

.pb-btn-next {
    margin-left: auto;
}

/* =========================================================
   FLATPICKR OVERRIDES
   ========================================================= */
.flatpickr-calendar {
    border-radius: var(--pb-radius) !important;
    box-shadow: var(--pb-shadow-lg) !important;
    border: 1px solid var(--pb-border) !important;
    font-family: var(--pb-font) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--pb-primary) !important;
    border-color: var(--pb-primary) !important;
}

.flatpickr-day.inRange {
    background: rgba(46,125,50,.15) !important;
    border-color: rgba(46,125,50,.15) !important;
    box-shadow: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px) {
    .pb-step-content {
        padding: 16px 10px;
    }

    .pb-booking-type-toggle {
        flex-direction: column;
    }

    .pb-steps-indicator::before {
        display: none;
    }

    .pb-step-label {
        display: none;
    }

    .pb-btn {
        width: 100%;
    }

    .pb-services-grid {
        grid-template-columns: 1fr;
    }

    /* .pb-map-controls stacking on phones is handled by park-map.css */
}

/* Step buttons: SINGLE authoritative rule for the stacking direction.
   booking-form.css used to set `column` at ≤768 while this file set
   `column-reverse` at ≤640; below 640 both applied with equal specificity
   and the winner depended on the enqueue order of the two stylesheets.
   The duplicate in booking-form.css has been removed — do not re-add a
   flex-direction for .pb-step-buttons anywhere else.
   column-reverse puts the primary CTA (last in the DOM) on top. */
@media (max-width: 768px) {
    .pb-step-buttons {
        flex-direction: column-reverse;
    }
}