/* Phone layouts only; desktop rules and brand tokens remain unchanged.
 * References: Sneat 3.0 responsive tables, wrapping toolbars and compact gutters;
 * Hoang Chau theme for public-page typography, colours and navigation. */
@media screen and (max-width: 767.98px) {
    /* Allow flex/grid children to shrink before their content wraps. */
    .hc-admin :where(.flex, .inline-flex, .grid) > :where(div, section, form),
    .hc-booking :where(.flex, .grid) > :where(div, section, form),
    .hc-public :where(.flex, .grid) > :where(div, section, article) {
        min-width: 0;
    }

    .hc-admin :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .hc-booking :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-width: 0;
        max-width: 100%;
    }

    /* Sneat table-responsive pattern: scroll the table inside its container. */
    .hc-admin :where(.overflow-x-auto, .overflow-auto) {
        min-width: 0;
        max-width: 100%;
        overscroll-behavior-x: contain;
    }

    .hc-admin .hc-admin-header {
        /* Keep fixed dropdowns relative to the viewport. */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hc-admin .hc-admin-header input { width: 100%; }
    .hc-admin .hc-notifications {
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
    }
    .hc-admin .hc-notifications > :first-child {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .hc-admin .hc-bookings-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .hc-admin .hc-bookings-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .hc-admin .hc-bookings-actions > button {
        min-width: 0;
        min-height: 2.75rem;
        height: auto;
        padding: 0.625rem 0.375rem;
    }
    .hc-admin .hc-timeline-controls {
        width: 100%;
        min-width: 0;
    }
    .hc-admin .hc-calendar-picker { width: 100%; }
    .hc-admin .hc-calendar-picker > button {
        width: 100%;
        justify-content: space-between;
    }
    .hc-admin .hc-calendar-popover {
        width: min(20rem, 100%);
        max-width: 100%;
    }
    .hc-admin .fixed.inset-0 > .w-full,
    .hc-booking .fixed.inset-0 > .w-full {
        min-width: 0;
        max-width: 100%;
    }

    /* Keep dialog cards inside the visual viewport and let long forms scroll. */
    .hc-admin .fixed.inset-0:not(.hc-modal-root):has(> .fixed.inset-0),
    .hc-admin .fixed.inset-0:not(.hc-modal-root)[class*="items-center"][class*="justify-center"]:has(> :only-child) {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .hc-admin .fixed.inset-0:not(.hc-modal-root):has(> .fixed.inset-0) > :not(.fixed),
    .hc-admin .fixed.inset-0:not(.hc-modal-root)[class*="items-center"][class*="justify-center"]:has(> :only-child) > :only-child {
        min-width: 0;
        max-width: 100%;
        max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
    .hc-admin .fixed.inset-0:not(.hc-modal-root):has(> .fixed.inset-0) > :not(.fixed):not(.flex),
    .hc-admin .fixed.inset-0:not(.hc-modal-root)[class*="items-center"][class*="justify-center"]:has(> :only-child) > :only-child:not(.flex) {
        overflow-y: auto;
    }
    .hc-admin .fixed.inset-0 > .flex.flex-col > :where(.overflow-y-auto, .overflow-auto) {
        min-height: 0;
        overscroll-behavior: contain;
    }

    /* SeaKey dialogs contain dense desktop headers and footers. */
    .hc-admin :where([x-show="cardModalOpen"], [x-show="cardHistoryModalOpen"]) > div > :where(:first-child, :last-child) {
        padding: 1rem;
        gap: 0.75rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .hc-admin :where([x-show="cardModalOpen"], [x-show="cardHistoryModalOpen"]) > div > :where(:first-child, :last-child) > * {
        min-width: 0;
        max-width: 100%;
    }
    .hc-admin :where([x-show="cardModalOpen"], [x-show="cardHistoryModalOpen"]) > div > :where(:first-child, :last-child) :where(h3, p, span) {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .hc-admin :where([x-show="cardModalOpen"], [x-show="cardHistoryModalOpen"]) > div > :where(.overflow-y-auto, .overflow-auto) {
        padding: 1rem;
    }
    .hc-admin [x-show="cardHistoryModalOpen"] > div > :last-child {
        flex-direction: column;
        align-items: stretch;
    }
    .hc-admin [x-show="cardHistoryModalOpen"] > div > :last-child button {
        width: 100%;
    }

    /* The C06 declaration dialog has a dense desktop toolbar and draggable panel. */
    #policeDeclarationModalPanel {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: auto !important;
    }
    #policeDeclarationModalPanel > :first-child {
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem;
        cursor: default;
    }
    #policeDeclarationModalPanel > :first-child > :first-child {
        flex: 1 1 auto;
        align-items: flex-start;
        min-width: 0;
        gap: 0.625rem;
    }
    #policeDeclarationModalPanel > :first-child > :first-child > :nth-child(2) {
        flex: 1 1 auto;
        min-width: 0;
    }
    #policeDeclarationModalPanel > :first-child > :first-child > :nth-child(2) > :first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #policeDeclarationModalPanel > :first-child h3 {
        display: block;
        min-width: 0;
        font-size: 0.9375rem;
        overflow-wrap: anywhere;
    }
    #policeDeclarationModalPanel > :first-child p {
        font-size: 0.625rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    #policeDeclarationModalPanel > :first-child [data-no-drag] {
        flex: 0 0 2.5rem;
        width: 2.5rem;
        min-width: 2.5rem;
        justify-content: flex-end;
    }
    #policeDeclarationModalPanel > :nth-child(2) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding: 0.625rem 0.75rem;
    }
    #policeDeclarationModalPanel > :nth-child(2) > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    #policeDeclarationModalPanel > :nth-child(2) > :last-child button {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
    #policeDeclarationForm {
        min-height: 0;
        padding: 0.75rem;
        overscroll-behavior: contain;
    }
    #policeDeclarationForm > :first-child > :first-child {
        flex: 1 1 100%;
        align-items: flex-start;
        min-width: 0;
    }
    #policeDeclarationForm > :first-child span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    #policeDeclarationForm > .pt-5 > .flex.flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    #policeDeclarationForm > .pt-5 > .flex.flex-wrap > div {
        width: 100%;
        min-width: 0;
    }
    #policeDeclarationForm > .pt-5 > .flex.flex-wrap > div:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    #policeDeclarationForm > .pt-5 > .flex.flex-wrap button {
        width: 100%;
        min-width: 0;
        min-height: 2.75rem;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    /* VietQR: the 18rem desktop square must shrink inside narrow dialog padding. */
    .hc-booking #payment-modal {
        align-items: center;
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .hc-booking #payment-modal > .w-full {
        max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 1rem;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .hc-booking #payment-modal .w-72.h-72 {
        width: min(100%, 18rem);
        height: auto;
        aspect-ratio: 1;
    }
    .hc-booking #payment-modal .text-left > .flex {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 0.5rem;
        align-items: start;
    }
    .hc-booking #payment-modal .text-left > .flex > div {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .hc-booking #payment-modal :where(#qr-account, #qr-name, #qr-amount, #qr-memo) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .hc-booking #security-block-overlay {
        padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .hc-booking #security-block-overlay > .w-full {
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 1rem;
        overflow-y: auto;
    }

    /* Compact booking surfaces leave room for dates, prices and controls. */
    .hc-booking .rounded-2xl { border-radius: 1.25rem !important; }
    .hc-booking .rounded-xl { border-radius: 0.875rem !important; }
    .hc-booking :is(#section-1-choose-dates, #room-overview-bottom, #unified-submit-block) {
        padding: 1rem;
    }
    .hc-booking #section-1-choose-dates > .overflow-x-auto { padding: 0.75rem; }
    .hc-booking #section-1-choose-dates .min-w-\[240px\] {
        min-width: 0;
        gap: 0.5rem;
    }
    .hc-booking #section-1-choose-dates h2 { min-width: 0; }
    .hc-booking #section-1-choose-dates > .flex > span { flex-shrink: 0; }
    .hc-booking #coupon_input,
    .hc-booking #modal_group_mst {
        width: 0;
        flex: 1 1 0%;
    }
    .hc-booking #btn-apply-coupon {
        flex-shrink: 0;
        min-height: 2.75rem;
    }
    .hc-booking #calendar-days { gap: 0.25rem; }
    .hc-booking #group-booking-modal {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .hc-booking #group-booking-modal .grid-cols-3 .truncate {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: grid;
        align-content: center;
        min-height: 3rem;
        height: 100%;
    }
    .hc-booking #modal_group_calc_box > .flex { gap: 0.5rem; }
    .hc-booking #modal_group_calc_box > .flex > .flex > span { min-width: 0; }
    .hc-booking #modal_group_calc_box svg { flex-shrink: 0; }

    /* Retain the public theme's Outfit/Playfair typography and pine/gold palette. */
    .hc-public > nav > div {
        gap: 0.75rem;
        padding-inline: 1rem;
    }
    .hc-public > nav > div > a {
        min-width: 0;
        gap: 0.75rem;
    }
    .hc-public > nav > div > a > img {
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
    }
    .hc-public > nav > div > a > div {
        min-width: 0;
        margin-left: 0 !important;
    }
    .hc-public > nav > div > a > div > span:first-child {
        font-size: 1rem;
        line-height: 1.25;
        letter-spacing: 0.025em;
    }
    .hc-public > nav > div > a > div > span:last-child {
        font-size: 0.5625rem;
        letter-spacing: 0.18em;
    }
    .hc-public > nav > div > div { flex-shrink: 0; }
    .hc-public #section-satisfaction-widget {
        min-width: 0;
        max-width: 100%;
    }
    .hc-public :where(footer, article) :where(p, a, li) { overflow-wrap: anywhere; }
    .hc-public .hc-status-modal {
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .hc-public .hc-status-panel {
        max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 1.25rem;
        overflow-y: auto;
    }
    .hc-public .hc-status-panel > .w-16.h-16 {
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
    }
    .hc-public .hc-status-panel > h1 {
        margin-bottom: 0.25rem;
        font-size: 4.5rem;
    }
    .hc-public .hc-status-panel > h2 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
    .hc-public .hc-status-panel > p {
        margin-bottom: 1.5rem;
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 399.98px) {
    /* Native time selects need enough space for 16px text on iOS. */
    .hc-booking #section-1-choose-dates .grid-cols-2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }
    .hc-booking > header > div > a {
        gap: 0.625rem;
        width: 100%;
        min-width: 0;
    }
    .hc-booking > header > div > a > img { flex-shrink: 0; }
    .hc-booking > header > div > a > span {
        margin-left: 0 !important;
        font-size: 0.875rem;
        letter-spacing: 0.025em;
    }
}

/* iOS/Safari: modal admin teleport ra <body>. Bỏ backdrop-filter và scroll lồng nhau trong lớp phủ
 * để Safari không nuốt thao tác chạm (nút/tab/đóng không phản hồi dù vẫn cuộn được). */
@media screen and (max-width: 767.98px) {
    .hc-admin .hc-modal-root,
    .hc-admin .hc-modal-root * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .hc-admin .hc-modal-root.fixed.inset-0 {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        touch-action: none;
        z-index: 100 !important;
    }
    body.hc-admin .hc-modal-root.fixed.inset-0 > div.relative:not(.fixed) {
        max-height: 100% !important;
        pointer-events: auto !important;
    }
    body.hc-admin .hc-modal-root.fixed.inset-0 > div.relative:not(.fixed):not(.flex) {
        overflow-y: auto;
    }
    .hc-admin .hc-modal-root button,
    .hc-admin .hc-modal-root a,
    .hc-admin .hc-modal-root select,
    .hc-admin .hc-modal-root label,
    .hc-admin .hc-modal-root input {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer !important;
    }
    .hc-admin .hc-modal-root button *,
    .hc-admin .hc-modal-root a * {
        pointer-events: none !important;
    }

    /* Booking cards: keep every action visible and large enough to tap. */
    .hc-admin .hc-booking-card-actions,
    .hc-admin .hc-booking-group-actions,
    .hc-admin .hc-booking-room-actions {
        flex-wrap: wrap;
        overflow: visible;
        justify-content: flex-start;
    }
    .hc-admin .hc-booking-room-footer {
        flex-wrap: wrap;
        min-width: 0;
    }
    .hc-admin .hc-booking-card-actions > :where(button, a, form),
    .hc-admin .hc-booking-room-actions > :where(button, a, form) {
        flex: 0 0 auto;
    }
    .hc-admin .hc-booking-card-actions :where(button, a),
    .hc-admin .hc-booking-room-actions :where(button, a),
    .hc-admin .hc-booking-group-actions :where(button, a) {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* The booking sheet must scroll when the keyboard or iPhone safe area reduces height. */
    .hc-admin .hc-booking-create-form {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
        overscroll-behavior-x: none;
        scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
    .hc-admin .hc-booking-create-form > :last-child {
        position: static;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
    .hc-admin .hc-modal-root :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: max(1rem, 16px);
    }

    /* Reception booking form: a full-height sheet with one clear scroll area. */
    body.hc-admin .hc-modal-root.hc-create-booking-modal.fixed.inset-0 > div.hc-create-booking-dialog.relative:not(.fixed) {
        width: 100%;
        height: 100%;
        max-height: 100% !important;
        max-width: none;
        border: 0;
        border-radius: 0;
        background: #fafaf7;
        box-shadow: none;
    }
    .hc-admin .hc-create-booking-header {
        min-height: 72px;
        padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
        border-color: #405547;
        background: #1e2d24;
    }
    .hc-admin .hc-create-booking-header > .flex > .w-10 {
        width: 2.5rem;
        height: 2.5rem;
        background: rgba(197, 168, 128, 0.16);
        color: #e4c99f !important;
        box-shadow: none;
    }
    .hc-admin .hc-create-booking-header h3 {
        color: #fff !important;
        font-size: 1.125rem;
    }
    .hc-admin .hc-create-booking-subtitle { display: none; }
    .hc-admin .hc-create-booking-header > button {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        color: #fff;
    }
    .hc-admin .hc-create-booking-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        flex: none;
        gap: 0.25rem;
        overflow-x: hidden;
        touch-action: pan-y;
        padding: 0.5rem;
        border-bottom: 1px solid #e8e8e2;
        background: #fff;
        scrollbar-width: none;
    }
    .hc-admin .hc-create-booking-nav::-webkit-scrollbar { display: none; }
    .hc-admin .hc-create-booking-nav button {
        display: inline-flex;
        flex-direction: column;
        min-width: 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 3.25rem;
        padding: 0.25rem 0.125rem;
        border: 1px solid #e8e8e2;
        border-radius: 0.75rem;
        background: #fafaf7;
        color: #1e2d24;
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }
    .hc-admin .hc-create-booking-nav button > span {
        display: grid;
        place-items: center;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: #e9ede8;
        color: #1e2d24;
        font-size: 0.6875rem;
    }
    .hc-admin .hc-create-booking-form {
        padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
        background: #fafaf7;
        scroll-padding-top: 0.75rem;
        scroll-padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
    .hc-admin .hc-create-booking-room-select {
        overflow-x: hidden;
    }
    .hc-admin #hc-create-section-payment {
        overflow-x: hidden;
    }
    .hc-admin .hc-create-booking-anchor {
        height: 0;
        margin: 0 !important;
    }
    .hc-admin .hc-create-booking-type {
        gap: 0.375rem;
        padding: 0.375rem;
        border-color: #e8e8e2;
        background: #fff;
    }
    .hc-admin .hc-create-booking-type button {
        min-width: 0;
        min-height: 3.25rem;
        padding: 0.4rem 0.25rem;
        color: #405247;
        font-size: 0.75rem;
        line-height: 1.15;
    }
    .hc-admin .hc-create-booking-type button.bg-white {
        border-color: #1e2d24;
        background: #1e2d24;
        color: #fff !important;
    }
    .hc-admin .hc-create-booking-panel {
        padding: 1rem;
        border: 1px solid #e8e8e2;
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 2px 10px rgba(18, 24, 20, 0.035);
    }
    .hc-admin .hc-create-booking-panel > .flex:first-child {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .hc-admin .hc-create-booking-panel > .flex:first-child > label {
        color: #1e2d24;
        font-size: 0.75rem;
        line-height: 1.4;
        letter-spacing: 0.035em;
    }
    .hc-admin .hc-create-booking-dialog .text-primary { color: #1e2d24 !important; }
    .hc-admin .hc-create-booking-dialog .bg-primary { background-color: #1e2d24 !important; }
    .hc-admin .hc-create-booking-dialog [class*="bg-primary/"] { background-color: rgba(30, 45, 36, 0.08) !important; }
    .hc-admin .hc-create-booking-dialog [class*="border-primary/"] { border-color: rgba(30, 45, 36, 0.25) !important; }
    .hc-admin .hc-create-booking-dialog .border-primary { border-color: #1e2d24 !important; }
    .hc-admin .hc-create-booking-form :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: 3rem;
        border-color: #cbd4ca;
        background: #fff;
        color: #121814;
    }
    .hc-admin .hc-create-booking-form :where(select, input[type="date"], input[type="time"]) { color-scheme: light; }
    .hc-admin .hc-create-booking-form :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
        outline: 2px solid #a98e69;
        outline-offset: 1px;
    }
    .hc-admin .hc-create-booking-form :where(input[type="checkbox"], input[type="radio"]) { accent-color: #1e2d24; }
    .hc-admin .hc-create-booking-form button.w-8.h-8 { min-width: 2.75rem; min-height: 2.75rem; }
    .hc-admin .hc-create-booking-room-grid label { min-height: 5.5rem; }
    .hc-admin .hc-create-booking-actions {
        position: static;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding: 1rem;
        border: 0;
        border-radius: 1rem;
        background: #1e2d24;
        color: #fff;
    }
    .hc-admin .hc-create-booking-actions > .text-left > span:first-child { color: #d0dace; }
    .hc-admin .hc-create-booking-actions > .text-left > span:last-child {
        color: #e4c99f !important;
        font-size: 1.25rem;
    }
    .hc-admin .hc-create-booking-actions button { min-height: 3rem; }
    .hc-admin .hc-create-booking-actions button[type="button"] {
        border-color: #6d816f;
        background: transparent;
        color: #fff;
    }
    .hc-admin .hc-create-booking-actions button[type="submit"] {
        background: #c5a880 !important;
        color: #121814;
        box-shadow: none;
    }
    .dark .hc-create-booking-dialog,
    .dark .hc-create-booking-form { background: #121814 !important; }
    .dark .hc-create-booking-nav { border-color: #354639; background: #18231b; }
    .dark .hc-create-booking-nav button { border-color: #405345; background: #243328; color: #f1f5f0; }
    .dark .hc-create-booking-nav button > span { background: #405345; color: #f1f5f0; }
    .dark .hc-create-booking-type { border-color: #405345; background: #1a251e; }
    .dark .hc-create-booking-type button { color: #d5dfd5; }
    .dark .hc-create-booking-type button.bg-white { border-color: #c5a880; background: #2f5944; color: #fff !important; }
    .dark .hc-create-booking-panel { border-color: #354639; background: #1a251e; box-shadow: none; }
    .dark .hc-create-booking-panel .bg-white { background: #202c23; }
    .dark .hc-create-booking-panel > .flex:first-child > label,
    .dark .hc-create-booking-dialog .text-primary { color: #e4c99f !important; }
    .dark .hc-create-booking-dialog .bg-primary { background-color: #2f5944 !important; }
    .dark .hc-create-booking-dialog [class*="bg-primary/"] { background-color: rgba(197, 168, 128, 0.14) !important; }
    .dark .hc-create-booking-dialog [class*="border-primary/"] { border-color: rgba(197, 168, 128, 0.4) !important; }
    .dark .hc-create-booking-dialog .border-primary { border-color: #c5a880 !important; }
    .dark .hc-create-booking-form :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
        border-color: #4b5c4f;
        background: #202c23;
        color: #f1f5f0;
    }
    .dark .hc-create-booking-form :where(select, input[type="date"], input[type="time"]) { color-scheme: dark; }
    .dark .hc-create-booking-actions { background: #1e2d24; }

}

@media screen and (max-width: 359.98px) {
    .hc-admin #hc-create-section-dates .grid-cols-5 {
        grid-template-columns: minmax(0, 1fr);
    }
    .hc-admin #hc-create-section-dates .grid-cols-5 > input {
        grid-column: auto;
        width: 100%;
    }
}

@media screen and (max-width: 359.98px) {
    .hc-admin .hc-create-booking-room-grid { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .hc-create-booking-dialog,
    .hc-create-booking-dialog * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}