/* Booking page specific overrides to ensure Shopify styling works correctly */

/* Set base font size to prevent gigantic fonts */
html {
    font-size: 10px !important; /* Base 10px makes rem calculations easier */
}

body.booking-page {
    font-size: 1.4rem !important; /* 14px base */
    line-height: 1.6 !important;
}

/* Fix font sizes - inputs should be reasonable size */
.field__input[type="text"],
.field__input[type="email"] {
    font-size: 1.4rem !important; /* 14px */
    line-height: 1.5 !important;
    color: rgb(var(--color-foreground)) !important;
    height: 3.5rem !important; /* Reduced from 4.5rem */
    min-height: 3.5rem !important;
}

.select__select {
    font-size: 1.4rem !important; /* 14px */
    line-height: calc(1 + 0.6 / var(--font-body-scale)) !important;
    color: rgb(var(--color-foreground)) !important;
    height: 3.5rem !important; /* Reduced from 4.5rem */
    min-height: 3.5rem !important;
}

.field__label {
    font-size: 1.2rem !important; /* 12px */
    line-height: 1.4 !important;
    letter-spacing: 0.04rem !important;
    margin-bottom: 0.8rem !important;
    display: block !important;
    color: rgba(var(--color-foreground), 0.75) !important;
}

/* Fix heading sizes */
h1 {
    font-size: 2.4rem !important; /* 24px */
    line-height: 1.2 !important;
    margin-bottom: 2rem !important;
}

h2 {
    font-size: 2rem !important; /* 20px */
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
}

h3 {
    font-size: 1.6rem !important; /* 16px */
    line-height: 1.4 !important;
}

/* Ensure labels are above inputs, not inline */
.field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Remove borders/containers around fields and selects */
.field:before,
.field:after,
.select:before,
.select:after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove any box-shadow borders from inputs */
.field__input[type="text"],
.field__input[type="email"] {
    box-shadow: none !important;
    border: 0.1rem solid rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
    border-radius: var(--inputs-radius) !important;
}

.select__select {
    box-shadow: none !important;
    border: 0.1rem solid rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
    border-radius: var(--inputs-radius) !important;
    margin: var(--inputs-border-width) !important;
    color: rgb(var(--color-foreground)) !important;
    background-color: rgb(var(--color-background)) !important;
    padding: 0 calc(var(--inputs-border-width) + 3rem) 0 calc(var(--inputs-border-width) + 1.5rem) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Prevent labels from appearing inside inputs */
.field__label {
    position: static !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-bottom: 0.8rem !important;
}

/* Ensure labels don't get copied into inputs - prevent browser autofill from label text */
.field__input[type="text"]::-webkit-contacts-auto-fill-button,
.field__input[type="email"]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}

/* Prevent browser from inserting label text */
.field__input:-webkit-autofill {
    -webkit-text-fill-color: rgb(var(--color-foreground)) !important;
}

.select__select option {
    font-size: 1.4rem !important; /* 14px */
    color: rgb(var(--color-foreground)) !important;
    background-color: rgb(var(--color-background)) !important;
    padding: 0.8rem !important;
}

.select__select option:disabled {
    color: rgba(var(--color-foreground), 0.5) !important;
}

/* Fix select dropdown styling - prevent browser default on focus/active */
.select {
    position: relative;
}

.select__select:focus,
.select__select:active,
.select__select:focus-visible {
    outline: none !important;
    background-color: rgb(var(--color-background)) !important;
    color: rgb(var(--color-foreground)) !important;
    font-size: 1.4rem !important; /* 14px */
    border-color: rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

/* Ensure selected option text is always visible */
.select__select {
    color: rgb(var(--color-foreground)) !important;
    background-color: #fcfcfc !important; /* Explicit white background */
}

/* Selected option in dropdown should have white background */
.select__select option:checked,
.select__select option[selected] {
    color: rgb(var(--color-foreground)) !important;
    background-color: #fcfcfc !important; /* Explicit white background */
}

/* All options should have white background */
.select__select option {
    background-color: #fcfcfc !important; /* Explicit white background */
    color: rgb(var(--color-foreground)) !important;
}

/* When select is open, ensure selected value shows white background */
.select__select:focus {
    background-color: #fcfcfc !important; /* Explicit white background */
}

.select .svg-wrapper {
    position: absolute;
    top: calc(50% - 0.2rem);
    right: 1.5rem;
    pointer-events: none;
    z-index: 2;
    height: 0.6rem;
    width: 1rem;
}

.select .svg-wrapper .icon-caret {
    height: 100%;
    width: 100%;
    color: rgba(var(--color-foreground), 0.75);
}

/* Fix text input styling */
.field__input[type="text"],
.field__input[type="email"] {
    font-size: 1.4rem !important; /* 14px */
    padding: 0 calc(var(--inputs-border-width) + 1.5rem) !important;
    color: rgb(var(--color-foreground)) !important;
}

.field__input[type="text"]::placeholder,
.field__input[type="email"]::placeholder {
    color: rgba(var(--color-foreground), 0.5) !important;
    opacity: 1 !important;
}

.field__input[type="text"]:focus,
.field__input[type="email"]:focus,
.field__input[type="text"]:active,
.field__input[type="email"]:active {
    outline: none !important;
    border: none !important;
    background-color: rgb(var(--color-background)) !important;
    color: rgb(var(--color-foreground)) !important;
    font-size: 1.4rem !important; /* 14px */
}

.field__input[type="text"]:focus::placeholder,
.field__input[type="email"]:focus::placeholder {
    color: rgba(var(--color-foreground), 0.3) !important;
}

/* Fix "first available" text positioning - should be below dropdown */
.field small {
    display: block !important;
    margin-top: 0.5rem !important;
    margin-left: 0 !important;
    width: 100% !important;
    font-size: 1.1rem !important; /* 11px */
    color: rgba(var(--color-foreground), 0.7) !important;
}

/* Fix duration field - label and content should not overlap */
.field > div:not(.select) {
    margin-top: 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.4rem !important; /* 14px */
    color: rgba(var(--color-foreground), 0.75) !important;
}

/* Flatpickr calendar styling to match Shopify inputs */
.flatpickr-input {
    cursor: pointer;
    font-size: 1.4rem !important; /* 14px */
    color: rgb(var(--color-foreground)) !important;
}

.flatpickr-calendar {
    border-radius: var(--inputs-radius);
    box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
        var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
    border: 0.1rem solid rgba(var(--color-foreground), var(--inputs-border-opacity));
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: rgba(var(--color-button), var(--alpha-button-background));
    color: rgb(var(--color-button-text));
    border-color: rgba(var(--color-button), var(--alpha-button-background));
}

.flatpickr-day:hover {
    background: rgba(var(--color-foreground), 0.04);
}

/* Button styling - make it narrower and add disabled state */
.button {
    width: auto !important;
    min-width: calc(12rem + var(--buttons-border-width) * 2) !important;
    padding: 0 3rem !important;
}

.button:disabled,
.button[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}