/* ═══════════════════════════════════════════════════════════════════
   ZOLLEGE — Professional education-portal design system
   Inspired by CollegeDunia / CollegeDekho, but cleaner and more premium.
   Loaded site-wide from layouts/main.php.

   Usage: tokens are global; visual components are opt-in classes (pg-*),
   so adding this file cannot break existing admin/legacy screens.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --pri: #1E50A0;          /* primary blue */
    --pri-dk: #16386F;
    --pri-lt: #2A62C9;
    --pri-soft: #EEF3FB;
    --acc: #F97316;          /* orange CTA */
    --acc-dk: #EA6A0C;
    --acc-soft: #FFF1E8;
    --ok: #16A34A;
    --ok-soft: #E9F7EF;
    --warn: #F59E0B;
    --ink: #0F172A;
    --body: #475569;
    --muted: #64748B;
    --faint: #94A3B8;
    --line: #E5EAF1;
    --bg: #F5F8FC;
    --card: #FFFFFF;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(15, 23, 42, .18);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, .05), 0 16px 34px -20px rgba(15, 23, 42, .22);
}

/* Gentle global polish (safe for every page) */
body { -webkit-font-smoothing: antialiased; }
.pg h1, .pg h2, .pg h3, .pg h4 { color: var(--ink); letter-spacing: -.02em; }

/* ── Page wrapper ───────────────────────────────────────────── */
.pg { background: var(--bg); color: var(--body); }

/* ── Page hero band (inner pages) ───────────────────────────── */
.pg-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--pri-dk) 0%, var(--pri) 58%, var(--pri-lt) 100%);
}
.pg-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(820px 420px at 85% -15%, rgba(249, 115, 22, .18), transparent 60%);
}
.pg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .13; }
.pg-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 40px 32px 46px; }
.pg-crumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.68); margin-bottom: 16px; flex-wrap: wrap; }
.pg-crumbs a { color: rgba(255,255,255,.68); transition: color .2s; }
.pg-crumbs a:hover { color: #fff; }
.pg-crumbs .sep { opacity: .45; }
.pg-crumbs .cur { color: #fff; }
.pg-hero-title { color: #fff; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 10px; }
.pg-hero-sub { color: rgba(255,255,255,.82); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.55; max-width: 680px; margin: 0; }
.pg-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pg-hero-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 12.5px; font-weight: 650; padding: 7px 14px; border-radius: 999px; }
.pg-hero-stats { display: flex; flex-wrap: wrap; gap: clamp(20px,4vw,48px); margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.pg-hero-stat .v { color: #fff; font-weight: 800; font-size: 1.35rem; line-height: 1; }
.pg-hero-stat .l { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 600; margin-top: 4px; }

/* ── Cards ──────────────────────────────────────────────────── */
.pg-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.pg-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #D3DEEE; }
.pg-card-pad { padding: 20px; }

/* ── Buttons ────────────────────────────────────────────────── */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px; transition: all .22s ease; white-space: nowrap; cursor: pointer; }
.pg-btn-primary { background: var(--pri); color: #fff; }
.pg-btn-primary:hover { background: var(--pri-dk); }
.pg-btn-accent { background: var(--acc); color: #fff; }
.pg-btn-accent:hover { background: var(--acc-dk); transform: translateY(-1px); }
.pg-btn-ghost { background: #fff; color: var(--pri); border: 1px solid var(--line); }
.pg-btn-ghost:hover { border-color: var(--pri); background: var(--pri-soft); }
.pg-btn-sm { font-size: 12.5px; padding: 9px 16px; border-radius: 8px; }

/* ── Chips / badges ─────────────────────────────────────────── */
.pg-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); color: var(--body); font-size: 13px; font-weight: 650; padding: 8px 15px; border-radius: 999px; transition: .2s; }
.pg-chip:hover, .pg-chip.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.pg-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; padding: 4px 10px; border-radius: 6px; }
.pg-badge-blue { background: var(--pri-soft); color: var(--pri); }
.pg-badge-orange { background: var(--acc-soft); color: #C2410C; }
.pg-badge-green { background: var(--ok-soft); color: #15803D; }
.pg-badge-grey { background: #F1F5F9; color: var(--muted); }

/* ── Section headings ───────────────────────────────────────── */
.pg-section { max-width: 1200px; margin: 0 auto; padding: 44px 32px; }
.pg-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.pg-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pri); margin-bottom: 8px; }
.pg-kicker::before { content: ''; width: 22px; height: 2px; background: var(--acc); border-radius: 2px; }
.pg-sec-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--ink); letter-spacing: -.025em; margin: 0; }
.pg-sec-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.pg-link { color: var(--pri); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.pg-link:hover { color: var(--acc); }

/* ── Data rows (fees / stats inside cards) ──────────────────── */
.pg-stat-row { display: flex; gap: 16px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #F1F5F9; }
.pg-stat .l { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.pg-stat .v { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.pg-stat .v.green { color: var(--ok); }

/* ── Tables ─────────────────────────────────────────────────── */
.pg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-table th { background: var(--pri-soft); color: var(--pri); font-weight: 750; text-align: left; padding: 12px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pg-table td { padding: 12px 14px; border-top: 1px solid var(--line); color: var(--body); }
.pg-table tr:hover td { background: #FAFCFF; }

/* ── Scroll reveal (fail-safe) ──────────────────────────────────
   Content is VISIBLE by default. It is only hidden for animation once
   JS confirms it can reveal it again (html.js-on, set inline in <head>).
   If JS is disabled/slow/broken, nothing is ever left invisible.        */
.reveal { opacity: 1; transform: none; }
.js-on .reveal { opacity: 0; transform: translateY(20px); }
.js-on .reveal.rx-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .js-on .reveal { opacity: 1 !important; transform: none !important; } }

@media (max-width: 640px) {
    .pg-hero-inner { padding: 28px 18px 34px; }
    .pg-section { padding: 32px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLASSMORPHISM LAYER + MOBILE-FIRST REFINEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Frosted glass surfaces ─────────────────────────────────── */
.glass {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 32px -12px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* glass on top of dark/photo backgrounds */
.glass-dark {
    background: rgba(255, 255, 255, .11);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    color: #fff;
}
.glass-dark:hover { background: rgba(255, 255, 255, .17); }
/* subtle tinted glass for cards on light pages */
.glass-card {
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -24px rgba(30,80,160,.28);
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.glass-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -26px rgba(30,80,160,.42); }
.glass-pill {
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 999px;
}
/* ambient colour blobs to give glass something to refract */
.glass-bg { position: relative; overflow: hidden; }
.glass-bg::before, .glass-bg::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
}
.glass-bg::before { width: 460px; height: 460px; background: rgba(42, 98, 201, .22); top: -160px; right: -120px; }
.glass-bg::after  { width: 380px; height: 380px; background: rgba(249, 115, 22, .16); bottom: -150px; left: -100px; }
.glass-bg > * { position: relative; z-index: 1; }

/* sticky glass bar (page navs) */
.glass-bar {
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,.9);
}

/* Safari/older fallback — solid surfaces when blur is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .glass-card { background: #fff; }
    .glass-dark, .glass-pill { background: rgba(255,255,255,.20); }
    .glass-bar { background: #fff; }
}

/* ── Mobile-first responsive system ─────────────────────────── */
.pg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pg-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* comfortable tap targets on touch devices */
@media (hover: none) {
    .pg-btn, .pg-chip { min-height: 44px; }
    .pg-card-hover:hover { transform: none; }
    .glass-card:hover { transform: none; }
}

@media (max-width: 900px) {
    .pg-hero-inner { padding: 30px 20px 36px; }
    .pg-hero-stats { gap: 22px; }
    .pg-section { padding: 34px 20px; }
}

@media (max-width: 640px) {
    :root { --radius: 12px; }
    .pg-hero-title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
    .pg-hero-sub { font-size: .95rem; }
    .pg-hero-stats { gap: 16px 26px; padding-top: 16px; margin-top: 18px; }
    .pg-hero-stat .v { font-size: 1.15rem; }
    .pg-hero-stat .l { font-size: 10px; }
    .pg-sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pg-grid, .pg-grid-2 { grid-template-columns: 1fr; gap: 14px; }
    .pg-btn { width: 100%; }
    .pg-btn.auto { width: auto; }
    .pg-card-pad { padding: 16px; }
    /* horizontal scrollers instead of cramped grids */
    .pg-scroll-x { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .pg-scroll-x > * { flex: 0 0 82%; scroll-snap-align: start; }
    .pg-scroll-x::-webkit-scrollbar { display: none; }
    .pg-table { font-size: 13px; }
    .pg-table th, .pg-table td { padding: 10px 10px; }
}

/* wide tables never break the layout on phones */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════
   APP-LIKE MOBILE SHELL — frosted bottom tab bar (phones only)
   ═══════════════════════════════════════════════════════════════════ */
.mnav { display: none; }

@media (max-width: 900px) {
    .mnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
        align-items: stretch; justify-content: space-around;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        backdrop-filter: blur(22px) saturate(180%);
        border-top: 1px solid rgba(226, 232, 240, .9);
        box-shadow: 0 -8px 30px -12px rgba(15, 23, 42, .18);
    }
    .mnav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 6px 2px; border-radius: 12px; min-height: 50px;
        color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
        transition: color .2s ease, background .2s ease, transform .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mnav-item i { font-size: 17px; line-height: 1; }
    .mnav-item:active { transform: scale(.94); }
    .mnav-item.on { color: var(--pri); background: var(--pri-soft); }
    /* raised centre action (predictor) */
    .mnav-item.mnav-cta { color: #fff; }
    .mnav-item.mnav-cta .mnav-fab {
        width: 44px; height: 44px; margin-top: -22px; border-radius: 16px;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--acc), #FB923C);
        box-shadow: 0 10px 22px -8px rgba(249, 115, 22, .75);
        border: 3px solid rgba(255, 255, 255, .9);
    }
    .mnav-item.mnav-cta .mnav-fab i { color: #fff; font-size: 17px; }
    .mnav-item.mnav-cta span { color: var(--acc-dk); }

    /* keep page content clear of the bar */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    /* any existing sticky/fixed CTA bars must sit above it */
    .pg-sticky-cta { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* App-like touches on small screens */
@media (max-width: 640px) {
    html { scroll-behavior: smooth; }
    .pg-hero { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
}

/* ── Mobile overflow guard + nav fit ────────────────────────── */
@media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .mnav-item { flex: 1 1 0; min-width: 0; padding: 6px 0; }
    .mnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERFLOW CONTAINMENT
   <body> is a flex column; <main> is a flex item whose default
   min-width:auto lets a single wide child (swiper, table, nowrap text)
   stretch the entire page — which pushed the hero + bottom nav off-screen
   on phones. Allowing these to shrink keeps everything inside the viewport.
   ═══════════════════════════════════════════════════════════════════ */
main, .rx-home, .pg { min-width: 0; }

@media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body > main { max-width: 100vw; overflow-x: hidden; }
    /* long unbroken names shouldn't force width */
    h1, h2, h3, h4, p, a, span, td, th { overflow-wrap: anywhere; }
    /* horizontal card rails scroll instead of stretching the page */
    .swiper { max-width: 100%; }
}