/* ========================================================================
   Wedding Planner — Arabic RTL Theme
   ======================================================================== */

:root {
    --rose: #c9184a;
    --rose-dark: #800f2f;
    --rose-deep: #590d22;
    --rose-soft: #ffb3c1;
    --rose-mist: #ffe0e6;
    --cream: #fff0f3;
    --off-white: #fff9fb;
    --gold: #c9a96e;
    --gold-dark: #a88b52;
    --ink: #2d0a1e;
    --muted: #7a5a66;
    --border: #f1d7de;
    --border-strong: #e6bfc9;
    --success: #158a5a;
    --success-bg: #e2f7ec;
    --danger: #b3244e;
    --danger-bg: #fde3ea;
    --warning: #b7791f;
    --warning-bg: #fdf3d9;
    --info: #2b6cb0;
    --info-bg: #e3edf9;
    --shadow-sm: 0 1px 2px rgba(89, 13, 34, 0.06);
    --shadow: 0 6px 20px -8px rgba(89, 13, 34, 0.20);
    --shadow-lg: 0 20px 45px -20px rgba(89, 13, 34, 0.35);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 22px;
    --font: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--off-white);
    color: var(--ink);
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: var(--rose-dark); text-decoration: none; transition: color .15s; }
a:hover { color: var(--rose); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 700; color: var(--rose-deep); line-height: 1.3; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; }

/* ---------- Header (Luxury Two-Row) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--border);
    transition: box-shadow .25s ease;
}
.site-header.scrolled {
    box-shadow: 0 8px 28px -12px rgba(89, 13, 34, .18), 0 1px 0 var(--border);
}
.site-header::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--rose-deep) 0%, var(--rose-dark) 35%, var(--gold) 100%);
}

/* Single-row layout */
.header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rose-deep);
    flex-shrink: 0;
}
.brand-mark {
    position: relative;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 60%, var(--rose-deep) 100%);
    color: #fff;
    border-radius: 14px;
    font-size: 1.15rem;
    box-shadow: 0 6px 18px -4px rgba(200, 24, 74, .45), inset 0 -2px 6px rgba(0, 0, 0, .12);
    transform: rotate(-4deg);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-mark::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 1.5px solid var(--gold);
    opacity: .55;
    pointer-events: none;
}
.brand-mark-glow {
    position: absolute;
    inset: -14px;
    background: radial-gradient(circle, rgba(201, 169, 110, .35) 0%, transparent 65%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
}
.brand:hover .brand-mark { transform: rotate(0deg) scale(1.06); }
.brand:hover .brand-mark-glow { opacity: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--rose-deep);
    letter-spacing: -.01em;
}
.brand-tag {
    font-size: .72rem;
    font-weight: 500;
    color: var(--gold-dark);
    letter-spacing: .12em;
    margin-top: 2px;
}

/* Nav — centered with bullet separators */
.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}
.nav a {
    position: relative;
    padding: 8px 12px;
    color: var(--ink);
    font-weight: 600;
    font-size: .93rem;
    letter-spacing: -.005em;
    transition: color .2s;
    white-space: nowrap;
}
.nav a + a::before {
    content: "\00b7";
    position: absolute;
    right: auto;
    left: auto;
    inset-inline-end: 100%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    opacity: .5;
    font-weight: 700;
    pointer-events: none;
}
.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--rose));
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width .25s ease;
}
.nav a:hover { color: var(--rose-deep); }
.nav a:hover::after { width: 70%; }
.nav a.active { color: var(--rose-deep); }
.nav a.active::after { width: 80%; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }

/* Right side (auth) */
.nav-right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* User menu */
.user-menu { position: relative; }
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff 0%, var(--cream) 100%);
    border: 1px solid var(--border-strong);
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    transition: all .2s;
}
.user-chip:hover {
    border-color: var(--rose-soft);
    box-shadow: 0 6px 16px -8px rgba(200, 24, 74, .3);
}
.uc-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose) 0%, var(--gold) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem;
    box-shadow: 0 3px 8px rgba(200, 24, 74, .25);
}
.uc-body { display: flex; flex-direction: column; line-height: 1.1; text-align: start; }
.uc-name { font-weight: 700; font-size: .88rem; color: var(--rose-deep); }
.uc-role { font-size: .68rem; color: var(--gold-dark); letter-spacing: .08em; margin-top: 2px; }
.uc-caret { font-size: .68rem; color: var(--muted); margin-inline-start: 4px; transition: transform .25s; }
.user-menu.open .uc-caret { transform: rotate(180deg); }

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(89, 13, 34, .25);
    padding: 8px;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 60;
}
.user-menu-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-end: 24px;
    width: 12px; height: 12px;
    background: #fff;
    border-top: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
    transform: rotate(45deg);
}
.user-menu.open .user-menu-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.user-menu-dropdown a, .user-menu-dropdown .um-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background .15s;
    width: 100%;
    background: none;
    border: none;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
}
.user-menu-dropdown a i, .user-menu-dropdown .um-logout i { color: var(--rose); width: 18px; }
.user-menu-dropdown a:hover { background: var(--cream); color: var(--rose-deep); }
.user-menu-dropdown .um-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.user-menu-dropdown .um-logout { color: var(--danger); }
.user-menu-dropdown .um-logout i { color: var(--danger); }
.user-menu-dropdown .um-logout:hover { background: #fde3ea; }

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px -4px rgba(200, 24, 74, .45);
    transition: transform .2s, box-shadow .2s;
}
.nav-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(200, 24, 74, .55); }
.nav-toggle:active { transform: translateY(0); }

/* ---------- Mobile Drawer ---------- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}
.drawer.open { pointer-events: auto; }
.drawer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(45, 10, 30, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
    position: absolute;
    z-index: 2;
    top: 0; bottom: 0;
    inset-inline-start: 0;    /* right in RTL */
    width: min(340px, 88vw);
    background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
    box-shadow: -20px 0 40px -10px rgba(89, 13, 34, .35);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[dir="ltr"] .drawer-panel { transform: translateX(-100%); box-shadow: 20px 0 40px -10px rgba(89, 13, 34, .35); }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rose-deep), var(--rose-dark), var(--gold));
}

/* Drawer head */
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fff 0%, transparent 100%);
}
.drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rose-deep);
}
.drawer-brand .brand-mark {
    width: 44px; height: 44px;
    font-size: 1.05rem;
    border-radius: 12px;
    transform: rotate(-4deg);
}
.drawer-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.drawer-brand-name { font-weight: 800; font-size: 1.4rem; color: var(--rose-deep); }
.drawer-brand-tag { font-size: .68rem; letter-spacing: .12em; color: var(--gold-dark); margin-top: 2px; }
.drawer-close {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cream);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--rose-deep);
    cursor: pointer;
    font-size: 1rem;
    transition: background .2s, transform .2s;
}
.drawer-close:hover { background: var(--rose-mist); transform: rotate(90deg); }

/* Drawer user block */
.drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 16px;
    padding: 14px;
    background: linear-gradient(135deg, #fff, var(--cream));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 12px -6px rgba(200, 24, 74, .15);
}
.drawer-user-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--gold));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(200, 24, 74, .3);
    flex-shrink: 0;
}
.drawer-user-body { min-width: 0; }
.drawer-user-name {
    font-weight: 700;
    color: var(--rose-deep);
    font-size: .98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-user-role {
    font-size: .78rem;
    color: var(--gold-dark);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Section label */
.drawer-section-label {
    padding: 8px 22px 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .14em;
    margin-top: 6px;
}

/* Drawer nav */
.drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    color: var(--ink);
    font-weight: 600;
    font-size: .96rem;
    border-radius: 12px;
    transition: background .2s, color .2s;
    position: relative;
}
.drawer-nav a .dn-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rose-mist), #fff);
    color: var(--rose);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    transition: all .2s;
}
.drawer-nav a .dn-label { flex: 1; }
.drawer-nav a .dn-arrow {
    font-size: .72rem;
    color: var(--muted);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s, transform .2s;
}
.drawer-nav a:hover {
    background: rgba(255, 224, 230, .5);
    color: var(--rose-deep);
}
.drawer-nav a:hover .dn-icon {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(200, 24, 74, .35);
}
.drawer-nav a:hover .dn-arrow { opacity: 1; transform: translateX(0); }
.drawer-nav a.active {
    background: linear-gradient(90deg, var(--rose-mist), transparent);
    color: var(--rose-deep);
}
.drawer-nav a.active .dn-icon {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(200, 24, 74, .35);
}
.drawer-nav a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--gold), var(--rose));
}

/* Drawer footer */
.drawer-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
    background: #fff;
}

/* Legacy avatar-chip kept for other pages (dashboards etc.) */
.avatar-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--ink);
}
.avatar-chip .dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--gold));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
    line-height: 1.2;
}
.btn-primary {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(200, 24, 74, .25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200, 24, 74, .35); color: #fff; }
.btn-outline {
    background: transparent;
    border-color: var(--rose);
    color: var(--rose-dark);
}
.btn-outline:hover { background: var(--rose-mist); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--cream); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8f1c3d; color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #10683f; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(201, 169, 110, .18), transparent 60%),
        radial-gradient(900px 500px at 10% 110%, rgba(200, 24, 74, .18), transparent 60%),
        linear-gradient(135deg, #fff 0%, #fff5f7 100%);
    padding: 90px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.hero h1 {
    font-size: 3rem;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}
.hero .lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,0)),
        url('https://images.unsplash.com/photo-1519741497674-611481863552?w=900&auto=format&fit=crop&q=70') center/cover;
    box-shadow: var(--shadow-lg);
}
.hero-visual::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.4);
    pointer-events: none;
}
@media (max-width: 860px) {
    .hero { padding: 60px 0 50px; }
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero h1 { font-size: 2.1rem; }
    .hero-visual { max-height: 300px; }
}

/* ---------- Sections ---------- */
.section { padding: 70px 0; }
.section-title { text-align: center; margin-bottom: 48px; }
.section-title h2 { font-size: 2rem; margin-bottom: 12px; }
.section-title p { color: var(--muted); max-width: 620px; margin: 0 auto; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon {
    width: 60px; height: 60px; margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rose-mist);
    color: var(--rose-dark);
    font-size: 1.6rem;
}
.feature-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-body { padding: 22px; }
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--off-white); }
.card-header h3 { margin: 0; font-size: 1.1rem; }
.card-footer { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--off-white); }

/* ---------- Hall listing grid ---------- */
.halls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.hall-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.hall-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hall-card-media {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    background-size: cover;
    background-position: center;
    position: relative;
}
.hall-card-media .badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: rgba(255,255,255,.95);
    color: var(--rose-dark);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.hall-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.hall-card-body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.hall-card-city { color: var(--muted); font-size: .88rem; margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }
.hall-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--cream);
    color: var(--rose-dark);
    border: 1px solid var(--border);
}
.hall-card-price {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.hall-card-price .price { color: var(--rose-dark); font-weight: 700; font-size: 1.05rem; }
.hall-card-price .price small { color: var(--muted); font-weight: 500; font-size: .78rem; margin-inline-start: 2px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); font-size: .93rem; }
.form-hint { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.form-control,
.form-select,
textarea.form-control {
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: .96rem;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(200, 24, 74, .12);
}
textarea.form-control { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--rose); }
.field-error { color: var(--danger); font-size: .82rem; margin-top: 4px; display: block; }
.form-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 20px; }

/* ---------- Alerts ---------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid transparent;
    font-size: .93rem;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: #b0e6c8; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: #f4bfcc; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #f2dc91; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: #bcd2ec; }

/* ---------- Auth page ---------- */
.auth-shell {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(700px 300px at 15% 10%, rgba(200, 24, 74, .12), transparent 60%),
        radial-gradient(700px 300px at 85% 90%, rgba(201, 169, 110, .12), transparent 60%),
        var(--off-white);
}
.auth-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
    border: 1px solid var(--border);
}
.auth-card.auth-card-wide { max-width: 540px; }

/* Demo accounts panel on login page */
.demo-accounts {
    margin-top: 28px;
    padding: 20px;
    background: linear-gradient(135deg, var(--cream), #fff);
    border-radius: var(--radius);
    border: 1px dashed var(--border-strong);
}
.demo-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
    color: var(--rose-deep);
    font-size: .98rem;
    margin-bottom: 6px;
}
.demo-hint {
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 14px;
    line-height: 1.5;
}
.demo-hint code {
    background: #fff;
    color: var(--rose-dark);
    padding: 1px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    border: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 700;
}
.demo-list {
    display: flex; flex-direction: column; gap: 8px;
}
.demo-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    transition: all .15s;
}
.demo-item:hover {
    border-color: var(--rose);
    background: var(--rose-mist);
    transform: translateX(-2px);
}
.demo-role {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.demo-info { flex: 1; min-width: 0; }
.demo-name { font-weight: 600; color: var(--ink); font-size: .9rem; }
.demo-email {
    color: var(--muted); font-size: .78rem;
    font-family: 'Courier New', monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-header h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-header p { color: var(--muted); font-size: .93rem; margin: 0; }
.auth-footer { text-align: center; margin-top: 20px; color: var(--muted); font-size: .9rem; }
.role-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.role-selector label {
    display: block;
    text-align: center;
    padding: 14px 8px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: #fff;
    transition: all .15s;
}
.role-selector label:hover { border-color: var(--rose-soft); }
.role-selector input { display: none; }
.role-selector input:checked + span {
    color: var(--rose-dark);
    font-weight: 700;
}
.role-selector label:has(input:checked) {
    border-color: var(--rose);
    background: var(--rose-mist);
    box-shadow: 0 4px 12px rgba(200, 24, 74, .12);
}
.role-selector .role-icon { display: block; font-size: 1.5rem; margin-bottom: 4px; }

/* ---------- Dashboard layout ---------- */
.dashboard { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.sidebar {
    background: #fff;
    border-inline-start: 1px solid var(--border);
    padding: 24px 16px;
}
.sidebar-title {
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 8px 12px 8px;
}
.sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 2px;
    font-size: .94rem;
}
.sidebar a:hover { background: var(--cream); }
.sidebar a.active {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(200, 24, 74, .3);
}
.dashboard-main { padding: 32px; background: var(--off-white); min-width: 0; overflow-x: hidden; }
.page-header {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
    margin-bottom: 26px; padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-strong);
    flex-wrap: wrap;
}
.page-header h1 { font-size: 1.7rem; margin: 0; }
.page-header .subtitle { color: var(--muted); margin: 4px 0 0; font-size: .92rem; }

/* ---------- Stats grid ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}
.stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--rose), var(--rose-dark));
    opacity: 0;
    transition: opacity .2s;
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-body { flex: 1; min-width: 0; }
.stat-card .stat-label {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 4px;
    font-weight: 500;
}
.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--rose-deep);
    line-height: 1.1;
}
.stat-card .stat-icon {
    position: static;
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    color: var(--rose-dark);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.table th, .table td { padding: 12px 14px; text-align: right; }
.table thead th {
    background: var(--cream);
    color: var(--rose-deep);
    font-weight: 700;
    font-size: .87rem;
    border-bottom: 1px solid var(--border);
}
.table tbody tr { border-top: 1px solid var(--border); }
.table tbody tr:first-child { border-top: none; }
.table tbody tr:hover { background: var(--off-white); }

.status-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.status-pending { background: var(--warning-bg); color: var(--warning); }
.status-accepted { background: var(--success-bg); color: var(--success); }
.status-rejected { background: var(--danger-bg); color: var(--danger); }
.status-cancelled { background: #ececec; color: #555; }

/* ---------- Gallery ---------- */
.hall-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
    height: 400px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 30px;
    background: var(--rose-mist);
}
.hall-gallery > div {
    background-size: cover;
    background-position: center;
    background-color: var(--rose-mist);
}
.hall-gallery > div:first-child { grid-row: span 2; }
@media (max-width: 720px) {
    .hall-gallery { grid-template-columns: 1fr; height: 260px; }
    .hall-gallery > div:not(:first-child) { display: none; }
    .hall-gallery > div:first-child { grid-row: auto; }
}

.hall-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
@media (max-width: 900px) { .hall-detail-grid { grid-template-columns: 1fr; } }

.amenities-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    list-style: none; padding: 0; margin: 0;
}
.amenities-list li {
    padding: 8px 12px;
    background: var(--cream);
    border-radius: var(--radius-sm);
    color: var(--rose-deep);
    display: flex; align-items: center; gap: 6px;
    font-size: .92rem;
}
.amenities-list li.disabled { background: #f5f5f5; color: #999; text-decoration: line-through; }

/* Calendar */
.calendar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}
.calendar-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.calendar-header button {
    background: var(--cream); border: none;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; color: var(--rose-dark); font-size: 1rem;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-day-name {
    text-align: center; font-size: .78rem; color: var(--muted);
    padding: 6px 0; font-weight: 600;
}
.calendar-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    background: var(--off-white);
    color: var(--ink);
    border: 1px solid transparent;
    cursor: default;
}
.calendar-day.empty { background: transparent; }
.calendar-day.past { color: #ccc; }
.calendar-day.available { background: #eafbf1; color: var(--success); cursor: pointer; border-color: #b0e6c8; }
.calendar-day.available:hover { background: var(--success); color: #fff; }
.calendar-day.unavailable { background: #fde3ea; color: var(--danger); border-color: #f4bfcc; }
.calendar-day.partial { background: #fffbeb; color: #b7791f; border-color: #f3d374; cursor: pointer; }
.calendar-day.partial:hover { background: #ffe9a8; color: #92650c; }
.calendar-day.booked {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    border-color: var(--rose-deep);
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(200, 24, 74, .25);
}
.calendar-day .d-num {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
}
.calendar-day .d-tag {
    font-size: .58rem;
    font-weight: 700;
    line-height: 1;
    opacity: .9;
    margin-top: 3px;
}
.calendar-day {
    flex-direction: column;
    gap: 1px;
}
.calendar-day.friday { font-weight: 700; }
.calendar-legend { display: flex; gap: 14px; margin-top: 14px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-item .swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--rose-deep);
    color: #f7d8e0;
    padding: 40px 0 20px;
    margin-top: 60px;
}
.site-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: #fff; margin-bottom: 12px; font-size: 1rem; }
.site-footer a { color: #f7d8e0; }
.site-footer a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 16px; text-align: center; font-size: .85rem; opacity: .8; }
@media (max-width: 720px) { .site-footer .container { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.mb-4 { margin-bottom: 24px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 24px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 12px; }
.gap-3 { gap: 18px; }
.d-none { display: none; }
.badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--rose-mist);
    color: var(--rose-dark);
    font-size: .78rem;
    font-weight: 600;
}

/* ---------- Filter bar ---------- */
.filter-bar {
    background: #fff;
    padding: 22px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; opacity: .4; }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
    /* -------- Phone-style top bar: FIXED so it always stays on top -------- */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    body { padding-top: calc(66px + env(safe-area-inset-top)); }
    .site-header::before { height: 2px; }
    .site-header.scrolled {
        box-shadow: 0 4px 16px -8px rgba(89, 13, 34, .12), 0 1px 0 var(--border);
    }

    /* Compact phone-style top bar with uniform 10px padding */
    .site-header .container.header-row {
        padding: 10px;
        padding-top: calc(10px + env(safe-area-inset-top));
    }
    .header-row {
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 10px;
    }

    /* Menu toggle: soft ghost icon button (no more loud gradient) */
    .nav-toggle {
        display: inline-flex;
        width: 44px; height: 44px;
        background: var(--cream);
        border: 1px solid var(--border);
        color: var(--rose-deep);
        border-radius: 14px;
        box-shadow: none;
        font-size: 1.1rem;
    }
    .nav-toggle:hover, .nav-toggle:active {
        background: var(--rose-mist);
        transform: none;
        box-shadow: none;
    }

    /* Brand centered — mark + name only */
    .brand { justify-self: center; gap: 10px; }
    .brand-mark {
        width: 38px; height: 38px;
        border-radius: 12px;
        font-size: 1rem;
        transform: none;
        box-shadow: 0 4px 10px -2px rgba(200, 24, 74, .4);
    }
    .brand-mark::after { display: none; }
    .brand-mark-glow { display: none; }
    .brand-text { flex-direction: row; align-items: baseline; gap: 4px; line-height: 1; }
    .brand-name { font-size: 1.35rem; letter-spacing: -.01em; }
    .brand-tag { display: none; }

    /* Right side — compact circular avatar / login icon */
    .nav-right { justify-self: end; gap: 6px; }
    .user-chip {
        padding: 0;
        background: var(--cream);
        border: 1px solid var(--border);
        border-radius: 14px;
        width: 44px; height: 44px;
        justify-content: center;
    }
    .user-chip:hover { border-color: var(--rose-soft); box-shadow: none; }
    .uc-avatar {
        width: 36px; height: 36px;
        border-radius: 11px;
        font-size: .95rem;
    }
    .uc-body { display: none; }
    .uc-caret { display: none; }
    .user-menu-dropdown { min-width: 220px; }

    .nav { display: none; }  /* replaced by mobile drawer */

    /* Guest state on mobile: hide desktop login/register buttons, show single user-icon */
    .guest-login-btn, .guest-register-btn { display: none; }
    .guest-user-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--rose), var(--rose-dark));
        color: #fff;
        font-size: 1rem;
        box-shadow: 0 4px 12px -3px rgba(200, 24, 74, .45);
        transition: transform .2s;
    }
    .guest-user-icon:hover { transform: translateY(-1px); color: #fff; }
    .guest-user-icon:active { transform: translateY(0) scale(.95); }
}
@media (max-width: 520px) {
    .brand-name { font-size: 1.1rem; }
}

/* Hide the mobile-only guest icon on desktop */
@media (min-width: 981px) {
    .guest-user-icon { display: none; }
}
@media (max-width: 780px) {
    .dashboard { grid-template-columns: 1fr; }
    .sidebar {
        border-inline-start: none; border-bottom: 1px solid var(--border);
        display: flex; flex-wrap: wrap; gap: 4px; padding: 16px;
    }
    .sidebar-title { display: none; }
    .sidebar a { padding: 8px 12px; font-size: .85rem; margin: 0; }
    .dashboard-main { padding: 20px 16px; }
}

/* ========================================================================
   HOMEPAGE — Enhanced Rich Design
   ======================================================================== */

/* ---------- Enhanced Hero ---------- */
.hero-v2 {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 100px 0 60px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(89, 13, 34, .82) 0%, rgba(128, 15, 47, .78) 55%, rgba(200, 24, 74, .70) 100%),
        url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1800&auto=format&fit=crop&q=80') center/cover;
    color: #fff;
}
.hero-v2::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at top left, rgba(201, 169, 110, .25), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(255, 179, 193, .18), transparent 50%);
    pointer-events: none;
}
.hero-v2 .container { position: relative; z-index: 2; text-align: center; }
.hero-v2 .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: .9rem;
    color: #fff;
    backdrop-filter: blur(10px);
    margin-bottom: 24px;
    font-weight: 500;
}
.hero-v2 h1 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 2px 24px rgba(0,0,0,.3);
    font-weight: 800;
}
.hero-v2 h1 .accent {
    background: linear-gradient(135deg, var(--gold) 0%, #ffe1a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}
.hero-v2 .lead {
    font-size: 1.2rem;
    max-width: 720px;
    margin: 0 auto 36px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.7;
}
.hero-v2 .hero-actions {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 50px;
}
.hero-v2 .btn-primary {
    background: #fff;
    color: var(--rose-dark);
}
.hero-v2 .btn-primary:hover {
    background: var(--gold);
    color: var(--rose-deep);
}
.hero-v2 .btn-outline {
    border-color: rgba(255,255,255,.7);
    color: #fff;
    background: transparent;
}
.hero-v2 .btn-outline:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
}

/* Hero search card */
.hero-search {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
}
.hero-search form {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.hero-search .form-group { margin: 0; text-align: right; }
.hero-search .form-label { font-size: .85rem; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.hero-search .form-control, .hero-search .form-select {
    background: var(--off-white);
    border-color: var(--border);
}
.hero-search .btn { padding: 12px 24px; height: 46px; }
@media (max-width: 800px) {
    .hero-search form { grid-template-columns: 1fr; }
    .hero-search .btn { width: 100%; }
}

/* Hero stats strip */
.hero-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 44px;
    padding: 20px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    max-width: 900px;
    margin-inline: auto;
}
.hero-stat {
    text-align: center;
    color: #fff;
}
.hero-stat .value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 4px;
}
.hero-stat .label { font-size: .88rem; opacity: .85; }
@media (max-width: 640px) {
    .hero-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .hero-v2 { min-height: auto; padding: 80px 0 40px; }
}

/* ---------- Section title enhanced ---------- */
.section-title-v2 { text-align: center; margin-bottom: 56px; }
.section-title-v2 .eyebrow {
    display: inline-block;
    color: var(--rose);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    position: relative;
    padding: 0 40px;
}
.section-title-v2 .eyebrow::before,
.section-title-v2 .eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: var(--rose);
    opacity: .4;
}
.section-title-v2 .eyebrow::before { right: 0; }
.section-title-v2 .eyebrow::after { left: 0; }
.section-title-v2 h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 14px;
    color: var(--rose-deep);
}
.section-title-v2 p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

/* ---------- Categories preview ---------- */
.section-categories { padding: 90px 0; background: var(--off-white); }
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.category-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 30px 20px;
    cursor: pointer;
    transition: all .3s;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--border);
}
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    color: var(--rose-dark);
}
.category-card .cat-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(200, 24, 74, .3);
    transition: transform .3s;
}
.category-card:hover .cat-icon { transform: scale(1.1) rotate(-5deg); }
.category-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.category-card p { font-size: .88rem; color: var(--muted); margin: 0; }
.category-card.coming-soon {
    background: #f6f1f3;
}
.category-card.coming-soon .cat-icon { background: #c9b5bc; box-shadow: none; }
.category-card.coming-soon::after {
    content: 'قريباً';
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    background: var(--gold);
    color: #fff;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

/* ---------- How it works — beautiful illustrated cards ---------- */
.section-how {
    padding: 90px 0;
    background:
        radial-gradient(ellipse at top left, rgba(255, 179, 193, .12), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(201, 169, 110, .08), transparent 55%),
        #fff;
    position: relative;
    overflow: hidden;
}
.section-how::before,
.section-how::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 179, 193, .08), transparent 70%);
    pointer-events: none;
}
.section-how::before { top: -80px; right: -80px; }
.section-how::after { bottom: -100px; left: -80px; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.step-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px 26px;
    text-align: center;
    position: relative;
    transition: all .28s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 6px 24px -12px rgba(89, 13, 34, .1);
    overflow: hidden;
}
.step-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rose), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s;
}
.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 40px -20px rgba(89, 13, 34, .25);
    border-color: var(--rose-soft);
}
.step-card:hover::before { transform: scaleX(1); }

.step-visual {
    width: 96px; height: 96px;
    margin: 0 auto 20px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.step-visual .step-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transition: border-radius .5s;
}
.step-card:hover .step-visual .step-bg {
    border-radius: 60% 40% 40% 60% / 60% 60% 40% 40%;
}
.step-visual .step-icon {
    position: relative;
    z-index: 1;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 10px 20px rgba(200, 24, 74, .3);
}
.step-visual .step-badge {
    position: absolute;
    top: -6px; inset-inline-end: -6px;
    background: var(--gold);
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(201, 169, 110, .4);
    border: 3px solid #fff;
    z-index: 2;
}

.step-card h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--rose-deep);
    font-weight: 800;
}
.step-card p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0;
}

/* Connector line between steps (desktop only) */
.steps-grid::before {
    content: '';
    position: absolute;
    top: 82px;
    right: 12.5%;
    left: 12.5%;
    height: 2px;
    background:
        repeating-linear-gradient(90deg, var(--rose-soft) 0 6px, transparent 6px 12px);
    z-index: 0;
    opacity: .5;
}
.steps-grid > .step-card { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .steps-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .steps-grid::before { display: none; }
}
@media (max-width: 500px) {
    .steps-grid { grid-template-columns: 1fr; }
}

/* ---------- Popular cities ---------- */
.section-cities { padding: 90px 0; background: var(--cream); }
.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.city-card {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow);
    transition: transform .3s;
}
.city-card:hover { transform: translateY(-4px); color: #fff; }
.city-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(89, 13, 34, .85) 100%);
}
.city-card .city-info {
    position: absolute;
    bottom: 0; right: 0; left: 0;
    padding: 20px;
    z-index: 2;
}
.city-card h3 { color: #fff; font-size: 1.35rem; margin: 0 0 4px; }
.city-card .count { opacity: .9; font-size: .88rem; }

/* ---------- Testimonials ---------- */
.section-testimonials { padding: 90px 0; background: var(--off-white); }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.testimonial {
    background: #fff;
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform .2s;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.testimonial::before {
    content: '"';
    position: absolute;
    top: 8px; inset-inline-end: 20px;
    font-size: 5rem;
    line-height: 1;
    color: var(--rose-mist);
    font-family: Georgia, serif;
}
.testimonial-text {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--gold));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}
.testimonial-name { font-weight: 700; margin-bottom: 2px; }
.testimonial-role { color: var(--muted); font-size: .82rem; }
.testimonial-stars {
    color: var(--gold);
    font-size: .95rem;
    margin-bottom: 10px;
}

/* ---------- Benefits split ---------- */
.section-benefits { padding: 90px 0; background: #fff; }
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.benefits-image {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    background: url('https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=900&auto=format&fit=crop&q=70') center/cover;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.benefits-image::after {
    content: '';
    position: absolute; inset: 20px;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: var(--radius-lg);
    pointer-events: none;
}
.benefits-list { list-style: none; padding: 0; margin: 20px 0 0; }
.benefits-list li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}
.benefits-list li:last-child { border-bottom: none; }
.benefits-list .check {
    width: 32px; height: 32px;
    background: var(--rose-mist);
    color: var(--rose-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
}
.benefits-list h4 { margin: 0 0 4px; font-size: 1rem; color: var(--ink); }
.benefits-list p { margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) {
    .benefits-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.section-faq { padding: 90px 0; background: var(--off-white); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-cat-block { margin-bottom: 28px; }
.faq-cat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, var(--rose-mist), transparent);
    border-inline-start: 3px solid var(--gold);
    border-radius: 10px;
    margin-bottom: 10px;
    font-weight: 800;
    color: var(--rose-deep);
    font-size: .95rem;
}
.faq-cat-title i { color: var(--gold-dark); font-size: .82rem; }
.faq-cat-count {
    margin-inline-start: auto;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .74rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
}
.faq-group { margin-bottom: 28px; }
.faq-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 800;
    color: var(--rose-deep);
    margin: 0 0 12px;
    padding: 8px 12px;
    background: linear-gradient(90deg, var(--rose-mist), transparent);
    border-radius: 10px;
    border-inline-start: 3px solid var(--gold);
}
.faq-group-title i { color: var(--gold-dark); font-size: .75rem; }
@media (max-width: 820px) {
    .faq-group { margin-bottom: 22px; }
    .faq-group-title { font-size: .88rem; padding: 7px 10px; }
    .faq-item summary { padding: 14px 16px; font-size: .92rem; }
    .faq-body { padding: 0 16px 14px; font-size: .88rem; line-height: 1.7; }
}
.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 700;
    color: var(--rose-deep);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    color: var(--rose);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .2s;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body {
    padding: 0 22px 20px;
    color: var(--muted);
    line-height: 1.7;
}

/* ---------- Big CTA ---------- */
.section-cta-big { padding: 90px 0; }
.cta-big {
    background:
        radial-gradient(ellipse at top, rgba(201, 169, 110, .2), transparent 60%),
        linear-gradient(135deg, var(--rose-deep) 0%, var(--rose-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 80px 60px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-big::before {
    content: '';
    position: absolute;
    top: -80px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,169,110,.18), transparent 70%);
    z-index: 0;
}
.cta-big::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,179,193,.15), transparent 70%);
    z-index: 0;
}
.cta-big > * { position: relative; z-index: 1; }
.cta-big h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    margin-bottom: 16px;
}
.cta-big p {
    color: rgba(255,255,255,.9);
    font-size: 1.15rem;
    max-width: 620px;
    margin: 0 auto 32px;
}
.cta-big .btn-primary { background: var(--gold); color: var(--rose-deep); }
.cta-big .btn-primary:hover { background: #fff; }
.cta-big .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.cta-big .btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }
@media (max-width: 640px) { .cta-big { padding: 50px 24px; } }

/* ---------- Vendor CTA ---------- */
.section-vendor { padding: 90px 0; background: var(--cream); }
.vendor-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}
.vendor-image {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    background: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=900&auto=format&fit=crop&q=70') center/cover;
    box-shadow: var(--shadow-lg);
}
.vendor-content h2 { font-size: 2.2rem; margin-bottom: 16px; }
.vendor-content .lead { font-size: 1.05rem; color: var(--muted); margin-bottom: 24px; }
.vendor-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.vendor-perk {
    background: #fff;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
    font-size: .92rem;
    color: var(--ink);
    font-weight: 500;
}
.vendor-perk .p-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}
@media (max-width: 860px) {
    .vendor-grid { grid-template-columns: 1fr; gap: 32px; }
    .vendor-perks { grid-template-columns: 1fr; }
}

/* ---------- Feature card v2 (with images) ---------- */
.features-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.feature-v2 {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 30px 24px;
    text-align: right;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.feature-v2::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rose), var(--gold));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s;
}
.feature-v2:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--rose-mist);
}
.feature-v2:hover::before { transform: scaleX(1); }
.feature-v2 .icon-wrap {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    color: var(--rose-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
}
.feature-v2 h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feature-v2 p { color: var(--muted); font-size: .95rem; margin: 0; line-height: 1.7; }

/* ========================================================================
   Hall detail page — luxurious immersive design
   ======================================================================== */

/* Compact top actions bar */
.hall-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.hall-topbar .back-link {
    color: var(--muted);
    text-decoration: none;
    font-size: .95rem;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    transition: all .15s;
}
.hall-topbar .back-link:hover { background: var(--cream); color: var(--rose-dark); }
.hall-topbar .topbar-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rose);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: 1px;
}

/* Hero card — clean editorial layout, image on right, info on left */
.hall-hero-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px -30px rgba(89, 13, 34, .25);
    border: 1px solid var(--border);
    margin-bottom: 30px;
    max-width: 100%;
}
.hall-hero-v3 .hero-image {
    background-color: var(--rose-mist);
    background-size: cover;
    background-position: center;
    min-height: 460px;
    position: relative;
}
.hall-hero-v3 .hero-image .hero-badge {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--rose-dark);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hall-hero-v3 .hero-badge small { color: var(--muted); font-weight: 500; font-size: .72rem; }

.hall-hero-v3 .hero-content {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(255, 179, 193, .12), transparent 55%),
        #fff;
}
.hall-hero-v3 .hero-content::before {
    content: '';
    position: absolute;
    top: 0; right: 40px;
    width: 60px; height: 4px;
    background: linear-gradient(90deg, var(--rose), var(--gold));
    border-radius: 0 0 4px 4px;
}
.hall-hero-v3 .hero-city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rose);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hall-hero-v3 h1 {
    color: var(--rose-deep);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin: 0 0 18px;
    line-height: 1.15;
    font-weight: 800;
}
.hall-hero-v3 .hero-address {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 24px;
    display: flex; align-items: flex-start; gap: 8px;
    line-height: 1.5;
}
.hall-hero-v3 .hero-address i { color: var(--rose); margin-top: 4px; flex-shrink: 0; }

.hall-hero-v3 .hero-quick-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, var(--cream), #fff);
    border-radius: 14px;
    border: 1px solid var(--border);
}
.hall-hero-v3 .qstat {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
.hall-hero-v3 .qstat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.hall-hero-v3 .qstat-body { min-width: 0; overflow: hidden; }
.hall-hero-v3 .qstat-value {
    font-weight: 800;
    color: var(--rose-deep);
    font-size: 1.05rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hall-hero-v3 .qstat-label {
    font-size: .8rem;
    color: var(--muted);
    margin-top: 2px;
}

.hall-hero-v3 .hero-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.hall-hero-v3 .hero-actions .btn { flex: 1; min-width: 140px; }

@media (max-width: 900px) {
    .hall-hero-v3 { grid-template-columns: 1fr; }
    .hall-hero-v3 .hero-image { min-height: 280px; order: -1; }
    .hall-hero-v3 .hero-content { padding: 28px 24px; }
}

/* Old stats-bar hidden — kept for compat */
.hall-stats-bar {
    position: relative;
    z-index: 3;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px -20px rgba(89, 13, 34, .3);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    margin-bottom: 40px;
    border: 1px solid var(--border);
}
.hall-stats-bar .h-stat {
    padding: 22px 20px;
    text-align: center;
    border-inline-end: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: background .15s;
}
.hall-stats-bar .h-stat:last-child { border-inline-end: none; }
.hall-stats-bar .h-stat:hover { background: var(--off-white); }
.hall-stats-bar .h-stat .h-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 14px rgba(200, 24, 74, .25);
}
.hall-stats-bar .h-stat .h-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--rose-deep);
    line-height: 1;
}
.hall-stats-bar .h-stat .h-stat-label {
    font-size: .82rem;
    color: var(--muted);
    font-weight: 500;
}
@media (max-width: 720px) {
    .hall-stats-bar { grid-template-columns: 1fr 1fr; }
    .hall-stats-bar .h-stat:nth-child(2) { border-inline-end: none; }
    .hall-stats-bar .h-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* Gallery v3 — adaptive layouts based on image count */
.hall-gallery-v3 {
    display: grid;
    gap: 12px;
    margin-bottom: 50px;
}
.hall-gallery-v3 .g-item {
    background-color: var(--rose-mist);
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s;
    position: relative;
    cursor: pointer;
}
.hall-gallery-v3 .g-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hall-gallery-v3 .g-count {
    position: absolute;
    bottom: 12px; inset-inline-end: 12px;
    background: rgba(255,255,255,.95);
    color: var(--rose-dark);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    display: inline-flex; align-items: center; gap: 5px;
}

/* 1 image — full width */
.hall-gallery-v3.count-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 440px;
}

/* 2 images — main + 1 side */
.hall-gallery-v3.count-2 {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 400px;
}

/* 3 images — main + 2 stacked side */
.hall-gallery-v3.count-3 {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 220px 220px;
}
.hall-gallery-v3.count-3 .g-main {
    grid-row: 1 / span 2;
    grid-column: 1;
}

/* 4+ images — current 3-col editorial */
.hall-gallery-v3.count-many {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 220px 220px;
}
.hall-gallery-v3.count-many .g-main {
    grid-row: 1 / span 2;
    grid-column: 1;
}

@media (max-width: 720px) {
    .hall-gallery-v3.count-1 { grid-template-rows: 260px; }
    .hall-gallery-v3.count-2,
    .hall-gallery-v3.count-3,
    .hall-gallery-v3.count-many {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 140px;
    }
    .hall-gallery-v3 .g-main { grid-column: 1 / -1 !important; grid-row: 1 !important; }
}

/* Two-column detail layout */
.hall-detail-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 30px;
    align-items: start;
}
.hall-detail-v2 > * { min-width: 0; }
@media (max-width: 900px) {
    .hall-detail-v2 { grid-template-columns: minmax(0, 1fr); }
}

/* Section titles inside hall detail */
.section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    position: relative;
}
.section-heading::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--rose), var(--gold));
    border-radius: 2px;
}
.section-heading .h-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    color: var(--rose-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.section-heading h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--rose-deep);
    font-weight: 800;
}
.section-heading small {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 500;
}

.hall-block {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--border);
    margin-bottom: 30px;
    box-shadow: 0 4px 20px -12px rgba(89, 13, 34, .1);
}

/* About block */
.about-content {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.9;
    white-space: pre-line;
}

/* Amenity showcase — big tiles */
.amenity-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.amenity-tile-lg {
    aspect-ratio: 1;
    padding: 16px 10px;
    background: linear-gradient(135deg, #fff, var(--cream));
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--border);
    transition: all .2s;
    color: var(--ink);
}
.amenity-tile-lg:hover:not(.off) {
    transform: translateY(-3px);
    border-color: var(--rose-soft);
    box-shadow: 0 10px 20px -10px rgba(200, 24, 74, .2);
}
.amenity-tile-lg .a-lg-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
    box-shadow: 0 6px 12px rgba(200, 24, 74, .2);
}
.amenity-tile-lg .a-lg-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--rose-deep);
    line-height: 1.3;
}
.amenity-tile-lg.off {
    opacity: .35;
    background: #f6f4f5;
}
.amenity-tile-lg.off .a-lg-icon {
    background: #b8b8b8;
    box-shadow: none;
}
.amenity-tile-lg.off .a-lg-name { color: var(--muted); text-decoration: line-through; }

/* Slot showcase cards */
.slot-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.slot-card-lg {
    padding: 22px 20px;
    background: linear-gradient(135deg, var(--rose-mist) 0%, #fff 100%);
    border-radius: 16px;
    border: 1px solid var(--rose-mist);
    text-align: center;
    transition: all .18s;
}
.slot-card-lg:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--rose-soft);
}
.slot-card-lg .slot-icon-lg {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    margin: 0 auto 12px;
    box-shadow: 0 8px 16px rgba(200, 24, 74, .25);
}
.slot-card-lg .slot-name-lg {
    font-weight: 800;
    color: var(--rose-deep);
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.slot-card-lg .slot-time-lg {
    color: var(--muted);
    font-size: .88rem;
    margin-bottom: 12px;
    display: inline-flex; align-items: center; gap: 4px;
}
.slot-card-lg .slot-price-lg {
    padding-top: 12px;
    border-top: 1px dashed var(--border-strong);
    color: var(--rose-dark);
    font-size: .88rem;
    font-weight: 600;
}
.slot-card-lg .slot-price-lg strong {
    font-size: 1.05rem;
    color: var(--rose-deep);
}

/* Booking panel — elegant unified card */
.booking-panel {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 40px -22px rgba(89, 13, 34, .28);
    border: 1px solid var(--border);
    position: sticky;
    top: 90px;
    overflow: hidden;
}
.booking-panel-top {
    padding: 24px 26px 20px;
    background:
        radial-gradient(ellipse at top left, rgba(255, 179, 193, .18), transparent 60%),
        #fff;
    border-bottom: 1px dashed var(--border-strong);
    position: relative;
}
.booking-panel-top::before {
    content: '';
    position: absolute;
    top: 0; right: 26px;
    width: 40px; height: 3px;
    background: linear-gradient(90deg, var(--rose), var(--gold));
    border-radius: 0 0 3px 3px;
}
.booking-panel-eyebrow {
    color: var(--rose);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 6px;
    display: inline-flex; align-items: center; gap: 6px;
}
.booking-panel-title {
    color: var(--rose-deep);
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.2;
}
.booking-panel-price {
    color: var(--rose-dark);
    font-weight: 700;
    font-size: .95rem;
    margin-top: 8px;
}
.booking-panel-price strong { font-size: 1.15rem; color: var(--rose-deep); }
.booking-panel-body { padding: 20px 26px; }

/* Trust badges strip */
.trust-badges {
    padding: 14px 26px;
    background: var(--off-white);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted);
}
.trust-badges .t-item { display: flex; align-items: center; gap: 8px; }
.trust-badges .t-item i {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem;
    flex-shrink: 0;
}

/* Contact section INSIDE the same card */
.booking-panel-contact {
    padding: 18px 26px;
    background: linear-gradient(135deg, var(--rose-deep) 0%, var(--rose-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
}
.booking-panel-contact .contact-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.2);
}
.booking-panel-contact .contact-body { flex: 1; min-width: 0; }
.booking-panel-contact .contact-label {
    color: rgba(255,255,255,.75);
    font-size: .78rem;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.booking-panel-contact .contact-value {
    font-weight: 800;
    font-size: 1rem;
    direction: ltr;
    text-align: right;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.booking-panel-contact .contact-btn {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    transition: background .15s;
    flex-shrink: 0;
}
.booking-panel-contact .contact-btn:hover { background: rgba(255,255,255,.25); color: #fff; }

/* Sidebar wrapper — sticky on desktop only */
.sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 901px) {
    .sidebar-stack { position: sticky; top: 90px; }
}
.sidebar-stack .booking-panel { position: static; top: auto; }

/* ========== Customer calendar (monthly view with slots on click) ========== */
.public-calendar {
    background: #fff;
    border-radius: 16px;
    padding: 8px 4px 0;
}
.public-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 18px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 14px;
}
.public-calendar-title {
    font-weight: 800;
    color: var(--rose-deep);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.public-calendar-title i { color: var(--rose); }
.public-calendar-nav {
    display: flex; gap: 4px;
}
.public-calendar-nav .nav-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--off-white);
    color: var(--rose-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: .85rem;
    transition: all .15s;
}
.public-calendar-nav .nav-btn:hover:not(.disabled) {
    background: var(--rose-mist);
    color: var(--rose-dark);
    border-color: var(--rose);
}
.public-calendar-nav .nav-btn.disabled { opacity: .35; pointer-events: none; }

/* Month strip for customer calendar */
.public-month-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 4px 14px;
    margin: 0 8px 8px;
    border-bottom: 1px dashed var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--rose-mist) transparent;
}
.public-month-strip::-webkit-scrollbar { height: 4px; }
.public-month-strip::-webkit-scrollbar-thumb { background: var(--rose-mist); border-radius: 6px; }
.pm-pill {
    flex-shrink: 0;
    padding: 7px 12px;
    background: var(--off-white);
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.pm-pill:hover { background: var(--rose-mist); color: var(--rose-dark); }
.pm-pill.active {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    border-color: var(--rose-deep);
}
.pm-pill .pm-num {
    font-size: .7rem;
    opacity: .75;
    padding: 0 4px;
    border-radius: 6px;
    background: rgba(0,0,0,.05);
}
.pm-pill.active .pm-num { background: rgba(255,255,255,.2); opacity: 1; }

/* Days */
.public-days {
    padding: 0 8px 12px;
}
.public-day-names {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}
.public-day-name {
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    padding: 6px 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.public-day-name.friday { color: var(--rose); }
.public-days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.public-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--off-white);
    border: 1.5px solid transparent;
    font-size: .88rem;
    color: var(--ink);
    font-weight: 600;
    cursor: default;
    transition: all .12s;
    padding: 3px;
    text-align: center;
    line-height: 1;
    font-family: inherit;
    position: relative;
}
.public-day.empty { background: transparent; pointer-events: none; }
.public-day.past { background: #f5f3f4; color: #ccc; cursor: not-allowed; }
.public-day.available {
    background: #f2fbf6;
    color: var(--success);
    border-color: #b0e6c8;
    cursor: pointer;
}
.public-day.available:hover {
    background: linear-gradient(135deg, var(--success), #10683f);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(21, 138, 90, .3);
}
.public-day.partial {
    background: #fffbeb;
    color: #b7791f;
    border-color: #f3d374;
    cursor: pointer;
}
.public-day.partial:hover {
    background: linear-gradient(135deg, #d99a1a, #fff9e0);
    color: #fff;
    transform: translateY(-2px);
}
.public-day.booked {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    cursor: not-allowed;
    opacity: .85;
}
.public-day.today {
    box-shadow: 0 0 0 2px var(--gold);
}
.public-day .d-mini {
    font-size: .55rem;
    margin-top: 2px;
    opacity: .85;
    font-weight: 500;
}

.public-cal-legend {
    display: flex;
    gap: 14px;
    padding: 12px 16px;
    background: var(--off-white);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--muted);
    justify-content: center;
    margin-top: 12px;
}
.public-cal-legend .l-swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-inline-end: 4px;
    vertical-align: middle;
    border: 1px solid transparent;
}

/* Slot picker modal-like drawer */
.slot-picker {
    margin-top: 20px;
    background: linear-gradient(135deg, var(--cream), #fff);
    border: 2px solid var(--rose-mist);
    border-radius: 16px;
    padding: 20px;
    animation: slideDown .3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.slot-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-strong);
}
.slot-picker-title {
    font-weight: 700;
    color: var(--rose-deep);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.slot-picker-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: .95rem;
}
.slot-picker-close:hover { color: var(--rose-dark); }
.slot-picker-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slot-pick-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s;
    color: var(--ink);
    text-decoration: none;
    font-family: inherit;
    width: 100%;
    text-align: right;
}
.slot-pick-option:hover:not(:disabled) {
    border-color: var(--rose);
    background: var(--rose-mist);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(200, 24, 74, .12);
}
.slot-pick-option:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: #f5f3f4;
}
.slot-pick-option .sp-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.slot-pick-option .sp-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.slot-pick-option:disabled .sp-icon {
    background: #b8b8b8;
}
.slot-pick-option .sp-name { font-weight: 700; color: var(--rose-deep); }
.slot-pick-option .sp-time { color: var(--muted); font-size: .82rem; }
.slot-pick-option .sp-price {
    color: var(--rose-dark);
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}
.slot-pick-option .sp-price small { color: var(--muted); font-weight: 500; font-size: .7rem; }
.slot-pick-option .sp-badge {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

/* ========================================================================
   Halls listing page — elegant hero + rich card
   ======================================================================== */
.halls-hero {
    position: relative;
    padding: 70px 0 40px;
    margin-bottom: 30px;
    background:
        linear-gradient(135deg, rgba(89, 13, 34, .78) 0%, rgba(128, 15, 47, .72) 100%),
        url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1800&auto=format&fit=crop&q=70') center/cover;
    color: #fff;
    overflow: hidden;
}
.halls-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right, rgba(201, 169, 110, .2), transparent 60%);
}
.halls-hero > .container { position: relative; z-index: 2; }
.halls-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 6px 16px; border-radius: 999px;
    font-size: .82rem; margin-bottom: 12px;
    backdrop-filter: blur(10px);
}
.halls-hero h1 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin: 0 0 10px;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.halls-hero .subtitle {
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    margin: 0 0 26px;
    max-width: 620px;
}

/* Filter bar in the hero — glass style */
.halls-filter {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .35);
    color: var(--ink);
}
.halls-filter-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.halls-filter .form-label { color: var(--muted); font-size: .84rem; font-weight: 600; margin-bottom: 4px; }
.halls-filter .form-control, .halls-filter .form-select {
    background: var(--off-white);
    border-color: var(--border);
    padding: 10px 12px;
    font-size: .93rem;
}
.halls-filter .btn { height: 44px; padding: 0 22px; }
.halls-filter-toggles {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
}
.halls-filter-toggles > label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; background: var(--off-white);
    border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; font-size: .84rem; user-select: none;
    transition: all .15s;
}
.halls-filter-toggles > label input { display: none; }
.halls-filter-toggles > label:has(input:checked) {
    background: var(--rose-mist); border-color: var(--rose); color: var(--rose-dark); font-weight: 700;
}
@media (max-width: 900px) {
    .halls-filter-grid { grid-template-columns: 1fr 1fr; }
    .halls-filter .btn { grid-column: 1 / -1; width: 100%; }
}

/* Results bar */
.results-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 4px 20px;
    color: var(--muted); font-size: .95rem;
    flex-wrap: wrap; gap: 10px;
}
.results-bar strong { color: var(--rose-dark); }

/* Elegant hall card v2 */
.halls-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.hall-card-v2 {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    display: flex; flex-direction: column;
    box-shadow: 0 6px 24px -12px rgba(89, 13, 34, .15);
    border: 1px solid var(--border);
    transition: all .25s cubic-bezier(.22,.61,.36,1);
    position: relative;
}
.hall-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(89, 13, 34, .3);
    color: var(--ink);
    border-color: var(--rose-soft);
}
.hall-card-v2 .card-media {
    position: relative;
    aspect-ratio: 4/3;
    background-color: var(--rose-mist);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hall-card-v2 .card-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35) 100%);
    opacity: 0;
    transition: opacity .25s;
}
.hall-card-v2:hover .card-media::after { opacity: 1; }
.hall-card-v2 .card-media-badges {
    position: absolute; top: 12px; right: 12px; left: 12px;
    display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    z-index: 2;
}
.hall-card-v2 .price-tag {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--rose-dark);
    font-weight: 800;
    font-size: .95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display: inline-flex; align-items: center; gap: 4px;
}
.hall-card-v2 .price-tag small { color: var(--muted); font-weight: 500; font-size: .7rem; }
.hall-card-v2 .city-badge {
    background: rgba(89, 13, 34, .85);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.hall-card-v2 .card-body-v2 {
    padding: 18px 20px 20px;
    display: flex; flex-direction: column; flex: 1;
}
.hall-card-v2 .card-title {
    font-size: 1.2rem; font-weight: 800;
    color: var(--rose-deep);
    margin: 0 0 6px;
    line-height: 1.3;
}
.hall-card-v2 .card-address {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 5px;
}
.hall-card-v2 .card-features {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
}
.hall-card-v2 .feature-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--cream);
    color: var(--rose-dark);
    border-radius: 999px;
    font-size: .78rem;
    border: 1px solid var(--border);
}
.hall-card-v2 .feature-chip i { font-size: .72rem; }
.hall-card-v2 .card-footer-v2 {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    display: flex; justify-content: space-between; align-items: center;
    color: var(--muted);
    font-size: .85rem;
}
.hall-card-v2 .card-footer-v2 .capacity {
    display: inline-flex; align-items: center; gap: 4px;
}
.hall-card-v2 .card-footer-v2 .cta {
    color: var(--rose);
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 4px;
    transition: gap .2s;
}
.hall-card-v2:hover .card-footer-v2 .cta { gap: 8px; }

/* ========================================================================
   Modal (dialog)
   ======================================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.open { display: flex; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(45, 10, 30, .55);
    backdrop-filter: blur(6px);
    animation: fadeIn .2s ease-out;
}
.modal-dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.4);
    overflow: hidden;
    animation: slideUp .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.modal-header {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--cream), #fff);
}
.modal-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--rose-deep);
    display: flex; align-items: center; gap: 10px;
}
.modal-title i {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
}
.modal-close {
    background: transparent;
    border: none;
    color: var(--muted);
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all .15s;
}
.modal-close:hover { background: var(--rose-mist); color: var(--rose-dark); }
.modal-body { padding: 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: var(--off-white);
}

/* Service picker (owner dashboard "إضافة خدمة") */
.service-picker-dialog { max-width: 640px; }
.service-picker-hint { margin: 0 0 16px; color: var(--muted); font-size: .92rem; }
.service-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.service-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.service-option:hover,
.service-option:focus-visible {
    border-color: var(--rose-soft);
    background: var(--off-white);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    outline: none;
}
.service-option-icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 12px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.service-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.service-option-text strong { color: var(--rose-deep); font-size: .98rem; }
.service-option-text small { color: var(--muted); font-size: .8rem; }
.service-option-arrow { color: var(--border-strong); font-size: .85rem; transition: color .15s, transform .15s; }
.service-option:hover .service-option-arrow { color: var(--rose); transform: translateX(-3px); }
@media (max-width: 560px) {
    .service-picker-grid { grid-template-columns: 1fr; }
    .service-picker-dialog .modal-body { max-height: 70vh; overflow-y: auto; }
}

/* ========================================================================
   Cities management — card list with drag & drop
   ======================================================================== */
.cities-toolbar {
    background: #fff;
    padding: 18px 22px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cities-toolbar .toolbar-info { display: flex; align-items: center; gap: 12px; }
.cities-toolbar .info-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    color: var(--rose-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.cities-toolbar .info-text strong { color: var(--rose-deep); }
.cities-toolbar .info-text small { color: var(--muted); font-size: .82rem; display: block; }

.cities-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.city-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    transition: box-shadow .15s, transform .1s;
    box-shadow: var(--shadow-sm);
}
.city-item:hover { box-shadow: var(--shadow); }
.city-item.dragging {
    opacity: .5;
    transform: scale(.98);
}
.city-item.sortable-ghost {
    background: var(--rose-mist);
    border: 2px dashed var(--rose);
    box-shadow: none;
}
.city-item.sortable-chosen { cursor: grabbing; }
.city-item.inactive {
    background: #f8f5f6;
    opacity: .75;
}
.city-drag {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--off-white);
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    font-size: 1.05rem;
    transition: all .15s;
    user-select: none;
}
.city-drag:hover, .city-drag:active {
    background: var(--rose-mist);
    color: var(--rose-dark);
}
.city-drag:active { cursor: grabbing; }
.city-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.city-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink);
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.city-info h4 i.status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(21, 138, 90, .15);
    flex-shrink: 0;
}
.city-item.inactive .city-info h4 i.status-dot {
    background: #b8b8b8;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.city-info .city-meta {
    color: var(--muted);
    font-size: .85rem;
    display: flex; align-items: center; gap: 12px;
}
.city-info .city-meta .meta-item { display: inline-flex; align-items: center; gap: 4px; }

.city-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.city-actions .btn-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--off-white);
    border: 1px solid var(--border);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all .15s;
    padding: 0;
}
.city-actions .btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.city-actions .btn-edit:hover { background: var(--rose-mist); color: var(--rose-dark); border-color: var(--rose-soft); }
.city-actions .btn-delete:hover { background: var(--danger-bg); color: var(--danger); border-color: #f4bfcc; }

/* Big toggle switch — no box wrapper */
.city-switch {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 2.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, filter .15s;
}
.city-switch:hover { transform: scale(1.08); }
.city-switch:active { transform: scale(.96); }
.city-switch.is-on {
    color: var(--success);
    filter: drop-shadow(0 3px 6px rgba(21, 138, 90, .3));
}
.city-switch.is-off {
    color: #b8b8b8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
}
.city-switch.is-off:hover { color: var(--gold); }

/* ---------- Item variant with thumbnail (halls, users, etc.) ---------- */
/* Base .city-item already uses: auto 1fr auto — thumb replaces the first "auto" (drag) */
.item-thumb {
    width: 64px; height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: var(--rose-dark);
    font-size: 1.4rem;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}
.city-item.with-thumb .city-info h4 { font-size: 1.15rem; }
.city-item.with-thumb .city-info .city-meta { margin-top: 4px; flex-wrap: wrap; }

/* Filter toolbar chip form (inline search + selects) */
.filter-toolbar {
    background: #fff;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 10px;
    align-items: center;
}
.filter-toolbar .form-control,
.filter-toolbar .form-select {
    padding: 9px 12px;
    font-size: .92rem;
}
.filter-toolbar .search-wrap {
    position: relative;
}
.filter-toolbar .search-wrap i {
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: .92rem;
}
.filter-toolbar .search-wrap input {
    padding-inline-start: 34px;
}
.filter-toolbar .actions { display: flex; gap: 6px; }
@media (max-width: 780px) {
    .filter-toolbar { grid-template-columns: 1fr; }
}

/* Stats chip strip (thin variant of cities-toolbar) */
.stats-chips {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.stats-chips.compact .stats-chip { padding: 8px 14px; font-size: .88rem; }
.stats-chips.compact .stats-chip .chip-icon { width: 24px; height: 24px; font-size: .74rem; }
.stats-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    font-size: .92rem;
}
.stats-chip .chip-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rose-mist);
    color: var(--rose-dark);
    font-size: .82rem;
}
.stats-chip.on .chip-icon { background: #e2f7ec; color: var(--success); }
.stats-chip.off .chip-icon { background: #f0f0f0; color: #888; }
.stats-chip strong { color: var(--rose-deep); font-weight: 800; }

/* Small btn-view (opens public page) */
.city-actions .btn-view:hover {
    background: #e3edf9;
    color: var(--info);
    border-color: #bcd2ec;
}

/* Item-thumb variants for role-based avatars */
.item-thumb.role-admin {
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-dark));
    color: #fff;
}
.item-thumb.role-hall_owner {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
}
.item-thumb.role-customer {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
}
.item-thumb .avatar-letter {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

/* Role picker (radio grid, used in edit user modal) */
.role-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.role-picker label {
    cursor: pointer;
    padding: 14px 10px;
    text-align: center;
    border: 2px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    transition: all .15s;
    display: block;
}
.role-picker label:hover { border-color: var(--rose-soft); }
.role-picker input { display: none; }
.role-picker label:has(input:checked) {
    border-color: var(--rose);
    background: var(--rose-mist);
    box-shadow: 0 4px 12px rgba(200, 24, 74, .12);
}
.role-picker .picker-icon {
    width: 40px; height: 40px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--rose-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    transition: all .15s;
}
.role-picker label:has(input:checked) .picker-icon {
    background: var(--rose);
    color: #fff;
}
.role-picker .picker-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
}
@media (max-width: 500px) {
    .role-picker { grid-template-columns: 1fr; }
}

/* ========================================================================
   Hall form — sectioned beautiful layout
   ======================================================================== */
.form-hero {
    background:
        radial-gradient(ellipse at top right, rgba(201, 169, 110, .15), transparent 60%),
        linear-gradient(135deg, var(--rose-deep) 0%, var(--rose-dark) 100%);
    color: #fff;
    padding: 32px 36px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.form-hero::before {
    content: '';
    position: absolute;
    bottom: -60px; left: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}
.form-hero-icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    color: var(--gold);
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.18);
}
.form-hero-text { min-width: 0; }
.form-hero-text h1 { color: #fff; margin: 0 0 6px; font-size: 1.6rem; overflow-wrap: break-word; }
.form-hero-text p { color: rgba(255,255,255,.88); margin: 0; font-size: .96rem; overflow-wrap: break-word; }

.form-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}
.form-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--cream), #fff);
}
.form-section-header .section-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.form-section-header .section-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--rose-deep);
    font-weight: 700;
}
.form-section-header .section-subtitle {
    margin: 2px 0 0;
    font-size: .85rem;
    color: var(--muted);
}
.form-section-body {
    padding: 24px;
}

/* Amenity picker — visual tiles that toggle on click */
.amenities-group { margin-bottom: 24px; }
.amenities-group:last-child { margin-bottom: 0; }
.amenities-group-title {
    font-size: .78rem;
    color: var(--rose-dark);
    text-transform: none;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-strong);
    display: flex;
    align-items: center;
    gap: 8px;
}
.amenities-group-title::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rose);
}
.amenity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.amenity-tile {
    display: block;
    cursor: pointer;
    position: relative;
    padding: 16px 12px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--border-strong);
    border-radius: 14px;
    transition: all .18s;
    user-select: none;
}
.amenity-tile:hover {
    border-color: var(--rose-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.amenity-tile input { display: none; }
.amenity-tile .a-icon {
    width: 46px; height: 46px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: var(--cream);
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: all .18s;
}
.amenity-tile .a-label {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 500;
    transition: color .18s;
    line-height: 1.3;
}
.amenity-tile:has(input:checked) {
    border-color: var(--rose);
    background: linear-gradient(135deg, var(--rose-mist), #fff);
    box-shadow: 0 6px 16px rgba(200, 24, 74, .15);
}
.amenity-tile:has(input:checked) .a-icon {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    transform: scale(1.05);
}
.amenity-tile:has(input:checked) .a-label {
    color: var(--rose-deep);
    font-weight: 700;
}
.amenity-tile:has(input:checked)::after {
    content: '\f00c'; /* FA check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 22px; height: 22px;
    background: var(--rose);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem;
    box-shadow: 0 2px 6px rgba(200, 24, 74, .4);
}

/* Cover image upload — preview + drop zone */
.image-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 32px 24px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--off-white);
    cursor: pointer;
    text-align: center;
    transition: all .18s;
    position: relative;
    overflow: hidden;
    margin: 0;
}
.image-upload:hover {
    border-color: var(--rose);
    background: var(--rose-mist);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.image-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}
.image-upload > *:not(input) {
    position: relative;
    z-index: 2;
}
.image-upload .upload-icon {
    width: 64px;
    height: 64px;
    margin: 0 0 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(200, 24, 74, .25);
    flex-shrink: 0;
}
.image-upload .upload-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 1.05rem;
    margin: 0 0 6px;
    line-height: 1.4;
}
.image-upload .upload-hint {
    color: var(--muted);
    font-size: .87rem;
    margin: 0;
    max-width: 460px;
    line-height: 1.6;
}

/* When cover is already set — show image full with overlay + centered CTA */
.image-upload.has-image {
    background-size: cover;
    background-position: center;
    background-color: var(--rose-mist);
    min-height: 300px;
    border: 2px solid var(--border);
    padding: 20px;
}
.image-upload.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
    z-index: 1;
    transition: background .2s;
}
.image-upload.has-image:hover::before {
    background: linear-gradient(180deg, rgba(89,13,34,.5) 0%, rgba(89,13,34,.75) 100%);
}
.image-upload.has-image .upload-icon {
    background: rgba(255, 255, 255, .95);
    color: var(--rose-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
}
.image-upload.has-image .upload-title {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    font-size: 1.15rem;
}
.image-upload.has-image .upload-hint {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* Form actions bar */
.form-actions-bar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, #fff 30%);
    padding: 20px 0 4px;
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    z-index: 10;
}

/* Sticky-side layout for edit page (main + aside) — reuse for beauty */
.hall-form-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Small badge role chip inside user meta */
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.role-chip.role-admin { background: rgba(89, 13, 34, .1); color: var(--rose-deep); }
.role-chip.role-hall_owner { background: rgba(168, 139, 82, .15); color: var(--gold-dark); }
.role-chip.role-customer { background: var(--rose-mist); color: var(--rose-dark); }

.city-actions .action-group {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--off-white);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.city-actions .action-group .btn-icon {
    background: transparent;
    border: none;
    width: 36px; height: 36px;
}

@media (max-width: 640px) {
    .city-item {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }
    .city-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-top: 1px dashed var(--border);
        padding-top: 12px;
    }
}

/* ========================================================================
   Availability page — month picker + big monthly calendar
   ======================================================================== */

/* Clean elegant page header (replaces the loud gradient hero) */
.avail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 4px 0 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.avail-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.avail-header-title .head-line {
    width: 4px;
    height: 46px;
    background: linear-gradient(180deg, var(--rose) 0%, var(--gold) 100%);
    border-radius: 3px;
    flex-shrink: 0;
}
.avail-header-title h1 {
    margin: 0 0 4px;
    font-size: 1.55rem;
    color: var(--rose-deep);
    line-height: 1.2;
}
.avail-header-title .hall-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .92rem;
}
.avail-header-title .hall-tag i { color: var(--rose); }
.avail-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Horizontal month strip */
.month-strip-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.month-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--rose-mist) transparent;
}
.month-strip::-webkit-scrollbar { height: 6px; }
.month-strip::-webkit-scrollbar-thumb { background: var(--rose-mist); border-radius: 6px; }
.month-strip::-webkit-scrollbar-track { background: transparent; }
.month-pill {
    flex-shrink: 0;
    min-width: 96px;
    padding: 10px 16px;
    background: var(--off-white);
    border: 2px solid transparent;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    transition: all .18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: inherit;
}
.month-pill:hover {
    background: var(--rose-mist);
    color: var(--rose-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.month-pill.active {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    border-color: var(--rose-deep);
    box-shadow: 0 6px 16px rgba(200, 24, 74, .3);
}
.month-pill .m-year {
    font-size: .72rem;
    opacity: .7;
    font-weight: 500;
}
.month-pill .m-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.month-pill .m-num {
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(200, 24, 74, .1);
    color: var(--rose-dark);
    line-height: 1.4;
    min-width: 20px;
    text-align: center;
}
.month-pill.active .m-num {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* Big monthly calendar */
.month-calendar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.month-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-strong);
    flex-wrap: wrap;
    gap: 12px;
}
.month-calendar-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--rose-deep);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.month-calendar-title .month-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.month-calendar-title .month-name i {
    color: var(--rose);
    font-size: 1.1rem;
}
.month-calendar-title .month-summary {
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-inline-start: 26px;
}
.month-calendar-title .month-summary .s-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.month-calendar-title .month-summary .s-dot::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.month-calendar-title .month-summary .s-dot.avail::before { background: #66c288; }
.month-calendar-title .month-summary .s-dot.unav::before { background: var(--danger); }
.month-calendar-title .month-summary .s-dot.book::before { background: var(--rose); }
.month-nav { display: flex; gap: 6px; }
.month-nav-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--off-white);
    color: var(--rose-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: .95rem;
    transition: all .15s;
}
.month-nav-btn:hover { background: var(--rose-mist); border-color: var(--rose); color: var(--rose-dark); }
.month-nav-btn.disabled { opacity: .35; pointer-events: none; }

.day-names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.day-name {
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.day-name.friday { color: var(--rose); }

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.day-cell {
    aspect-ratio: 1;
    background: var(--off-white);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    overflow: hidden;
    text-align: right;
    font-family: inherit;
    color: var(--ink);
}
.day-cell.empty {
    background: transparent;
    cursor: default;
    pointer-events: none;
    border: none;
}
.day-cell .day-number {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}
.day-cell .day-status {
    font-size: .68rem;
    font-weight: 700;
    opacity: .8;
    line-height: 1.2;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.day-cell.today { border-color: var(--gold); }
.day-cell.today::before {
    content: 'اليوم';
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    background: var(--gold);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
}

/* Type-picker inside day modal (choose block vs external booking) */
.type-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.type-option {
    cursor: pointer;
    padding: 14px 10px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--border-strong);
    border-radius: 12px;
    transition: all .15s;
    display: block;
}
.type-option:hover { border-color: var(--rose-soft); }
.type-option input { display: none; }
.type-option:has(input:checked) {
    border-color: var(--rose);
    background: var(--rose-mist);
    box-shadow: 0 4px 12px rgba(200, 24, 74, .12);
}
.type-option .t-icon {
    width: 40px; height: 40px;
    margin: 0 auto 8px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: .95rem;
    opacity: .55;
    transition: opacity .15s;
}
.type-option:has(input:checked) .t-icon { opacity: 1; }
.type-option .t-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}
.type-option .t-desc {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.3;
}

.type-fields { margin-bottom: 8px; }

/* Little badge on top-right of booked/unavailable days */
.day-cell .day-badge {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.day-cell.booked .day-badge {
    color: var(--rose-dark);
}
.day-cell.unavailable .day-badge {
    color: var(--danger);
    background: rgba(255, 255, 255, .8);
}
.day-cell.friday .day-number { color: var(--rose); }
.day-cell.available {
    background: #f2fbf6;
    border-color: #d1efdf;
}
.day-cell.available:hover {
    background: linear-gradient(135deg, #d1efdf, #f2fbf6);
    border-color: var(--success);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(21, 138, 90, .18);
}
.day-cell.available .day-status { color: var(--success); }
.day-cell.unavailable {
    background: #fdf1f4;
    border-color: #f4bfcc;
}
.day-cell.unavailable:hover {
    background: linear-gradient(135deg, #f4bfcc, #fdf1f4);
    border-color: var(--danger);
    transform: translateY(-2px);
}
.day-cell.unavailable .day-status { color: var(--danger); }
.day-cell.unavailable .day-number { color: var(--danger); }
.day-cell.booked {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    border-color: var(--rose-deep);
    color: #fff;
    cursor: pointer;
}
.day-cell.booked .day-number { color: #fff; }
.day-cell.booked .day-status { color: rgba(255,255,255,.9); }
.day-cell.booked:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 24, 74, .35);
}
.day-cell.past {
    background: #f5f3f4;
    color: #b8b8b8;
    cursor: not-allowed;
    pointer-events: none;
}
.day-cell.past .day-number { color: #ccc; }

.day-cell.partial {
    background: #fffbeb;
    border-color: #f3d374;
}
.day-cell.partial:hover {
    background: linear-gradient(135deg, #ffe9a8, #fffbeb);
    border-color: #d99a1a;
    transform: translateY(-2px);
}
.day-cell.partial .day-status { color: #b7791f; }

.day-cell.mixed_full {
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-deep));
    border-color: var(--rose-deep);
    color: #fff;
}
.day-cell.mixed_full .day-number { color: #fff; }
.day-cell.mixed_full .day-status { color: rgba(255,255,255,.9); }

/* Slot dots inside day cell */
.slot-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-top: auto;
    padding-top: 3px;
}
.slot-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d1efdf;
    border: 1px solid rgba(21,138,90,.4);
}
.slot-dots .dot.booked {
    background: var(--rose);
    border-color: var(--rose-deep);
}
.slot-dots .dot.unavailable {
    background: var(--danger);
    border-color: #7a1533;
}

/* Slot rows inside day modal */
.slot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
}
.slot-row.available { border-color: #b0e6c8; background: #f2fbf6; }
.slot-row.booked { border-color: var(--rose-deep); background: linear-gradient(135deg, var(--rose-mist), #fff); }
.slot-row.unavailable { border-color: #f4bfcc; background: #fdf1f4; }
.slot-row .slot-info { flex: 1; min-width: 0; }
.slot-row .slot-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.slot-row .slot-time { font-size: .82rem; color: var(--muted); }
.slot-row .slot-price { font-size: .78rem; color: var(--rose-dark); font-weight: 600; }
.slot-row .slot-badge {
    padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.slot-row .slot-badge.available { background: #e2f7ec; color: var(--success); }
.slot-row .slot-badge.booked { background: var(--rose); color: #fff; }
.slot-row .slot-badge.unavailable { background: var(--danger-bg); color: var(--danger); }
.slot-row .slot-action { flex-shrink: 0; }
.slot-row .slot-customer {
    font-size: .82rem;
    color: var(--rose-dark);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Legend for calendar */
.cal-legend {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    flex-wrap: wrap;
    justify-content: center;
    font-size: .88rem;
    color: var(--muted);
}
.cal-legend .l-item { display: flex; align-items: center; gap: 8px; }
.cal-legend .l-swatch {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 640px) {
    .month-calendar { padding: 14px; }
    .day-cell { padding: 6px 4px; }
    .day-cell .day-number { font-size: 1rem; }
    .day-cell .day-status { font-size: .58rem; }
    .day-cell.today::before { display: none; }
}

/* Two-column dashboard grid */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    .dashboard-cols { grid-template-columns: 1fr; }
}

/* User row in admin dashboard */
.user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}
.user-row:last-child { border-bottom: none; }
.user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--gold));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; color: var(--ink); font-size: .95rem; }
.user-email {
    color: var(--muted);
    font-size: .8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ========================================================================
   OWL CAROUSEL — themed for Yusr (rose + gold)
   ======================================================================== */
.hall-gallery-owl-wrap {
    margin: 24px 0 32px;
    padding: 8px 0 4px;
    position: relative;
}
.hall-gallery-owl .owl-slide {
    height: 320px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    transition: transform .35s;
    box-shadow: 0 10px 26px -12px rgba(89, 13, 34, .3);
}
.hall-gallery-owl .owl-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(89, 13, 34, .55) 100%);
    opacity: 0;
    transition: opacity .3s;
}
.hall-gallery-owl .owl-slide:hover::after { opacity: 1; }
.hall-gallery-owl .owl-slide:hover { transform: translateY(-3px); }

.owl-slide-badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: rgba(255, 255, 255, .92);
    color: var(--rose-deep);
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .2);
}
.owl-slide-badge i { color: var(--gold-dark); font-size: .68rem; }

/* Nav arrows */
.hall-gallery-owl .owl-nav { margin-top: 0; }
.hall-gallery-owl .owl-nav button.owl-prev,
.hall-gallery-owl .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--rose-deep) !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    box-shadow: 0 8px 20px -6px rgba(89, 13, 34, .25);
    transition: all .2s;
    z-index: 3;
}
.hall-gallery-owl .owl-nav button.owl-prev { inset-inline-end: -8px; }
.hall-gallery-owl .owl-nav button.owl-next { inset-inline-start: -8px; }
.hall-gallery-owl .owl-nav button.owl-prev:hover,
.hall-gallery-owl .owl-nav button.owl-next:hover {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-50%) scale(1.08);
}
.hall-gallery-owl .owl-nav button.disabled { opacity: .3; }

/* Dots */
.hall-gallery-owl .owl-dots { margin-top: 18px !important; }
.hall-gallery-owl .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    margin: 4px !important;
    background: var(--border-strong) !important;
    transition: all .3s !important;
}
.hall-gallery-owl .owl-dot.active span {
    width: 26px !important;
    background: linear-gradient(90deg, var(--gold), var(--rose)) !important;
}
.hall-gallery-owl .owl-dot:focus { outline: none; }

@media (max-width: 820px) {
    .hall-gallery-owl-wrap { margin: 18px 0 20px; }
    .hall-gallery-owl .owl-slide { height: 240px; border-radius: 16px; }
    .hall-gallery-owl .owl-nav button.owl-prev { inset-inline-end: 4px; }
    .hall-gallery-owl .owl-nav button.owl-next { inset-inline-start: 4px; }
    .hall-gallery-owl .owl-nav button.owl-prev,
    .hall-gallery-owl .owl-nav button.owl-next { width: 40px; height: 40px; }
}

/* ========================================================================
   LIGHTBOX — full-screen image viewer with swipe (PageView style)
   ======================================================================== */
.lightbox-clickable { cursor: zoom-in; position: relative; }
.lightbox-clickable .lightbox-hint {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    border-radius: 50%;
    font-size: .85rem;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.lightbox-clickable:hover .lightbox-hint { opacity: 1; }

/* ---------------- Lightbox ---------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    background: rgba(0, 0, 0, .93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column;
}
.lightbox.open { display: flex; }

/* Top bar (counter left, close right) */
.lb-topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(16px + env(safe-area-inset-top)) 20px 12px;
}
.lb-counter {
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .12);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
}
.lb-counter .lb-sep { opacity: .5; margin: 0 4px; }

.lb-close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 50%;
    font-size: 1.05rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform .2s, background .2s;
}
.lb-close:hover { background: rgba(255, 255, 255, .25); transform: rotate(90deg); }

/* Viewport (fills remaining space) */
.lb-viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
}
.lb-viewport:active { cursor: grabbing; }
.lb-track {
    display: flex;
    height: 100%;
    width: 100%;
    will-change: transform;
}
.lb-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.lb-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, .55);
    user-select: none;
    -webkit-user-drag: none;
}

/* Nav arrows */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .2s, transform .2s;
}
.lb-nav:hover { background: rgba(255, 255, 255, .25); }
.lb-prev { inset-inline-start: 20px; }
.lb-next { inset-inline-end: 20px; }
.lb-prev:hover { transform: translateY(-50%) translateX(3px); }
.lb-next:hover { transform: translateY(-50%) translateX(-3px); }

/* Dot indicators */
.lb-dots {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
}
.lb-dot {
    width: 8px; height: 8px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, .35);
    border-radius: 999px;
    cursor: pointer;
    transition: all .3s;
}
.lb-dot.active {
    width: 26px;
    background: #fff;
}

/* Mobile tweaks */
@media (max-width: 820px) {
    .lb-nav { display: none; }
    .lb-close { width: 40px; height: 40px; }
    .lb-counter { font-size: .82rem; padding: 5px 12px; }
    .lb-slide { padding: 12px; }
}

/* fade-in animation on scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease-out, transform .8s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================================
   SUB-PAGES (Profile, Password, Support, Delete Account)
   ======================================================================== */
.sub-page {
    background: linear-gradient(180deg, var(--cream) 0%, #fff 200px);
    min-height: 70vh;
    padding: 24px 0 80px;
}
.sub-page .container { max-width: 640px; }

/* Hero header with colored gradient */
.sub-hero {
    position: relative;
    text-align: center;
    padding: 34px 24px 32px;
    margin-bottom: 24px;
    background: var(--hero-grad, linear-gradient(135deg, var(--rose), var(--rose-dark)));
    border-radius: 24px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .3);
}
.sub-hero::before {
    content: "";
    position: absolute;
    top: -60px; inset-inline-end: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(201, 169, 110, .35) 0%, transparent 65%);
    border-radius: 50%;
}
.sub-hero::after {
    content: "";
    position: absolute;
    bottom: -80px; inset-inline-start: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 60%);
    border-radius: 50%;
}
.sub-hero-icon {
    position: relative;
    width: 68px; height: 68px;
    margin: 0 auto 14px;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .25);
    z-index: 1;
}
.sub-hero h1 {
    position: relative;
    font-size: 1.6rem;
    color: #fff;
    margin: 0 0 6px;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.sub-hero p {
    position: relative;
    color: rgba(255, 255, 255, .9);
    margin: 0;
    font-size: .95rem;
    z-index: 1;
}

.sub-alert {
    margin-bottom: 16px;
    border-radius: 14px;
}

/* White card container for forms */
.sub-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 26px -14px rgba(89, 13, 34, .15);
    margin-bottom: 16px;
}
.sub-card .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--rose-deep);
    font-size: .88rem;
}
.sub-card .form-label i { color: var(--gold-dark); font-size: .78rem; }
.sub-card .form-control {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .95rem;
}
.sub-card-soft { background: linear-gradient(135deg, #fff, var(--cream)); }
.sub-card-danger { border-color: #f4bfcc; background: linear-gradient(180deg, #fff, #fef7f9); }

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--danger);
    font-size: .82rem;
    font-weight: 600;
}

/* Avatar preview inside profile form */
.sub-avatar-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin: -8px -8px 20px;
    background: linear-gradient(135deg, var(--cream), #fff);
    border-radius: 16px;
    border: 1px solid var(--border);
}
.sap-circle {
    width: 60px; height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rose), var(--gold));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    box-shadow: 0 6px 14px -3px rgba(200, 24, 74, .35);
    flex-shrink: 0;
}
.sap-caption { min-width: 0; }
.sap-name { font-weight: 800; color: var(--rose-deep); font-size: 1.05rem; }
.sap-role { font-size: .8rem; color: var(--gold-dark); margin-top: 2px; font-weight: 600; }

/* Action buttons row */
.sub-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 20px;
}
.sub-actions .btn { width: 100%; }

/* Password tips */
.sub-tips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--cream), #fff);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    margin-bottom: 20px;
}
.sub-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: var(--muted);
    font-weight: 500;
}

/* ---------- Contact / Support page ---------- */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--ink);
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 12px -6px rgba(89, 13, 34, .12);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(89, 13, 34, .2); }
.cc-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 5px 12px -3px rgba(0, 0, 0, .25);
}
.cc-body { flex: 1; min-width: 0; }
.cc-label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.cc-value { font-weight: 800; color: var(--rose-deep); font-size: 1rem; margin-top: 2px; }
.cc-arrow { color: var(--muted); font-size: .78rem; opacity: .5; }
.contact-card:hover .cc-arrow { opacity: 1; color: var(--rose); }

.soft-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--rose-deep);
}
.soft-head i {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--rose-mist), var(--cream));
    color: var(--rose-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: .85rem;
}
.soft-head h3 { font-size: 1rem; margin: 0; color: var(--rose-deep); }

.hours-list { display: flex; flex-direction: column; gap: 8px; }
.hour-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .9rem;
}
.hour-row span { color: var(--muted); font-weight: 600; }
.hour-row strong { color: var(--rose-deep); }

/* Social strip */
.social-strip {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 20px 0;
}
.soc {
    width: 46px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-size: 1.1rem;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .3);
}
.soc:hover { transform: translateY(-3px); color: #fff; }
.soc-fb { background: linear-gradient(135deg, #1877f2, #0d5cbb); }
.soc-ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.soc-tw { background: linear-gradient(135deg, #000, #333); }
.soc-tk { background: linear-gradient(135deg, #000, #444); }

/* Danger notice on delete page */
.danger-notice {
    background: linear-gradient(135deg, #fef2f5, #fff);
    border: 1px solid #f4bfcc;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.dn-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--danger);
    font-size: .98rem;
    margin-bottom: 12px;
}
.dn-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dn-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--rose-deep);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
}
.dn-list li i {
    color: var(--danger);
    font-size: .78rem;
    margin-top: 4px;
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .sub-page { padding: 16px 0 30px; }
    .sub-hero { padding: 26px 20px 24px; border-radius: 20px; margin-bottom: 20px; }
    .sub-hero h1 { font-size: 1.35rem; }
    .sub-hero p { font-size: .88rem; }
    .sub-hero-icon { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 18px; }
    .sub-card { padding: 18px; border-radius: 18px; }
    .sub-actions { grid-template-columns: 1fr; }
    .sub-actions .btn { padding: 14px; }
    .contact-card { padding: 14px 16px; }
    .cc-icon { width: 42px; height: 42px; font-size: 1rem; }
}

/* ========================================================================
   FAVORITES PAGE
   ======================================================================== */
.favorites-page { padding: 40px 0 80px; background: linear-gradient(180deg, var(--cream) 0%, #fff 300px); min-height: 70vh; }
.fav-head { text-align: center; margin-bottom: 30px; }
.fav-head h1 { font-size: 2rem; font-weight: 800; color: var(--rose-deep); margin: 0 0 6px; }
.fav-head p { color: var(--muted); margin: 0; }
.fav-empty { text-align: center; padding: 40px 20px; max-width: 500px; margin: 0 auto; }
.fav-empty-illust {
    position: relative;
    width: 180px; height: 180px;
    margin: 0 auto 24px;
}
.fav-heart {
    position: absolute;
    inset: 30px;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3.5rem;
    box-shadow: 0 20px 40px -10px rgba(200, 24, 74, .5);
    animation: favBeat 1.8s ease-in-out infinite;
}
@keyframes favBeat {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.08); }
    50% { transform: scale(1); }
    70% { transform: scale(1.04); }
}
.fav-sparkle {
    position: absolute;
    color: var(--gold);
    font-size: 1.3rem;
    animation: favSparkle 2s ease-in-out infinite;
}
.fav-sparkle.s1 { top: 10px; inset-inline-start: 20px; animation-delay: 0s; }
.fav-sparkle.s2 { top: 20px; inset-inline-end: 15px; animation-delay: .5s; font-size: 1rem; }
.fav-sparkle.s3 { bottom: 20px; inset-inline-start: 10px; animation-delay: 1s; font-size: .9rem; }
@keyframes favSparkle {
    0%, 100% { opacity: .4; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.3) rotate(15deg); }
}
.fav-empty h2 { color: var(--rose-deep); margin: 0 0 8px; font-size: 1.35rem; }
.fav-empty p { color: var(--muted); margin: 0 0 24px; }
.fav-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ========================================================================
   MORE PAGE
   ======================================================================== */
.more-page { padding: 30px 0 80px; background: linear-gradient(180deg, var(--cream) 0%, #fff 200px); }

/* Header user card */
.more-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--rose-deep) 0%, var(--rose-dark) 60%, var(--rose) 120%);
    border-radius: 22px;
    color: #fff;
    box-shadow: 0 16px 36px -14px rgba(200, 24, 74, .5);
    overflow: hidden;
}
.more-header::before {
    content: "";
    position: absolute;
    top: -30px; inset-inline-end: -30px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(201, 169, 110, .3) 0%, transparent 70%);
    border-radius: 50%;
}
.mh-avatar {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff, var(--cream));
    color: var(--rose-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .25), inset 0 0 0 3px var(--gold);
    flex-shrink: 0;
    z-index: 1;
}
.mh-body { flex: 1; min-width: 0; z-index: 1; }
.mh-name { font-size: 1.35rem; font-weight: 800; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-email { font-size: .82rem; opacity: .85; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .2);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.mh-role i { color: var(--gold); }
.mh-decor {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 20px;
    color: rgba(255, 255, 255, .15);
    font-size: 2.5rem;
    z-index: 0;
}

/* Stats strip */
.more-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: 18px;
    padding: 16px 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px -8px rgba(89, 13, 34, .12);
}
.ms-item { text-align: center; position: relative; }
.ms-item + .ms-item::before {
    content: "";
    position: absolute;
    inset-inline-end: 100%;
    top: 15%; bottom: 15%;
    width: 1px;
    background: var(--border);
}
.ms-value { font-size: 1.4rem; font-weight: 800; color: var(--rose-deep); line-height: 1; }
.ms-label { font-size: .76rem; color: var(--muted); margin-top: 4px; font-weight: 600; }

/* Section groups */
.more-section { margin-bottom: 18px; }
.more-section-title {
    font-size: .74rem;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: .12em;
    padding: 0 6px 8px;
}
.more-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px -8px rgba(89, 13, 34, .1);
    overflow: hidden;
}
.ml-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: var(--ink);
    background: none;
    border: none;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
    width: 100%;
}
.ml-item + .ml-item { border-top: 1px solid var(--border); }
.ml-item:hover { background: var(--cream); }
.ml-item:active { background: var(--rose-mist); }
.ml-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .2);
}
.ml-body { flex: 1; min-width: 0; }
.ml-title { display: block; font-weight: 700; color: var(--rose-deep); font-size: .95rem; }
.ml-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ml-arrow { color: var(--muted); font-size: .78rem; opacity: .5; }
.ml-item:hover .ml-arrow { opacity: 1; color: var(--rose); }
.ml-danger .ml-title { color: var(--danger); }

/* Collapsible cards */
.more-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px -8px rgba(89, 13, 34, .15);
    overflow: hidden;
    animation: mcSlideIn .3s ease;
}
@keyframes mcSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--cream), #fff);
    border-bottom: 1px solid var(--border);
}
.mc-head h3 {
    font-size: 1rem;
    margin: 0;
    color: var(--rose-deep);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mc-head h3 i { color: var(--gold-dark); }
.mc-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(122, 90, 102, .1);
    border: none;
    border-radius: 10px;
    color: var(--muted);
    cursor: pointer;
    font-size: .9rem;
    transition: background .2s;
}
.mc-close:hover { background: rgba(122, 90, 102, .2); }
.mc-body { padding: 18px; }
.more-card.danger { border-color: #f4bfcc; }

/* Guest state */
.more-guest {
    text-align: center;
    padding: 40px 20px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 6px 18px -10px rgba(89, 13, 34, .15);
    max-width: 480px;
    margin: 0 auto 20px;
}
.mg-avatar {
    width: 88px; height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 12px 24px -8px rgba(200, 24, 74, .5);
    border: 4px solid var(--gold);
}
.more-guest h2 { color: var(--rose-deep); margin: 0 0 8px; }
.more-guest p { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
.mg-actions { max-width: 320px; margin: 0 auto; }

.more-footer {
    text-align: center;
    margin-top: 32px;
    color: var(--muted);
    font-size: .85rem;
}
.more-footer p { margin: 0 0 4px; }

@media (max-width: 820px) {
    .more-page { padding: 20px 0 30px; }
    .more-header { padding: 20px; border-radius: 20px; }
    .mh-avatar { width: 60px; height: 60px; font-size: 1.7rem; border-radius: 16px; }
    .mh-name { font-size: 1.15rem; }
    .mh-email { font-size: .78rem; }
    .favorites-page { padding: 24px 0 30px; }
    .fav-head h1 { font-size: 1.6rem; }
    .fav-head p { font-size: .9rem; }
}

/* ========================================================================
   SEARCH PAGE — app-style dedicated search
   ======================================================================== */
.search-page { background: #fff; min-height: 100vh; padding-bottom: 40px; }

.sp-searchbar-wrap {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 14px 0 12px;
}
.sp-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-back {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--rose-deep);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .2s;
}
.sp-back:hover { background: var(--rose-mist); }

.sp-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0 12px;
    transition: border-color .2s, box-shadow .2s;
}
.sp-input-wrap:focus-within {
    border-color: var(--rose-soft);
    box-shadow: 0 0 0 4px rgba(255, 179, 193, .3);
    background: #fff;
}
.sp-input-icon { color: var(--muted); margin-inline-end: 8px; font-size: .95rem; }
.sp-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 0;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    min-width: 0;
}
.sp-input-wrap input::placeholder { color: var(--muted); }
.sp-clear {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(122, 90, 102, .15);
    color: var(--muted);
    border-radius: 50%;
    font-size: .75rem;
    flex-shrink: 0;
}
.sp-clear:hover { background: rgba(122, 90, 102, .25); }
.sp-submit {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(200, 24, 74, .5);
}

/* Type filter chips */
.sp-type-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 12px -18px 0;
    padding: 0 18px 2px;
}
.sp-type-chips::-webkit-scrollbar { display: none; }
.sp-type-chips a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transition: all .2s;
}
.sp-type-chips a i { font-size: .72rem; color: var(--muted); }
.sp-type-chips a:hover { background: var(--cream); }
.sp-type-chips a.active {
    background: linear-gradient(135deg, var(--rose), var(--rose-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px -3px rgba(200, 24, 74, .45);
}
.sp-type-chips a.active i { color: #fff; }

.sp-content { padding-top: 20px; }
.sp-section-title {
    font-size: .82rem;
    font-weight: 800;
    color: var(--rose-deep);
    letter-spacing: .05em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-section-title i { color: var(--gold); font-size: .8rem; }

/* Discover state */
.sp-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 12px;
}
.sp-discover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 6px 14px -8px rgba(89, 13, 34, .12);
    color: var(--ink);
    transition: transform .2s, box-shadow .2s;
}
.sp-discover-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(89, 13, 34, .2);
}
.sp-discover-card:active { transform: scale(.96); }
.sp-dc-icon {
    width: 46px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tile-bg);
    color: #fff;
    border-radius: 14px;
    font-size: 1.05rem;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .25);
}
.sp-dc-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--rose-deep);
    text-align: center;
}

/* Cities horizontal scroll */
.sp-cities-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -18px;
    padding: 2px 18px 8px;
}
.sp-cities-scroll::-webkit-scrollbar { display: none; }
.sp-city-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff, var(--cream));
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--rose-deep);
    white-space: nowrap;
    transition: all .2s;
}
.sp-city-chip i { color: var(--gold-dark); font-size: .75rem; }
.sp-city-chip:hover { background: var(--rose-mist); border-color: var(--rose-soft); }

/* Suggestions list */
.sp-suggestions { display: flex; flex-direction: column; gap: 8px; }
.sp-suggest {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 600;
    transition: background .2s;
}
.sp-suggest > i:first-child {
    color: var(--muted);
    font-size: .85rem;
}
.sp-suggest span { flex: 1; }
.sp-suggest > i:last-child { color: var(--rose); font-size: .8rem; opacity: .5; }
.sp-suggest:hover { background: var(--rose-mist); }
.sp-suggest:hover > i:last-child { opacity: 1; }

/* Results */
.sp-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 16px;
    color: var(--muted);
    font-size: .9rem;
}
.sp-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--rose);
    padding: 6px 10px;
    background: var(--rose-mist);
    border-radius: 999px;
}
.sp-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.sp-empty-icon {
    font-size: 3rem;
    color: var(--rose-soft);
    margin-bottom: 14px;
}
.sp-empty h3 { color: var(--rose-deep); margin: 0 0 6px; font-size: 1.15rem; }
.sp-empty p { margin: 0; font-size: .92rem; }

.sp-group { margin-bottom: 24px; }
.sp-group-head { padding: 4px 4px 10px; }
.sp-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--rose-deep);
    font-size: 1rem;
}
.sp-group-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    border-radius: 10px;
    font-size: .85rem;
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .2);
}
.sp-group-count {
    margin-inline-start: auto;
    background: var(--cream);
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}
.sp-group-list { display: flex; flex-direction: column; gap: 8px; }

.sp-result {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--ink);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sp-result:hover {
    transform: translateX(-3px);
    border-color: var(--rose-soft);
    box-shadow: 0 6px 14px -6px rgba(89, 13, 34, .15);
}
.sp-result-media {
    width: 64px; height: 64px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .8);
    font-size: 1.35rem;
}
.sp-result-body { min-width: 0; }
.sp-result-name {
    font-weight: 700;
    color: var(--rose-deep);
    font-size: .96rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-result-meta {
    font-size: .8rem;
    color: var(--muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sp-result-meta i { color: var(--gold-dark); font-size: .7rem; }
.sp-result-arrow {
    color: var(--muted);
    font-size: .8rem;
    padding: 0 6px;
}

@media (max-width: 820px) {
    .search-page { padding-bottom: 20px; min-height: calc(100vh - 60px); }
    /* Sit just below the fixed topbar (~66px) */
    .sp-searchbar-wrap { top: calc(66px + env(safe-area-inset-top)); padding: 10px 0; }
    .sp-back { width: 40px; height: 40px; border-radius: 12px; }
    .sp-submit { width: 40px; height: 40px; border-radius: 12px; }
    .sp-input-wrap { border-radius: 12px; }
    .sp-input-wrap input { padding: 10px 0; font-size: .9rem; }
    .sp-discover-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .sp-dc-icon { width: 42px; height: 42px; border-radius: 13px; }
    .sp-dc-label { font-size: .72rem; }
    .sp-content { padding-top: 18px; }
    .sp-suggest { padding: 11px 12px; font-size: .88rem; }
    .sp-result { grid-template-columns: 56px 1fr auto; gap: 10px; }
    .sp-result-media { width: 56px; height: 56px; border-radius: 11px; font-size: 1.2rem; }
}

/* ========================================================================
   CATEGORIES PAGE
   ======================================================================== */
.categories-page { padding: 60px 0 80px; background: linear-gradient(180deg, var(--cream) 0%, #fff 400px); }
.cats-head { text-align: center; margin-bottom: 40px; }
.cats-head h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--rose-deep);
    margin: 0 0 8px;
    letter-spacing: -.02em;
}
.cats-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

.cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}
.cat-tile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 10px 24px -14px rgba(89, 13, 34, .15);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
    overflow: hidden;
    color: var(--ink);
}
.cat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -14px rgba(89, 13, 34, .22);
    border-color: var(--rose-soft);
}
.cat-tile-icon {
    width: 62px; height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tile-bg);
    color: #fff;
    font-size: 1.5rem;
    border-radius: 18px;
    box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .25);
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.cat-tile:hover .cat-tile-icon { transform: rotate(-6deg) scale(1.05); }
.cat-tile-body { min-width: 0; }
.cat-tile-body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rose-deep);
    margin: 0 0 4px;
    line-height: 1.2;
}
.cat-tile-body p {
    font-size: .88rem;
    color: var(--muted);
    margin: 0 0 8px;
    line-height: 1.4;
}
.cat-tile-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--gold-dark);
    background: var(--cream);
    padding: 4px 10px;
    border-radius: 999px;
}
.cat-tile-count i { font-size: .7rem; }
.cat-tile-arrow {
    color: var(--rose);
    font-size: 1rem;
    opacity: .5;
    transition: opacity .2s, transform .2s;
}
.cat-tile:hover .cat-tile-arrow { opacity: 1; transform: translateX(-4px); }

@media (max-width: 820px) {
    .categories-page { padding: 20px 0 100px; }
    .cats-head { margin-bottom: 20px; text-align: start; padding: 0 4px; }
    .cats-head h1 { font-size: 1.8rem; }
    .cats-head p { font-size: .92rem; }
    .cats-grid { grid-template-columns: 1fr; gap: 12px; }
    .cat-tile { padding: 14px; gap: 12px; border-radius: 18px; }
    .cat-tile-icon { width: 54px; height: 54px; font-size: 1.25rem; border-radius: 15px; }
    .cat-tile-body h3 { font-size: 1rem; }
    .cat-tile-body p { font-size: .82rem; }
    .cat-tile:active { transform: scale(.98); }
}

/* ========================================================================
   MOBILE APP LOOK — makes the site feel like a native mobile app
   ======================================================================== */

/* Default: hide mobile-only elements on desktop */
.mobile-app-hero { display: none; }
.bottom-nav { display: none; }
.mobile-section-head { display: none; }
.mobile-only-section { display: none; }

@media (max-width: 820px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
        -webkit-tap-highlight-color: transparent;
    }
    html { scroll-behavior: smooth; }

    /* Hide desktop hero, show mobile hero */
    .hero-v2 { display: none; }
    .mobile-app-hero {
        display: block;
        padding: 12px 20px 24px;
        background:
            radial-gradient(circle at 92% -30%, rgba(201, 169, 110, .28) 0%, transparent 60%),
            radial-gradient(circle at 8% 40%, rgba(200, 24, 74, .1) 0%, transparent 55%),
            linear-gradient(180deg, var(--cream) 0%, #fff 100%);
        position: relative;
    }

    /* ---------- Promotional Slider ---------- */
    .mah-slider {
        position: relative;
        margin: 4px -20px 20px;
        overflow: hidden;
    }
    .mah-slides {
        display: flex;
        will-change: transform;
        transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    }
    /* In RTL, first slide is at the right; translateX positive shifts left, showing next */
    .mah-slide {
        flex: 0 0 100%;
        min-width: 0;
        position: relative;
        height: 170px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px 0 22px;
        color: #fff;
        overflow: hidden;
        margin-inline: 20px;
        border-radius: 22px;
        box-shadow: 0 10px 26px -10px rgba(89, 13, 34, .35);
    }
    /* subtract the two 20px margins so each slide fills the viewport-carousel neatly */
    .mah-slide { flex-basis: calc(100% - 40px); }

    .mah-slide-body {
        flex: 1;
        min-width: 0;
        z-index: 2;
        animation: mahSlideIn .7s .1s both cubic-bezier(.34, 1.56, .64, 1);
    }
    .mah-slide-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .95);
        color: var(--rose-deep);
        font-size: .68rem;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 999px;
        margin-bottom: 8px;
        box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .2);
    }
    .mah-slide-badge i { color: var(--gold-dark); font-size: .65rem; }
    .mah-slide h3 {
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.2;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }
    .mah-slide p {
        font-size: .84rem;
        margin: 0 0 10px;
        opacity: .95;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    }
    .mah-slide-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .82rem;
        font-weight: 700;
        color: #fff;
        background: rgba(255, 255, 255, .18);
        border: 1px solid rgba(255, 255, 255, .35);
        padding: 6px 12px;
        border-radius: 999px;
        backdrop-filter: blur(6px);
    }
    .mah-slide-icon {
        position: absolute;
        inset-inline-end: -20px;
        top: -20px;
        width: 150px; height: 150px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .28) 0%, transparent 70%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.6rem;
        color: rgba(255, 255, 255, .35);
        z-index: 1;
        animation: mahIconFloat 4s ease-in-out infinite alternate;
    }
    @keyframes mahIconFloat {
        0% { transform: translate(0, 0) rotate(-8deg); }
        100% { transform: translate(-6px, 6px) rotate(4deg); }
    }
    @keyframes mahSlideIn {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* Dots */
    .mah-slider-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
    }
    .mah-slider-dots button {
        width: 6px; height: 6px;
        padding: 0;
        border: none;
        background: var(--border-strong);
        border-radius: 999px;
        cursor: pointer;
        transition: all .3s;
    }
    .mah-slider-dots button.active {
        width: 22px;
        background: linear-gradient(90deg, var(--rose), var(--gold));
    }

    /* Title */
    .mah-title {
        font-size: 1.9rem;
        line-height: 1.2;
        font-weight: 800;
        color: var(--rose-deep);
        margin: 6px 0 18px;
        letter-spacing: -.02em;
    }
    .mah-title span {
        color: var(--rose);
        background: linear-gradient(135deg, var(--rose), var(--rose-dark));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Search input */
    .mah-search {
        position: relative;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 18px;
        padding: 6px 6px 6px 16px;
        box-shadow: 0 10px 28px -12px rgba(89, 13, 34, .18);
        border: 1px solid rgba(241, 215, 222, .8);
    }
    .mah-search-icon { color: var(--muted); font-size: .95rem; margin-inline-end: 10px; }
    .mah-search input {
        flex: 1;
        border: none;
        outline: none;
        padding: 12px 0;
        background: transparent;
        font-family: inherit;
        font-size: .95rem;
        color: var(--ink);
        min-width: 0;
    }
    .mah-search input::placeholder { color: var(--muted); }
    .mah-search button {
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--rose), var(--rose-dark));
        color: #fff;
        border: none;
        border-radius: 14px;
        cursor: pointer;
        font-size: .95rem;
        box-shadow: 0 4px 12px -3px rgba(200, 24, 74, .45);
    }

    /* Quick shortcut chips — vertical icon+label tiles */
    .mah-chips {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 18px -20px 0;
        padding: 4px 20px 8px;
    }
    .mah-chips::-webkit-scrollbar { display: none; }
    .mah-chips a {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 6px 8px;
        min-width: 68px;
        background: rgba(255, 255, 255, .8);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, .9);
        border-radius: 18px;
        font-size: .74rem;
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
        text-align: center;
        transition: transform .2s, box-shadow .2s;
        box-shadow: 0 4px 12px -6px rgba(89, 13, 34, .12);
    }
    .mah-chips a i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        border-radius: 13px;
        color: #fff;
        font-size: 1rem;
        background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
        box-shadow: 0 5px 12px -3px rgba(200, 24, 74, .5);
    }
    .mah-chips a:nth-child(2) i { background: linear-gradient(135deg, #4d9d6f, #1c6b41); box-shadow: 0 5px 12px -3px rgba(47, 143, 92, .5); }
    .mah-chips a:nth-child(3) i { background: linear-gradient(135deg, #d09ba8, #7a5a66); box-shadow: 0 5px 12px -3px rgba(122, 90, 102, .45); }
    .mah-chips a:nth-child(4) i { background: linear-gradient(135deg, #e39fb0, #b3324e); box-shadow: 0 5px 12px -3px rgba(179, 50, 78, .45); }
    .mah-chips a:nth-child(5) i { background: linear-gradient(135deg, #6a5a8f, #3b2d5c); box-shadow: 0 5px 12px -3px rgba(59, 45, 92, .45); }
    .mah-chips a:nth-child(6) i { background: linear-gradient(135deg, #d4a55a, #8a5a15); box-shadow: 0 5px 12px -3px rgba(138, 90, 21, .45); }

    .mah-chips a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(89, 13, 34, .2); }
    .mah-chips a:active { transform: translateY(0) scale(.96); }
    .mah-chips a:active i { transform: rotate(-6deg); }

    /* Stats strip inside hero */
    .mah-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-top: 18px;
        padding: 14px 10px;
        background: rgba(255, 255, 255, .7);
        backdrop-filter: blur(6px);
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: 0 6px 18px -10px rgba(89, 13, 34, .12);
    }
    .mah-stat { text-align: center; position: relative; }
    .mah-stat + .mah-stat::after {
        content: "";
        position: absolute;
        inset-inline-end: 100%;
        top: 20%; bottom: 20%;
        width: 1px;
        background: var(--border);
    }
    .mah-stat-value {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--rose-deep);
        line-height: 1;
    }
    .mah-stat-label {
        font-size: .72rem;
        color: var(--muted);
        margin-top: 4px;
        font-weight: 600;
    }

    /* ---------- Categories section hidden on mobile (chips in hero cover this) ---------- */
    .section-categories { display: none; }
    .section-categories { padding: 12px 0 8px; background: #fff; }
    .section-categories .container { padding: 0 16px; }
    .section-categories .section-title-v2 { display: none; }  /* title hidden on mobile */

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .category-card {
        padding: 16px 14px;
        border-radius: 20px;
        background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
        border: 1px solid var(--border);
        box-shadow: 0 6px 16px -10px rgba(89, 13, 34, .12);
        text-align: start;
        min-height: unset;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        overflow: hidden;
        transition: transform .2s, box-shadow .25s;
    }
    .category-card::before,
    .category-card::after { display: none !important; }
    /* Decorative corner accent */
    .category-card > * { position: relative; z-index: 2; }
    .category-card:hover { transform: none; box-shadow: 0 10px 22px -10px rgba(89, 13, 34, .2); }
    .category-card:active { transform: scale(.97); }

    .category-card .cat-icon {
        width: 46px; height: 46px;
        margin: 0;
        border-radius: 14px;
        font-size: 1.05rem;
        box-shadow: 0 6px 14px -4px rgba(200, 24, 74, .4);
        background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }
    .category-card:active .cat-icon { transform: rotate(-8deg) scale(.94); }
    .category-card:nth-child(2) .cat-icon { background: linear-gradient(135deg, #d09ba8, #7a5a66); }
    .category-card:nth-child(3) .cat-icon { background: linear-gradient(135deg, #e39fb0, #b3324e); }
    .category-card:nth-child(4) .cat-icon { background: linear-gradient(135deg, #4d9d6f, #1c6b41); }
    .category-card:nth-child(5) .cat-icon { background: linear-gradient(135deg, #d4a55a, #8a5a15); }
    .category-card:nth-child(6) .cat-icon { background: linear-gradient(135deg, #6a5a8f, #3b2d5c); }
    .category-card:nth-child(7) .cat-icon { background: linear-gradient(135deg, #3e8f5c, #1c6b41); }

    .category-card h3 {
        font-size: .95rem;
        margin: 0 0 2px;
        color: var(--rose-deep);
        font-weight: 800;
        line-height: 1.2;
    }
    .category-card p {
        display: block;
        font-size: .72rem;
        color: var(--muted);
        margin: 0;
        line-height: 1.3;
        font-weight: 500;
    }
    .category-card.coming-soon .cat-icon { background: linear-gradient(135deg, #c9b5bc, #a89099) !important; }

    /* ---------- Section titles compact ---------- */
    .section-title-v2 { margin-bottom: 18px; }
    .section-title-v2 h2 { font-size: 1.35rem; line-height: 1.3; }
    .section-title-v2 p { font-size: .88rem; line-height: 1.6; }
    .section-title-v2 .eyebrow { font-size: .72rem; letter-spacing: .12em; }

    /* ---------- Reduce padding across all sections ---------- */
    .section { padding: 32px 0 !important; }
    .section-categories { padding: 24px 0 !important; }
    .section-how, .section-faq, .section-benefits,
    .section-testimonials, .section-vendor, .section-cta-big { padding: 32px 0; }

    /* ---------- Featured halls: horizontal scroll carousel ---------- */
    .section-featured-halls { padding: 20px 0 8px !important; background: #fff !important; }
    .section-featured-halls .section-title-v2 { display: none; }  /* hide desktop title on mobile */
    .section-view-all-btn { display: none; }  /* hide "view all N halls" button on mobile */

    .mobile-section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 0 4px;
        margin-bottom: 14px;
    }
    .mobile-section-head h2 {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--rose-deep);
        margin: 0;
        position: relative;
        padding-inline-end: 6px;
    }
    .mobile-section-head h2 span {
        position: relative;
        display: inline-block;
    }
    .mobile-section-head h2 span::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        bottom: -4px;
        height: 4px;
        background: linear-gradient(90deg, var(--gold), var(--rose));
        border-radius: 999px;
    }
    .mobile-section-head .msh-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: .82rem;
        font-weight: 700;
        color: var(--rose);
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--rose-mist);
        transition: background .2s;
    }
    .mobile-section-head .msh-link i { font-size: .7rem; }
    .mobile-section-head .msh-link:active { background: var(--cream); }

    .halls-scroll-strip {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 4px 18px 18px;
        margin: 0 -18px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .halls-scroll-strip::-webkit-scrollbar { display: none; }
    .halls-scroll-strip > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    /* ---------- How-it-works: hidden on mobile ---------- */
    .section-how { display: none !important; }
    .section-how { padding: 20px 0 24px !important; }
    .section-how .section-title-v2 {
        text-align: start;
        margin-bottom: 20px;
    }
    .section-how .section-title-v2 .eyebrow { display: none; }
    .section-how .section-title-v2 h2 {
        font-size: 1.15rem;
        margin: 0;
        color: var(--rose-deep);
    }
    .section-how .section-title-v2 p { display: none; }

    .steps-grid {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0;
        padding: 8px 0 0;
        position: relative;
    }
    .steps-grid::before { display: none; }

    /* Single continuous track behind all steps */
    .steps-grid::after {
        content: "";
        position: absolute;
        top: 18px;    /* centered on 36px circles */
        inset-inline-start: 18%;
        inset-inline-end: 18%;
        height: 2px;
        background: linear-gradient(90deg, var(--rose), var(--gold));
        opacity: .35;
        border-radius: 2px;
        z-index: 0;
    }

    .step-card {
        flex: 1;
        padding: 0;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        text-align: center;
        position: relative;
        min-width: 0;
        z-index: 1;
    }
    .step-card::after { display: none !important; }

    .step-visual {
        margin: 0 auto 8px;
        width: 36px; height: 36px;
        position: relative;
    }
    .step-bg { display: none !important; }

    /* Show number only — hide icon */
    .step-icon { display: none !important; }

    .step-badge {
        position: static;
        top: auto; inset-inline-end: auto;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--rose), var(--rose-dark));
        color: #fff;
        font-size: .95rem;
        font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 10px -3px rgba(200, 24, 74, .5);
        border: 3px solid #fff;
        outline: 1px solid var(--border);
    }

    .step-card h3 {
        font-size: .78rem;
        font-weight: 700;
        color: var(--rose-deep);
        margin: 0;
        line-height: 1.3;
        padding: 0 2px;
        max-width: 90px;
        margin-inline: auto;
    }
    .step-card p { display: none; }

    /* ---------- Benefits: card grid, hide image ---------- */
    .benefits-image { display: none; }
    .benefits-grid { grid-template-columns: 1fr; gap: 16px; }
    .benefits-list li { padding: 12px; background: var(--cream); border-radius: 14px; margin-bottom: 10px; }

    /* ---------- Hidden on mobile home; show mobile-only category strips ---------- */
    .section-testimonials { display: none; }
    .section-faq { display: none; }
    .section-benefits { display: none; }
    .section-vendor { display: none; }
    .section-cta-big { display: none; }
    /* the "Features (icons)" section — has no dedicated class, target by inline bg */
    .section[style*="off-white"]:not(.section-featured-halls):not(.mobile-only-section) { display: none; }
    /* Show mobile-only category strips */
    .mobile-only-section { display: block !important; }
    /* FAQ still visible on /faq page — override */
    body.faq-page .section-faq { display: block; }

    /* ---------- Features (icons grid): 2 cols ---------- */
    .features-v2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .feature-v2 { padding: 18px 12px; }
    .feature-v2 h3 { font-size: .95rem; }
    .feature-v2 p { font-size: .8rem; line-height: 1.5; }

    /* ---------- Vendor CTA: compact stack ---------- */
    .vendor-grid { grid-template-columns: 1fr; gap: 18px; }
    .vendor-image { display: none; }
    .vendor-perks { grid-template-columns: 1fr; }

    /* ---------- Big CTA ---------- */
    .cta-big { padding: 40px 20px !important; border-radius: 22px; }
    .cta-big h2 { font-size: 1.5rem; }
    .cta-big p { font-size: .95rem; }

    /* ---------- FAQ: compact ---------- */
    .faq-item summary { font-size: .95rem; padding: 14px 16px; }
    .faq-body { font-size: .88rem; padding: 0 16px 14px; }

    /* Tighter container padding on mobile */
    .container { padding: 0 18px; }
}

/* ---------- BOTTOM NAVIGATION (mobile app style) ---------- */
@media (max-width: 820px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0; right: 0;
        z-index: 45;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--border);
        padding: 8px 6px calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 30px -12px rgba(89, 13, 34, .2);
        align-items: flex-end;
        justify-content: space-around;
    }
    .bottom-nav::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        opacity: .5;
    }
    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px 4px;
        border-radius: 12px;
        color: var(--muted);
        font-size: .68rem;
        font-weight: 700;
        transition: color .2s;
        max-width: 80px;
        position: relative;
    }
    .bottom-nav a i { font-size: 1.15rem; transition: transform .2s; }
    .bottom-nav a span { line-height: 1; }
    .bottom-nav a:active i { transform: scale(.85); }
    .bottom-nav a.active {
        color: var(--rose-deep);
    }
    .bottom-nav a.active::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 30%; right: 30%;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--rose));
        border-radius: 0 0 3px 3px;
    }
    .bottom-nav a.active i { color: var(--rose); }

    /* Center CTA button — elevated pill */
    .bottom-nav .bn-cta {
        flex: 0 0 auto;
        padding: 0;
        max-width: none;
    }
    .bottom-nav .bn-cta-bubble {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px; height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--rose), var(--rose-dark));
        color: #fff;
        font-size: 1.15rem;
        box-shadow: 0 10px 24px -6px rgba(200, 24, 74, .55), inset 0 -2px 6px rgba(0, 0, 0, .12);
        transform: translateY(-14px);
        border: 4px solid #fff;
        transition: transform .2s;
    }
    .bottom-nav .bn-cta:active .bn-cta-bubble { transform: translateY(-12px) scale(.94); }

    /* Hide footer on mobile — bottom nav replaces it */
    .site-footer { display: none; }
}