/*!
 * Garage San Marco Booking Form CSS
 * Version: 5.0.0 - Complete CSS Rewrite Using Original c-booking Classes
 * Optimized for WordPress and Elementor PRO
 * Datepicker: Flatpickr v4.6.13
 */

/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES (from original c-booking)
   ═══════════════════════════════════════════ */

:root {
    /* Original fluid spacing system */
    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - 20rem) / 1120);

    /* Spacing scale (exact from original) */
    --space-2xs: calc(0.5rem + 2 * var(--fluid-bp));
    --space-xs: calc(0.75rem + 3 * var(--fluid-bp));
    --space-s: calc(1rem + 4 * var(--fluid-bp));
    --space-m: calc(1.5rem + 6 * var(--fluid-bp));
    --space-l: calc(2rem + 8 * var(--fluid-bp));
    --space-xl: calc(3rem + 12 * var(--fluid-bp));
    --space-2xl: calc(4rem + 16 * var(--fluid-bp));
    --space-3xl: calc(6rem + 24 * var(--fluid-bp));

    /* Typography scale */
    --step-0: calc(1rem + 4 * var(--fluid-bp));

    /* Colors (exact from original) */
    --color-red: #b31917;
    --color-dark-warm-gray: #999592;
    --color-warm-gray: #aba7a3;
    --color-jet: #383532;
    --color-white: #fff;
}

@media screen and (min-width: 1440px) {
    :root {
        --fluid-screen: 1440px;
    }
}

/* ═══════════════════════════════════════════
   BASE FORM (.c-booking from original)
   ═══════════════════════════════════════════ */

.c-booking {
    display: flex;
    justify-content: center;
}

.c-booking:not(.is-ready) {
    visibility: hidden;
}

/* ═══════════════════════════════════════════
   FORM CONTAINER (.c-booking__container from original)
   ═══════════════════════════════════════════ */

.c-booking__container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

/* Mobile first (exact from original) */
@media (max-width: 991.98px) {
    .c-booking__container {
        width: 100%;
        max-width: calc(var(--space-s) * 30);
        padding: var(--space-m);
        border-radius: var(--space-s);
    }

    .c-booking__container > * + * {
        margin-top: var(--space-m);
    }
}

/* Desktop layout (exact from original @992px breakpoint) */
@media (min-width: 992px) {
    .c-booking__container {
        flex-direction: row;
        align-items: center;
        padding: var(--space-2xs);
        border-radius: var(--space-3xl);
    }
}

/* ═══════════════════════════════════════════
   TRANSPORT BUTTONS (.c-booking__veichles from original)
   ═══════════════════════════════════════════ */

.c-booking__veichles {
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .c-booking__veichles {
        margin-right: var(--space-xs);
    }
}

.c-booking__veichles button {
    position: relative;
    overflow: hidden;
    appearance: none;
    width: calc(var(--space-s) * 5.7);
    height: var(--space-xl);
    font-size: calc(var(--step-0) * 0.7);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--space-xl);
    cursor: pointer;
    transition: border-color 0.2s;
}

.c-booking__veichles button:not(:first-child) {
    margin-left: var(--space-xs);
}

@media (min-width: 992px) {
    .c-booking__veichles button:not(:first-child) {
        margin-left: var(--space-2xs);
    }
}

@media (hover: hover) {
    .c-booking__veichles button:hover {
        border-color: var(--color-dark-warm-gray);
    }
}

/* Active state (when button has is-active class) */
.c-booking__veichles button.is-active {
    pointer-events: none;
    color: var(--color-red);
    border-color: var(--color-red) !important;
}

/* Text positioning (ESATTAMENTE come originale - absolute bottom) */
.c-booking__veichles button span {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    text-align: center;
}

/* Icon positioning (ESATTAMENTE come originale) */
.c-booking__veichles button img {
    position: absolute;
    top: -1%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: auto; /* Preserve aspect ratio */
}

/* Grayscale for non-active buttons */
.c-booking__veichles button:not(.is-active) img {
    filter: saturate(0);
}

/* ═══════════════════════════════════════════
   DATE FIELD (.c-booking__dates from original)
   ═══════════════════════════════════════════ */

.c-booking__dates {
    position: relative;
    cursor: pointer;
    float: left;
}

.c-booking__dates-input {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* Display styling (.c-booking__display from original) */
.c-booking__dates-display.c-booking__display {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: var(--space-xl);
    padding: 0 var(--space-xs);
    font-size: 1rem;
    color: #000;
}

@media (max-width: 991.98px) {
    .c-booking__dates-display.c-booking__display {
        border: 1px solid var(--color-dark-warm-gray);
        border-radius: 6px;
    }
}

@media (min-width: 992px) {
    .c-booking__dates-display.c-booking__display {
        height: var(--space-l);
        width: calc(var(--space-s) * 16);
        border-right: 1px solid var(--color-dark-warm-gray);
        border-left: 1px solid var(--color-dark-warm-gray);
    }
}

/* ═══════════════════════════════════════════
   TIME FIELD (.c-booking__time from original)
   ═══════════════════════════════════════════ */

.c-booking__time {
    position: relative;
}

.c-booking__time-display.c-booking__display {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: var(--space-xl);
    padding: 0 var(--space-xs);
    font-size: 1rem;
    color: #000;
}

@media (max-width: 991.98px) {
    .c-booking__time-display.c-booking__display {
        border: 1px solid var(--color-dark-warm-gray);
        border-radius: 6px;
    }
}

@media (min-width: 992px) {
    .c-booking__time-display.c-booking__display {
        height: var(--space-l);
        width: calc(var(--space-s) * 10);
    }
}

.c-booking__time select {
    position: absolute;
    cursor: pointer;
    appearance: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: transparent;
}

/* ═══════════════════════════════════════════
   ICONS (.o-icon from original)
   ═══════════════════════════════════════════ */

.o-icon {
    flex: 0 0 auto;
    margin-left: auto;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.o-icon svg {
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════
   SUBMIT BUTTON (.c-booking__submit from original)
   ═══════════════════════════════════════════ */

.c-booking__submit {
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .c-booking__submit {
        padding-left: var(--space-s);
    }
}

.c-booking__submit button {
    appearance: none;
    border-radius: var(--space-xl);
    font-weight: 500;
    border: none;
    height: var(--space-xl);
    padding: 0 var(--space-xl);
    color: #fff;
    background-color: var(--color-red);
    cursor: pointer;
    transition: background 0.15s;
}

.c-booking__submit button[disabled] {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.4);
    cursor: not-allowed;
}

@media (hover: hover) {
    .c-booking__submit button:not([disabled]):hover {
        background: #9c1614;
    }
}

/* ═══════════════════════════════════════════
   ERROR STATES (.c-booking__tooltip from original)
   ═══════════════════════════════════════════ */

.c-booking__tooltip {
    position: absolute;
    z-index: 1;
    top: 100%;
    display: none;
    pointer-events: none;
    padding: 0.2em 0.5em;
    margin-top: 0.5em;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-red);
    border-radius: 4px;
}

.c-booking__tooltip::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -0.5em;
    left: 1em;
    display: block;
    border-right: 0.5em solid transparent;
    border-bottom: 0.5em solid var(--color-red);
    border-left: 0.5em solid transparent;
}

.c-booking.has-date-error .c-booking__dates .c-booking__tooltip,
.c-booking.has-time-error .c-booking__time .c-booking__tooltip {
    display: block;
}

/* ═══════════════════════════════════════════
   FLATPICKR DATEPICKER STYLING
   ═══════════════════════════════════════════ */

.flatpickr-calendar {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: none;
    padding: 20px;
    z-index: 999999 !important;
}

.flatpickr-calendar.open {
    z-index: 999999 !important;
}

.flatpickr-months {
    margin-bottom: 15px;
}

.flatpickr-month {
    color: #212121;
    fill: #212121;
}

.flatpickr-current-month {
    font-size: 16px;
    font-weight: 500;
    color: #212121;
    padding: 0;
}

.flatpickr-monthDropdown-months {
    font-size: 16px;
    font-weight: 500;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #757575;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: #B71C1C;
}

.flatpickr-weekday {
    font-size: 12px;
    color: #757575;
    font-weight: 400;
    text-transform: lowercase;
}

.flatpickr-day {
    font-size: 15px;
    color: #333333;
    border-radius: 50% !important;
    border: none;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.disabled) {
    background: #F5F5F5;
    color: #B71C1C;
    border-color: #F5F5F5;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #B71C1C !important;
    color: #FFFFFF !important;
    border-color: #B71C1C !important;
    font-weight: 600;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.flatpickr-day.inRange {
    background: #FFEBEE !important;
    color: #B71C1C !important;
    border-color: #FFEBEE !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.flatpickr-day.today {
    border: 2px solid #B71C1C !important;
    background: transparent;
}

.flatpickr-day.today:hover {
    background: #F5F5F5;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.disabled {
    color: #CCCCCC !important;
    cursor: not-allowed !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days {
    border-right: 1px solid #E0E0E0;
}

.flatpickr-calendar.multiMonth .flatpickr-days:last-child {
    border-right: none;
}

/* Mobile calendar adjustments */
@media (max-width: 991.98px) {
    .flatpickr-calendar.multiMonth .flatpickr-days {
        border-right: none;
    }

    /* Hide second month on mobile (fallback if JS fails) */
    .flatpickr-calendar.multiMonth .flatpickr-days:nth-child(n+2) {
        display: none !important;
    }

    /* Ensure single month display */
    .flatpickr-calendar.multiMonth {
        width: auto !important;
    }
}

/* ═══════════════════════════════════════════
   ELEMENTOR WIDGET COMPATIBILITY
   ═══════════════════════════════════════════ */

.elementor-widget-garage-booking .c-booking {
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════ */

.c-booking__veichles button:focus-visible,
.c-booking__submit button:focus-visible {
    outline: 2px solid #B71C1C;
    outline-offset: 2px;
}

.c-booking__dates-input:focus-visible,
.c-booking__time select:focus-visible {
    outline: 2px solid #B71C1C;
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}