/* ============================================================
   FUNJOYA — Design System (Hebrew RTL)
   ------------------------------------------------------------
   Tokens come straight from the approved mockups (S01–S14, C01–C16):
   navy #172C55 · pink #EF287D · yellow #FFE600 · bg #F6F7FB ·
   border #E9EDF3 · muted #7D879A · Heebo.
   The admin area uses pink for its primary action; the customer
   pages use yellow. Everything else is shared.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --fj-navy: #172C55;
    --fj-navy-rgb: 23, 44, 85;
    --fj-navy-dark: #0F1F3F;
    --fj-navy-soft: rgba(var(--fj-navy-rgb), .08);
    --fj-pink: #EF287D;
    --fj-pink-rgb: 239, 40, 125;
    --fj-pink-dark: #D11A69;
    --fj-pink-soft: rgba(var(--fj-pink-rgb), .10);
    --fj-yellow: #FFE600;
    --fj-yellow-dark: #E6CF00;
    --fj-yellow-soft: #FFF9C2;

    --fj-success: #1C8A5A;
    --fj-success-soft: #E3F5EC;
    --fj-warning: #A66A00;
    --fj-warning-soft: #FFF3CC;
    --fj-danger: #C62828;
    --fj-danger-soft: #FDE7E7;
    --fj-info: #2F5FD0;
    --fj-info-soft: #E8EEFC;

    --fj-bg: #F6F7FB;
    --fj-surface: #FFFFFF;
    --fj-text: #172C55;
    --fj-muted: #7D879A;
    --fj-border: #E9EDF3;

    --fj-radius: 14px;
    --fj-radius-sm: 10px;
    --fj-shadow: 0 1px 2px rgba(23, 44, 85, .04), 0 8px 24px rgba(23, 44, 85, .06);
    --fj-shadow-sm: 0 1px 2px rgba(23, 44, 85, .06);

    --fj-sidebar-w: 248px;
    --fj-font: 'Heebo', Arial, 'Arial Hebrew', sans-serif;

    /* Role of "primary" differs per surface; the admin shell sets pink, the customer shell yellow. */
    --fj-primary: var(--fj-pink);
    --fj-primary-rgb: var(--fj-pink-rgb);
    --fj-primary-dark: var(--fj-pink-dark);
    --fj-primary-soft: var(--fj-pink-soft);
    --fj-primary-text: #fff;
}

/* ---------- Dark theme (admin only; toggled from the top bar, saved in localStorage) ---------- */
html[data-theme="dark"] {
    --fj-bg: #0F1829;
    --fj-surface: #172238;
    --fj-text: #E6EAF2;
    --fj-muted: #93A0B8;
    --fj-border: #27344D;
    --fj-navy-soft: rgba(255, 255, 255, .06);
    --fj-success-soft: rgba(28, 138, 90, .18);
    --fj-warning-soft: rgba(166, 106, 0, .22);
    --fj-danger-soft: rgba(198, 40, 40, .2);
    --fj-info-soft: rgba(47, 95, 208, .2);
    --fj-yellow-soft: rgba(255, 230, 0, .14);
    --fj-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .4);
    --fj-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .fj-badge-muted { background: #27344D; color: #CBD3E1; }
html[data-theme="dark"] .fj-table thead th { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .fj-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: #0F1829; border-color: var(--fj-border); color: var(--fj-text); }
html[data-theme="dark"] .form-control::placeholder { color: #5E6B84; }
html[data-theme="dark"] .fj-sidebar { background: var(--fj-surface); border-color: var(--fj-border); }
html[data-theme="dark"] .fj-sidebar-nav a { color: var(--fj-text); }
html[data-theme="dark"] .fj-sidebar-nav a:hover { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .fj-event-card { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .fj-hero { background: linear-gradient(135deg, #0F1F3F, #172C55); }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--fj-font);
    background: var(--fj-bg);
    color: var(--fj-text);
    text-align: right;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; color: var(--fj-text); letter-spacing: -.01em; }

a { color: var(--fj-pink); text-decoration: none; }
a:hover { color: var(--fj-pink-dark); }

/* ---------- Bootstrap overrides ---------- */
.btn {
    border-radius: var(--fj-radius-sm);
    font-weight: 700;
    padding: .6rem 1.25rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
}

.btn-lg { padding: .85rem 1.6rem; font-size: 1.02rem; }
.btn-sm { padding: .35rem .8rem; font-size: .85rem; }

.btn-primary {
    background: var(--fj-primary);
    border-color: var(--fj-primary);
    color: var(--fj-primary-text);
    box-shadow: 0 6px 16px rgba(var(--fj-primary-rgb), .25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled {
    background: var(--fj-primary-dark) !important;
    border-color: var(--fj-primary-dark) !important;
    color: var(--fj-primary-text) !important;
}

.btn-outline-primary { color: var(--fj-primary); border-color: var(--fj-primary); }
.btn-outline-primary:hover { background: var(--fj-primary); border-color: var(--fj-primary); color: var(--fj-primary-text); }

.btn-outline-secondary {
    color: var(--fj-text);
    border-color: var(--fj-border);
    background: var(--fj-surface);
}
.btn-outline-secondary:hover { background: var(--fj-navy-soft); border-color: var(--fj-border); color: var(--fj-text); }

.btn-navy { background: var(--fj-navy); border-color: var(--fj-navy); color: #fff; }
.btn-navy:hover { background: var(--fj-navy-dark); border-color: var(--fj-navy-dark); color: #fff; }

.btn-yellow { background: var(--fj-yellow); border-color: var(--fj-yellow); color: var(--fj-navy); }
.btn-yellow:hover { background: var(--fj-yellow-dark); border-color: var(--fj-yellow-dark); color: var(--fj-navy); }

.card {
    border: 1px solid var(--fj-border);
    border-radius: var(--fj-radius);
    box-shadow: var(--fj-shadow-sm);
    background: var(--fj-surface);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--fj-border);
    font-weight: 800;
    padding: 1rem 1.5rem;
}

.card-body { padding: 1.5rem; }

.form-control, .form-select {
    border-radius: var(--fj-radius-sm);
    border-color: var(--fj-border);
    padding: .65rem .9rem;
    font-size: 1rem;
    color: var(--fj-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--fj-navy);
    box-shadow: 0 0 0 .2rem rgba(var(--fj-navy-rgb), .12);
}
.form-label { font-weight: 700; margin-bottom: .35rem; font-size: .92rem; }
.form-text { color: var(--fj-muted); }
.form-check-input:checked { background-color: var(--fj-navy); border-color: var(--fj-navy); }
.form-switch .form-check-input:checked { background-color: var(--fj-success); border-color: var(--fj-success); }

.alert { border: 0; border-radius: var(--fj-radius-sm); }
.alert-info { background: var(--fj-info-soft); color: var(--fj-navy); }
.alert-warning { background: var(--fj-warning-soft); color: var(--fj-navy); }
.alert-success { background: var(--fj-success-soft); color: var(--fj-success); }
.alert-danger { background: var(--fj-danger-soft); color: var(--fj-danger); }

.dropdown-menu { border: 1px solid var(--fj-border); border-radius: var(--fj-radius-sm); box-shadow: var(--fj-shadow); }

/* The notice strip the mockups use under a page title: a pale yellow bar with an icon. */
.fj-notice {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--fj-yellow-soft);
    border: 1px solid #F3E58A;
    border-radius: var(--fj-radius-sm);
    padding: .8rem 1.1rem;
    color: var(--fj-navy);
    font-size: .92rem;
}
.fj-notice .bi { color: var(--fj-muted); }
.fj-notice a { font-weight: 700; }

/* ---------- Page header ---------- */
.fj-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.fj-page-header h1 { font-size: 1.75rem; margin: 0; }
.fj-page-header .fj-page-subtitle { color: var(--fj-muted); font-size: .95rem; margin: .25rem 0 0; }
.fj-page-header > div:last-child:not(:only-child) { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fj-page-header > div:last-child:not(:only-child) > .btn-primary { order: -1; }

/* ---------- Admin shell: sidebar on the right, main on the left ---------- */
.fj-admin-wrapper { display: flex; min-height: 100vh; }

.fj-sidebar {
    width: var(--fj-sidebar-w);
    background: var(--fj-surface);
    border-inline-start: 1px solid var(--fj-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.fj-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem .9rem;
    text-decoration: none;
    color: var(--fj-text);
}
.fj-brand img { height: 46px; }
.fj-brand .fj-brand-name { font-weight: 900; font-size: 1.1rem; letter-spacing: .02em; line-height: 1.1; }
.fj-brand .fj-brand-sub { font-size: .72rem; color: var(--fj-muted); }

.fj-event-card {
    margin: .25rem 1rem .75rem;
    background: var(--fj-bg);
    border-radius: var(--fj-radius-sm);
    padding: .75rem .9rem;
}
.fj-event-card .fj-event-name { font-weight: 800; font-size: .95rem; line-height: 1.25; }
.fj-event-card .fj-event-meta { font-size: .78rem; color: var(--fj-muted); margin-top: .15rem; }
.fj-event-card .form-select {
    border: 0;
    background-color: transparent;
    padding: 0 1.4rem 0 0;
    font-weight: 800;
    font-size: .95rem;
    color: var(--fj-text);
    box-shadow: none;
}

.fj-nav-section {
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--fj-muted);
    padding: .85rem 1.25rem .35rem;
    font-weight: 700;
}

.fj-sidebar-nav {
    list-style: none;
    padding: 0 .75rem 1rem;
    margin: 0;
    flex: 1 1 auto;
}

.fj-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    margin-bottom: .2rem;
    border-radius: var(--fj-radius-sm);
    color: var(--fj-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s, color .15s;
}
.fj-sidebar-nav a .bi { font-size: 1.05rem; width: 1.3rem; text-align: center; color: var(--fj-muted); }
.fj-sidebar-nav a:hover { background: var(--fj-bg); }
.fj-sidebar-nav a.active {
    background: var(--fj-navy);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--fj-navy-rgb), .25);
}
.fj-sidebar-nav a.active .bi { color: #fff; }
.fj-sidebar-nav a .fj-count {
    margin-inline-start: auto;
    background: var(--fj-pink-soft);
    color: var(--fj-pink);
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 800;
    padding: .1rem .5rem;
}

.fj-sidebar-user {
    border-top: 1px solid var(--fj-border);
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.fj-sidebar-user .fj-user-name { font-weight: 800; font-size: .92rem; }
.fj-sidebar-user .fj-user-role { font-size: .75rem; color: var(--fj-muted); }

.fj-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--fj-pink-soft);
    color: var(--fj-pink);
    font-weight: 800;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.fj-topbar {
    background: var(--fj-surface);
    border-bottom: 1px solid var(--fj-border);
    padding: .75rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 4.5rem;
}
.fj-topbar .fj-crumbs { font-size: .9rem; color: var(--fj-muted); }
.fj-topbar .fj-crumbs strong { color: var(--fj-text); font-weight: 800; }
.fj-topbar .fj-env-tag {
    font-size: .72rem;
    color: var(--fj-pink);
    background: var(--fj-pink-soft);
    border-radius: 2rem;
    padding: .2rem .7rem;
    font-weight: 700;
}

.fj-content { padding: 1.75rem 2.25rem 3rem; }

/* Mobile: sidebar becomes offcanvas (Bootstrap handles behavior) */
@media (max-width: 991.98px) {
    .fj-sidebar { width: min(85vw, 300px); }
}

/* ---------- KPI cards (S01) ---------- */
.fj-kpi {
    background: var(--fj-surface);
    border: 1px solid var(--fj-border);
    border-radius: var(--fj-radius);
    padding: 1.1rem 1.35rem;
    height: 100%;
    position: relative;
}
.fj-kpi .fj-kpi-label { color: var(--fj-muted); font-size: .85rem; font-weight: 600; }
.fj-kpi .fj-kpi-value { font-size: 2rem; font-weight: 900; line-height: 1.1; margin: .35rem 0 .25rem; }
.fj-kpi .fj-kpi-hint { color: var(--fj-muted); font-size: .78rem; }
.fj-kpi .fj-kpi-icon { position: absolute; inset-inline-end: auto; inset-inline-start: 1.1rem; top: 1rem; color: var(--fj-muted); font-size: .95rem; }
.fj-kpi.fj-kpi-pink .fj-kpi-icon { color: var(--fj-pink); }

/* ---------- Hero banner (S01) ---------- */
.fj-hero {
    background: radial-gradient(circle at 15% 50%, rgba(255, 255, 255, .06), transparent 40%),
                linear-gradient(135deg, #172C55, #1E3A6E);
    color: #fff;
    border-radius: var(--fj-radius);
    padding: 1.75rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.fj-hero .fj-hero-kicker { color: var(--fj-yellow); font-size: .72rem; letter-spacing: .22em; font-weight: 700; }
.fj-hero h2 { color: #fff; font-size: 1.6rem; margin: .35rem 0 .25rem; }
.fj-hero p { margin: 0; opacity: .8; font-size: .95rem; }
.fj-hero .fj-hero-dates { font-size: 2.2rem; font-weight: 900; letter-spacing: -.02em; }
.fj-hero .fj-hero-dates small { display: block; font-size: .7rem; letter-spacing: .25em; font-weight: 700; opacity: .8; }

/* ---------- Badges ---------- */
.fj-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 2rem;
    padding: .28rem .75rem;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.fj-badge::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .9; }
.fj-badge.fj-badge-nodot::before { display: none; }
.fj-badge-success { background: var(--fj-success-soft); color: var(--fj-success); }
.fj-badge-warning { background: var(--fj-warning-soft); color: var(--fj-warning); }
.fj-badge-danger { background: var(--fj-danger-soft); color: var(--fj-danger); }
.fj-badge-info { background: var(--fj-info-soft); color: var(--fj-info); }
.fj-badge-pink { background: var(--fj-pink-soft); color: var(--fj-pink); }
.fj-badge-navy { background: var(--fj-navy-soft); color: var(--fj-navy); }
.fj-badge-muted { background: #EEF1F6; color: var(--fj-muted); }

/* ---------- Tables ---------- */
.fj-table-card { overflow: hidden; }
.fj-table-card .fj-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--fj-border);
}
.fj-table-card .fj-search { max-width: 320px; }
.fj-table { margin: 0; }
.fj-table thead th {
    background: #FAFBFD;
    color: var(--fj-muted);
    font-size: .76rem;
    font-weight: 700;
    border-bottom: 1px solid var(--fj-border);
    padding: .8rem 1.5rem;
    white-space: nowrap;
}
.fj-table tbody td { padding: .95rem 1.5rem; vertical-align: middle; border-color: var(--fj-border); }
.fj-table tbody tr:hover { background: #FAFBFD; }
.fj-table tbody tr:last-child td { border-bottom: 0; }
.fj-table .fj-cell-main { font-weight: 800; }
.fj-table .fj-cell-sub { font-size: .8rem; color: var(--fj-muted); }
.fj-table-actions { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.fj-link-action { color: var(--fj-pink); font-weight: 700; font-size: .88rem; }
.fj-link-action + .fj-link-action::before { content: '·'; color: var(--fj-muted); margin-inline-end: .5rem; }

.fj-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fj-border);
    background: var(--fj-surface);
    color: var(--fj-muted);
    transition: all .15s;
}
.fj-icon-btn:hover { border-color: var(--fj-navy); color: var(--fj-navy); background: var(--fj-navy-soft); }
.fj-icon-btn.fj-icon-btn-danger:hover { border-color: var(--fj-danger); color: var(--fj-danger); background: var(--fj-danger-soft); }

/* ---------- Progress bar (S01 hotel rows, C07/C10 room status) ---------- */
.fj-bar { height: .45rem; background: var(--fj-border); border-radius: 2rem; overflow: hidden; display: flex; }
.fj-bar > span { display: block; height: 100%; }
.fj-bar .fj-bar-sold { background: var(--fj-navy); }
.fj-bar .fj-bar-held { background: var(--fj-pink); }
.fj-bar .fj-bar-paid { background: var(--fj-success); }
.fj-bar .fj-bar-pending { background: var(--fj-yellow); }
.fj-legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--fj-muted); }
.fj-legend span::before { content: ''; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-inline-end: .35rem; background: var(--fj-border); }
.fj-legend .fj-legend-sold::before { background: var(--fj-navy); }
.fj-legend .fj-legend-held::before { background: var(--fj-pink); }

/* ---------- Activity feed (S01, S14) ---------- */
.fj-feed { list-style: none; margin: 0; padding: 0; }
.fj-feed li { display: flex; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--fj-border); }
.fj-feed li:last-child { border-bottom: 0; }
.fj-feed .fj-feed-icon {
    width: 1.9rem; height: 1.9rem; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
    background: var(--fj-success-soft); color: var(--fj-success);
}
.fj-feed .fj-feed-icon.is-warning { background: var(--fj-warning-soft); color: var(--fj-warning); }
.fj-feed .fj-feed-icon.is-danger { background: var(--fj-danger-soft); color: var(--fj-danger); }
.fj-feed .fj-feed-icon.is-info { background: var(--fj-info-soft); color: var(--fj-info); }
.fj-feed .fj-feed-title { font-weight: 700; font-size: .92rem; }
.fj-feed .fj-feed-meta { font-size: .78rem; color: var(--fj-muted); }

/* ---------- Modals (S03, S05, S12) ---------- */
.modal-content { border: 0; border-radius: var(--fj-radius); box-shadow: var(--fj-shadow); }
.modal-header { border-bottom: 1px solid var(--fj-border); padding: 1.25rem 1.5rem; }
.modal-title { font-weight: 800; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--fj-border); padding: 1rem 1.5rem; justify-content: flex-start; }
.fj-summary-box { background: var(--fj-bg); border-radius: var(--fj-radius-sm); padding: .9rem 1.1rem; font-size: .9rem; }
.fj-summary-box strong { color: var(--fj-pink); }

/* ---------- Empty state ---------- */
.fj-empty { text-align: center; padding: 3rem 1.5rem; color: var(--fj-muted); }
.fj-empty .bi { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: .75rem; }

/* ---------- Footer ---------- */
.fj-footer {
    padding: 14px 24px;
    text-align: center;
    font-size: .78rem;
    color: var(--fj-muted);
    border-top: 1px solid var(--fj-border);
    margin-top: auto;
}

/* ---------- Auth pages (admin login) ---------- */
.fj-auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.fj-auth-card { width: min(92vw, 420px); }
.fj-auth-card .card-body { padding: 2rem; }

/* ============================================================
   Customer surface (C01–C16)
   ============================================================ */
.fj-customer {
    --fj-primary: var(--fj-yellow);
    --fj-primary-rgb: 255, 230, 0;
    --fj-primary-dark: var(--fj-yellow-dark);
    --fj-primary-soft: var(--fj-yellow-soft);
    --fj-primary-text: var(--fj-navy);
}
.fj-customer .btn-primary { box-shadow: none; }

.fj-public-header {
    background: var(--fj-surface);
    border-bottom: 3px solid var(--fj-yellow);
    padding: .9rem 0;
}
.fj-public-header .fj-brand { padding: 0; }
.fj-public-header .fj-brand img { height: 54px; }
.fj-public-header .fj-public-title { font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; }
.fj-public-header .fj-public-sub { font-size: .78rem; color: var(--fj-muted); }
.fj-public-header .fj-public-tagline { color: var(--fj-muted); font-size: .9rem; }

.fj-public-container { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.fj-public-h1 { font-size: 2rem; font-weight: 900; margin: 0 0 .35rem; }
.fj-public-lead { color: var(--fj-muted); margin: 0 0 1.5rem; }

/* Step indicator (C02–C06) */
.fj-steps { display: flex; justify-content: flex-start; gap: 2.25rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .82rem; color: var(--fj-muted); }
.fj-steps li { display: flex; align-items: center; gap: .5rem; }
.fj-steps .fj-step-num {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--fj-border); background: var(--fj-surface); font-weight: 800; font-size: .75rem; color: var(--fj-muted);
}
.fj-steps li.active { color: var(--fj-text); font-weight: 800; }
.fj-steps li.active .fj-step-num { background: var(--fj-yellow); border-color: var(--fj-yellow); color: var(--fj-navy); }
.fj-steps li.done .fj-step-num { background: var(--fj-navy); border-color: var(--fj-navy); color: #fff; }

/* The room summary card pinned beside every step (C02–C06, C10–C14) */
.fj-room-card { border: 1px solid var(--fj-border); border-radius: var(--fj-radius); overflow: hidden; background: var(--fj-surface); }
.fj-room-card .fj-room-card-head { background: var(--fj-navy); color: #fff; padding: 1.25rem 1.25rem; }
.fj-room-card .fj-room-card-head small { opacity: .75; font-size: .75rem; }
.fj-room-card .fj-room-card-head h3 { color: #fff; font-size: 1.25rem; margin: .2rem 0 .1rem; }
.fj-room-card .fj-room-card-body { padding: 1rem 1.25rem; }
.fj-room-card dl { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; font-size: .9rem; }
.fj-room-card dt { color: var(--fj-muted); font-weight: 500; }
.fj-room-card dd { margin: 0; font-weight: 700; text-align: left; }
.fj-room-card .fj-room-total { font-size: 1.6rem; font-weight: 900; }

/* Countdown card (C02–C06) */
.fj-countdown { background: var(--fj-navy); color: #fff; border-radius: var(--fj-radius); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fj-countdown .fj-countdown-label { font-size: .78rem; opacity: .8; }
.fj-countdown .fj-countdown-value { font-size: 1.7rem; font-weight: 900; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* Selectable option cards (C01 vacation / hotel pickers, C14 scope) */
.fj-option { border: 1px solid var(--fj-border); border-radius: var(--fj-radius-sm); padding: 1rem 1.1rem; background: var(--fj-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fj-option:hover { border-color: var(--fj-navy); }
.fj-option.selected { border-color: var(--fj-navy); box-shadow: 0 0 0 1px var(--fj-navy); background: #FBFBFD; }
.fj-option .fj-option-title { font-weight: 800; }
.fj-option .fj-option-sub { font-size: .8rem; color: var(--fj-muted); }
.fj-option .fj-option-price { font-weight: 900; font-size: 1.2rem; }

.fj-price { font-weight: 900; color: var(--fj-pink); }

@media (max-width: 767.98px) {
    .fj-public-h1 { font-size: 1.5rem; }
    .fj-steps { gap: 1rem; font-size: .75rem; overflow-x: auto; }
    .fj-steps li span:not(.fj-step-num) { white-space: nowrap; }
    .fj-public-header .fj-brand img { height: 42px; }
    .fj-public-container .btn-primary { width: 100%; padding: .9rem 1rem; font-size: 1.05rem; }
}

/* ---------- Utilities ---------- */
.fj-text-muted { color: var(--fj-muted); }
.fj-text-pink { color: var(--fj-pink); }
.fj-text-navy { color: var(--fj-navy); }
code { direction: ltr; unicode-bidi: embed; }

/* ---------- Registration (C03–C05) ---------- */
.fj-slot-card { border: 1px solid var(--fj-border); border-radius: var(--fj-radius-sm); padding: 1rem 1.1rem; background: var(--fj-surface); }
.fj-otp-card { max-width: 480px; }
.fj-otp-boxes { display: flex; justify-content: center; gap: .5rem; }
.fj-otp-boxes input {
    width: 3rem; height: 3.4rem; text-align: center; font-size: 1.5rem; font-weight: 800;
    border: 1px solid var(--fj-border); border-radius: var(--fj-radius-sm); background: var(--fj-surface); color: var(--fj-text);
}
.fj-otp-boxes input:focus { outline: none; border-color: var(--fj-navy); box-shadow: 0 0 0 .2rem rgba(23, 44, 85, .12); }

/* ---------- Personal area (C10) ---------- */
.fj-my-hero { background: var(--fj-navy); color: #fff; border-radius: var(--fj-radius); padding: 1.5rem 1.75rem; }
.fj-my-hero small { opacity: .8; font-size: .8rem; display: block; }
.fj-my-hero h1 { color: #fff; font-size: 1.6rem; font-weight: 900; margin: .25rem 0; }
.fj-my-pill { border: 1px solid rgba(255,255,255,.35); border-radius: var(--fj-radius-sm); padding: .5rem 1rem; font-size: .9rem; }
.fj-slot-bar { display: flex; gap: .35rem; }
.fj-slot-bar span { flex: 1; height: .45rem; border-radius: 1rem; background: #E3E7EE; }
.fj-slot-bar span.paid { background: var(--fj-success); }
.fj-slot-bar span.mine { background: var(--fj-yellow); }
.fj-action-card { display: block; border: 1px solid var(--fj-border); border-radius: var(--fj-radius-sm); padding: 1rem 1.1rem; color: var(--fj-text); text-decoration: none; height: 100%; background: var(--fj-surface); transition: border-color .15s; }
.fj-action-card:hover { border-color: var(--fj-navy); color: var(--fj-text); }
.fj-action-card .bi { color: var(--fj-pink); font-size: 1.2rem; display: block; margin-bottom: .5rem; }
.fj-action-card.disabled { opacity: .55; cursor: not-allowed; }
.fj-action-card.disabled .bi { color: var(--fj-muted); }
@media (max-width: 575.98px) { .fj-otp-boxes input { width: 2.5rem; height: 3rem; font-size: 1.25rem; } }

/* ---------- Payment (C06–C08, C16) ---------- */
.fj-pay-total { font-size: 2rem; font-weight: 900; color: var(--fj-pink); }
.fj-result-icon { width: 4rem; height: 4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.fj-result-icon.success { background: var(--fj-success-soft); color: var(--fj-success); }
.fj-result-icon.danger { background: var(--fj-danger-soft); color: var(--fj-danger); }
.fj-result-icon.warning { background: var(--fj-warning-soft); color: var(--fj-warning); }

/* ---------- Documents (C11, admin review) ---------- */
.fj-upload {
    display: block; border: 2px dashed var(--fj-border); border-radius: var(--fj-radius); padding: 2rem 1.25rem; text-align: center;
    background: var(--fj-surface); cursor: pointer; transition: border-color .15s, background .15s; position: relative;
}
.fj-upload:hover, .fj-upload.is-dragover { border-color: var(--fj-navy); background: #FBFBFD; }
.fj-upload.is-invalid { border-color: var(--fj-danger); }
.fj-upload input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fj-upload .bi { font-size: 1.6rem; color: var(--fj-navy); display: block; margin-bottom: .5rem; }
.fj-upload-picked .bi { color: var(--fj-success); }
.fj-upload-progress .progress { height: .6rem; border-radius: 1rem; }
.fj-upload-progress .progress-bar { background: var(--fj-navy); }
.fj-doc-row { display: flex; align-items: center; gap: .85rem; border: 1px solid var(--fj-border); border-radius: var(--fj-radius-sm); padding: .85rem 1rem; background: var(--fj-surface); }
.fj-doc-icon { width: 2.6rem; height: 2.6rem; border-radius: var(--fj-radius-sm); background: var(--fj-navy-soft); color: var(--fj-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.fj-doc-preview { background: #0F1F3F; border-radius: var(--fj-radius); min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fj-doc-preview img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.fj-doc-preview iframe { width: 100%; height: 78vh; border: 0; background: #fff; }
.fj-axes { display: flex; flex-wrap: wrap; gap: .3rem; }
.fj-axis { font-size: .72rem; border-radius: 1rem; padding: .15rem .55rem; background: var(--fj-navy-soft); color: var(--fj-text); white-space: nowrap; }
.fj-axis.is-success { background: var(--fj-success-soft); color: var(--fj-success); }
.fj-axis.is-warning { background: var(--fj-warning-soft); color: var(--fj-warning); }
.fj-axis.is-danger { background: var(--fj-danger-soft); color: var(--fj-danger); }
.fj-axis.is-info { background: var(--fj-info-soft); color: var(--fj-info); }
.fj-facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .9rem; margin: 0; }
.fj-facts dt { color: var(--fj-muted); font-weight: 500; }
.fj-facts dd { margin: 0; font-weight: 600; }