@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

#pf-booking-widget {
    /* Theme Variables */
    --primary: #850000 !important; /* Deep red accent */
    --primary-active-border: #e8a0a0 !important; /* Light pinkish-red for active date border */
    --primary-container: #850000 !important;
    --surface-container: #1a1a1a !important;
    --surface-container-low: #1a1a1a !important;
    --outline-variant: #333333 !important;

    --text-white: #ffffff !important;
    --text-secondary: #888888 !important;
    --text-tertiary: #555555 !important;

    --unit-md: 1rem !important; /* 16px */
    --unit-lg: 1.5rem !important; /* 24px */

    --border-radius-sm: 0.25rem !important; /* 4px */
    --border-radius-xl: 0.5rem !important; /* 8px */

    font-family: "Inter", sans-serif !important;
    color: var(--text-white) !important;
}

#pf-booking-widget,
#pf-booking-widget *,
#pf-booking-widget *::before,
#pf-booking-widget *::after {
    box-sizing: border-box !important;
}

#pf-booking-widget .widget-aside {
    width: 100% !important;
}

#pf-booking-widget .widget-card {
    background: var(--surface-container) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: var(--border-radius-xl) !important;
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

#pf-booking-widget .widget-header {
    display: grid !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

#pf-booking-widget .widget-title {
    font-size: clamp(1.1rem, 2.4vw, 1.4rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

#pf-booking-widget .widget-listing-title {
    font-size: 0.95rem !important;
    color: var(--text-secondary) !important;
}

#pf-booking-widget .widget-subtitle {
    margin: 0 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
    color: var(--text-tertiary) !important;
}

#pf-booking-widget .widget-form {
    display: grid !important;
    gap: 1rem !important;
}

#pf-booking-widget .form-label {
    font-size: 0.75rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.6rem !important;
    display: block !important;
}

#pf-booking-widget .form-control,
#pf-booking-widget .pf-booking-input,
#pf-booking-widget .pf-booking-select,
#pf-booking-widget textarea {
    width: 100% !important;
    background: var(--surface-container-low) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--text-white) !important;
    padding: 0.75rem 0.9rem !important;
    font-size: 0.95rem !important;
    outline: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

#pf-booking-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.8rem !important;
    line-height: 45px !important;
    color: var(--text-white) !important;
}

#pf-booking-widget .select2-container--default .select2-results__option {
    font-size: 0.85rem !important;
}

#pf-booking-widget .select2-container,
#pf-booking-widget .select2-container--default .select2-selection--single {
    font-size: 0.8rem !important;
}

#pf-booking-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: inherit !important;
}

#pf-booking-widget .form-control:focus,
#pf-booking-widget .pf-booking-input:focus,
#pf-booking-widget .pf-booking-select:focus,
#pf-booking-widget textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(133, 0, 0, 0.35) !important;
}

#pf-booking-widget select.form-control {
    appearance: none !important;
    background-image: none !important;
}

#pf-booking-widget .input-group,
#pf-booking-widget .input-row {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

#pf-booking-widget .input-row {
    flex-wrap: wrap !important;
}

#pf-booking-widget .country-code-wrapper {
    position: relative !important;
    min-width: 120px !important;
    flex: 0 0 120px !important;
}

#pf-booking-widget .select-icon {
    position: absolute !important;
    right: 0.75rem !important;
    pointer-events: none !important;
    color: var(--text-tertiary) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
#pf-booking-widget input#pf-booking-date-range {
    width: 100% !important;
}

#pf-booking-widget .select-icon.small {
    font-size: 1rem !important;
}

#pf-booking-widget .flex-grow {
    flex: 1 !important;
}

#pf-booking-widget .toggle-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

#pf-booking-widget .toggle-btn {
    position: relative !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    font-size: 0.9rem !important;
}

#pf-booking-widget .toggle-btn input {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

#pf-booking-widget .toggle-btn span {
    display: block !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: var(--border-radius-sm) !important;
    text-align: center !important;
    padding: 0.65rem 0.75rem !important;
    background: var(--surface-container-low) !important;
    color: var(--text-secondary) !important;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease !important;
}

#pf-booking-widget .toggle-btn input:checked + span {
    border-color: var(--primary) !important;
    background: rgba(133, 0, 0, 0.2) !important;
    color: var(--text-white) !important;
}

#pf-booking-widget .date-selector-wrapper {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#pf-booking-widget .date-scroll-container {
    display: flex !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
}

#pf-booking-widget .date-scroll-container::-webkit-scrollbar {
    display: none !important;
}

#pf-booking-widget .date-btn {
    flex: 0 0 auto !important;
    cursor: pointer !important;
    position: relative !important;
}

#pf-booking-widget .date-btn input {
    position: absolute !important;
    opacity: 0 !important;
}

#pf-booking-widget .date-btn-content {
    display: grid !important;
    gap: 0.3rem !important;
    text-align: center !important;
    padding: 0.6rem 0.75rem !important;
    min-width: 70px !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: var(--border-radius-sm) !important;
    background: var(--surface-container-low) !important;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#pf-booking-widget .date-btn input:checked + .date-btn-content {
    border-color: var(--primary-active-border) !important;
    background: var(--primary) !important;
    transform: translateY(-2px) !important;
}

#pf-booking-widget .date-btn .day-month {
    font-size: 0.7rem !important;
    color: var(--text-tertiary) !important;
    letter-spacing: 0.1em !important;
}

#pf-booking-widget .date-btn input:checked + .date-btn-content .day-month {
    color: rgba(255, 255, 255, 0.7) !important;
}

#pf-booking-widget .date-btn .date-num {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

#pf-booking-widget .scroll-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--outline-variant) !important;
    background: var(--surface-container-low) !important;
    color: var(--text-secondary) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    transition: border-color 160ms ease, color 160ms ease !important;
}

#pf-booking-widget .scroll-arrow:hover {
    border-color: var(--primary) !important;
    color: var(--text-white) !important;
}

#pf-booking-widget .calendar-wrapper {
    background: var(--surface-container-low) !important;
    border-radius: var(--border-radius-xl) !important;
    border: 1px solid var(--outline-variant) !important;
    padding: 1rem !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-calendar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-months {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-current-month {
    font-size: 0.9rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--text-white) !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-prev-month,
#pf-booking-widget .pf-booking-calendar .flatpickr-next-month {
    color: var(--text-secondary) !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-weekdays {
    margin-top: 0.5rem !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-weekday {
    color: var(--text-tertiary) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-day {
    height: 36px !important;
    line-height: 36px !important;
    margin: 2px 0 !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--text-secondary) !important;
    border: 1px solid transparent !important;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-day:hover {
    border-color: var(--outline-variant) !important;
    color: var(--text-white) !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-day.today {
    border-color: var(--primary-active-border) !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-day.selected,
#pf-booking-widget .pf-booking-calendar .flatpickr-day.startRange,
#pf-booking-widget .pf-booking-calendar .flatpickr-day.endRange {
    background: var(--primary) !important;
    color: var(--text-white) !important;
    border-color: var(--primary-active-border) !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-day.inRange {
    background: rgba(133, 0, 0, 0.25) !important;
    color: var(--text-white) !important;
}

#pf-booking-widget .pf-booking-calendar .flatpickr-day.disabled,
#pf-booking-widget .pf-booking-calendar .flatpickr-day.prevMonthDay,
#pf-booking-widget .pf-booking-calendar .flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.3) !important;
}

#pf-booking-widget .pf-booking-terms {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
}

#pf-booking-widget .terms-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#pf-booking-widget .terms-label a {
    color: var(--text-white) !important;
    text-decoration: underline !important;
}

#pf-booking-widget .btn-submit {
    width: 100% !important;
    background: var(--primary) !important;
    border: none !important;
    color: var(--text-white) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}

#pf-booking-widget .btn-submit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 20px rgba(133, 0, 0, 0.4) !important;
}

#pf-booking-widget .security-note {
    margin: 0 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    text-align: center !important;
    color: var(--text-tertiary) !important;
}

#pf-booking-widget .pf-booking-result {
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    min-height: 1.2rem !important;
}
#pf-booking-widget #pf-booking-date-range{
background: var(--surface-container-low) !important;
}
@media (max-width: 640px) {
    #pf-booking-widget .toggle-group {
        grid-template-columns: 1fr !important;
    }

    #pf-booking-widget .input-group,
    #pf-booking-widget .input-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #pf-booking-widget .country-code-wrapper {
        width: 100% !important;
        flex: 1 !important;
    }

    #pf-booking-widget .date-selector-wrapper {
        grid-template-columns: 1fr !important;
    }

    #pf-booking-widget .scroll-arrow {
        justify-self: end !important;
    }
}