/* Rosslaw.id - static stylesheet on top of Bootstrap 5 (no build step). */
:root {
    --rl-navy: #0f2a4a;
    --rl-navy-2: #16375f;
    --rl-gold: #c9a227;
    --rl-gold-soft: #f6efd9;
    --rl-ink: #1c2430;
    --rl-muted: #5d6b7c;
    --rl-bg: #f7f8fb;
    --bs-primary: #0f2a4a;
    --bs-primary-rgb: 15, 42, 74;
    --bs-link-color: #16375f;
    --bs-link-color-rgb: 22, 55, 95;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--rl-ink);
}

body { background: #fff; }
.bg-soft { background: var(--rl-bg); }
.text-muted-rl { color: var(--rl-muted); }
.text-gold { color: var(--rl-gold); }
.bg-navy { background: var(--rl-navy); color: #fff; }

.btn-primary { --bs-btn-bg: var(--rl-navy); --bs-btn-border-color: var(--rl-navy); --bs-btn-hover-bg: var(--rl-navy-2); --bs-btn-hover-border-color: var(--rl-navy-2); --bs-btn-active-bg: var(--rl-navy-2); --bs-btn-disabled-bg: var(--rl-navy); --bs-btn-disabled-border-color: var(--rl-navy); }
.btn-gold { --bs-btn-color: #1c1400; --bs-btn-bg: var(--rl-gold); --bs-btn-border-color: var(--rl-gold); --bs-btn-hover-bg: #b8931f; --bs-btn-hover-border-color: #b8931f; --bs-btn-hover-color: #1c1400; --bs-btn-active-bg: #a8861c; font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--rl-navy); --bs-btn-border-color: var(--rl-navy); --bs-btn-hover-bg: var(--rl-navy); --bs-btn-hover-border-color: var(--rl-navy); }

.navbar-brand .brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--rl-navy); color: var(--rl-gold); font-weight: 800; margin-right: .5rem; }
.navbar-brand strong { letter-spacing: -.02em; }

/* Landing */
.hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(201,162,39,.18), transparent 60%), linear-gradient(180deg, var(--rl-navy) 0%, #0b213b 100%); color: #fff; padding: 5.5rem 0 4.5rem; }
.hero h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.hero .lead { color: rgba(255,255,255,.82); }
.hero-pill { display: inline-flex; gap: .5rem; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); padding: .35rem .8rem; border-radius: 999px; font-size: .875rem; }
.hero-card { background: #fff; color: var(--rl-ink); border-radius: 1rem; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.pillars span { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: rgba(255,255,255,.1); margin: 0 .35rem .5rem 0; font-size: .85rem; }

.section { padding: 4.5rem 0; }
.section-title { font-weight: 800; letter-spacing: -.02em; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: var(--rl-gold); }

.feature-card { border: 1px solid #e7eaf0; border-radius: 1rem; padding: 1.5rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease; background: #fff; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,42,74,.08); }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--rl-gold-soft); color: var(--rl-navy); font-size: 1.35rem; margin-bottom: 1rem; }

.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--rl-navy); color: var(--rl-gold); display: grid; place-items: center; font-weight: 800; margin: 0 auto .75rem; }

.price-card { border: 2px solid #e7eaf0; border-radius: 1.25rem; padding: 2rem; background: #fff; height: 100%; }
.price-card.featured { border-color: var(--rl-gold); box-shadow: 0 20px 50px rgba(15,42,74,.12); position: relative; }
.price-card .badge-top { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }
.price-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: .35rem 0 .35rem 1.75rem; position: relative; }
.check-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: #198754; font-weight: 700; }

.faq .accordion-button:not(.collapsed) { background: var(--rl-gold-soft); color: var(--rl-navy); }

/* App */
.page-header { background: var(--rl-bg); border-bottom: 1px solid #e7eaf0; padding: 1.75rem 0; margin-bottom: 1.75rem; }
.card { border-color: #e7eaf0; border-radius: .9rem; }
.card-header { background: #fff; border-bottom-color: #eef0f4; font-weight: 600; }
.stat-card .stat-label { font-size: .8rem; color: var(--rl-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.area-tile { display: block; border: 1px solid #e7eaf0; border-radius: .9rem; padding: 1.1rem; text-decoration: none; color: inherit; height: 100%; background: #fff; }
.area-tile:hover { border-color: var(--rl-gold); }
.area-tile.locked { opacity: .6; }
.membership-hero { background: linear-gradient(135deg, var(--rl-navy), var(--rl-navy-2)); color: #fff; border-radius: 1rem; }
.membership-hero .text-white-50 { color: rgba(255,255,255,.7) !important; }

.bank-box { border: 1px dashed #cfd6e0; border-radius: .75rem; padding: 1rem; background: #fbfcfe; }
.copy-btn { cursor: pointer; }

/* Admin */
.admin-shell { min-height: 100vh; }
.admin-sidebar { width: 250px; background: var(--rl-navy); color: #fff; flex-shrink: 0; }
.admin-sidebar .nav-link { color: rgba(255,255,255,.75); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .15rem; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(255,255,255,.1); color: #fff; }
.admin-sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.admin-main { background: var(--rl-bg); min-width: 0; }
.bar-track { background: #eef0f4; border-radius: 4px; height: 8px; }
.bar-fill { background: var(--rl-navy); border-radius: 4px; height: 8px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.spark div { flex: 1; background: var(--rl-navy); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.spark div:hover { background: var(--rl-gold); }
.table > :not(caption) > * > * { vertical-align: middle; }

@media (max-width: 991.98px) {
    .admin-sidebar { width: 100%; }
    .admin-shell { flex-direction: column; }
}

/* Member app shell (sidebar like admin) */
.app-shell { min-height: 100vh; }
/* !important: Bootstrap forces .offcanvas-lg to a transparent background on desktop. */
.app-sidebar { width: 250px; background-color: var(--rl-navy) !important; color: #fff; flex-shrink: 0; }
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--rl-navy); --bs-offcanvas-color: #fff; --bs-offcanvas-width: 270px; }
}
.app-sidebar .brand-mark, .admin-sidebar .brand-mark, .guest-body header .brand-mark, .app-sidebar + .app-main .app-topbar .brand-mark { background: var(--rl-gold); color: var(--rl-navy); }
.app-sidebar .nav-link {color: rgba(255,255,255,.75); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .1rem; }
.app-sidebar .nav-link:hover, .app-sidebar .nav-link.active { background: rgba(255,255,255,.1); color: #fff; }
.app-sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.app-sidebar .disabled-link { color: rgba(255,255,255,.4); cursor: default; }
.app-sidebar .disabled-link:hover { background: transparent; color: rgba(255,255,255,.4); }
.sidebar-heading { text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; color: rgba(255,255,255,.45); padding: 1rem .75rem .35rem; font-weight: 700; }
.admin-sidebar .sidebar-heading { padding-left: .75rem; }
.app-main { background: #fff; min-width: 0; }
.app-topbar { background: #fff; border-bottom: 1px solid #e7eaf0; position: sticky; top: 0; z-index: 1020; }

/* Guest (login/register) */
.guest-body { background: radial-gradient(900px 400px at 85% -10%, rgba(201,162,39,.2), transparent 60%), linear-gradient(180deg, var(--rl-navy) 0%, #0b213b 100%); }
.guest-below { color: rgba(255,255,255,.85); }
.guest-below a { color: var(--rl-gold); }

/* Content */
.content-card { border: 1px solid #e7eaf0; border-radius: .9rem; background: #fff; height: 100%; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
.content-card:hover { border-color: var(--rl-gold); box-shadow: 0 10px 24px rgba(15,42,74,.08); color: inherit; }
.content-card .content-thumb { height: 110px; border-radius: .9rem .9rem 0 0; background: linear-gradient(135deg, var(--rl-navy), var(--rl-navy-2)); color: var(--rl-gold); display: grid; place-items: center; font-size: 2.2rem; }
.lesson-list .list-group-item.active { background: var(--rl-gold-soft); color: var(--rl-navy); border-color: #eadfb9; font-weight: 600; }
.lesson-list .list-group-item { font-size: .9rem; }
.ratio-video { border-radius: .75rem; overflow: hidden; background: #000; }
.prose { line-height: 1.75; }
.prose h1, .prose h2, .prose h3 { font-weight: 700; margin-top: 1.5rem; }
.prose blockquote { border-left: 4px solid var(--rl-gold); padding-left: 1rem; color: var(--rl-muted); }
.prose table { width: 100%; margin-bottom: 1rem; }
.prose table td, .prose table th { border: 1px solid #e7eaf0; padding: .4rem .6rem; }
.quiz-option input:checked + label { border-color: var(--rl-navy); background: var(--rl-gold-soft); }
.quiz-option label { cursor: pointer; }
.locked-box { border: 1px dashed #cfd6e0; border-radius: .9rem; background: var(--rl-bg); }