/* ==============================
   CSS Variables — Amber Oasis Theme
================================ */
:root {
    --brand:        #C85520;
    --brand-dark:   #9F3F15;
    --brand-light:  #E8743A;
    --brand-glow:   rgba(200, 85, 32, 0.18);
    --brand-tint:   #FDF0E8;
    --brand-tint2:  #FAE5D3;

    --gold:         #C8962A;
    --gold-light:   #E8BB5A;

    --dark:         #180F05;
    --dark-2:       #2A1C0E;
    --navy:         #0D2340;

    --text-primary: #1C1208;
    --text-muted:   #7A6858;
    --text-light:   #A89888;

    --surface:      #FDFAF6;
    --surface-2:    #F5EDE0;
    --surface-3:    #EDE0CE;
    --border:       #E8DDD0;
    --border-light: #F0E8DC;

    --white:        #FFFFFF;
    --shadow-sm:    0 2px 8px rgba(24, 15, 5, 0.08);
    --shadow-md:    0 4px 24px rgba(24, 15, 5, 0.12);
    --shadow-lg:    0 12px 48px rgba(24, 15, 5, 0.16);
    --shadow-brand: 0 4px 24px rgba(200, 85, 32, 0.28);

    --radius-sm:    8px;
    --radius-md:    16px;
    --radius-lg:    28px;
    --radius-xl:    48px;

    --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    --font-display: 'Alexandria', system-ui, sans-serif;
    --font-body:    'Alexandria', system-ui, sans-serif;
}

/* ==============================
   Keyframe Animations
================================ */
/* Safe animations — no opacity: 0 so content is always visible */
@keyframes fadeUp {
    from { transform: translateY(20px); }
    to   { transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}
@keyframes scaleIn {
    from { transform: scale(0.97); }
    to   { transform: scale(1); }
}
@keyframes slideRight {
    from { transform: translateX(-16px); }
    to   { transform: translateX(0); }
}

/* ==============================
   Common / Base Styles
================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--surface);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

a:hover {
    text-decoration: none !important;
}

/* ---- Primary Button ---- */
.button-primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
    color: #FFF !important;
    border: none !important;
    box-shadow: var(--shadow-brand) !important;
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition) !important;
    position: relative;
    overflow: hidden;
}
.button-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background var(--transition);
    border-radius: inherit;
}
.button-primary:hover {
    color: #FFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200, 85, 32, 0.38) !important;
    filter: brightness(1.05);
}
.button-primary:hover::after {
    background: rgba(255,255,255,0.08);
}
.button-primary:active {
    color: #FFF !important;
    transform: translateY(0);
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%) !important;
    box-shadow: 0 2px 8px rgba(200, 85, 32, 0.2) !important;
}

/* ---- Light / Outline Button ---- */
.button-light {
    border: 1.5px solid var(--brand) !important;
    color: var(--brand) !important;
    background: transparent !important;
    white-space: nowrap;
    padding-inline: 20px;
    transition: background var(--transition), color var(--transition), transform var(--transition) !important;
}
.button-light:hover {
    color: var(--brand) !important;
    background: var(--brand-tint) !important;
    transform: translateY(-1px);
}

/* ---- Utilities ---- */
.gap-20 { gap: 20px; }

.back-btn {
    padding-left: 45px !important;
    padding-right: 17px !important;
    height: 41px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    position: relative;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-sm) !important;
    transition: transform var(--transition) !important;
}
.back-btn:hover {
    transform: translateX(-3px) translateY(-1px) !important;
}
.back-btn::before {
    content: url("/assets/ebookings/images/icons/back.svg");
    width: 20px;
    height: 20px;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Custom Checkbox ---- */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px !important;
    height: 16px !important;
    border: 1.5px solid var(--brand);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin-right: 8px !important;
    transition: background var(--transition), border-color var(--transition);
}
input[type="checkbox"]:checked {
    background-color: var(--brand) !important;
    background-image: url("/assets/ebookings/images/icons/check.svg");
    border-color: var(--brand);
    background-size: 70%;
}
input[type=checkbox]:focus,
.button-primary:focus {
    box-shadow: 0 0 0 3px var(--brand-glow);
    outline: none;
}
input:focus {
    border: 1.5px solid var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}
input:focus-visible {
    outline: none;
}

/* ---- Show More Button ---- */
.show-more-btn {
    border-radius: 20px;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 18px;
    padding-right: 26px !important;
    padding-left: 14px !important;
    position: relative;
    margin-bottom: 10px;
    height: 30px !important;
    min-height: 30px;
}
.show-more-btn::after {
    content: url("/assets/ebookings/images/icons/white-arrow.svg");
    width: 12px;
    height: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* ==============================
   Header / Navbar
================================ */
header {
    border-bottom: 1px solid var(--border-light);
    background: rgba(253, 250, 246, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--transition);
}
header.scrolled {
    box-shadow: var(--shadow-md);
}

.custom-navbar {
    height: 74px;
    max-height: 74px;
}

.custom-navbar .logo-wrapper {
    width: 110px;
    height: 48px;
    display: inline-flex;
    align-items: center;
}
.custom-navbar .logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter var(--transition);
}
.custom-navbar .logo-wrapper:hover img {
    filter: brightness(0.85);
}

.custom-navbar .btns .btn {
    border-radius: var(--radius-sm);
    width: auto;
    min-width: 96px;
    height: 40px;
    padding-inline: 16px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-navbar .btns .btn.profile-btn {
    width: auto;
    height: auto;
    background: var(--white);
    border: 1.5px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.custom-navbar .btns .btn.profile-btn:hover {
    background: var(--surface-2);
    border-color: var(--brand) !important;
    box-shadow: var(--shadow-brand);
}

.profile-btn .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 9px;
    object-fit: cover;
    border: 2px solid var(--border);
}

.custom-user-menu {
    display: inline-block;
    width: auto;
}
.custom-user-menu .dropdown-menu {
    width: 100%;
    min-width: 180px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: 8px;
    animation: scaleIn 0.18s ease;
    transform-origin: top right;
    background: var(--white);
}
.custom-user-menu .user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.custom-user-menu .user-email {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}
.custom-user-menu .dropdown-menu .dropdown-item {
    padding: 11px 14px !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.custom-user-menu .dropdown-menu .dropdown-item:hover {
    background: var(--brand-tint);
    color: var(--brand);
}
.custom-user-menu .dropdown-menu .dropdown-item i.list-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 12px;
}
i.list-icon.acc-icon     { background-image: url("/assets/ebookings/images/icons/account.svg"); }
i.list-icon.booking-icon { background-image: url("/assets/ebookings/images/icons/my-bookings.svg"); }
i.list-icon.logout-icon  { background-image: url("/assets/ebookings/images/icons/logout.svg"); }

.dropdown-divider {
    border-color: var(--border-light) !important;
    margin: 4px 0;
}

/* ==============================
   Footer
================================ */
footer {
    border-top: none;
}

footer .site-map {
    background: var(--brand-tint);
    padding: 60px 0 40px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--brand-tint2);
}

footer .site-map .footer-logo-div,
footer .site-map .ul-wrapper {
    width: 25%;
}

.footer-logo-div .footer-logo-wrapper {
    display: inline-block;
    width: 170px;
    height: 110px;
    margin-bottom: 16px;
    opacity: 1;
    transition: opacity var(--transition), transform var(--transition);
}
.footer-logo-div .footer-logo-wrapper:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
.footer-logo-div .footer-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}
[dir="rtl"] .footer-logo-div .footer-logo-wrapper img {
    object-position: right center;
}
.footer-logo-div p.company-name {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    max-width: 240px;
    margin: 0;
}

footer .copy-right-wrapper {
    background: var(--brand-light);
}
footer .copy-right-wrapper p {
    color: rgba(255,255,255,0.92);
    padding: 14px 0;
    font-size: 13px;
}
footer .copy-right-wrapper p span {
    font-weight: 600;
    color: #FFFFFF;
}

footer .ul-wrapper p.ul-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
}
footer .ul-wrapper p.ul-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-light);
}
footer .ul-wrapper ul {
    padding-inline-start: 0;
    list-style: none;
}
footer .ul-wrapper ul li a,
footer .ul-wrapper ul li p {
    font-size: 14px;
    font-weight: 400;
    color: #4A4A4A;
    display: inline-block;
    margin-bottom: 14px;
    transition: color var(--transition), transform var(--transition);
}
footer .ul-wrapper ul li a:hover {
    color: var(--brand);
    transform: translateX(3px);
}
footer .ul-wrapper ul li a.btn {
    width: 100%;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    box-shadow: var(--shadow-brand) !important;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

/* ---- Footer contact column ---- */
footer .footer-contact ul li a.footer-contact-line {
    font-weight: 500;
    margin-bottom: 12px;
}
footer .footer-contact ul li a.footer-contact-line:hover {
    color: var(--brand);
    transform: none;
}
footer .footer-social {
    display: flex;
    gap: 10px;
    margin: 4px 0 20px;
}
footer .footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: #FFFFFF;
    border: 1px solid var(--brand-tint2);
    transition: color var(--transition), background var(--transition),
                border-color var(--transition), transform var(--transition);
}
footer .footer-social a:hover {
    color: #FFFFFF;
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px);
}
footer .footer-social svg { display: block; }
footer a.btn.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 40px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brand) !important;
}

/* ==============================
   Breadcrumb
================================ */
.breadcrumb-wrapper {
    padding-left: 82px;
    margin-top: 37px;
    animation: fadeIn 0.5s ease;
}
.breadcrumb-wrapper a.breadcrumb-link,
.breadcrumb-wrapper .breadcrumb-separator {
    font-weight: 400;
    font-size: 15px;
    color: var(--text-light);
    transition: color var(--transition);
}
.breadcrumb-wrapper a.breadcrumb-link:hover { color: var(--brand); }
.breadcrumb-wrapper .breadcrumb-current {
    color: var(--brand);
    font-weight: 600;
    font-size: 15px;
}

/* ==============================
   Home Page — Hero Section
================================ */
.hero-section {
    background: #E8743A;
    padding-top: 72px;
    padding-bottom: 240px;
    position: relative;
    overflow: visible;
}

.hero-section .hero-img-wrapper {
    width: 168px;
    height: 84px;
    margin: 0 auto 24px;
    position: relative;
    z-index: 2;
}
.hero-section .hero-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-section p.hero-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.15;
    text-align: center;
    margin: 0 auto;
    color: #FFF;
    position: relative;
    z-index: 2;
    letter-spacing: -0.01em;
}

/* ==============================
   Home Page — Hotel List Section
================================ */
.hotel-list {
    position: relative;
    margin-top: -80px;
    margin-bottom: 80px;
    z-index: 2;
}

.hotel-list-header { display: none; }

.hotel-list-wrapper {
    background: #FDEFE0;
    border-radius: 24px;
    padding: 40px;
    position: relative;
}

.cards-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

/* Empty state — shown when no properties are open for booking */
.hotel-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.hotel-list-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--brand-tint);
    box-shadow: 0 0 0 8px var(--surface-2);
}
.hotel-list-empty__icon img {
    width: 36px;
    height: 36px;
    opacity: 0.85;
}
.hotel-list-empty__headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--text-primary);
    margin: 0 0 10px;
}
.hotel-list-empty__body {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 440px;
}

/* Hotel Cards */
.hotel-card {
    flex: 0 0 calc(50% - 16px);
    margin-bottom: 10px;
    height: 360px;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.hotel-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 24px 60px rgba(24, 15, 5, 0.22);
}
.hotel-card:only-child           { flex: 0 0 100%; }
.hotel-card:first-child:nth-last-child(2),
.hotel-card:first-child:nth-last-child(2) ~ .hotel-card { flex: 0 0 100%; }
.hotel-card:last-child:nth-child(odd) { flex: 0 0 100%; }
.hotel-card:last-child { margin-bottom: 0; }

.hotel-card .hotel-card-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 25%,
        rgba(10, 5, 0, 0.35) 60%,
        rgba(10, 5, 0, 0.75) 100%
    );
    border-radius: var(--radius-lg);
    transition: background var(--transition);
}
.hotel-card:hover .hotel-card-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 15%,
        rgba(10, 5, 0, 0.4) 55%,
        rgba(10, 5, 0, 0.82) 100%
    );
}

.hotel-card .hotel-name {
    background: linear-gradient(135deg, rgba(24, 15, 5, 0.9) 0%, rgba(40, 25, 10, 0.85) 100%);
    backdrop-filter: blur(8px);
    color: #FFF;
    width: auto;
    min-width: 200px;
    max-width: 260px;
    height: auto;
    min-height: 48px;
    padding: 10px 20px;
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(200, 85, 32, 0.4);
    border-bottom: 1px solid rgba(200, 85, 32, 0.4);
}

.hotel-card .bottom-row {
    position: absolute;
    bottom: 32px;
    left: 28px;
    right: 36px;
    transform: translateY(6px);
    transition: transform var(--transition);
}
.hotel-card:hover .bottom-row {
    transform: translateY(0);
}

.hotel-card p.room-type {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.01em;
}
.hotel-card p.address {
    font-weight: 400;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.01em;
}
.hotel-card a.book-btn {
    width: 100px;
    height: 44px;
    color: #FFF !important;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    flex-shrink: 0;
}
.hotel-card a.book-btn:hover {
    transform: scale(1.05) !important;
}

/* ==============================
   Hotel Details Page
================================ */
.hotel-info {
    margin-top: 80px;
    margin-bottom: 70px;
}

.hotel-info .back-btn {
    margin-bottom: 32px;
}
.hotel-info .left-div {
    width: 46%;
    position: relative;
    margin-top: -30px;
}
.hotel-info .right-div { width: 46%; }

.left-div .hotel-name {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 62px;
    line-height: 1.05;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.left-div .hotel-preiv {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 52px;
    width: 84%;
}
.left-div .insights { width: 85%; }
.left-div .insights .insight { margin-right: 24px; }
.left-div .insight p {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}
.left-div .insight p span {
    font-weight: 700;
    color: var(--navy);
    font-size: 20px;
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-display);
}

.insight-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    background-size: contain;
    background-repeat: no-repeat;
}
span.users-icon    { background-image: url("/assets/ebookings/images/icons/users.png"); }
span.treasure-icon { background-image: url("/assets/ebookings/images/icons/treasure.png"); }
span.cities-icon   { background-image: url("/assets/ebookings/images/icons/cities.png"); }

.right-div .image-card {
    border: 2px solid var(--border);
    border-top-left-radius: 90px;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    position: relative;
    width: 100%;
    height: 420px;
    transition: border-color var(--transition);
}
.right-div .image-card:hover {
    border-color: var(--brand);
}
.right-div .image-wrapper {
    position: absolute;
    top: -44px;
    left: -44px;
    width: 100%;
    height: 100%;
}
.right-div .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 90px;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    transition: filter var(--transition);
}
.right-div .image-card:hover .image-wrapper img {
    filter: brightness(1.04);
}

/* Search Section (on hotel details) */
.search-section { margin-bottom: 80px; }
.search-section .search-form-wrapper {
    padding: 28px 32px;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.search-section .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.select-wrapper { position: relative; }
.search-section .search-form .form-custom-select,
.search-section .search-form .search-form-item {
    padding-left: 72px;
    padding-right: 56px;
    box-shadow: var(--shadow-sm);
    height: 56px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 15px;
    background-color: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-section .search-form .form-custom-select:focus,
.search-section .search-form .search-form-item:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}

.search-section .search-form span.check-available {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding-right: 23px;
}

.search-form .select-wrapper::before,
.search-form .check-available::before {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/assets/ebookings/images/icons/arrow_down.svg");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px 10px;
}

.select-wrapper.select-person .form-custom-select {
    min-width: 220px;
    text-align: center;
    padding-left: 130px;
    padding-right: 48px;
}
.select-wrapper.select-person::after {
    content: "Person";
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 15px;
}
.select-wrapper.select-person::before {
    content: url("/assets/ebookings/images/icons/person.svg");
}
.select-wrapper.select-room::before {
    content: url("/assets/ebookings/images/icons/room.svg");
}
.check-available::before {
    content: url("/assets/ebookings/images/icons/calender.svg");
}

/* ==============================
   Date Range Picker — trigger
================================ */
.date-picker-wrapper {
    /* Reset <button> defaults */
    appearance: none;
    -webkit-appearance: none;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0;
    text-align: left;
    /* Layout */
    position: relative;
    cursor: pointer;
    user-select: none;
    flex: 1;
    height: 56px;
    display: flex;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.date-picker-wrapper:hover,
.date-picker-wrapper.open {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}
.date-picker-wrapper .date-display {
    display: block;
    width: 100%;
    padding-left: 72px;
    padding-right: 24px;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ==============================
   daterangepicker.js overrides
================================ */
.daterangepicker {
    font-family: var(--font-body);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: var(--white);
    color: var(--text-primary);
    margin-top: 8px;
    /* Shrink the popover to the single visible month (the second calendar is
       hidden), so no empty column is left where it used to sit. The mobile
       rule below overrides this with a fixed, viewport-centered width. */
    width: -moz-max-content;
    width: max-content;
}
/* Arrow pointers */
.daterangepicker:before,
.daterangepicker:after { display: none; }

/* Month/year header row */
.daterangepicker .drp-calendar .month {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 2px 4px;
}
.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Prev / Next arrows */
.daterangepicker .prev span,
.daterangepicker .next span {
    border-color: var(--text-muted);
}
.daterangepicker th.prev,
.daterangepicker th.next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
    background: var(--brand-tint);
}
.daterangepicker th.prev:hover span,
.daterangepicker th.next:hover span {
    border-color: var(--brand);
}

/* Day-of-week headers */
.daterangepicker th.week,
.daterangepicker td.week { display: none; }
.daterangepicker table thead tr:last-child th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 6px;
}

/* Day cells */
.daterangepicker td.available {
    border-radius: 50%;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.15s ease, color 0.15s ease;
}
.daterangepicker td.available:hover {
    background: var(--brand-tint) !important;
    color: var(--brand) !important;
    border-radius: 50% !important;
}
.daterangepicker td.off {
    color: var(--text-light);
    opacity: 0.4;
}
.daterangepicker td.disabled,
.daterangepicker td.off.disabled {
    color: var(--text-light);
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: none;
}

/* Selected range — one continuous capsule.
   The days between the endpoints are a light band; the endpoints are solid
   brand caps. Because the grid cells are square and touch, the band and caps
   join seamlessly into a single pill. */
.daterangepicker td.in-range {
    background: var(--brand-tint) !important;
    color: var(--brand-dark) !important;
    border-radius: 0 !important;
}
/* Round the band where a week row begins or ends, so a range that wraps to the
   next week reads as clean per-row capsules rather than a bar cut off at the edge. */
.daterangepicker td.in-range:first-child {
    border-radius: 50% 0 0 50% !important;
}
.daterangepicker td.in-range:last-child {
    border-radius: 0 50% 50% 0 !important;
}

/* Endpoints — matched solid brand caps (no more oval-vs-square mismatch). */
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: var(--brand) !important;
    color: var(--white) !important;
    font-weight: 700;
}
.daterangepicker td.start-date {
    border-radius: 50% 0 0 50% !important;
}
.daterangepicker td.end-date {
    border-radius: 0 50% 50% 0 !important;
}
/* A single-day selection (start == end) is a full circle. */
.daterangepicker td.start-date.end-date {
    border-radius: 50% !important;
}

/* Active (today) */
.daterangepicker td.today:not(.start-date):not(.end-date) {
    font-weight: 700;
    color: var(--brand) !important;
    background: transparent !important;
}
.daterangepicker td.today:not(.start-date):not(.end-date)::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand);
    margin: -3px auto 0;
}

/* Inputs at the top (Check In / Check Out) */
.daterangepicker .drp-selected { display: none; }
.daterangepicker .drp-calendar {
    padding: 8px 16px 0;
    max-width: none;
}
/* Single-month calendar on every screen: hide the second month and let the
   first fill the popover (the JS unlinks the calendars so this one month keeps
   both prev/next arrows). */
.daterangepicker .drp-calendar.right { display: none !important; }
.daterangepicker.double .drp-calendar.left,
.daterangepicker .drp-calendar.left {
    float: none !important;
    border-right: none !important;
    max-width: 100%;
}

/* Grid — fixed square cells, table centered in the popover. Square cells are
   what make the day pills true circles and let the selected range read as one
   continuous capsule instead of stretched ovals. */
.daterangepicker .drp-calendar.left .calendar-table,
.daterangepicker .drp-calendar.right .calendar-table {
    border: none;
    background: transparent;
    width: auto;
    margin: 0 auto;
}
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    /* !important: the daterangepicker CDN stylesheet is injected into <head>
       after main.css and sets a same-specificity 32x24 cell, which would win by
       source order and make the round day pills (today, selected) render as
       ovals. Forcing a square cell keeps them true circles. */
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 !important;
    font-size: 13px;
}

/* Footer buttons */
.daterangepicker .drp-buttons {
    border-top: 1px solid var(--border-light);
    padding: 12px 16px;
}
.daterangepicker .drp-buttons .btn {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    height: 38px;
    padding: 0 20px;
    line-height: 36px;
}
.daterangepicker .drp-buttons .cancelBtn {
    background: var(--white);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.daterangepicker .drp-buttons .cancelBtn:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.daterangepicker .drp-buttons .applyBtn {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
    font-weight: 700;
    transition: background 0.2s ease;
}
.daterangepicker .drp-buttons .applyBtn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* ==============================
   Toast Notifications
================================ */
#toast-container {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.toast-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toastIn 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    min-width: 260px;
    max-width: 380px;
}
.toast-msg.toast-error   { background: #C0392B; }
.toast-msg.toast-warning { background: var(--brand); }
.toast-msg.toast-success { background: #27AE60; }
.toast-msg.toast-out     { animation: toastOut 0.22s ease both; }
.toast-msg svg           { flex-shrink: 0; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0)   scale(1); }
    to   { opacity: 0; transform: translateY(6px) scale(0.96); }
}

.search-section .search-form .search-btn {
    border-radius: var(--radius-md);
    padding: 0 36px;
    height: 56px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.03em;
    color: #FFF !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Map Section */
.map-section {
    background: var(--brand);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    padding: 56px 72px;
    margin: 0;
}
.map-section .map-wrapper {
    width: 100%;
    height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0;
}
.map-section .map-wrapper .hotel-map {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

/* ==============================
   Search Page
================================ */
.filters-div {
    width: 23%;
    min-width: 23%;
    margin-top: 100px;
}
.list-div {
    width: 77%;
    min-width: 77%;
}
.filters-div .filters {
    padding: 10px 48px;
}

.search-form p.filter-name {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.search-form .more-options {
    display: none;
    margin-top: 6px;
}

.list-div {
    padding: 60px 80px 60px 48px;
}
.list-div .btns-row { margin-bottom: 22px; }

.sort-container select {
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-sm);
    height: 42px;
    padding: 0 14px;
    background-color: var(--white);
    color: var(--brand);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: box-shadow var(--transition);
}
.sort-container select:hover {
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.cards-container .search-card {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    background: var(--white);
}
@media (hover: hover) {
    .cards-container .search-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand);
    }
}

.cards-container .search-card .card-img-wrapper {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    /* Soft placeholder tint so the area never flashes stark white while the
       cover image loads, or if it (and the fallback) fail to resolve. */
    background: var(--surface-2, #f4efe9);
}
.search-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-slow);
}
.cards-container .search-card:hover .card-img-wrapper img {
    transform: scale(1.05);
}

.search-card p.room-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.search-card p.room-price {
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: var(--text-muted);
}
.search-card p.room-price span {
    font-weight: 800;
    font-size: 17px;
    color: var(--brand);
}
.mb5 { margin-bottom: 5px; }
.search-card p.room-subtitle {
    color: var(--text-light);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
}
.search-card .spans span.card-span {
    background-color: var(--surface-2);
    border-radius: 20px;
    padding: 3px 10px 3px 24px;
    position: relative;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.search-card .spans span.card-span::before {
    width: 12px;
    height: 12px;
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-card .spans span.card-span.bills::before {
    content: url("/assets/ebookings/images/icons/ell.svg");
}
.search-card .spans span.card-span.ell::before {
    content: url("/assets/ebookings/images/icons/verifiy.svg");
}

/* ==============================
   Room Details Page
================================ */
.room-details {
    padding-top: 80px;
    padding-bottom: 140px;
}
.room-details .room-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 52px;
    text-align: center;
    letter-spacing: -0.01em;
}
.room-details .room-subtitle {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    color: var(--brand);
    text-align: center;
}
.room-details .room-subtitle span {
    font-weight: 700;
    font-style: normal;
}

.room-details .gallary {
    width: 56%;
    min-width: 56%;
    max-width: 56%;
}
.room-details .gallery-row {
    margin-top: 48px;
    margin-bottom: 56px;
}
.gallery { width: 100%; margin: auto; }
.main-image {
    width: 100%;
    height: 320px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
}
.main-image:hover img {
    transform: scale(1.02);
}

.thumbnails {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}
.thumbnails::-webkit-scrollbar { height: 3px; }
.thumbnails::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 2px; }
.thumbnails::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 2px; }

.thumb {
    width: 140px;
    min-width: 140px;
    height: 110px;
    object-fit: cover;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0.65;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    border: 2px solid transparent;
}
.thumb:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
.thumb.active {
    opacity: 1;
    border-color: var(--brand);
    box-shadow: 0 4px 12px var(--brand-glow);
}

.room-details .booking-wrapper {
    width: 42%;
    min-width: 42%;
    padding: 48px 56px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.room-details .booking-wrapper:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-brand);
}
.room-details .booking-wrapper p.title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.room-details .booking-wrapper p.price {
    font-weight: 300;
    font-size: 36px;
    color: var(--text-light);
    margin-bottom: 32px;
    line-height: 1;
    font-family: var(--font-display);
}
.room-details .booking-wrapper p.price span {
    color: #2D7D5A;
    font-weight: 700;
    font-size: 36px;
}
.room-details .booking-wrapper .book-now-btn {
    height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--shadow-brand) !important;
}

.room-details .about-room {
    width: 52%;
    margin-bottom: 72px;
}
.room-details .about-room p:first-child {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.room-details .about-room p:last-child {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted);
}

.room-details .room-items {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
    gap: 4px;
}
.room-details .room-items li {
    margin-right: 40px;
    color: var(--text-light);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    transition: color var(--transition);
}
.room-details .room-items li:hover { color: var(--brand); }
.room-details .room-items li span.item-count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--navy);
    display: block;
}

.room-details .room-items span.room-icon {
    display: block;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform var(--transition);
}
.room-details .room-items li:hover span.room-icon { transform: scale(1.1); }

span.room-icon.bedroom     { background-image: url("/assets/ebookings/images/icons/bedroom.png"); }
span.room-icon.living      { background-image: url("/assets/ebookings/images/icons/living.png"); }
span.room-icon.bathroom    { background-image: url("/assets/ebookings/images/icons/bathroom.png"); }
span.room-icon.dining      { background-image: url("/assets/ebookings/images/icons/dining.png"); }
span.room-icon.wifi        { background-image: url("/assets/ebookings/images/icons/wifi.png"); }
span.room-icon.ac          { background-image: url("/assets/ebookings/images/icons/ac.png"); }
span.room-icon.refrigerator { background-image: url("/assets/ebookings/images/icons/refigrator.png"); }
span.room-icon.tv          { background-image: url("/assets/ebookings/images/icons/tv.png"); }

/* ==============================
   Login / Sign Up
================================ */
.custom-auth .logo-wrapper {
    width: 320px;
    height: 145px;
    margin: auto;
}
.custom-auth .logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.custom-auth .auth-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55%;
    height: 60px;
    margin: auto;
    margin-top: 64px;
    margin-bottom: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.custom-auth .auth-btns a {
    width: 50%;
    height: 100%;
    background-color: var(--white);
    border: none;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.custom-auth .auth-btns a:hover {
    color: var(--brand);
    background: var(--brand-tint);
}
.custom-auth .auth-btns a.active {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
    color: #FFF;
    box-shadow: var(--shadow-brand);
}
.custom-auth .auth-btns a:first-child { border-right: 1px solid var(--border); }

.custom-auth .login-content {
    width: 58%;
    max-width: 58% !important;
    margin: auto !important;
    background: none !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 28px 24px !important;
    box-shadow: var(--shadow-md) !important;
}
.custom-auth p.title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 36px;
    text-align: center;
}

.custom-auth .page-card form,
.custom-auth .for-forgot .page-card form,
.custom-auth-with-email-link .page-card form,
.custom-auth .for-signup .page-card form,
.custom-auth .for-email-login .page-card form {
    width: 100%;
    max-width: 100%;
}
.custom-auth p.form-p {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    font-family: var(--font-display);
}

label.form-label {
    color: var(--text-primary);
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.custom-auth form input,
.custom-auth form select {
    height: 56px;
    padding: 0 16px !important;
    margin-bottom: 24px !important;
    background-color: var(--white) !important;
    box-shadow: var(--shadow-sm);
    border: 1.5px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.custom-auth form input:focus,
.custom-auth form select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}
.custom-auth form input::placeholder {
    color: var(--text-light) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}
.custom-auth .page-card .page-card-body .password-field .toggle-password {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

form .page-card-actions button {
    height: 60px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #FFF !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-brand) !important;
}
form .page-card-actions button.btn.btn-primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
}

.custom-auth .for-login .page-card form,
.custom-auth .for-forgot .page-card form,
.custom-auth .for-login-with-email-link .page-card form,
.custom-auth .for-signup .page-card form,
.custom-auth .for-email-login .page-card form {
    width: 100%;
    max-width: 100%;
}
.custom-auth .for-signup form input { height: 48px !important; }
.custom-auth form select { height: 48px !important; display: block; width: 100%; }

.form-verify-icon {
    width: 260px;
    height: 56px;
    margin: auto;
    margin-bottom: 44px;
}
.form-verify-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.custom-form-verify .page-card-head p {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    color: var(--navy);
    margin-bottom: 56px;
}
.custom-auth .verify-div {
    width: 40%;
    max-width: 40% !important;
    margin: auto !important;
    background: none !important;
    border: none !important;
    padding: 20px 15px !important;
    padding-top: 140px !important;
}
.custom-form-verify #qr_info {
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
}
.custom-form-verify #verify_otp_code {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
    height: 56px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #FFF !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-brand) !important;
}

#page-login { padding-bottom: 160px; }
.verifiy-back-btn {
    position: absolute;
    top: 90px;
    left: 90px;
}

/* ==============================
   Booking Details Page
================================ */

/* ── Dynamic reservation room cards ── */
.booking-loading-msg {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}

.booking-empty-state {
    text-align: center;
    padding: 32px 0;
    color: var(--text-muted);
}
.booking-empty-state p { margin-bottom: 16px; font-size: 15px; }

.booking-room-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition);
}
.booking-room-card:hover { border-color: var(--brand); }

.booking-room-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.booking-room-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.booking-room-qty-badge {
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.booking-room-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.booking-room-tag {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--border-light);
}

.booking-room-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}
.booking-room-price-per-night {
    font-size: 12px;
    color: var(--text-muted);
}
.booking-room-price-total {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
}
/* Struck-through gross line total when an in-window room discount applies */
.booking-room-price-original {
    text-decoration: line-through;
    color: var(--text-light);
    font-weight: 400;
    font-size: 0.85em;
    margin-right: 4px;
}
[dir="rtl"] .booking-room-price-original {
    margin-right: 0;
    margin-left: 4px;
}
/* In-window Room Discount line on the booking room card */
.booking-room-discount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #2e7d32;
}

.booking-room-dates {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.booking-room-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.booking-room-subtotal {
    font-weight: 700;
    color: var(--brand);
    font-size: 14px;
}

/* ── Price summary section ── */
.booking-price-summary {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.booking-price-summary-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 10px;
}
/* Check-in / Check-out dates at top of summary */
.booking-dates-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.booking-date-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    background: var(--white);
}
.booking-date-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}
.booking-date-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Price table */
.booking-price-summary table { width: 100%; border-collapse: collapse; }
.booking-price-summary td {
    padding: 7px 0;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}
.booking-price-summary td:last-child { text-align: right; }
.booking-price-summary tr:last-child td { border-bottom: none; }

/* Subtotal row — slightly emphasised */
.booking-price-summary tr.summary-subtotal td {
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* Grand Total row — brand colour */
.booking-price-summary tr.summary-grand-total td {
    font-weight: 700;
    font-size: 15px;
    color: var(--brand);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.booking-details {
    padding: 80px 64px;
}
.booking-details .booking-form-wrapper,
.booking-details .room-details-wrapper {
    width: 50%;
}
.booking-form-wrapper .form-wrapper {
    border: 1.5px solid var(--border);
    padding: 24px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}
.booking-details p.form-head {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 28px;
    margin-top: 44px;
    text-align: left;
    padding-left: 56px;
}

.booking-form input,
.promo-code form input,
.booking-form select {
    height: 44px;
    box-shadow: var(--shadow-sm);
    border: 1.5px solid var(--border);
    background-color: var(--white);
    padding: 0 14px;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}
.booking-form input:focus,
.promo-code form input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}
.booking-form input:disabled,
.booking-form select:disabled {
    background-color: var(--surface-2);
    color: var(--text-light);
}
.booking-form select { display: block; }

textarea {
    padding: 12px 14px !important;
    box-shadow: var(--shadow-sm);
    border: 1.5px solid var(--border) !important;
    background-color: var(--white) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    resize: vertical;
}
textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}
.booking-form textarea { min-height: 200px; }
.booking-form label.form-label { font-size: 13px !important; }

p.section-title {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.01em;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    padding-bottom: 0;
}
p.section-title:first-child { border-top: none; }

.form-control:focus {
    color: var(--text-primary) !important;
    background-color: var(--white) !important;
    border-color: var(--brand) !important;
    outline: 0;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}

.booking-details .room-details-wrapper {
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: border-color var(--transition);
}
.booking-details .room-details-wrapper:hover {
    border-color: var(--brand);
}

.room-details-wrapper p.hotel-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.1;
    color: var(--brand);
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: -0.01em;
}
.room-details-wrapper .hotel-img-wrapper {
    width: 100%;
    height: 300px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.room-details-wrapper .hotel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
}
.room-details-wrapper .hotel-img-wrapper:hover img {
    transform: scale(1.03);
}

.room-details-wrapper p.room-name {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.room-details-wrapper p.location {
    padding-left: 24px;
    position: relative;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: var(--brand);
}
.room-details-wrapper p.location::before {
    content: url("/assets/ebookings/images/icons/location-v.svg");
    width: 15px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.room-details-wrapper label.form-label {
    font-size: 13px !important;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.room-details-wrapper .custom-date:disabled {
    padding-right: 40px;
    padding-left: 40px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    font-weight: 400;
    font-size: 15px;
    color: var(--text-muted);
    height: 44px;
    border-radius: var(--radius-sm);
}

.price-details {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.price-details p {
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-family: var(--font-display);
}
.price-details table { width: 100%; border: none; }
.price-details table tr td { padding-bottom: 10px; }
.price-details table tr td:first-child {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-muted);
}
.price-details table tr td:last-child {
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.price-details table tr.total {
    border-top: 1px solid var(--border);
}
.price-details table tr.total td {
    padding-top: 10px;
}
.price-details table tr.total td:first-child {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}
.price-details table tr.total td:last-child {
    font-weight: 800;
    font-size: 17px;
    color: var(--brand);
}

.promo-code {
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid var(--border-light);
}
.promo-code p.row-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.promo-code form button.promo-code-btn {
    height: 44px;
    box-shadow: var(--shadow-brand) !important;
    width: 100%;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em;
}

/* ==============================
   Payment Methods Page
================================ */
.payment-card-wrapper { padding-top: 44px; }
.payment-card-wrapper p {
    text-align: center;
    line-height: 1;
}
.payment-card-wrapper p.card-head {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    text-align: center;
    color: var(--brand);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.payment-card-wrapper p.card-sub-head {
    font-weight: 400;
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 48px;
    font-family: var(--font-display);
    font-style: italic;
}

/* ── Stepper ── */
.payment-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
}
.payment-stepper .step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}
.payment-stepper .step.completed {
    background: #2e7d32;
}
.payment-stepper .step.current {
    background: transparent;
    border: 2.5px solid var(--brand);
}
.payment-stepper .step.current svg { opacity: 0; }
.payment-stepper .step-line {
    width: 48px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
}
.payment-stepper .step-line.filled {
    background: #2e7d32;
}

/* ── Payment Method Card ── */
.payment-method-card {
    background: var(--white);
    padding: 24px 28px;
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
}
.payment-method-card .method-card-title {
    text-align: left;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 22px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border-light);
}

/* ── Radio Options ── */
.payment-radio-option {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition);
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    color: var(--text-primary);
    position: relative;
}
.payment-radio-option:last-of-type {
    border-bottom: none;
}
.payment-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.payment-radio-option .radio-label {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}
.payment-radio-option .radio-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    width: 28px;
    height: 28px;
}
.payment-radio-option .radio-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.payment-radio-option .radio-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    flex-shrink: 0;
    margin-left: 12px;
    position: relative;
    transition: border-color var(--transition);
}
.payment-radio-option .radio-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2e7d32;
    transition: transform var(--transition);
}
.payment-radio-option.selected .radio-mark {
    border-color: #2e7d32;
}
.payment-radio-option.selected .radio-mark::after {
    transform: translate(-50%, -50%) scale(1);
}

/* ── Confirm Button ── */
.payment-confirm-btn {
    display: block;
    width: 440px;
    max-width: 100%;
    margin: 32px auto 0;
    padding: 14px 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    letter-spacing: 0.01em;
}

/* ==============================
   Payment Result Page
================================ */
.payment-result-card {
    max-width: 560px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 48px 36px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.result-section { animation: fadeIn 0.4s ease; }

/* ── Spinner ── */
.result-spinner-ring {
    width: 52px;
    height: 52px;
    border: 5px solid var(--surface-2);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.result-spinner-text {
    color: var(--text-muted);
    font-size: 16px;
}

/* ── Shield Icon ── */
.result-shield-icon {
    margin: 0 auto 24px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.result-shield-icon svg {
    width: 64px;
    height: 64px;
}

/* ── Title & Subtitle ── */
.result-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.result-title.success { color: #2e7d32; }
.result-title.failure { color: #c62828; }
.result-title.pending { color: var(--gold); }

.result-subtitle {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* ── Detail Table ── */
.result-detail-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    margin: 0 0 28px;
}
.result-detail-table td {
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}
.result-detail-table td:first-child {
    color: var(--text-muted);
    width: 42%;
}
.result-detail-table td:last-child {
    font-weight: 600;
    color: var(--text-primary);
}
.result-detail-table tr:last-child td {
    border-bottom: none;
}

/* ── Actions ── */
.result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.result-actions .btn {
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}

/* ── Toast ── */
.toast-msg {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    z-index: 9999;
    transition: opacity 0.3s;
}
.toast-msg.toast-out { opacity: 0; }

/* ── Responsive ── */
@media (max-width: 576px) {
    .payment-method-card,
    .payment-confirm-btn {
        width: 100%;
    }
    .payment-result-card {
        padding: 32px 20px;
        margin: 0 12px;
    }
    .payment-card-wrapper p.card-head {
        font-size: 32px;
    }
    .result-title {
        font-size: 22px;
    }
}

/* ==============================
   My Bookings Page
================================ */
section.bookings-table {
    padding-bottom: 100px;
}
.bookings-table .section-head {
    position: relative;
    padding: 40px 0;
}
.bookings-table .section-head p {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    text-align: center;
    color: var(--brand);
    letter-spacing: -0.01em;
}
.bookings-table .section-head .back-btn {
    position: absolute;
    left: 0;
    bottom: 24px;
}

.bookings-table .table-wrapper {
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
    background: var(--white);
}
.table-wrapper .table-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 14px 8px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
}
.table-wrapper .table-filters p {
    width: 40%;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text-muted);
    padding-left: 20px;
}
.table-wrapper .table-filters .filters-form { width: 60%; }
.table-filters .filters-form form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.filters-form form input.date-inputs {
    width: 150px;
    height: 40px;
    padding: 0 14px;
}
.filters-form form input {
    border: 1.5px solid var(--border);
    box-shadow: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    background: var(--white);
    transition: border-color var(--transition);
}
.filters-form form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
}

.search-input-wrapper input.search-input {
    padding-left: 42px;
    padding-right: 15px;
    height: 40px;
}
.search-input-wrapper {
    position: relative;
}
.search-input-wrapper::before {
    content: url("/assets/ebookings/images/icons/search.svg");
    width: 20px;
    height: 20px;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

table.bookings-table { width: 100%; }
table.bookings-table th {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-muted);
    padding: 18px 0;
    background: var(--surface);
}
table.bookings-table tr { border-bottom: 1px solid var(--border-light); }
table.bookings-table tr:last-child { border-bottom: none; }
table.bookings-table tr.active {
    background-color: var(--brand-tint);
}
table.bookings-table tr.active td span.arrow-icon {
    transform: rotate(180deg);
}
table.bookings-table th:first-child,
table.bookings-table tr td:first-child { padding-left: 24px !important; }
table.bookings-table tr td:last-child { padding-right: 18px !important; text-align: center; }

table.bookings-table td.hotel span.hotel-img-wrapper {
    display: inline-block;
    width: 40px;
    max-width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
table.bookings-table td.hotel span.hotel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
table.bookings-table td {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-muted);
    padding: 16px 0;
}
table.bookings-table td.hotel {
    font-weight: 600;
    color: var(--text-primary);
}
table.bookings-table td span.status {
    display: inline-block;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-align: center;
    padding: 4px 10px 4px 22px;
    position: relative;
    border-radius: 20px;
}
table.bookings-table td span.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
table.bookings-table td span.status.rejected {
    color: #B42318;
    background-color: #FFE8E6;
}
table.bookings-table td span.status.rejected::before { background-color: #F04438; }
table.bookings-table td span.status.booked {
    color: #92400E;
    background-color: #FEF3C7;
}
table.bookings-table td span.status.booked::before { background-color: #F79009; }
table.bookings-table td span.status.approved {
    color: #065F46;
    background-color: #D1FAE5;
}
table.bookings-table td span.status.approved::before { background-color: #10B981; }
table.bookings-table td span.arrow-icon {
    display: inline-block;
    width: 13px;
    height: 7px;
    background-image: url("/assets/ebookings/images/icons/disabled-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform 0.3s ease;
}

table.bookings-table tr.details-row {
    background: var(--surface);
    display: none;
}
tr.details-row.row-display { display: table-row !important; }
table.bookings-table tr.details-row .details {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}
table.bookings-table tr.details-row .details .details-img-wrapper {
    width: 27%;
    max-width: 27%;
    height: 200px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
tr.details-row .details .details-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
table.bookings-table tr.details-row .details .hotel-booking-info { width: 17%; max-width: 17%; }
table.bookings-table tr.details-row .details .check-details { width: 21%; max-width: 21%; }
table.bookings-table tr.details-row .details .policies { width: 31%; max-width: 31%; }

.details .hotel-booking-info p.hotel-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: left;
}

/* Booking detail row internals */
.details .hotel-booking-info p.room-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.details .hotel-booking-info span.payment-status,
.details .hotel-booking-info span.booking-status {
    display: inline-block;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 20px;
    margin-right: 6px;
    margin-bottom: 4px;
}
.details .hotel-booking-info span.payment-status.paid {
    background-color: #D1FAE5;
    color: #065F46;
}
.details .hotel-booking-info span.booking-status.approved {
    background-color: #D1FAE5;
    color: #065F46;
}
.details .check-details p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}
.details .check-details p span {
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}
.details .policies p.policies-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.details .policies p.policies-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 16px;
}
.details .policies button.cancel-btn {
    font-weight: 600;
    font-size: 13px;
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    transition: background var(--transition) !important;
}
.details .policies button.cancel-btn:hover {
    background: var(--brand-tint) !important;
}

/* ==============================
   Filter Group Separator
================================ */
.filter-group {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}
.filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* ==============================
   Filter Column — Figma Redesign
================================ */

/* Checkbox — orange checked state */
.search-form label.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.search-form label.checkbox:last-of-type { margin-bottom: 0; }
.search-form label.checkbox:hover { color: var(--brand); }
.search-form label.checkbox input[type="checkbox"] {
    accent-color: var(--brand);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Date inputs — the visible control is the .date-filter-btn label; the native
   <input type="date"> is a transparent full-cover overlay (see .hidden-date-input).
   This rule must NOT give the input its own box/border/background or it fights
   the overlay and breaks the picker positioning. */
.search-form .dates-inputs {
    gap: 8px;
}
.search-form .dates-inputs .date-filter-btn:focus-within {
    box-shadow: 0 0 0 3px var(--brand-glow);
    outline: none;
}

/* Budget inputs */
.search-form .budget-inputs {
    gap: 8px;
    margin-bottom: 14px;
}
.search-form .budget-inputs input[type="number"] {
    width: 48%;
    height: 42px;
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--white);
    transition: box-shadow var(--transition);
    -moz-appearance: textfield;
}
.search-form .budget-inputs input[type="number"]::-webkit-outer-spin-button,
.search-form .budget-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.search-form .budget-inputs input[type="number"]:focus {
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
    outline: none;
}
.search-form .budget-inputs input[type="number"]::placeholder {
    color: var(--brand);
    font-weight: 400;
    opacity: 0.7;
}

/* noUiSlider brand overrides */
#priceSlider { margin: 0 4px 8px; }
#priceSlider .noUi-connect { background: var(--brand); }
#priceSlider .noUi-handle {
    border: 2px solid var(--brand);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}
#priceSlider .noUi-handle::before,
#priceSlider .noUi-handle::after { display: none; }
#priceSlider .noUi-track { background: var(--border-light); }
.slider-labels {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==============================
   Scroll-triggered header shadow
================================ */


/* ==============================
   Villa Cards — Search Results
================================ */

/* Feature / amenity tag pills */
.card-tag {
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-block;
}
.feature-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

/* Booking counter (card) */
.booking-counter {
    display: flex;
    align-items: center;
    gap: 4px;
}
.counter-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.counter-btn:hover { background: var(--brand-dark); }

/* Disabled state for counter + button at max */
.counter-btn--at-max {
    background: var(--border) !important;
    color: var(--text-light) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.counter-btn--at-max:hover { background: var(--border) !important; }

/* Shake animation on counter input when at max */
@keyframes counter-shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
.counter-shake {
    animation: counter-shake 0.35s ease;
    border-color: var(--brand) !important;
}

/* Floating "max reached" hint badge */
.counter-max-hint {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--dark);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}
.counter-max-hint.hint-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Wrapper for booking counter — needed for hint positioning */
.booking-counter { position: relative; }

.counter-input {
    width: 48px;
    height: 32px;
    text-align: center;
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-sm);
    font-size: 14px;
    -moz-appearance: textfield;
}
.counter-input::-webkit-outer-spin-button,
.counter-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Card footer layout */
.card-footer { margin-top: 10px; }
.card-footer-left { display: flex; align-items: center; }
.book-now-btn { margin-bottom: 0; }

/* Unavailable card state — feature 017 */
.villa-card--unavailable .card-img-wrapper img {
    filter: grayscale(0.6);
    opacity: 0.85;
}
.villa-card--unavailable .room-price {
    color: var(--text-light);
}
.unavailable-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(33, 37, 41, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 2;
}
/* In-window Room Discount badge on the search card image */
.discount-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #d9402a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 2;
}
[dir="rtl"] .discount-badge {
    left: auto;
    right: 8px;
}
/* Struck-through gross price next to the discounted amount */
.room-price--discounted .price-original {
    text-decoration: line-through;
    color: var(--text-light);
    font-size: 0.8em;
    font-weight: 400;
    margin-right: 6px;
}
[dir="rtl"] .room-price--discounted .price-original {
    margin-right: 0;
    margin-left: 6px;
}
.room-price--discounted .amount {
    color: #d9402a;
}
/* Discount validity window line on the search card */
.discount-window {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #d9402a;
}
.discount-window::before {
    content: "\1F3F7";
    margin-right: 4px;
}
[dir="rtl"] .discount-window::before {
    margin-right: 0;
    margin-left: 4px;
}
.book-now-btn:disabled,
.book-now-btn[aria-disabled="true"] {
    background: var(--border) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.85;
}
.book-now-btn:disabled:hover,
.book-now-btn[aria-disabled="true"]:hover {
    background: var(--border) !important;
}

/* Info button on card image */
.card-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    font-style: italic;
    font-weight: bold;
}
.card-img-wrapper { position: relative; }

/* ==============================
   Reservation Panel
================================ */
.reservation-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.reservation-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 16px;
}
.reservation-table th {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}
.reservation-table td {
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.reservation-table tr:last-child td { border-bottom: none; }
.res-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.res-name { font-weight: 600; margin-right: 4px; }
.reservation-footer { padding-top: 12px; }
#reservationCount { font-size: 14px; color: var(--text-muted); }
#confirmBtn { min-width: 140px; }

/* ==============================
   Styled date filter buttons
================================ */
.hidden-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
    /* Clickable transparent overlay covering the whole button. Clicking it (or
       anywhere on the button) opens the native picker via the JS handler. The
       full-size rendered box also lets showPicker() anchor correctly. */
    cursor: pointer;
    z-index: 2;
}
.date-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    background: var(--white);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
    margin-bottom: 8px;
    position: relative;
}
.date-filter-btn svg { flex-shrink: 0; color: var(--brand); }
.date-btn-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dates-inputs { display: flex; flex-direction: column; }

/* =====================================================
   My Bookings — Collapsible Table Redesign (feature 010)
===================================================== */

.bookings-page { padding: 32px 0 80px; }
.bookings-page__head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 0 28px;
}
.bookings-page__head .back-btn {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
}
.bookings-page__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    color: var(--brand);
    margin: 0;
    text-align: center;
}

.bookings-table-wrapper {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}

.bookings-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface, #FAF8F5);
    flex-wrap: wrap;
}
.bookings-table-toolbar__count {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
}

/* Filter inputs (Check in / Check out / Search) */
.bookings-filters {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bookings-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 10px);
    font-size: 13px;
    color: var(--text-muted);
    cursor: text;
    transition: border-color var(--transition), box-shadow var(--transition);
    min-width: 140px;
}
.bookings-filter:hover { border-color: var(--brand); }
.bookings-filter:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-tint);
}
.bookings-filter__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    pointer-events: none;
}
.bookings-filter__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0;
}
.bookings-filter__input::placeholder { color: var(--text-muted); }
.bookings-filter--date .bookings-filter__input {
    color: transparent;
}
.bookings-filter--date.is-filled .bookings-filter__input { color: var(--text-primary); }
.bookings-filter--date.is-filled .bookings-filter__placeholder { display: none; }
.bookings-filter__placeholder {
    position: absolute;
    inset-inline-start: 38px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}
.bookings-filter--date .bookings-filter__input::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}
.bookings-filter__input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.bookings-table-toolbar__count-num { font-weight: 700; color: var(--text-primary); margin-inline-end: 2px; }

/* Table */
.bookings-table--cards { width: 100%; border-collapse: collapse; }
.bookings-table--cards thead th {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface, #FAF8F5);
    padding: 14px 12px;
    text-align: start;
    border-bottom: 1px solid var(--border-light);
}
.bookings-table--cards thead th.col-more { text-align: center; }

.bookings-table--cards tr.date-row { border-bottom: 1px solid var(--border-light); transition: background var(--transition); cursor: pointer; }
.bookings-table--cards tr.date-row:hover { background: var(--surface, #FAF8F5); }
.bookings-table--cards tr.date-row.active { background: #FFF4EA; }
.bookings-table--cards tr.date-row.active td.col-more .arrow-icon { transform: translateY(-50%) rotate(180deg); }

.bookings-table--cards td {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--text-muted);
    vertical-align: middle;
}
.bookings-table--cards td.col-idx { width: 56px; font-weight: 600; color: var(--text-primary); }
.bookings-table--cards td.col-reservation {
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
}
.bookings-table--cards td.col-hotel { color: var(--text-primary); }
.bookings-table--cards td.col-price { font-weight: 600; color: var(--text-primary); }
.bookings-table--cards td.col-status { white-space: nowrap; }
.bookings-table--cards td.col-more { width: 48px; text-align: center; position: relative; }
.bookings-table--cards td.col-more .row-toggle {
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bookings-table--cards td.col-more .arrow-icon {
    display: inline-block;
    width: 13px;
    height: 7px;
    background-image: url("/assets/ebookings/images/icons/disabled-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

/* Status badge (dot prefix) */
.status-badge {
    display: inline-block;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    padding: 4px 10px 4px 22px;
    border-radius: 20px;
    position: relative;
    white-space: nowrap;
}
.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
}
/* Booking-status colour map (Approved / Booked / Rejected / Cancelled) */
.status-badge[data-status="approved"]             { background: #D1FAE5; color: #065F46; }
.status-badge[data-status="approved"]::before     { background: #10B981; }
.status-badge[data-status="final-order"]          { background: #D1FAE5; color: #065F46; }
.status-badge[data-status="final-order"]::before  { background: #10B981; }
.status-badge[data-status="preliminary-order"]            { background: #DBEAFE; color: #1E40AF; }
.status-badge[data-status="preliminary-order"]::before    { background: #3B82F6; }
.status-badge[data-status="booked"]               { background: #FEF3C7; color: #92400E; }
.status-badge[data-status="booked"]::before       { background: #F79009; }
.status-badge[data-status="rejected"]             { background: #FFE8E6; color: #B42318; }
.status-badge[data-status="rejected"]::before     { background: #F04438; }
.status-badge[data-status="cancelled"]            { background: var(--border-light); color: var(--text-muted); }
.status-badge[data-status="cancelled"]::before    { background: var(--text-muted); }
.status-badge--lg { font-size: 12px; padding: 5px 12px 5px 24px; }

/* Payment chip (raw Villa Order `status` field) */
.payment-chip {
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 6px 18px;
    border-radius: 6px;
    white-space: nowrap;
    /* Fallback badge styling so every payment status renders as a chip
       even if its specific status colour below isn't matched. */
    background: var(--border-light);
    color: var(--text-muted);
}
.payment-chip[data-booking-status="confirmed"]       { background: #D1FAE5; color: #065F46; }
.payment-chip[data-booking-status="pending-payment"] { background: #FEF3C7; color: #92400E; }
.payment-chip[data-booking-status="payment-failed"]  { background: #FFE8E6; color: #B42318; }
.payment-chip[data-booking-status="cancelled"]       { background: var(--border-light); color: var(--text-muted); }
.payment-chip[data-booking-status="draft"]           { background: #E0F2FE; color: #075985; }
.payment-chip[data-booking-status="paid"]            { background: #D1FAE5; color: #065F46; }
.payment-chip[data-booking-status="partial"]         { background: #FEF3C7; color: #92400E; }
.payment-chip[data-booking-status="not-paid"]        { background: #FFE8E6; color: #B42318; }
.payment-chip[data-booking-status="not-paid-checkout"] { background: #FFE8E6; color: #B42318; }
.payment-chip[data-booking-status="rejected"]        { background: var(--border-light); color: var(--text-muted); }
.payment-chip[data-booking-status="—"]               { background: var(--border-light); color: var(--text-muted); }

/* Details row (expanded) */
.bookings-table--cards tr.details-row { background: var(--surface, #FAF8F5); display: none; }
.bookings-table--cards tr.details-row.row-display { display: table-row; }
.bookings-table--cards tr.details-row > td { padding: 0; }
.details {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 28px;
    background: #FFF4EA;
    flex-wrap: wrap;
}
.details__image {
    width: 220px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.details__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Download-invoice card — replaces the property image in the expanded row. */
.details__invoice {
    width: 220px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
}
.details__invoice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    color: var(--brand);
    background: var(--white);
    border: 1px dashed var(--brand);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.details__invoice-btn:hover {
    background: var(--brand);
    color: var(--white);
    box-shadow: var(--shadow-brand);
}
.details__invoice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    transition: background var(--transition), color var(--transition);
}
.details__invoice-btn:hover .details__invoice-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}
.details__invoice-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

.details__info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.details__ref { font-size: 14px; font-weight: 700; color: var(--brand); margin: 0; }
.details__hotel {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}
.details__room { font-size: 13px; color: var(--brand); margin: 0; }
.details__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; justify-content: center; }
.details__countdown-row { display: flex; margin-top: 4px; justify-content: center; }
.details__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.details__actions .btn {
    font-size: 13px;
    font-weight: 600;
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-cancel-request {
    background: var(--brand);
    color: var(--white);
    border: 1.5px solid var(--brand);
    border-radius: 999px;
    padding: 0 22px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-cancel-request:hover {
    background: var(--brand-dark, #c95a1f);
    border-color: var(--brand-dark, #c95a1f);
    color: var(--white);
}
.btn-cancel-request--row {
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.details__policies-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.details__policies-actions .btn-cancel-request {
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 600;
}

.details__check {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.details__check p { margin: 0; font-size: 13px; line-height: 1.5; }
.details__label { color: var(--text-muted); display: block; }
.details__value { color: var(--text-primary); font-weight: 600; display: block; }

.details__policies { flex: 1; min-width: 220px; text-align: start; }
.details__policies-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-primary);
    margin: 0 0 10px;
    text-align: start;
}
.details__policies-body {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
    text-align: start;
}
.details__policies-list {
    list-style: disc;
    padding-inline-start: 18px;
    margin: 0 0 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: start;
}
.details__policies-list li { margin: 0 0 6px; }
.details__policies-list li:last-child { margin-bottom: 0; }
.details__policies-list strong { color: var(--text-primary); font-weight: 600; }
.details__policies-meta { font-size: 11px; color: var(--text-muted); margin: 0 0 4px; text-align: start; }
.details__policies-meta strong { color: var(--text-primary); font-weight: 600; }

/* Countdown */
.countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #FFEEDF;
    border: 1px solid #F79009;
    color: #92400E;
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.countdown__icon {
    width: 14px;
    height: 14px;
    background: url("/assets/ebookings/images/icons/timer.svg") no-repeat center / contain;
    display: inline-block;
}
.countdown--expired {
    background: #FFE8E6;
    border-color: #F04438;
    color: #B42318;
}

/* Empty states */
.bookings-empty-state {
    text-align: center;
    padding: 64px 20px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.bookings-empty-state__illustration {
    width: 96px;
    height: auto;
    opacity: 0.7;
    margin-bottom: 20px;
}
.bookings-empty-state__headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--text-primary);
    margin: 0 0 10px;
}
.bookings-empty-state__body {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 auto 24px;
    max-width: 420px;
    line-height: 1.6;
}
.bookings-empty-state__cta { display: inline-flex; }

.bookings-empty-tab {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface, #FAF8F5);
}
.bookings-empty-tab[hidden] { display: none; }
.bookings-empty-tab p { margin: 0; font-size: 14px; }

/* Responsive */
@media (max-width: 991px) {
    .bookings-table--cards thead th.col-hotel,
    .bookings-table--cards td.col-hotel { display: none; }
    .details__image { width: 100%; aspect-ratio: 16 / 9; }
    .details__invoice { width: 100%; aspect-ratio: auto; }
    .details__invoice-btn { flex-direction: row; height: auto; padding: 14px 18px; }
    .details__invoice-icon { width: 40px; height: 40px; }
    .details__check { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 18px; }
}
@media (max-width: 600px) {
    .bookings-page__head { flex-wrap: wrap; }
    .bookings-page__title { font-size: 26px; width: 100%; order: 2; margin-top: 12px; }
    .bookings-page__head .back-btn { position: static; transform: none; }
    .bookings-table--cards thead th.col-price,
    .bookings-table--cards td.col-price,
    .bookings-table--cards thead th.col-checkin,
    .bookings-table--cards td.col-checkin,
    .bookings-table--cards thead th.col-checkout,
    .bookings-table--cards td.col-checkout { display: none; }
    .details { padding: 16px; gap: 16px; }
    .bookings-table-toolbar { flex-direction: column; align-items: stretch; }
}

/* RTL mirroring */
[dir="rtl"] .bookings-page__head .back-btn { inset-inline-start: auto; inset-inline-end: 0; }


/* ==============================
   Room Info Modal
================================ */
.room-info-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: room-info-fade-in .18s ease-out;
}
.room-info-modal--closing { animation: room-info-fade-out .18s ease-in forwards; }
@keyframes room-info-fade-in  { from { opacity: 0; transform: none; } to { opacity: 1; } }
@keyframes room-info-fade-out { from { opacity: 1; } to { opacity: 0; } }

.room-info-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(2px);
}
.room-info-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.room-info-inner {
    padding: 36px 36px 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.room-info-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #1a1a1a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: background .15s, transform .15s;
}
.room-info-close:hover { background: rgba(0,0,0,0.06); transform: rotate(90deg); }

.room-info-header {
    text-align: center;
    padding: 4px 8px 0;
}
.room-info-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.room-info-subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    color: #6b6b6b;
    font-weight: 500;
}
.room-info-subtitle::before { content: ""; }

/* Splide overrides — main carousel */
.room-info-main {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f3f3f3;
}
.room-info-main .splide__track,
.room-info-main .splide__list,
.room-info-main .splide__slide {
    height: 100%;
}
.room-info-main .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}
.room-info-main .splide__arrow {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.92);
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.room-info-main .splide__arrow svg { fill: #444; width: 12px; height: 12px; }
.room-info-main .splide__arrow:hover { background: #fff; }
.room-info-main .splide__arrow--prev { left: 10px; }
.room-info-main .splide__arrow--next { right: 10px; }

/* Thumbnail strip */
.room-info-thumbs.splide {
    margin: 0;
    padding: 0;
}
.room-info-thumbs .splide__slide {
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    opacity: 0.85;
}
.room-info-thumbs .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.room-info-thumbs .splide__slide:hover { transform: translateY(-1px); opacity: 1; }
.room-info-thumbs .splide__slide.is-active {
    border-color: var(--brand, #C85520);
    opacity: 1;
}

.room-info-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.room-info-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}
.room-info-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #555;
}
.room-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.room-info-tags .card-tag {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--brand-tint, #FDF0E8);
    color: var(--brand-dark, #9F3F15);
    font-weight: 600;
}

@media (max-width: 480px) {
    .room-info-modal { padding: 14px; }
    .room-info-card { max-width: 100%; border-radius: 16px; }
    .room-info-inner { padding: 22px 18px 18px; gap: 14px; }
    .room-info-title { font-size: 20px; }
}


/* ==============================
   Responsive Layer — Amber Oasis
   --------------------------------------------------------------
   Carries the desktop design language down to phones and tablets
   without introducing new visual vocabulary. Reuses existing
   tokens (--brand, --shadow-*, --radius-*, --font-display) and
   existing class names (.hotel-card, .search-card, .hotel-info,
   .room-details, .booking-form-wrapper, .custom-navbar, …).
   --------------------------------------------------------------
   Breakpoints, in plain language:
     ≤ 480 — small phones (iPhone SE / older Android)
     ≤ 767 — large phones / phablets
     ≤ 991 — tablet portrait
     ≥ 992 — desktop (unchanged from above)
================================ */

:root {
    --rsp-tap:      44px;
    --rsp-tap-lg:   52px;
    --rsp-pad-sm:   18px;
    --rsp-pad-md:   28px;
    --rsp-pad-lg:   40px;
}

/* Container gutters scale with the viewport so the page never feels
   pinched at small widths and never floats untethered at medium ones. */
@media (max-width: 991px) {
    .container { padding-inline: clamp(20px, 4vw, 32px); }
}
@media (max-width: 480px) {
    .container { padding-inline: var(--rsp-pad-sm); }
}

/* ──────────────────────────────────────────────────────────────
   Header & navbar
   The desktop header is sticky-glass at 74px. On phones we tighten
   to 64px, shrink the logo, and let the auth/profile buttons size
   to their content so the row never wraps below 360px.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .custom-navbar {
        height: 64px;
        max-height: 64px;
    }
    .custom-navbar .logo-wrapper {
        width: 92px;
        height: 40px;
        flex: 0 0 auto;          /* keep the logo at full size; never let an
                                    overflowing button row squeeze it off-screen */
    }
    .custom-navbar .btns {
        gap: 8px !important;
        min-width: 0;            /* let the button group shrink to fit rather than
                                    overflow and push the logo out of view */
    }
    .custom-navbar .btns .btn {
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 38px;
        padding: 4px 10px;
        font-size: 12.5px;
        line-height: 1.15;
        letter-spacing: 0;
        /* Let the auth labels wrap to two lines when the row is tight, rather
           than staying on one line and overflowing into each other. */
        white-space: normal;
        text-align: center;
    }
    /* Reclaim horizontal space on phones so the logo + both auth buttons fit:
       drop the globe glyph (the EN/AR code still shows the language) and tighten
       the switcher's own padding. */
    .custom-navbar .lang-switcher__icon { display: none; }
    .custom-navbar .btns .lang-switcher__btn { padding-inline: 8px; }
    .custom-navbar .btns .btn.profile-btn {
        padding: 6px 10px;
    }
    .profile-btn .user-name {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .profile-btn .fa-chevron-down {
        margin-left: 6px !important;
    }
}
@media (max-width: 380px) {
    .custom-navbar { padding-inline: 12px; }
    .custom-navbar .logo-wrapper { width: 82px; height: 36px; }
    .custom-navbar .btns { gap: 6px !important; }
    .custom-navbar .btns .btn { padding: 4px 8px; font-size: 12px; height: auto; min-height: 36px; }
    .custom-navbar .btns .lang-switcher__btn { padding-inline: 6px; }
    .profile-btn .user-name { display: none; }
    .profile-btn .user-avatar { margin-right: 0; }
}

/* ──────────────────────────────────────────────────────────────
   Hero
   The hero is brand-coloured with an oversized headline. We keep
   the type proportional with clamp() and tighten the vertical
   rhythm so the hotel-list section tucks in cleanly underneath.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .hero-section {
        padding-top: 56px;
        padding-bottom: 200px;
    }
    .hero-section .hero-img-wrapper {
        width: 148px;
        height: 74px;
        margin-bottom: 22px;
    }
    .hero-section p.hero-text {
        font-size: clamp(28px, 5vw + 12px, 44px);
        padding-inline: 24px;
    }
}
@media (max-width: 480px) {
    .hero-section {
        padding-top: 44px;
        padding-bottom: 168px;
    }
    .hero-section .hero-img-wrapper {
        width: 124px;
        height: 64px;
        margin-bottom: 18px;
    }
    .hero-section p.hero-text {
        font-size: clamp(26px, 7vw, 32px);
        padding-inline: 18px;
    }
}

/* ──────────────────────────────────────────────────────────────
   Home page — hotel-list section
   The desktop layout sits cards in a 2-up flex with -80px overlap
   into the hero. On tablets we drop to a single-column rhythm so
   each card gets its own breathing room, and on phones we soften
   the wrapper's padding and corner radius to match the hero.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .hotel-list {
        margin-top: -64px;
        margin-bottom: 56px;
    }
    .hotel-list-wrapper {
        padding: 28px;
        border-radius: 22px;
    }
    .cards-flex { gap: 24px; }
    .hotel-card {
        flex: 0 0 100%;
        height: 320px;
    }
}
@media (max-width: 480px) {
    .hotel-list {
        margin-top: -56px;
        margin-bottom: 48px;
    }
    .hotel-list-wrapper {
        padding: 20px;
        border-radius: 20px;
    }
    .cards-flex { gap: 20px; }
    .hotel-card {
        height: 268px;
        border-radius: var(--radius-md);
    }
    .hotel-card .hotel-card-overlay { padding-bottom: 0; }
    .hotel-card .hotel-name {
        font-size: 24px;
        line-height: 1.18;
    }
    .hotel-card .bottom-row { padding: 18px; }
    .hotel-card p.room-type { font-size: 13px; letter-spacing: 0.02em; }
    .hotel-card p.address { font-size: 12px; }
    .hotel-card a.book-btn {
        height: 38px;
        padding-inline: 18px;
        font-size: 14px;
    }
}

/* ──────────────────────────────────────────────────────────────
   Hotel detail — info section
   Desktop is a two-pane row (text left, image right). Tablets and
   phones stack to a single column with the image first becoming
   a generous hero strip rather than a side card.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* Stack as a column. We use `display: contents` on .left-div to
       hoist the back-btn / hotel-name / description / insights up to
       the same flex level as .right-div, so we can order them
       explicitly: back button first, image second, then the text. */
    .hotel-info .container > .d-flex.justify-content-between {
        flex-direction: column;
        gap: 28px;
    }
    .hotel-info { margin-top: 32px; margin-bottom: 48px; }

    .hotel-info .left-div {
        display: contents;
    }
    .hotel-info .right-div {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
    }

    /* Order: back-btn (top) → image → name → description → insights. */
    .hotel-info .left-div .back-btn { order: -2; align-self: flex-start; margin-bottom: 0; }
    .hotel-info .right-div          { order: -1; }
    /* Remaining left-div children default to order: 0 and follow the
       image in source order (hotel-name → hotel-preiv → insights). */

    /* Desktop wraps the image in a bordered card with 44px of negative
       offset on the inner image (so it visually breaks out). On mobile
       drop the card chrome and the absolute positioning entirely so
       the image just fills its container. */
    .hotel-info .right-div .image-card {
        border: 0;
        height: auto;
        border-radius: var(--radius-md);
    }
    .hotel-info .right-div .image-wrapper {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
    }
    .hotel-info .right-div .image-wrapper img {
        width: 100%;
        height: auto;
        max-height: 380px;
        object-fit: cover;
        border-radius: var(--radius-md);
    }

    .hotel-info .insights {
        flex-wrap: wrap;
        gap: 18px;
    }
}
@media (max-width: 480px) {
    .hotel-info .hotel-name {
        font-size: clamp(26px, 6vw + 8px, 34px);
    }
    .hotel-info .hotel-preiv {
        font-size: 15px;
        line-height: 1.6;
    }
    .hotel-info .image-wrapper img { max-height: 260px; }
    .hotel-info .insights { gap: 14px; }
}

/* ──────────────────────────────────────────────────────────────
   Hotel detail — embedded search form
   Goes from a single-row flex to a 2-up grid on tablets, then a
   single column on phones. Submit button always anchors the form.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .search-section .search-form-wrapper {
        margin-inline: 0;
    }
    .search-section .search-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: stretch;
    }
    .search-section .search-form > * {
        width: 100%;
        min-width: 0;
    }
    .search-section .search-form .search-btn {
        grid-column: 1 / -1;
        width: 100%;
        height: var(--rsp-tap-lg);
        padding-inline: 24px;
    }
}
@media (max-width: 600px) {
    .search-section .search-form {
        grid-template-columns: 1fr;
    }
    .search-section .search-form .form-custom-select,
    .search-section .search-form .check-available,
    .search-section .search-form .date-picker-wrapper {
        min-height: var(--rsp-tap-lg);
    }

    /* Drop the icon padding + decorative pseudo-elements on phones.
       The desktop's 72/130px left-padding (for the leading icon and
       "Person" label) crams the select's real content area into a
       thin strip and confuses the native option list's positioning.
       Render selects as simple full-width pills here. */
    .search-section .search-form .form-custom-select,
    .home-search-wrapper .form-custom-select {
        width: 100%;
        padding-left: 18px;
        padding-right: 40px;
        background-position: right 14px center;
        background-size: 14px 8px;
        min-width: 0;
        text-align: left;
        font-size: 14px;
    }
    .search-section .search-form .select-wrapper.select-person .form-custom-select,
    .home-search-wrapper .select-wrapper.select-person .form-custom-select {
        width: 100%;
        padding-left: 18px;
        text-align: left;
    }
    .search-section .search-form .select-wrapper::before,
    .search-section .search-form .select-wrapper::after,
    .home-search-wrapper .select-wrapper::before,
    .home-search-wrapper .select-wrapper::after {
        display: none !important;
    }

    /* Native option lists inherit any text-align / direction set on
       the select. Reset both so the popup reads left-to-right cleanly. */
    .search-section .search-form .form-custom-select option,
    .home-search-wrapper .form-custom-select option {
        text-align: left;
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Standalone home-page search form (rendered when present) — same
   approach but namespaced to .home-search-wrapper. */
@media (max-width: 991px) {
    .home-search-wrapper {
        margin-inline: clamp(20px, 5vw, 40px);
    }
    .home-search-wrapper .search-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .home-search-wrapper .search-form > * {
        width: 100%;
        min-width: 0;
    }
    .home-search-wrapper .search-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
}
@media (max-width: 600px) {
    .home-search-wrapper .search-form { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   Map section
   Brand-coloured panel with rounded top corners and a fixed map
   height. We tighten padding and corner radius proportionally.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .map-section {
        padding: 36px 32px;
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }
    .map-section .map-wrapper { height: 320px; }
}
@media (max-width: 480px) {
    .map-section {
        padding: 22px 18px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
    .map-section .map-wrapper {
        height: 260px;
        border-radius: var(--radius-md);
    }
}

/* ──────────────────────────────────────────────────────────────
   Search results page
   Desktop is filters-left / results-right (23 / 77 split). Tablet
   stacks them with the filter as a card-style band above results.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .search-wrapper {
        flex-direction: column;
        gap: 8px;
        padding: 0 20px;
    }
    .filters-div,
    .list-div {
        width: 100%;
        min-width: 0;
        margin-top: 0;
    }
    .filters-div { padding: 24px 0 0; }
    .filters-div .filters {
        padding: 24px;
        background: var(--white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
    .list-div { padding: 24px 0 60px; }
    .cards-container {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .reservation-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .reservation-table { min-width: 480px; }
}
@media (max-width: 767px) {
    /* ──────────────────────────────────────────────────────────
       Filter pill-bar (small screens only)
       Each .filter-group collapses to a pill; tapping the
       .filter-name reveals .filter-panel-content as a dropdown
       anchored below the pill row, full width of the card. The
       desktop / tablet column layout is preserved at ≥768px.
       ────────────────────────────────────────────────────────── */
    .filters-div .filters {
        position: relative;
        padding: 12px;
        overflow: visible;
    }
    .filters-div .filters .search-form {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 8px;
        position: relative;
        min-width: 0;
        padding: 0 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .filters-div .filters .search-form::-webkit-scrollbar { height: 3px; }
    .filters-div .filters .search-form::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }
    .filters-div .filter-group {
        flex: 0 0 auto;
        min-width: 0;
        padding: 0;
        margin: 0;
        border: none;
        position: static;
    }
    .filters-div .filter-group:last-child {
        border: none;
        padding: 0;
        margin: 0;
    }

    /* The <p class="filter-name"> heading IS the pill button */
    .filters-div .filter-group > .filter-name {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 12px;
        margin: 0;
        background: var(--white);
        border: 1.25px solid var(--border);
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--text-primary);
        text-transform: none;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        transition: border-color var(--transition),
                    background var(--transition),
                    color var(--transition);
    }
    .filters-div .filter-group > .filter-name::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translate(-1px, -1px);
        opacity: 0.65;
        margin-left: 2px;
        transition: transform 180ms ease;
    }
    .filters-div .filter-group.is-open > .filter-name {
        border-color: var(--brand);
        background: var(--brand-tint);
        color: var(--brand-dark);
    }
    .filters-div .filter-group.is-open > .filter-name::after {
        transform: rotate(-135deg) translate(-1px, -1px);
    }
    .filters-div .filter-group.has-selection > .filter-name {
        border-color: var(--brand);
        background: var(--brand-tint);
        color: var(--brand-dark);
        font-weight: 600;
    }

    /* Panel content — collapsed by default, dropdown when open */
    .filters-div .filter-group > .filter-panel-content {
        display: none;
    }
    /* Pillstrip uses overflow-x for horizontal scroll, so the panel
       can't be `absolute` inside it (would be clipped). Use `fixed`
       and let JS keep --ebpanel-* in sync with .search-form's rect. */
    .filters-div .filter-group.is-open > .filter-panel-content {
        display: block;
        position: fixed;
        left: var(--ebpanel-left, 12px);
        top: var(--ebpanel-top, 60px);
        width: var(--ebpanel-width, calc(100vw - 24px));
        z-index: 1000;
        padding: 16px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 12px 32px rgba(24, 15, 5, 0.14),
                    0 2px 6px rgba(24, 15, 5, 0.06);
        max-height: 70vh;
        overflow-y: auto;
        animation: filterPanelDropIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Inside the dropdown panel, reveal the full set of room-type
       options at once and hide the desktop "Show more" toggle. */
    .filters-div .filter-group.is-open .more-options {
        display: block !important;
    }
    .filters-div .filter-group.is-open .show-more-btn {
        display: none !important;
    }
    .btns-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px !important;
    }
    .btns-row .back-btn { align-self: flex-start; }

    /* Promoted back button — JS hoists .back-btn to be the first
       child of .search-wrapper on mobile so it sits above the
       filter pillbar and the results list. */
    .search-wrapper > .back-btn {
        align-self: flex-start;
        margin: 4px 0 4px;
        order: -1;
    }
    .sort-container,
    .sort-container select {
        width: 100%;
    }
    .pagination-controls {
        flex-wrap: wrap;
        gap: 12px;
    }
    .reservation-panel { padding: 18px; border-radius: var(--radius-md); }
    /* Restack the reservation table into one card per item so it fits any phone
       width — no horizontal scroll. Overrides the ≤991px min-width/overflow. */
    .reservation-panel { overflow-x: visible; }
    .reservation-table { min-width: 0; font-size: 13px; }
    .reservation-table thead { display: none; }
    .reservation-table tbody,
    .reservation-table tr,
    .reservation-table td { display: block; width: 100%; }
    .reservation-table tr {
        border: 1px solid var(--border-light);
        border-radius: var(--radius-sm);
        background: var(--surface);
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .reservation-table td {
        border: none;
        padding: 3px 0;
    }
    .reservation-table .res-cell-name { font-size: 14px; margin-bottom: 2px; }
    /* Give each date its column header as an inline label. */
    .reservation-table .res-cell-date::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--text-muted);
    }
    /* Keep the stepper + delete on one row; push delete to the far edge. */
    .reservation-table .res-actions {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 10px;
    }
    .reservation-table .res-actions .panel-delete { margin-inline-start: auto; }
    .reservation-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .reservation-footer #confirmBtn,
    .reservation-footer #confirmBtn.btn {
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
    .empty-state { padding: 36px 18px; }
}
@keyframes filterPanelDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────
   Search-result cards (.search-card)
   The desktop card is a generous 2-up grid item with image on top
   and details below. On phones we make it full-width, soften the
   image height, and stack the price/CTA so the CTA is full-width.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .cards-container .search-card {
        width: 100%;
        max-width: 100%;
    }
    .cards-container .search-card .card-img-wrapper {
        width: 100%;
        height: clamp(180px, 50vw, 240px);
    }
    .search-card .card-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .search-card .card-details {
        padding: 18px;
    }
    .search-card .card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .search-card .card-footer-left { width: 100%; }
    .search-card .book-now-btn {
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
    .search-card .room-price {
        font-variant-numeric: tabular-nums;
        align-self: flex-end;
        font-weight: 700;
    }
    .search-card .booking-counter {
        width: 100%;
        justify-content: space-between;
    }
    .search-card .counter-btn {
        min-width: var(--rsp-tap);
        min-height: var(--rsp-tap);
    }
}

/* ──────────────────────────────────────────────────────────────
   Room detail page
   Desktop has gallery + booking pane side-by-side. Tablets dock
   the booking pane as a sticky bottom bar so the CTA is always
   reachable. Thumbnails become a horizontal scroller.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .room-details .gallery-row {
        flex-direction: column;
        gap: 24px;
    }
    .room-details .gallary,
    .room-details .booking-wrapper {
        width: 100%;
        max-width: 100%;
    }
    .room-details .main-image img {
        width: 100%;
        height: auto;
        max-height: 50vh;
        object-fit: cover;
        border-radius: var(--radius-md);
    }
    .room-details .thumbnails {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-block: 6px;
        scrollbar-width: thin;
    }
    .room-details .thumbnails::-webkit-scrollbar { height: 6px; }
    .room-details .thumbnails .thumb {
        flex: 0 0 88px;
        width: 88px;
        height: 64px;
        object-fit: cover;
        border-radius: 8px;
    }
    .room-details .booking-wrapper {
        position: sticky;
        bottom: 0;
        background: var(--white);
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: 0 -8px 32px rgba(24, 15, 5, 0.10);
        z-index: 5;
    }
    .room-details .booking-wrapper .price { font-variant-numeric: tabular-nums; }
    .room-details .book-now-btn {
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
    .room-details .room-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .room-details .about-room { font-size: 15px; line-height: 1.6; }
}
@media (max-width: 480px) {
    .room-details .room-items { grid-template-columns: 1fr; }
    .room-details .room-title {
        font-size: clamp(24px, 6vw + 6px, 30px);
    }
}

/* ──────────────────────────────────────────────────────────────
   Booking-details page (form + summary)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .booking-details > .d-flex.justify-content-between {
        flex-direction: column;
        gap: 28px;
        gap: var(--rsp-pad-md);
    }
    .booking-details > .d-flex.justify-content-between > * {
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width: 767px) {
    .booking-details {
        padding-inline: 18px;
    }
    .booking-details .form-head {
        font-size: clamp(22px, 5vw + 6px, 30px);
    }
    .booking-form-wrapper .row { margin-inline: 0; }
    .booking-form-wrapper .row > [class^="col-"],
    .booking-form-wrapper .row > [class*=" col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-inline: 0;
        margin-bottom: 16px;
    }
    .booking-form-wrapper .form-control,
    .booking-form-wrapper select,
    .booking-form-wrapper textarea {
        width: 100%;
        min-height: var(--rsp-tap);
        box-sizing: border-box;
    }
    .booking-form-wrapper textarea { min-height: 120px; }
    .booking-form-wrapper .btn-book,
    .booking-form-wrapper .page-card-actions .btn {
        width: 100%;
        min-height: var(--rsp-tap-lg);
        font-size: 16px;
    }

    .promo-code .row {
        flex-direction: column;
        gap: 10px;
    }
    .promo-code-btn {
        width: 100%;
        min-height: var(--rsp-tap);
    }

    /* Summary table built by the page's inline JS. */
    .booking-price-summary table { width: 100%; }
    .booking-price-summary table tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-block: 10px;
        border-bottom: 1px solid var(--border-light);
    }
    .booking-price-summary table tr:last-child { border-bottom: 0; }
    .booking-price-summary table td {
        padding: 0;
        font-size: 14px;
    }
    .booking-price-summary table td:first-child { color: var(--text-muted); }
    .booking-price-summary table td:last-child {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .summary-grand-total td {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
    }
    .booking-dates-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .booking-room-card { padding: 14px; }
    .booking-room-card .booking-room-price-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .booking-room-price-total,
    .booking-room-price-per-night {
        font-variant-numeric: tabular-nums;
    }
}

/* ──────────────────────────────────────────────────────────────
   My Bookings — the base CSS already collapses some columns at
   ≤991 and ≤600. We extend for the smallest phones and tighten
   the toolbar to a stack.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Ensure the page never forces the document wider than the viewport. */
    .bookings-page,
    .bookings-page > .container,
    .bookings-table-wrapper,
    .bookings-table-toolbar,
    .bookings-filters,
    .bookings-filter,
    .bookings-table--cards { max-width: 100%; box-sizing: border-box; min-width: 0; }
    .bookings-page > .container { padding-inline: 12px; }

    .bookings-page__head { gap: 12px; }
    .bookings-table-wrapper { padding: 0; border-radius: var(--radius-md); overflow: hidden; }
    .bookings-table-toolbar {
        gap: 12px;
        padding: 12px 12px 4px;
    }
    .bookings-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    /* Release the desktop 140px floor so each filter cell shrinks with its grid column. */
    .bookings-filter { min-width: 0; padding: 7px 10px; }
    .bookings-filter--search { grid-column: 1 / -1; }
    .bookings-filter__input {
        width: 100%;
        min-width: 0;
        min-height: var(--rsp-tap);
    }

    /* Table sized to its container; rely on auto layout so each column gets
       just enough space for its content. */
    .bookings-table--cards { width: 100%; }
    .bookings-table--cards thead th { font-size: 11px; padding: 10px 8px; }
    .bookings-table--cards td { padding: 14px 8px; vertical-align: middle; }
    .bookings-table--cards thead th.col-reservation,
    .bookings-table--cards td.col-reservation { font-size: 12.5px; white-space: nowrap; }
    .bookings-table--cards td.col-status { white-space: nowrap; }
    .bookings-table--cards th:first-child,
    .bookings-table--cards tr td:first-child { padding-left: 12px !important; }
    .bookings-table--cards tr td:last-child { padding-right: 8px !important; }

    /* Expanded details — drop the fixed 180px column, breathe less */
    .details { padding: 16px; gap: 14px; flex-direction: column; }
    .details__image { width: 100%; aspect-ratio: 16 / 9; max-height: 180px; }
    .details__invoice { width: 100%; aspect-ratio: auto; }
    .details__invoice-btn { flex-direction: row; height: auto; padding: 14px 18px; }
    .details__info { width: 100%; min-width: 0; gap: 6px; }
    .details__chips,
    .details__countdown-row { justify-content: flex-start; }
    .details__hotel { font-size: 17px; }
    .details__check {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 18px;
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-sm);
    }
    .details__check p { flex: 1 1 calc(50% - 18px); min-width: 110px; font-size: 12.5px; }
    .details__policies { width: 100%; min-width: 0; }
    .details__policies-title { font-size: 13px; }
    .details__policies-body { font-size: 11.5px; line-height: 1.6; }
    .details__policies-list { font-size: 11.5px; line-height: 1.6; }
    .details__policies-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
    .bookings-page__title { font-size: 22px; }
    .bookings-page > .container { padding-inline: 10px; }
    .bookings-table--cards thead th.col-idx,
    .bookings-table--cards td.col-idx { display: none; }
    .bookings-table--cards thead th { font-size: 10.5px; letter-spacing: 0.04em; padding: 9px 6px; }
    .bookings-table--cards td { padding: 12px 6px; }
    .bookings-table--cards td.col-reservation { font-size: 12px; font-weight: 600; text-align: center; }
    .bookings-table--cards td.col-status { font-size: 11.5px; }
    .bookings-table--cards th:first-child,
    .bookings-table--cards tr td:first-child { padding-left: 10px !important; }
    .bookings-table--cards tr td:last-child { padding-right: 6px !important; }
    .bookings-table-toolbar { padding: 10px 10px 4px; gap: 10px; }
    .bookings-filter { padding: 6px 9px; gap: 6px; }
    .bookings-filter__icon { width: 14px; height: 14px; }
    .bookings-filter__input { font-size: 12.5px; }
    table.bookings-table tr td:last-child {padding: 0 !important; }

    /* Compact status pill */
    .status-badge { font-size: 10.5px; padding: 3px 10px 3px 22px; }
    .status-badge::before { left: 8px; width: 7px; height: 7px; }
    .status-badge--lg { font-size: 11px; padding: 4px 11px 4px 22px; }
    .payment-chip { font-size: 10.5px; padding: 3px 10px; }

    /* Row toggle — smaller hit zone, still tappable */
    .bookings-table--cards td.col-more .row-toggle { width: 30px; height: 30px; }
    .bookings-table--cards td.col-more .arrow-icon { width: 9px; height: 9px; }

    /* Details — single column, lighter image */
    .details { padding: 14px; gap: 12px; }
    .details__image { aspect-ratio: 3 / 2; max-height: 150px; }
    .details__hotel { font-size: 16px; }
    .details__ref { font-size: 11.5px; }
    .details__room { font-size: 12px; }
    .details__check { padding: 10px 12px; gap: 8px 14px; }
    .details__check p { flex: 1 1 100%; font-size: 12px; }
    .details__policies-title { font-size: 12.5px; }
    .details__policies-body { font-size: 11px; }
    .details__policies-list { font-size: 11px; }
    .details__policies-actions .btn-cancel-request {
        width: 100%;
        min-height: var(--rsp-tap);
    }

    .countdown { font-size: 12px; padding: 5px 12px; }

    .bookings-empty-state { padding: 36px 18px; }
    .bookings-empty-state__cta {
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
}

/* ──────────────────────────────────────────────────────────────
   Payment-method page
   Base CSS has the basics at ≤576px. We add tap-target sizing for
   each radio tile and a generous Confirm button.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .payment-card-wrapper { padding: 24px; }
    .payment-method-card { padding: 18px; }
    .payment-radio-option {
        min-height: 64px;
        padding: 16px 18px;
    }
    .payment-confirm-btn {
        width: 100%;
        min-height: var(--rsp-tap-lg);
        font-size: 16px;
    }
}

/* ──────────────────────────────────────────────────────────────
   Payment-result page — fits 375×667 without scrolling
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .payment-result-card {
        padding: 24px 20px !important;
        margin: 0 !important;
        min-height: calc(100vh - 120px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    @supports (height: 100dvh) {
        .payment-result-card { min-height: calc(100dvh - 120px); }
    }
    .result-illustration {
        width: clamp(140px, 40vw, 200px) !important;
    }
    .result-title { font-size: clamp(20px, 4vw + 8px, 26px); }
    .result-subtitle { font-size: 14px; }
    .result-actions { width: 100%; }
    .result-actions .btn {
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
    .result-detail-table {
        max-width: 320px;
        margin-inline: auto;
        width: 100%;
    }
}

/* ──────────────────────────────────────────────────────────────
   Login pages (.custom-auth used by both /login and /login-admin)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .custom-auth {
        padding: 32px 18px;
    }
    .custom-auth .page-card,
    .custom-auth .login-content {
        width: 100%;
        max-width: 440px;
        margin-inline: auto;
        padding: 24px;
        box-sizing: border-box;
    }
    .custom-auth .form-control {
        width: 100%;
        min-height: var(--rsp-tap);
    }
    .custom-auth .btn-block,
    .custom-auth .btn-login,
    .custom-auth .btn-forgot,
    .custom-auth .btn-login-with-email-link {
        width: 100%;
        min-height: var(--rsp-tap-lg);
    }
    /* Auth toggle + card chrome for ≤991px are governed by the block below
       (mirrors the desktop card style); no toggle overrides needed here. */
    .custom-auth .logo-wrapper img {
        max-width: 132px;
        height: auto;
    }
}

/* ──────────────────────────────────────────────────────────────
   Footer — collapses from 4 columns to 2 to 1
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    footer .site-map .container > .d-flex {
        flex-wrap: wrap;
        gap: 36px;
        align-items: flex-start;
    }
    footer .site-map .footer-logo-div,
    footer .site-map .ul-wrapper {
        flex: 1 1 calc(50% - 18px);
        max-width: 100%;
        width: auto;
    }
}
@media (max-width: 600px) {
    footer .site-map { padding-block: 36px; }
    footer .site-map .container > .d-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
    footer .site-map .footer-logo-div,
    footer .site-map .ul-wrapper {
        flex: none;
        width: 100%;
    }
    footer .copy-right-wrapper { padding-block: 18px; }
    footer .copy-right-wrapper p { font-size: 13px; text-align: center; }
}

/* ──────────────────────────────────────────────────────────────
   Date-range picker — viewport fit on phones
   The library positions the picker with inline top/left:Xpx and
   position:absolute, so it drifts as the page scrolls and stacks
   both months. We pin it fixed-and-centered in the viewport and
   show a single calendar (the JS sets linkedCalendars:false on
   phones so the one visible month can navigate freely). Overrides
   use !important to beat the library's inline styles.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 360px !important;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        font-size: 14px;
    }
    .daterangepicker .calendar-table { font-size: 14px; }
    /* One calendar only: hide the second month and let the first fill
       the width (drop the divider border it carries in double mode). */
    .daterangepicker .drp-calendar.right { display: none !important; }
    .daterangepicker.double .drp-calendar.left,
    .daterangepicker .drp-calendar.left {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-right: none !important;
        clear: both;
    }
    .daterangepicker .drp-buttons {
        display: flex;
        gap: 8px;
    }
    .daterangepicker .drp-buttons .btn {
        flex: 1;
        min-height: var(--rsp-tap);
    }
}

/* ──────────────────────────────────────────────────────────────
   Breadcrumb — drop the desktop's 82px left padding (which pushes
   the text off-screen on phones), give it a clear top margin so
   it isn't hidden under the sticky navbar, and let it scroll
   horizontally if the current-page label is long.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .breadcrumb-wrapper {
        padding-left: clamp(20px, 4vw, 32px);
        padding-right: clamp(20px, 4vw, 32px);
        margin-top: 24px;
    }
}
@media (max-width: 600px) {
    .breadcrumb-wrapper {
        padding-left: 18px;
        padding-right: 18px;
        margin-top: 20px;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .breadcrumb-wrapper::-webkit-scrollbar { display: none; }
    .breadcrumb-wrapper a.breadcrumb-link,
    .breadcrumb-wrapper .breadcrumb-separator,
    .breadcrumb-wrapper .breadcrumb-current { font-size: 14px; }
    .breadcrumb-current {
        display: inline-block;
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}

/* ──────────────────────────────────────────────────────────────
   Cross-cutting — modals, long content, image responsiveness
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .modal,
    .modal-dialog,
    [role="dialog"] {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }
    @supports (height: 100dvh) {
        .modal,
        .modal-dialog,
        [role="dialog"] {
            max-height: calc(100dvh - 32px);
        }
    }

    .hotel-card .hotel-name,
    .search-card .room-name,
    .search-card .room-subtitle,
    .bookings-page__title,
    .booking-details .form-head,
    .payment-card-wrapper .card-head {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .room-price,
    .hotel-card .price,
    .search-card .room-price,
    .summary-grand-total td:last-child,
    .summary-subtotal td:last-child {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .hero-img-wrapper img,
    .image-card img,
    .image-wrapper img,
    .gallary .main-image img,
    .room-details img,
    .hotel-card-overlay img,
    .card-img-wrapper img {
        max-width: 100%;
        height: auto;
    }
}

/* No element should ever cause horizontal page-level scroll. */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
}

/* ──────────────────────────────────────────────────────────────
   Polish — accessibility, motion, anchor offsets
   ────────────────────────────────────────────────────────────── */

/* Sticky header is 74px on desktop, 64px on phones. Anchored
   jumps need that margin so the target isn't hidden under it. */
html { scroll-padding-top: 88px; }
@media (max-width: 767px) {
    html { scroll-padding-top: 76px; }
}

/* Honour the user's reduced-motion preference. The existing CSS
   uses scaleIn / fadeUp / hover transforms; freeze them when the
   OS asks. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:    0.01ms !important;
        animation-iteration-count: 1   !important;
        transition-duration:   0.01ms !important;
        scroll-behavior:       auto    !important;
    }
    .hotel-card:hover,
    .button-primary:hover,
    .back-btn:hover {
        transform: none !important;
    }
}

/* Visible focus ring on interactive elements that don't get one
   by default. Keeps keyboard nav usable without overriding the
   carefully-tuned hover state on .button-primary / .button-light. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* User-menu dropdown on phones — keep it inside the viewport
   regardless of how far right the trigger sits. */
@media (max-width: 480px) {
    .custom-user-menu .dropdown-menu {
        position: fixed !important;
        top: 64px !important;
        right: 12px !important;
        left: 12px !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        transform-origin: top center;
    }
    .custom-user-menu .dropdown-menu .dropdown-item {
        padding: 14px 16px !important;
        min-height: var(--rsp-tap);
    }
}

/* ──────────────────────────────────────────────────────────────
   Compaction — tighter spacing + smaller display type on phones
   This pass sits last in the cascade so it overrides earlier
   rules in this layer without touching the desktop base above.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Hero — less vertical air, more proportional headline. */
    .hero-section {
        padding-top: 40px;
        padding-bottom: 160px;
    }
    .hero-section .hero-img-wrapper {
        width: 124px;
        height: 62px;
        margin-bottom: 16px;
    }
    .hero-section p.hero-text {
        font-size: clamp(22px, 5vw + 4px, 32px);
        padding-inline: 20px;
    }

    /* Hotel-list — less overlap, tighter wrapper, shorter cards. */
    .hotel-list { margin-top: -48px; margin-bottom: 40px; }
    .hotel-list-wrapper { padding: 20px; border-radius: 18px; }
    .cards-flex { gap: 18px; }
    .hotel-card { height: 260px; }
    .hotel-card .hotel-name { font-size: 22px; line-height: 1.18; }
    .hotel-card .bottom-row { padding: 16px; }
    .hotel-card p.room-type { font-size: 12px; }
    .hotel-card p.address { font-size: 12px; }

    /* Hotel-info — pull the section closer, tighten type and gaps. */
    .hotel-info { margin-top: 20px; margin-bottom: 36px; }
    .hotel-info .container > .d-flex.justify-content-between { gap: 20px; }
    .hotel-info .hotel-name { font-size: clamp(22px, 5vw + 4px, 28px); margin: 12px 0; }
    .hotel-info .hotel-preiv { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
    .hotel-info .insights { gap: 14px; }
    .hotel-info .insight p { font-size: 13px; }
    .hotel-info .right-div .image-wrapper img { max-height: 280px; }
    .hotel-info .left-div .back-btn { margin-bottom: 12px; }

    /* Hotel-detail search form — tighter gap. */
    .search-section { margin-bottom: 48px; }
    .search-section .search-form { gap: 10px; }

    /* Map — pull in. */
    .map-section { padding: 28px 22px; }
    .map-section .map-wrapper { height: 280px; }

    /* Room-detail — smaller title, tighter gallery. */
    .room-details .room-title { font-size: clamp(22px, 5vw + 4px, 28px); margin-bottom: 4px; }
    .room-details .room-subtitle { font-size: 13px; }
    .room-details .gallery-row { gap: 18px; }
    .room-details .main-image img { max-height: 38vh; }
    .room-details .thumbnails .thumb { flex-basis: 76px; width: 76px; height: 56px; }
    .room-details .booking-wrapper { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
    .room-details .booking-wrapper .title { font-size: 16px; margin-bottom: 4px; }
    .room-details .booking-wrapper .price { font-size: 18px; }
    .room-details .about-room { font-size: 14px; line-height: 1.55; }
    .room-details .about-room > p:first-child { font-size: 16px; margin-bottom: 6px; }
    .room-details .room-items li { font-size: 13px; }

    /* Booking-details — tighter heading, narrower row gap. */
    .booking-details > .d-flex.justify-content-between { gap: 16px; }
    .booking-details p.form-head {
        font-size: clamp(18px, 4.6vw + 2px, 24px);
        margin-top: 24px;
        margin-bottom: 12px;
        padding-left: 0;
    }
    .booking-form-wrapper .form-wrapper { padding: 18px 14px; }
    .booking-form-wrapper .section-title { font-size: 14px; margin-block: 12px 6px; }
    .booking-form-wrapper .row > [class^="col-"],
    .booking-form-wrapper .row > [class*=" col-"] { margin-bottom: 10px; }
    .booking-form-wrapper .form-label { font-size: 12px; margin-bottom: 3px; }
    .booking-form-wrapper .form-control { font-size: 13px; padding: 9px 11px; }
    .booking-details .room-details-wrapper { padding: 18px; }
    .booking-room-card .booking-room-name { font-size: 13px; }
    .booking-room-card .booking-room-price-per-night { font-size: 12px; }
    .booking-price-summary-title { font-size: 14px; margin-bottom: 6px; }

    /* My-bookings — smaller headline + toolbar text. */
    .bookings-page { padding-bottom: 56px; }
    .bookings-page__title { font-size: 22px; }
    .bookings-table-toolbar__count { font-size: 13px; }
    .bookings-table-toolbar__count-num { font-size: 18px; }
    .bookings-filter__input { font-size: 13px; }
    .details__hotel { font-size: 16px; }
    .details__ref { font-size: 12px; }

    /* Payment — smaller card chrome. */
    .page-container { padding-top: 32px !important; padding-bottom: 120px !important; }
    .payment-card-wrapper { padding: 20px; }
    .payment-card-wrapper p.card-head { font-size: 22px; margin-bottom: 4px; }
    .payment-card-wrapper p.card-sub-head { font-size: 13px; }
    .payment-method-card { padding: 16px; }
    .payment-method-card .method-card-title { font-size: 14px; margin-bottom: 12px; }
    .payment-radio-option { padding: 14px; min-height: 60px; }
    .payment-radio-option .radio-label { font-size: 14px; }

    /* Payment-result — proportional title and detail rows. */
    .payment-result-card { padding: 20px 18px !important; }
    .result-illustration { width: clamp(120px, 36vw, 180px) !important; }
    .result-title { font-size: 20px; }
    .result-subtitle { font-size: 13px; }
    .result-detail-table td { font-size: 13px; padding: 4px 0; }
    .result-check-circle { width: 56px !important; height: 56px !important; }
    .result-check-circle svg { width: 56px; height: 56px; }

    /* Login — slimmer card, smaller labels. */
    .custom-auth { padding: 20px 16px; }
    .custom-auth .page-card,
    .custom-auth .login-content { padding: 20px; }
    .custom-auth .form-label { font-size: 13px; margin-bottom: 4px; }
    .custom-auth .form-control { font-size: 14px; padding: 10px 12px; min-height: 44px; }
    .custom-auth .title { font-size: 18px; }
    .custom-auth .form-p { font-size: 14px; margin-bottom: 12px; }
    .custom-auth .auth-btns a { font-size: 13px; min-height: 40px; }

    /* Footer — tighter padding + smaller link list. */
    footer .site-map { padding-block: 36px; }
    footer .ul-wrapper p.ul-title { font-size: 14px; margin-bottom: 12px; }
    footer .ul-wrapper ul li a,
    footer .ul-wrapper ul li p { font-size: 13px; }
    footer .copy-right-wrapper p { font-size: 12px; }

    /* Search-results page — tighter sidebar + filter labels. */
    .filters-div { padding-top: 16px; }
    .filters-div .filters { padding: 18px; }
    .list-div { padding-block: 16px 40px; }
    .search-form p.filter-name { font-size: 11px; margin-bottom: 8px; }
    .filter-group { margin-block: 14px; }
    .search-card .room-name { font-size: 15px; }
    .search-card .room-subtitle { font-size: 12px; }
    .search-card .card-tag { font-size: 11px; padding: 3px 10px; }
    .search-card .room-price { font-size: 15px; }

    /* Section back-buttons — smaller height to match the new rhythm. */
    .back-btn { height: 38px; padding-left: 38px !important; padding-right: 14px !important; font-size: 14px; }
}

@media (max-width: 480px) {
    /* Phone-specific final pass — softest spacing. */
    .hero-section { padding-top: 32px; padding-bottom: 132px; }
    .hero-section .hero-img-wrapper { width: 108px; height: 54px; margin-bottom: 12px; }
    .hero-section p.hero-text { font-size: clamp(20px, 6vw, 26px); padding-inline: 16px; }

    .hotel-list { margin-top: -36px; margin-bottom: 32px; }
    .hotel-list-wrapper { padding: 16px; border-radius: 16px; }
    .cards-flex { gap: 14px; }
    .hotel-card { height: 224px; border-radius: var(--radius-sm); }
    .hotel-card .hotel-name { font-size: 19px; }
    .hotel-card .bottom-row { padding: 12px; }
    .hotel-card a.book-btn { height: 34px; padding-inline: 14px; font-size: 13px; }
    .hotel-list-empty { padding: 40px 18px; border-radius: 16px; }
    .hotel-list-empty__icon { width: 72px; height: 72px; margin-bottom: 18px; }
    .hotel-list-empty__headline { font-size: 20px; }
    .hotel-list-empty__body { font-size: 14px; }

    .hotel-info { margin-top: 16px; margin-bottom: 28px; }
    .hotel-info .hotel-name { font-size: clamp(20px, 5.5vw, 24px); margin: 8px 0; }
    .hotel-info .hotel-preiv { font-size: 13px; }
    .hotel-info .right-div .image-wrapper img { max-height: 220px; }

    .room-details .room-title { font-size: clamp(20px, 5.5vw, 24px); }
    .room-details .booking-wrapper .price { font-size: 16px; }

    .booking-details p.form-head {
        font-size: clamp(16px, 4.4vw, 20px);
        margin-top: 18px;
        margin-bottom: 10px;
        padding-left: 0;
    }
    .booking-form-wrapper { padding: 0; }

    .bookings-page__title { font-size: 20px; }

    .payment-card-wrapper p.card-head { font-size: 20px; }
    .payment-method-card .method-card-title { font-size: 13px; }

    .result-title { font-size: 18px; }
    .result-subtitle { font-size: 13px; line-height: 1.5; }

    .custom-auth { padding: 16px 14px; }
    .custom-auth .page-card,
    .custom-auth .login-content { padding: 18px; }

    footer .site-map { padding-block: 28px; }
    footer .copy-right-wrapper { padding-block: 14px; }

    .filters-div .filters { padding: 14px; }
    .breadcrumb-wrapper a.breadcrumb-link,
    .breadcrumb-wrapper .breadcrumb-separator,
    .breadcrumb-wrapper .breadcrumb-current { font-size: 13px; }
}

/* ============== Responsive Layer — end ====================== */


/* =============================================================================
   ===  LOGIN / SIGN-UP — RESPONSIVE REFINEMENT  ===============================
   The desktop defaults (~line 1568) assume a wide viewport: 58% card, 55%
   auth-toggle, 44px display title, 320×145 logo. They look fine at ≥992px
   but break in narrower environments — the card stays at ~58% of its
   container, the form-p (22px serif) and title (44px) cannot wrap cleanly,
   and labels rendered at desktop weight crowd the inputs.

   This layer applies one consolidated treatment from 991px down: the card
   chrome is dissolved, the form fills the available width, the auth-toggle
   becomes a segmented underline (not a pill), and the typography is rebuilt
   as an editorial composition (italic serif title with a hairline brand
   rule, small-caps eyebrow heading, line-style inputs). Two tighter passes
   at 600 and 380 finish the proportion for true phone widths.

   Why this consolidates everything ≤991: the earlier split between tablet
   (768–991) and phone (≤767) meant a tablet-width viewport kept the desktop
   card cramped. Treating any sub-desktop viewport the same way removes that
   failure mode entirely. The desktop card-bound treatment kicks in only at
   ≥992px.
   ============================================================================= */

@media (max-width: 991px) {

    /* ── Page chrome ──────────────────────────────────────────────────── */
    .custom-auth {
        min-height: calc(100vh - 64px);
        padding: clamp(32px, 6vw, 56px) clamp(18px, 5vw, 32px) clamp(48px, 8vw, 80px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        background:
            radial-gradient(ellipse 95% 55% at 50% -8%,
                rgba(232, 116, 58, 0.12) 0%,
                rgba(232, 116, 58, 0.04) 38%,
                rgba(232, 116, 58, 0) 70%);
    }
    .custom-auth > section {
        width: 100%;
        max-width: 440px;
        margin-inline: auto;
    }

    /* ── Logo ─────────────────────────────────────────────────────────── */
    .custom-auth .logo-wrapper {
        width: clamp(140px, 36vw, 184px);
        height: auto;
        aspect-ratio: 320 / 145;
        margin: 0 auto 4px !important;
    }
    .custom-auth .logo-wrapper img { max-width: 100%; height: auto; }

    /* ── Auth toggle — bordered pill with gradient active tab (mirrors desktop) ── */
    .custom-auth .auth-btns {
        width: 100% !important;
        height: 52px !important;
        margin: 24px auto 28px !important;
        padding: 0 !important;
        gap: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--white) !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-sm) !important;
        overflow: hidden;
        position: static;
    }
    .custom-auth .auth-btns::after { content: none !important; }   /* drop the underline baseline */
    .custom-auth .auth-btns a,
    .custom-auth .auth-btns a:first-child {
        flex: 1;
        width: 50% !important;
        min-height: 0 !important;
        height: 100% !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--white) !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        letter-spacing: 0.01em;
        text-transform: none !important;
        text-decoration: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: static;
        z-index: auto;
    }
    .custom-auth .auth-btns a:first-child { border-right: 1px solid var(--border) !important; }
    .custom-auth .auth-btns a.active {
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
        color: #FFF !important;
        box-shadow: var(--shadow-brand) !important;
    }
    .custom-auth .auth-btns a.active::after { content: none !important; }  /* remove underline marker */

    /* ── Card chrome restored (mirrors desktop; transparent bg so the
          cream page shows through and the white inputs read as filled) ── */
    .custom-auth .login-content {
        background: none !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-md) !important;
        padding: 24px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Title: solid display serif, centered (mirrors desktop) ────────── */
    .custom-auth p.title {
        font-family: var(--font-display) !important;
        font-style: normal !important;
        font-weight: 600 !important;
        font-size: clamp(26px, 6vw, 34px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.01em !important;
        color: var(--text-primary) !important;
        text-align: center !important;
        margin: 0 0 24px !important;
    }

    /* ── Section heading ("Contact Information") — display serif (mirrors desktop) ── */
    .custom-auth p.form-p {
        font-family: var(--font-display) !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        text-transform: none !important;
        color: var(--text-primary) !important;
        margin: 0 0 18px !important;
    }

    /* ── Form labels (mirrors desktop) ────────────────────────────────── */
    .custom-auth label.form-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em;
        text-transform: none !important;
        color: var(--text-primary) !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }

    /* ── Inputs: bordered filled (mirrors desktop; 16px to avoid iOS zoom) ── */
    .custom-auth form input,
    .custom-auth form select {
        height: 52px !important;
        width: 100% !important;
        background: var(--white) !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-sm) !important;
        padding: 0 14px !important;
        margin-bottom: 18px !important;
        font-size: 16px !important;
        color: var(--text-primary) !important;
    }
    .custom-auth form input:focus,
    .custom-auth form select:focus {
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px var(--brand-glow) !important;
        outline: none;
    }
    .custom-auth form input::placeholder {
        font-size: 15px !important;
        color: var(--text-light) !important;
        letter-spacing: 0.01em;
    }

    /* ── CTA: brand gradient, tighter proportion for mobile ───────────── */
    form .page-card-actions { margin-top: 8px; }
    form .page-card-actions button {
        height: 54px !important;
        font-size: 15px !important;
        letter-spacing: 0.04em !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-brand) !important;
    }

    /* ── Secondary copy: "or", "Don't have an account?" ───────────────── */
    .custom-auth .login-divider,
    .custom-auth .sign-up-message {
        font-size: 12px;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

    /* ── Verify screen: match the frameless treatment ─────────────────── */
    .custom-auth .verify-div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        padding-top: 24px !important;
    }
    .verifiy-back-btn { top: 20px; left: 16px; }
    #page-login { padding-bottom: 0; }
}

/* ── Phone: ≤ 600 — slightly tighter proportions ──────────────────────── */
@media (max-width: 600px) {
    .custom-auth > section { max-width: 380px; }
    .custom-auth .auth-btns { margin: 24px auto 28px !important; }
    .custom-auth p.title { font-size: clamp(22px, 6.4vw, 28px) !important; }
}

/* ── Small phone: ≤ 380 — final tightening ────────────────────────────── */
@media (max-width: 380px) {
    .custom-auth { padding: 28px 16px 48px; }
    .custom-auth > section { max-width: 320px; }
    .custom-auth .logo-wrapper { width: 124px; }
    .custom-auth .auth-btns a,
    .custom-auth .auth-btns a:first-child {
        font-size: 11px !important;
        letter-spacing: 0.16em;
    }
    .custom-auth p.title { font-size: 22px !important; }
    .custom-auth p.form-p { margin-top: 20px !important; }
    .custom-auth form input,
    .custom-auth form select {
        height: 48px !important;
        margin-bottom: 18px !important;
    }
    form .page-card-actions button { height: 50px !important; font-size: 12px !important; }
}

/* Remove the horizontal page padding on the mobile login so the card spans to
   the screen edges. Placed after the blocks above so it wins the cascade: side
   padding → 0 on ≤991 (vertical padding preserved via the longhand), and the
   section width caps are lifted on phones (≤600) only, so tablets keep their
   centered 440px card. */
@media (max-width: 991px) {
    .custom-auth {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 600px) {
    .custom-auth > section { max-width: 100%; }
}


/* =============================================================================
   ===  LANGUAGE SWITCHER (feature 022)  ======================================
   Rendered by templates/includes/language-switcher.html, sits in the navbar
   adjacent to the User control. Styled to match the existing .profile-btn
   so the switcher reads as a peer of the User dropdown, not a foreign element.
   ============================================================================= */
.lang-switcher {
    position: relative;
}
.lang-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lang-switcher__btn:hover,
.lang-switcher__btn:focus {
    background: #f7f1ec;
    border-color: rgba(0, 0, 0, 0.18);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 118, 42, 0.12);
}
.lang-switcher__icon {
    font-size: 14px;
    color: #C8762A;
}
.lang-switcher__code {
    letter-spacing: 0.4px;
}
.lang-switcher__caret {
    font-size: 10px;
    opacity: 0.55;
}
.lang-switcher__menu {
    min-width: 180px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
.lang-switcher__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #1a1a1a;
}
.lang-switcher__item:hover,
.lang-switcher__item:focus {
    background: #fff5ee;
    color: #1a1a1a;
}
.lang-switcher__item.is-active {
    background: #fff5ee;
    font-weight: 600;
}
.lang-switcher__item-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(200, 118, 42, 0.10);
    color: #C8762A;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.4px;
}
.lang-switcher__item-name {
    flex: 1;
}
.lang-switcher__check {
    color: #C8762A;
    font-size: 14px;
}
@media (max-width: 480px) {
    .lang-switcher__btn {
        padding: 6px 10px;
        gap: 4px;
    }
    /* Keep the EN / AR code visible on phones — it's the clear signal of the
       current language and is robust even if the globe webfont icon fails to
       load. Only the redundant custom caret is dropped (the button already
       carries Bootstrap's .dropdown-toggle caret). */
    .lang-switcher__caret {
        display: none;
    }
}


/* =============================================================================
   ===  RTL LAYER (feature 022)  ==============================================
   All overrides here are scoped under [dir="rtl"] (and equivalently
   body.dir-rtl). No rule in this layer fires for LTR users; the original
   stylesheet above is left untouched.

   When you add a new directional rule above, mirror it here. When in doubt,
   prefer logical properties (margin-inline-start, etc.) in the rule above
   so no override is needed.
   ============================================================================= */

/* ---- Generic Bootstrap utility flips --------------------------------------- */
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .ml-5 { margin-left: 0; margin-right: 3rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .mr-5 { margin-right: 0; margin-left: 3rem; }
[dir="rtl"] .pl-1 { padding-left: 0; padding-right: .25rem; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: .5rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 3rem; }
[dir="rtl"] .pr-1 { padding-right: 0; padding-left: .25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: .5rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 3rem; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .float-left { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }

/* ---- Typography defaults --------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .form-label,
[dir="rtl"] .form-control,
[dir="rtl"] label,
[dir="rtl"] li,
[dir="rtl"] td, [dir="rtl"] th {
    text-align: right;
}
[dir="rtl"] .btn,
[dir="rtl"] .button-primary,
[dir="rtl"] .button-light {
    /* Buttons keep centred text. Override the body rule above. */
    text-align: center;
}

/* ---- Navbar / user dropdown ------------------------------------------------ *
   Native browser RTL already mirrors flex containers (logo → right edge,
   .btns → left edge) when <html dir="rtl">. Do NOT add flex-direction:
   row-reverse here — that would double-flip and put the logo back on the
   left. Only fix things that don't auto-mirror: positional left/right,
   transform-origin, and edge-anchored dropdowns. */
[dir="rtl"] .dropdown-menu-right {
    /* Bootstrap LTR rule pins the dropdown to the right edge of its trigger.
       Under RTL the start edge is on the right, so we flip to the left. */
    right: auto !important;
    left: 0 !important;
}
[dir="rtl"] .custom-user-menu .dropdown-menu {
    /* Reverse the existing transform-origin: top right (~ main.css:329). */
    transform-origin: top left;
}
/* The chevron-down spacing on .custom-user-menu .ml-2 is already covered by
   the generic .ml-2 flip above. */
[dir="rtl"] .lang-switcher__menu {
    transform-origin: top left;
}

/* ---- Hero / search-form section ------------------------------------------- */
[dir="rtl"] .hero-section .hero-text {
    text-align: center;
}
[dir="rtl"] .home-search-wrapper .form-custom-select,
[dir="rtl"] .home-search-wrapper .date-display {
    text-align: right;
}

/* Native <select> dropdown arrow — flip background image from right to left. */
[dir="rtl"] .form-custom-select {
    background-position: left 18px center;
}

/* Search-form leading icons (calendar, person, location) sit absolutely
   positioned with `left: 24px` in LTR. Move them to the right edge in RTL. */
[dir="rtl"] .search-form .select-wrapper::before,
[dir="rtl"] .search-form .check-available::before {
    left: auto;
    right: 24px;
}

/* "Person" trailing label inside the persons-select. */
[dir="rtl"] .select-wrapper.select-person::after {
    left: auto;
    right: 64px;
}

/* The persons-select padding was tuned for icon-on-left + arrow-on-right.
   Swap so the icon clears on the right and the arrow clears on the left. */
[dir="rtl"] .select-wrapper.select-person .form-custom-select {
    padding-left: 48px;
    padding-right: 130px;
}

/* Date-picker label clears the calendar icon — swap its left/right padding. */
[dir="rtl"] .date-picker-wrapper {
    text-align: right;
}
[dir="rtl"] .date-picker-wrapper .date-display {
    padding-left: 24px;
    padding-right: 72px;
}

/* ---- Search results / cards ----------------------------------------------- */
[dir="rtl"] .sort-container select {
    text-align: right;
    background-position: left .5rem center;
    padding-right: .5rem;
    padding-left: 2rem;
}
[dir="rtl"] .search-card .unavailable-badge {
    right: auto;
    left: 12px;
}
[dir="rtl"] .reservation-table th,
[dir="rtl"] .reservation-table td {
    text-align: right;
}

/* ---- Filters panel -------------------------------------------------------- */
[dir="rtl"] .filters .filter-group .filter-name,
[dir="rtl"] .filters label {
    text-align: right;
}

/* ---- Hotel detail / room detail / booking flow ---------------------------- */
[dir="rtl"] .left-div .insights .insight {
    margin-right: 0;
    margin-left: 24px;
}
[dir="rtl"] .room-details .room-items {
    text-align: right;
}
[dir="rtl"] .booking-form-wrapper .form-group,
[dir="rtl"] .booking-form-wrapper .form-control {
    text-align: right;
}
[dir="rtl"] .booking-room-card,
[dir="rtl"] .booking-price-summary {
    text-align: right;
}
[dir="rtl"] .booking-price-summary table td:first-child {
    text-align: right;
}
[dir="rtl"] .booking-price-summary table td:last-child {
    text-align: left;
}

/* ---- Promo code row ------------------------------------------------------- */
[dir="rtl"] .promo-code .row-title {
    text-align: right;
}

/* ---- Payment-method page -------------------------------------------------- */
[dir="rtl"] .payment-radio-option {
    text-align: right;
}

/* ---- Payment result page -------------------------------------------------- */
[dir="rtl"] .result-detail-table td {
    text-align: right;
}

/* ---- My bookings / bookings table ----------------------------------------- */
[dir="rtl"] .bookings-page__head .back-btn {
    /* The base rule at main.css:3559 already exists. Reaffirm here so the
       feature 022 layer is a single visible group. */
    inset-inline-start: auto;
    inset-inline-end: 0;
}
[dir="rtl"] .bookings-table-toolbar__count,
[dir="rtl"] .booking-card,
[dir="rtl"] .booking-row {
    text-align: right;
}

/* ---- Footer --------------------------------------------------------------- *
   Match both a footer inside an RTL ancestor (home pages via web_base.html)
   and a footer carrying dir="rtl" itself (login page, which extends Frappe's
   base.html and has no RTL ancestor). */
[dir="rtl"] footer .ul-wrapper,
footer[dir="rtl"] .ul-wrapper {
    text-align: right;
}
[dir="rtl"] footer .copy-right-wrapper p,
footer[dir="rtl"] .copy-right-wrapper p {
    text-align: center;
}

/* ---- Breadcrumb ----------------------------------------------------------- *
   Base rule (main.css:488) sets padding-left: 82px to push the breadcrumb
   away from the page-edge in LTR. Under RTL the page-start edge is on the
   right, so flip the padding to keep the same visual offset. */
[dir="rtl"] .breadcrumb-wrapper {
    padding-left: 0;
    padding-right: 82px;
}

/* ---- Toasts --------------------------------------------------------------- */
[dir="rtl"] .toast-msg {
    text-align: right;
}

/* =============================================================================
   ===  COMPREHENSIVE LEFT↔RIGHT FLIP  ========================================
   For every rule in the LTR stylesheet that uses padding-left, margin-left,
   left:, padding-right, margin-right, or right:, the RTL counterpart is
   declared here. Centred positions (left: 50%, etc.) are intentionally NOT
   flipped because they are not directional.
   ============================================================================= */

/* ---- Generic back button -------------------------------------------------- */
[dir="rtl"] .back-btn {
    padding-left: 17px !important;
    padding-right: 45px !important;
}
[dir="rtl"] .back-btn::before {
    left: auto;
    right: 18px;
    transform: translateY(-50%) scaleX(-1);
}

/* ---- Misc form -------------------------------------------------------------*/
[dir="rtl"] input[type="checkbox"] {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* ---- Filter "Show more" --------------------------------------------------- */
[dir="rtl"] .show-more-btn {
    padding-left: 26px !important;
    padding-right: 14px !important;
}
[dir="rtl"] .show-more-btn::after {
    right: auto;
    left: 10px;
}

/* ---- Navbar / user dropdown details --------------------------------------- */
[dir="rtl"] .profile-btn .user-avatar {
    margin-right: 0;
    margin-left: 9px;
}
[dir="rtl"] .profile-btn .fa-chevron-down {
    margin-left: 0 !important;
    margin-right: 6px !important;
}
[dir="rtl"] .custom-user-menu .dropdown-menu .dropdown-item i.list-icon {
    margin-right: 0;
    margin-left: 12px;
}

/* ---- Hotel card ----------------------------------------------------------- */
[dir="rtl"] .hotel-card .hotel-name {
    right: auto;
    left: 0;
    border-top-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    border-right: 1px solid rgba(200, 85, 32, 0.4);
}
[dir="rtl"] .hotel-card .bottom-row {
    left: 36px;
    right: 28px;
}

/* ---- Hotel detail / image card -------------------------------------------- */
[dir="rtl"] .right-div .image-wrapper {
    left: auto;
    right: -44px;
}

/* ---- Search-section search form ------------------------------------------- */
[dir="rtl"] .search-section .search-form .search-form-item {
    padding-left: 56px;
    padding-right: 72px;
}
[dir="rtl"] .search-section .search-form span.check-available {
    padding-right: 0;
    padding-left: 23px;
}

/* ---- Home search-form selects --------------------------------------------- */
[dir="rtl"] .home-search-wrapper .form-custom-select {
    padding-left: 40px;
    padding-right: 18px;
}
[dir="rtl"] .home-search-wrapper .select-wrapper.select-person .form-custom-select {
    /* The .select-wrapper.select-person rule above already handles the persons
       padding swap; this responsive selector aligns when the desktop rule fires. */
    padding-left: 48px;
    padding-right: 130px;
}

/* ---- Search-card details -------------------------------------------------- */
[dir="rtl"] .search-card .spans span.card-span {
    margin-right: 0;
    margin-left: 5px;
}
[dir="rtl"] .search-card .spans span.card-span::before {
    left: auto;
    right: 7px;
}
[dir="rtl"] .card-tag {
    margin-right: 0;
    margin-left: 4px;
}
[dir="rtl"] .counter-max-hint {
    right: auto;
    left: 0;
}
[dir="rtl"] .unavailable-badge {
    left: auto;
    right: 8px;
}
[dir="rtl"] .card-info-btn {
    right: auto;
    left: 8px;
}
[dir="rtl"] .res-name {
    margin-right: 0;
    margin-left: 4px;
}

/* ---- Room-details / room items -------------------------------------------- */
[dir="rtl"] .room-details .room-items li {
    margin-right: 0;
    margin-left: 40px;
}

/* ---- Room-info modal ------------------------------------------------------ */
[dir="rtl"] .room-info-close {
    right: auto;
    left: 16px;
}
/* Splide carousel arrows are *directional* — swap prev/next anchors. */
[dir="rtl"] .room-info-main .splide__arrow--prev {
    left: auto;
    right: 10px;
}
[dir="rtl"] .room-info-main .splide__arrow--next {
    right: auto;
    left: 10px;
}

/* ---- Login / OTP screens -------------------------------------------------- */
[dir="rtl"] .verifiy-back-btn {
    left: auto;
    right: 90px;
}

/* ---- Booking-details / room-details panes --------------------------------- */
[dir="rtl"] .booking-details p.form-head {
    padding-left: 0;
    padding-right: 56px;
    text-align: right;
}
[dir="rtl"] .payment-card-wrapper p.card-sub-head {
    text-align: center;
}
[dir="rtl"] .status-badge {
    padding: 4px 22px 4px 10px;
}
[dir="rtl"] .payment-method-card .method-card-title {
    text-align: right;
}
[dir="rtl"] .result-section p {
    text-align: center;
}
[dir="rtl"] .room-details-wrapper p.location {
    padding-left: 0;
    padding-right: 24px;
}
[dir="rtl"] .room-details-wrapper p.location::before {
    left: auto;
    right: 0;
}
[dir="rtl"] .room-details-wrapper .custom-date:disabled {
    /* Original has equal 40px on both sides — swap is a no-op but kept
       for completeness and so a future asymmetric value still flips. */
    padding-left: 40px;
    padding-right: 40px;
}

/* ---- Payment radio options ------------------------------------------------ */
[dir="rtl"] .payment-radio-option .radio-icon {
    margin-right: 0;
    margin-left: 12px;
}
[dir="rtl"] .payment-radio-option .radio-mark {
    margin-left: 0;
    margin-right: 12px;
}

/* ---- Bookings table (legacy mockup) --------------------------------------- */
[dir="rtl"] .bookings-table .section-head .back-btn {
    left: auto;
    right: 0;
}
[dir="rtl"] .table-wrapper .table-filters p {
    padding-left: 0;
    padding-right: 20px;
}
[dir="rtl"] .search-input-wrapper input.search-input {
    padding-left: 15px;
    padding-right: 42px;
}
[dir="rtl"] .search-input-wrapper::before {
    left: auto;
    right: 14px;
}
[dir="rtl"] table.bookings-table tr td:first-child {
    padding-left: 0 !important;
    padding-right: 24px !important;
}
[dir="rtl"] table.bookings-table tr td:last-child {
    padding-right: 0 !important;
    padding-left: 18px !important;
}
[dir="rtl"] table.bookings-table td.hotel span.hotel-img-wrapper {
    margin-right: 0;
    margin-left: 10px;
}
[dir="rtl"] table.bookings-table td span.status::before {
    left: auto;
    right: 8px;
}
[dir="rtl"] .details .hotel-booking-info span.booking-status {
    margin-right: 0;
    margin-left: 6px;
}
[dir="rtl"] .bookings-table--cards tr td:first-child {
    padding-left: 0 !important;
    padding-right: 12px !important;
}
[dir="rtl"] .bookings-table--cards tr td:last-child {
    padding-right: 0 !important;
    padding-left: 8px !important;
}
[dir="rtl"] .status-badge::before {
    left: auto;
    right: 8px;
}

/* ---- Filters panel: filter-name dropdown panel ---------------------------- */
[dir="rtl"] .filters-div .filter-group > .filter-name::after {
    margin-left: 0;
    margin-right: 2px;
}
[dir="rtl"] .filters-div .filter-group.is-open > .filter-panel-content {
    left: auto;
    right: var(--ebpanel-left, 12px);
}

/* ---- Daterangepicker popup positioning (mobile-only override) ------------- *
   The base rule pins both edges (left: 8px and right: 8px) so the popup
   stretches edge-to-edge — no flip needed visually, but reaffirm here. */

/* ---- Custom-user-menu dropdown (mobile responsive override) --------------- */
[dir="rtl"] .custom-user-menu .dropdown-menu {
    right: auto !important;
    left: 12px !important;
}

/* ============== Comprehensive flip — end =================================== */

/* ---- Directional icons (opt-in via .icon--directional) -------------------- */
[dir="rtl"] .icon--directional {
    transform: scaleX(-1);
    display: inline-block;
}

/* ---- Inputs that must stay LTR in an RTL page (per research D-08) --------- *
   Email, password, phone, numeric, date/time, and money/price spans read
   left-to-right universally. Forcing them RTL would scramble characters and
   break user trust. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input.input-numeric,
[dir="rtl"] .price,
[dir="rtl"] .amount,
[dir="rtl"] .lyd,
[dir="rtl"] .room-price,
[dir="rtl"] .booking-room-price-per-night,
[dir="rtl"] .booking-room-price-total {
    direction: ltr;
    text-align: right;
    unicode-bidi: embed;
}
/* Date-display button and any element rendering a numeric range stays LTR. */
[dir="rtl"] #homeDateDisplay,
[dir="rtl"] #dateDisplay,
[dir="rtl"] .booking-date-value,
[dir="rtl"] .result-detail-table .amount {
    direction: ltr;
    unicode-bidi: embed;
    /* Inside an RTL parent the LTR child needs explicit alignment */
    text-align: right;
}

/* ============== RTL Layer — end ============================================ */