/* ==========================================================
   EDUGROWN GLOBAL STYLESHEET — Creative Modern Theme
   Palette: Indigo/Violet primary + Warm Orange accent
   Colors overridable via inline <style> block (Site Settings)
   ========================================================== */

:root {
    --color-bg: #f7f7fc;
    --color-bg-alt: #ffffff;
    --color-card: #ffffff;
    --color-primary: #4f46e5;
    --color-primary-dark: #4338ca;
    --color-accent: #f97316;
    --color-text: #1e1b3a;
    --color-text-muted: #6b7280;
    --color-border: #e6e6f0;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(79,70,229,0.10);
    --shadow-sm: 0 2px 10px rgba(30,27,58,0.06);
    --font-main: 'Lexend', 'Nirmala UI', sans-serif;

    --header-bg: #ffffff;
    --header-text: #1e1b3a;
    --header-height: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

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

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

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- WORDPRESS-STYLE ADMIN EDIT BAR ---------- */
.admin-edit-bar {
    background: #17152e;
    color: #cbd5e1;
    font-size: 12.5px;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.admin-edit-bar .aeb-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-edit-bar a { color: #cbd5e1; }
.admin-edit-bar a:hover { color: #ffffff; }
.admin-edit-bar .aeb-edit-link {
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    color: #ffffff !important;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 600;
}
.admin-edit-bar .aeb-edit-link:hover { opacity: .9; color: #fff !important; }

/* ---------- TOP BAR (desktop only) ---------- */
.top-bar-strip {
    background: #17152e;
    color: #cbd5e1;
    font-size: 12.5px;
}
.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 7px 20px;
    max-width: 1240px;
    margin: 0 auto;
}
.top-bar-social { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top-bar-social a { color: #cbd5e1; font-weight: 600; font-size: 11.5px; letter-spacing: .3px; white-space: nowrap; }
.top-bar-social a:hover { color: var(--color-accent); }
.top-bar-text { color: #9490b0; padding-left: 10px; border-left: 1px solid #322f52; white-space: nowrap; }
.top-bar-account { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.top-bar-account a { color: #cbd5e1; white-space: nowrap; }
.top-bar-account a:hover { color: var(--color-accent); }

/* ---------- BADGES (status pills — used across many public listing pages) ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.badge-published, .badge-active { background: rgba(20,184,166,0.15); color: #0d9488; }
.badge-draft, .badge-pending { background: rgba(212,175,55,0.15); color: var(--color-accent); }
.badge-trash, .badge-banned, .badge-failed, .badge-rejected { background: rgba(239,68,68,0.15); color: #f87171; }

/* ---------- RICH EDITOR (Quill WYSIWYG — public account forms: College/School "About" etc.) ---------- */
.rich-editor-wrap { margin-top: 4px; }
.rich-editor-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.rich-editor-tab {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.rich-editor-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rich-editor-mount { background: #ffffff; border-radius: 0 0 8px 8px; }
.rich-editor-wrap .ql-toolbar.ql-snow {
    border: 1px solid var(--color-border);
    border-radius: 8px 8px 0 0;
    background: var(--color-bg);
}
.rich-editor-wrap .ql-container.ql-snow {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    min-height: 220px;
    font-size: 14px;
    color: #1e1b3a;
}
.rich-editor-wrap .ql-editor { min-height: 220px; }
.rich-editor-wrap .ql-toolbar .ql-stroke { stroke: var(--color-text); }
.rich-editor-wrap .ql-toolbar .ql-fill { fill: var(--color-text); }
.rich-editor-wrap .ql-toolbar .ql-picker-label { color: var(--color-text); }
.rich-editor-wrap .ql-toolbar .ql-picker-label .ql-stroke { stroke: var(--color-text); }
.rich-editor-wrap .ql-toolbar button:hover .ql-stroke,
.rich-editor-wrap .ql-toolbar button.ql-active .ql-stroke,
.rich-editor-wrap .ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: var(--color-primary); }
.rich-editor-wrap .ql-toolbar button:hover .ql-fill,
.rich-editor-wrap .ql-toolbar button.ql-active .ql-fill { fill: var(--color-primary); }
.rich-editor-wrap .ql-toolbar button:hover,
.rich-editor-wrap .ql-toolbar button.ql-active,
.rich-editor-wrap .ql-toolbar .ql-picker-label:hover { color: var(--color-primary); }
.rich-editor-wrap .ql-picker-options {
    background: var(--color-card);
    border: 1px solid var(--color-border) !important;
    color: var(--color-text);
}
.rich-editor-wrap .ql-picker-item { color: var(--color-text); }
.rich-editor-wrap .ql-picker-item:hover { color: var(--color-primary); }
textarea.rich-editor-source {
    width: 100%;
    font-family: monospace;
    font-size: 13px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
}

/* ---------- BACK TO DASHBOARD (account pages: teacher/student/institute) ---------- */
.back-to-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    padding: 8px 4px;
}
.back-to-dashboard:hover { color: var(--color-primary); }

/* ---------- ACCOUNT/DATA TABLES (My Requirements, My Orders, Cart, Messages, etc.) ---------- */
/* Same pattern the admin panel uses, so account pages get the same polished look */
.admin-table-wrap {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
    cursor: grab;
}
.admin-table-wrap.drag-scrolling { cursor: grabbing; user-select: none; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.admin-table th, table.admin-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
table.admin-table th { color: var(--color-text-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
table.admin-table tr:last-child td { border-bottom: none; }
table.admin-table tr:hover td { background: rgba(79,70,229,0.03); }

/* ---------- PAGINATION (site-wide) ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 32px 0;
}
.pagination .page-btn,
.pagination .page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.pagination .page-num { padding: 0; width: 38px; }
.pagination .page-btn:hover,
.pagination .page-num:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .page-num.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.pagination .page-btn.disabled {
    opacity: .4;
    pointer-events: none;
}
.pagination .page-ellipsis {
    color: var(--color-text-muted);
    padding: 0 4px;
    font-weight: 700;
}

/* ---------- RICH CONTENT (post/page/product body — may contain pasted HTML) ---------- */
/* Keeps admin-pasted HTML (tables, wide images, iframes, long code) from
   overflowing and forcing the whole site into a "desktop" mobile view. */
.rich-content { max-width: 100%; overflow-x: hidden; word-wrap: break-word; }
.rich-content img,
.rich-content video,
.rich-content iframe { max-width: 100%; height: auto; }
.rich-content table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.rich-content pre, .rich-content code { white-space: pre-wrap; word-break: break-word; }
.rich-content * { max-width: 100%; box-sizing: border-box; }

/* ---------- PYQ CARD DESIGN ---------- */
.pyq-topbar {
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    border-radius: var(--radius);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.pyq-topbar-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 11px 18px;
}
.pyq-topbar-search input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    outline: none;
}
.pyq-topbar-search input::placeholder { color: rgba(255,255,255,0.75); }
.pyq-topbar-count {
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.pyq-topbar-sort select {
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 999px;
}
.pyq-topbar-sort select option { color: #1e1b3a; }

.pyq-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    position: relative;
}
.pyq-card-board {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: 600;
}
.pyq-card-badges { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pyq-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 7px;
}
.pyq-badge-num { background: #eef2ff; color: var(--color-primary); }
.pyq-badge-class { background: #dbeafe; color: #1d4ed8; }
.pyq-badge-subject { background: #ede9fe; color: #7c3aed; }
.pyq-badge-chapter { background: #d1fae5; color: #047857; }
.pyq-badge-year { background: #ffedd5; color: #c2410c; }
.pyq-badge-type { background: #fce7f3; color: #be185d; }
.pyq-badge-marks { background: #fef9c3; color: #a16207; }
.pyq-badge-edit { background: #fff7ed; color: var(--color-accent); border: 1px solid #fed7aa; cursor: pointer; }
.pyq-card-text { font-size: 15px; line-height: 1.75; color: var(--color-text); margin-bottom: 16px; }
.pyq-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pyq-vote-group { display: flex; gap: 8px; }
.pyq-vote-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}
.pyq-vote-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pyq-verified-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ecfdf5; color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    margin-top: 14px;
}
.pyq-rate-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--color-text-muted); }
.pyq-rate-star { font-size: 18px; color: #d1d5db; cursor: pointer; }
.pyq-rate-star:hover, .pyq-rate-star.hovered { color: #f59e0b; }
.pyq-answer-box { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--color-border); }

.pyq-solution-panel {
    margin-top: 20px;
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: var(--radius);
    padding: 20px;
}
.pyq-solution-panel-label {
    font-weight: 800;
    font-size: 13px;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 12px;
}
.mcq-option.mcq-correct { border-color: #14b8a6 !important; background: rgba(20,184,166,0.08); }
.mcq-option.mcq-wrong { border-color: #f87171 !important; background: rgba(248,113,113,0.08); }

/* ---------- PILL MULTI-SELECT (Home Tuition: subjects/class taught & filters) ---------- */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pill {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.pill:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(79,70,229,0.15); }
.pill.selected { background: linear-gradient(135deg, var(--color-primary), #7c3aed); border-color: var(--color-primary); color: #fff; box-shadow: 0 3px 10px rgba(79,70,229,0.3); }

/* State -> City dropdown pairs, used across every state/city form site-wide */
.loc-city-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 10px 0 6px;
}

/* ---------- TUITION FILTER SIDEBAR (Find Tuition / Tutor List) ---------- */
.tuition-filter-card {
    background: linear-gradient(180deg, #ffffff, #fbfbff);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(30,27,58,0.06);
}
.tuition-filter-card h3 { display: flex; align-items: center; justify-content: space-between; font-size: 17px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--color-border); }
.tuition-filter-card h3 a { font-size: 12px; color: var(--color-accent); font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(249,115,22,0.08); }
.tuition-filter-card h3 a:hover { background: rgba(249,115,22,0.16); }
.tuition-filter-card label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--color-primary); margin-bottom: 7px; margin-top: 18px; opacity: .8; }
.tuition-filter-card label:first-of-type { margin-top: 0; }
.tuition-filter-card select,
.tuition-filter-card input[type="text"] {
    background: var(--color-bg);
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.tuition-filter-card select:focus,
.tuition-filter-card input[type="text"]:focus {
    background: #ffffff;
    border-color: var(--color-primary);
    outline: none;
}
.tuition-filter-card .pill { font-size: 12px; padding: 7px 14px; }
.tuition-filter-card .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(79,70,229,0.28);
}

.tuition-search-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.tuition-search-bar input {
    flex: 1;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(30,27,58,0.04);
    transition: border-color .15s ease;
}
.tuition-search-bar input:focus { border-color: var(--color-primary); outline: none; }

/* ---------- TUITION REQUEST CARD (Find Tuition / Leads for Tutors) ---------- */
.lead-card {
    background: #ffffff;
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 16px;
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.lead-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.lead-id-tag { font-size: 11px; font-weight: 700; color: var(--color-accent); background: rgba(249,115,22,0.1); padding: 3px 10px; border-radius: 6px; }
.lead-posted-date { font-size: 12px; color: var(--color-text-muted); }
.lead-card h3 { font-size: 17px; margin-bottom: 8px; }
.lead-location { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }
.lead-views { font-size: 12px; color: var(--color-text-muted); margin-left: 10px; }
.lead-contact-box {
    margin-top: 16px;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.lead-contact-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--color-accent); text-transform: uppercase; margin-bottom: 4px; }
.lead-contact-blurred { filter: blur(4px); user-select: none; color: var(--color-text-muted); font-size: 13px; }

/* ---------- TUTOR CARD (Tutor List / Find your tutor) ---------- */
.tutor-card { background: #ffffff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.tutor-card-banner {
    background: linear-gradient(135deg, var(--color-text), #2d2a52);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.tutor-card-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.4); flex-shrink: 0; }
.tutor-card-photo-placeholder {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.tutor-card-name { color: #fff; font-weight: 800; font-size: 15px; }
.tutor-card-location { color: rgba(255,255,255,0.7); font-size: 12px; margin-top: 2px; }
.tutor-verified-badge {
    position: absolute; top: 14px; right: 16px;
    background: var(--color-accent); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .4px;
    padding: 3px 9px; border-radius: 6px;
}
.tutor-card-body { padding: 18px 20px; }
.tutor-card-bio { font-size: 13px; color: var(--color-text-muted); margin: 10px 0; line-height: 1.6; }
.tutor-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tutor-card-tag { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.tutor-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--color-border); }
.tutor-card-rate { font-weight: 800; font-size: 17px; color: var(--color-text); }
.tutor-card-rate span { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }

/* ---------- HEADER / NAV ---------- */
header.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    top: 0;
    z-index: 500;
    box-shadow: var(--shadow-sm);
}

/* ---------- STICKY HEADER (pinned via JS, not CSS position:sticky) ----------
   `html`/`body` above have overflow-x:hidden (needed to stop the off-canvas
   mobile drawer from causing a horizontal scrollbar) — but that combination
   is a well-known browser quirk that silently breaks `position: sticky` on
   any descendant, header included. So instead of sticky, assets/js/main.js
   toggles this class once the page is scrolled past the header's natural
   position, and .site-header-spacer (inserted right after the header) takes
   its place in the flow so nothing jumps when it becomes position:fixed. */
header.site-header.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.site-header-spacer { height: 0; }

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--header-height);
    max-width: 1280px;
    margin: 0 auto;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    font-weight: 800;
    color: var(--header-text);
    flex-shrink: 0;
    letter-spacing: -.3px;
}

.logo img { height: calc(var(--header-height) - 24px); width: auto; }
.logo span {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 26px;
}

nav.main-menu {
    display: flex;
    gap: 2px;
    align-items: center;
    flex: 1;
}

nav.main-menu > a, .nav-dropdown-toggle {
    color: var(--header-text);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
    display: inline-block;
    cursor: pointer;
}
.nav-item-icon { display: none; }

nav.main-menu > a:hover, .nav-dropdown-toggle:hover {
    color: var(--color-primary);
    background: rgba(79,70,229,0.08);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all .2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(79,70,229,0.3);
}
.btn-primary:hover { opacity: .92; color: #fff; transform: translateY(-1px); }

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

.btn-gold {
    background: linear-gradient(135deg, var(--color-accent), #fb923c);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(249,115,22,0.3);
}
.btn-gold:hover { opacity: .9; }

.credit-badge {
    background: #fff7ed;
    border: 1px solid var(--color-accent);
    color: #c2410c;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: rgba(79,70,229,0.06);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.hamburger span { width: 18px; height: 2px; background: var(--header-text); border-radius: 2px; }

/* ---------- ICON BUTTONS (search, cart, notifications) ---------- */
.icon-btn {
    position: relative;
    font-size: 19px;
    color: var(--header-text);
    background: rgba(79,70,229,0.06);
    border: none;
    cursor: pointer;
    padding: 9px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    transition: background .15s ease;
}
.icon-btn:hover { background: rgba(79,70,229,0.14); color: var(--color-primary); }
.icon-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    line-height: 1.4;
}

/* ---------- PAPER CART (PYQ "add to paper" dropdown, header icon) ---------- */
.header-paper-cart { position: relative; }
.paper-cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    width: 300px;
    z-index: 60;
}
.paper-cart-dropdown-head { font-weight: 800; font-size: 13.5px; margin-bottom: 10px; color: var(--color-text); }
.paper-cart-empty { font-size: 13px; color: var(--color-text-muted); }
.paper-cart-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.paper-cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-bg);
    border-radius: 8px;
    font-size: 12.5px;
}
.paper-cart-item-text { color: var(--color-text); line-height: 1.5; }
.paper-cart-item-text em { color: var(--color-text-muted); font-style: normal; }
.paper-cart-item-remove {
    color: #f87171;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    padding: 2px 4px;
}

/* ---------- SEARCH BOX (desktop dropdown) ---------- */
.header-search { position: relative; }
.search-box {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    width: 300px;
    z-index: 60;
}
.search-box input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-family: var(--font-main);
}

/* ---------- DROPDOWN / SUBMENU (Study Content, Home Tuition, Store, More) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle::after {
    content: '\25BE';
    font-size: 10px;
    margin-left: 4px;
    opacity: .6;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 220px;
    padding: 10px;
    z-index: 60;
    margin-top: 6px;
}
/* [FIX] Pehle yahan ".nav-dropdown:hover" bhi tha, bina kisi shart ke.
   Mobile par uska nateeja ye tha ki submenu KHULTA to tha par BAND nahi hota:
   touch device ek baar tap karne ke baad us element ko "hover" maanta rehta
   hai (sticky hover) jab tak aap kahin aur tap na karein. To dobara tap par
   JS .open class hata deta tha, lekin :hover wala rule display:block!important
   laga kar use khula hi rakhta tha.
   Ab :hover sirf un devices par chalta hai jinke paas asli mouse pointer hai.
   Mobile par sirf .open class chalti hai — jo JS ne toggle ki, wahi manzoor. */
@media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover .nav-dropdown-menu { display: block !important; }
}
.nav-dropdown.open .nav-dropdown-menu { display: block !important; }
.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text);
}
.nav-dropdown-menu a:hover { background: rgba(79,70,229,0.08); color: var(--color-primary); }
.nav-dropdown-menu .submenu-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
    padding: 6px 14px 4px;
    font-weight: 700;
}

/* Label ab <span class="nav-item-label"> me wrap hai (mobile alignment ke liye).
   Desktop par wo bilkul normal text ki tarah behave kare. */
.nav-item-label { display: inline; }

/* ---------- MEGA MENU ("Find" — Find Tuition / Find Coaching Inst. / Find Job) ---------- */
.nav-mega-menu {
    display: none;
    /* 4 columns — pehle 3 the. Har column ko kam se kam 160px chahiye
       taaki "NCERT Exemplar Problem" jaise lambe naam do line me na tootein. */
    min-width: 820px;
    /* Screen se bahar na nikle — chhoti screen par apne aap sikud jaata hai */
    max-width: calc(100vw - 32px);
    padding: 18px;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 6px 20px;
}

/* Agar menu right edge se bahar ja raha ho to JS ye class laga deta hai
   (nav-overflow-fix.js) — tab menu right se align hota hai. */
.nav-dropdown.mega-flip .nav-mega-menu {
    left: auto;
    right: 0;
}

/* Bahut chhoti laptop screens par 3 columns par wapas — 4 me
   columns itne patle ho jaate ki naam tootne lagte hain. */
@media (max-width: 1180px) {
    .nav-mega-menu {
        min-width: 620px;
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}
@media (max-width: 900px) {
    .nav-mega-menu {
        min-width: 420px;
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}
/* [FIX] Wahi sticky-hover wali dikkat mega menu ke saath bhi thi — upar
   .nav-dropdown-menu wale comment me poori baat likhi hai. */
@media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover .nav-mega-menu { display: grid !important; }
}
.nav-dropdown.open .nav-mega-menu { display: grid !important; }
.nav-mega-col { display: flex; flex-direction: column; gap: 2px; }
.nav-mega-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--color-primary);
    padding: 6px 14px 10px;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--color-border);
}
.nav-mega-col-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(79,70,229,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.nav-mega-col a { transition: transform .12s ease, background .12s ease; }
.nav-mega-col a:hover { transform: translateX(3px); }

/* ---------- DRAWER-ONLY ELEMENTS (hidden on desktop) ---------- */
.drawer-account-block, .drawer-search, .drawer-social, .nav-divider { display: none; }

/* ---------- HERO ---------- */
.hero {
    position: relative;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #f97316 130%);
    padding: 90px 0 100px;
    text-align: center;
    overflow: hidden;
}
.hero::before, .hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
}
.hero::before { width: 300px; height: 300px; background: #ffffff; top: -100px; left: -80px; }
.hero::after { width: 260px; height: 260px; background: #fbbf24; bottom: -80px; right: -60px; }
.hero .container { position: relative; z-index: 2; }
.hero h1 {
    font-size: clamp(28px, 5vw + 1rem, 44px);
    font-weight: 800;
    margin-bottom: 18px;
    color: #ffffff;
    letter-spacing: -.5px;
}
.hero h1 .accent { color: #fde68a; }
.hero p {
    color: rgba(255,255,255,0.9);
    max-width: 640px;
    margin: 0 auto 34px;
    font-size: 16.5px;
}
.hero-search {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
.hero-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 16px 22px;
    color: var(--color-text);
    font-size: 15px;
    outline: none;
}
.hero-search button {
    border: none;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    color: #fff;
    padding: 0 30px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------- SECTION ---------- */
.section { padding: 64px 0; }
.section-title {
    text-align: center;
    margin-bottom: 42px;
}
.section-title h2 {
    font-size: clamp(22px, 3vw + 1rem, 30px);
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--color-text);
    letter-spacing: -.4px;
}
.section-title .diamond {
    color: var(--color-accent);
    font-size: 12.5px;
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(249,115,22,0.1);
    padding: 5px 14px;
    border-radius: 999px;
}
.section-title p { color: var(--color-text-muted); font-size: 14.5px; }

/* ---------- CARDS GRID ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity: 0;
    transition: opacity .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card .icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(249,115,22,0.14));
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    font-size: 24px;
    margin-bottom: 18px;
}
.card h3 { font-size: 17.5px; margin-bottom: 8px; color: var(--color-text); font-weight: 700; }
.card p { color: var(--color-text-muted); font-size: 13.5px; }

/* ---------- SERVICE BANNER STRIP ---------- */
.service-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 16px;
}
.service-strip .item {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

/* ---------- FOOTER ---------- */
footer.site-footer {
    background: #17152e;
    color: #b8b5cf;
    padding: 54px 0 20px;
    margin-top: 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}
.footer-grid h4 { margin-bottom: 14px; font-size: 15px; color: #fbbf24; }
.footer-grid ul { list-style: none; }
.footer-grid ul li { margin-bottom: 8px; }
.footer-grid ul li a { color: #9490b0; font-size: 13.5px; }
.footer-grid ul li a:hover { color: #ffffff; }
.footer-grid p { color: #9490b0; }
.footer-bottom {
    text-align: center;
    border-top: 1px solid #2c2950;
    padding-top: 18px;
    color: #726f8f;
    font-size: 13px;
}

/* ---------- FLOATING MENU (chat/whatsapp/back-to-top, bottom-right) ---------- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(79,70,229,0.35);
    font-size: 19px;
    cursor: pointer;
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- STICKY BOTTOM NAVIGATION (mobile only) ---------- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 800;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(230,230,240,0.7);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(23,21,46,0.16);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mbn-active-pill {
    position: absolute; top: 5px; bottom: calc(5px + env(safe-area-inset-bottom, 0px)); left: 0; width: 0;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    border-radius: 14px; opacity: 0; transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    z-index: 0;
}
.mobile-bottom-nav a {
    position: relative; z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-height: 48px;
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 14px;
    transition: transform .15s ease, color .2s ease;
}
.mobile-bottom-nav a:active { transform: scale(0.92); }
.mobile-bottom-nav a .mbn-icon { font-size: 19px; line-height: 1; transition: transform .2s ease; }
.mobile-bottom-nav a.active { color: #fff; }
.mobile-bottom-nav a.active .mbn-icon { transform: translateY(-1px) scale(1.1); }

/* ---------- REUSABLE PER-PAGE FILTER SIDEBAR ---------- */
/* Used on listing pages (Jobs, Study Content, Tuition, Tutor List, College, School, Store)
   to hold the filter form on the left, with results next to it. */
.filter-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.filter-sidebar {
    width: 270px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff, #fbfbff);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 28px rgba(30,27,58,0.08);
}
.filter-sidebar .form-row { display: block; }
.filter-sidebar .form-group { margin-bottom: 18px; }
.filter-sidebar .form-group label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.filter-sidebar .form-group input,
.filter-sidebar .form-group select,
.filter-sidebar .form-group textarea {
    border-radius: 12px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    padding: 12px 16px;
    transition: border-color .15s ease, background .15s ease;
}
.filter-sidebar .form-group input:focus,
.filter-sidebar .form-group select:focus,
.filter-sidebar .form-group textarea:focus {
    border-color: var(--color-primary);
    background: #ffffff;
    outline: none;
}
.filter-sidebar .loc-city-label { color: var(--color-text-muted); margin-top: 12px; }
.filter-sidebar .btn-block { width: 100%; text-align: center; }
.filter-sidebar .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    border-radius: 999px;
    padding: 13px 22px;
    box-shadow: 0 8px 20px rgba(79,70,229,0.3);
    border: none;
}
.filter-sidebar a.btn-outline.btn-block {
    border-radius: 999px;
    padding: 12px 22px;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 10px;
}
.filter-sidebar a.btn-outline.btn-block:hover { background: rgba(79,70,229,0.06); }
.filter-results { flex: 1; min-width: 0; }

.filter-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed var(--color-border);
}
.filter-sidebar-head span {
    font-weight: 800;
    font-size: 15px;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: .6px;
}
.filter-sidebar-close { display: none; }

.filter-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23,21,46,0.5);
    z-index: 940;
    opacity: 0;
    transition: opacity .25s ease;
}
.filter-sidebar-overlay.open { display: block; opacity: 1; }

/* Floating mobile filter button (position/side/style set by admin, via header.php inline CSS) */
.filter-fab {
    display: none;
    position: fixed;
    border: none;
    z-index: 700;
    cursor: pointer;
    font-family: var(--font-main);
}

/* Style: edge-attached vertical tab with text (default) */
.filter-fab.filter-fab-tab {
    padding: 14px 8px;
    background: var(--filter-fab-bg, var(--color-accent));
    color: var(--filter-fab-text, #ffffff);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    box-shadow: 3px 4px 14px rgba(23,21,46,0.3);
}

/* Style: floating rounded pill with icon + text */
.filter-fab.filter-fab-button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px 11px 14px;
    border-radius: 999px;
    background: var(--filter-fab-bg, var(--color-accent));
    color: var(--filter-fab-text, #ffffff);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(23,21,46,0.3);
}
.filter-fab.filter-fab-button .fab-icon { font-size: 15px; line-height: 1; }

/* ---------- RIGHT-SIDE SLIDING MOBILE MENU DRAWER ---------- */

/* Off-canvas panel khula ho to peechhe ka page scroll nahi hona chahiye.
   Sirf `body { overflow: hidden }` kaafi NAHI hai: upar `html { overflow-x: hidden }`
   set hai, aur spec ke mutabik body ka overflow viewport tak tabhi propagate hota
   hai jab html ka overflow `visible` ho. Isliye lock html par bhi lagana padta hai —
   warna drawer scroll karte waqt peechhe wali website bhi scroll hoti rehti hai.

   Aur sirf overflow:hidden lagane se page top par chala jaata hai, isliye body ko
   fix karke uska `top` JS se set kiya jaata hai — user jahan tha wahin rehta hai. */
html.panel-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}
body.panel-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden !important;
}
/* Panel ka apna scroll khatam hone par scroll page tak na pahunche (scroll chaining) */
nav.main-menu,
.filter-sidebar {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.nav-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23,21,46,0.55);
    z-index: 890;
    opacity: 0;
    transition: opacity .25s ease;
}
.nav-drawer-overlay.open { display: block; opacity: 1; }

.drawer-close { display: none; }

/* ---------- FORMS (auth pages, admin) ---------- */
.auth-wrap {
    min-height: 80vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.auth-box {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 42px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow);
}
.auth-box h2 { margin-bottom: 6px; color: var(--color-text); font-weight: 800; }
.auth-box p.sub { color: var(--color-text-muted); font-size: 13.5px; margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13.5px; margin-bottom: 6px; color: var(--color-text-muted); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 11px 14px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 14px;
    font-family: var(--font-main);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }
.divider { text-align: center; color: var(--color-text-muted); margin: 18px 0; font-size: 13px; }
.btn-block { width: 100%; text-align: center; padding: 12px; }
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px; border-radius: 999px;
    background: #fff; color: #333; font-weight: 600; font-size: 14px;
    border: 1px solid var(--color-border); cursor: pointer;
}
.alert { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; }
.alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    nav.main-menu { gap: 0; }
    nav.main-menu > a, .nav-dropdown-toggle { padding: 9px 10px; font-size: 13.5px; }
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* Sticky bottom nav + keep page content and other floating buttons clear of it */
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    .back-to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

    /* Touch-friendly tap targets (min 44x44px per accessibility guidelines) */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .icon-btn { width: 44px; height: 44px; }
    input, select, textarea { min-height: 44px; }
    textarea { min-height: 88px; }
    a.pyq-badge-edit, .pagination .page-btn, .pagination .page-num { min-height: 40px; }

    nav.main-menu {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        height: 100vh;
        height: 100dvh;          /* mobile address bar chhupne par bhi sahi height */
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        /* Neeche wali floating bar drawer ke aakhri items ko dhak leti thi —
           isliye utni jagah chhod di gayi hai taaki Store / More tak scroll ho sake. */
        padding: 70px 20px calc(76px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
        box-shadow: -8px 0 24px rgba(23,21,46,0.2);
        z-index: 900;
        transition: right .3s ease;
        overflow-y: auto;
    }
    nav.main-menu.open { right: 0; }

    /* Sticky header apna stacking context banata hai (position + z-index:500),
       isliye uske andar ka drawer kabhi bhi bottom nav (z-index:800) ke upar
       nahi aa pata tha. Panel khulte hi header ko upar utha dete hain. */
    body.panel-open header.site-header { z-index: 1000; }
    nav.main-menu > a { padding: 12px 14px; border-radius: 8px; color: var(--color-text); }
    nav.main-menu > a:hover { background: rgba(79,70,229,0.08); }

    .drawer-close {
        display: block;
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        font-size: 22px;
        color: var(--color-text-muted);
        cursor: pointer;
    }

    .hamburger { display: flex; width: 44px; height: 44px; }
    .header-search { display: none; }

    /* Per-page filter sidebar becomes an off-canvas panel on mobile,
       opened/closed via the floating filter button. */
    .filter-layout { display: block; }
    .filter-fab.filter-fab-tab { display: block; }
    .filter-fab.filter-fab-button { display: flex; }
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 82%;
        max-width: 300px;
        height: 100vh;
        height: 100dvh;
        z-index: 950;
        overflow-y: auto;
        /* Bottom nav ke peechhe filter ke aakhri options chhup jaate the */
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        transition: left .3s ease;
        box-shadow: 8px 0 24px rgba(23,21,46,0.18);
    }
    .filter-sidebar.open { left: 0; }
    .filter-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 22px;
        line-height: 1;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 4px 9px;
        border-radius: 50%;
    }
    .filter-sidebar-close:hover { background: rgba(79,70,229,0.08); color: var(--color-primary); }
    .filter-results { margin-top: 18px; }

    /* Institute profile: contact box moves to the bottom on mobile, after all profile content */
    .institute-profile-grid { grid-template-columns: 1fr !important; }
    .institute-profile-main { order: 1; }
    .institute-contact-box { order: 2; margin-top: 4px; }

    .top-bar-strip { display: none; }
    .admin-edit-bar { display: none; }

    .drawer-account-block {
        display: block !important;
        padding: 16px;
        background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(249,115,22,0.08));
        border-radius: 12px;
        margin-bottom: 14px;
    }
    .drawer-account-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--color-text); }
    .drawer-account-credits { color: #c2410c; font-size: 13px; margin-bottom: 12px; font-weight: 600; }
    .drawer-account-actions { display: flex; gap: 10px; }
    .drawer-account-actions .btn { flex: 1; text-align: center; padding: 9px; font-size: 13px; }

    .drawer-search { display: flex !important; gap: 8px; margin-bottom: 14px; }
    .drawer-search input { flex: 1; border: 1px solid var(--color-border); border-radius: 999px; padding: 9px 14px; font-size: 13.5px; }
    .drawer-search button { border: none; background: var(--color-primary); color: #fff; border-radius: 50%; width: 38px; height: 38px; font-size: 15px; }

    .nav-divider { display: block !important; height: 1px; background: var(--color-border); margin: 10px 0; }

    /* Icons appear only in the mobile drawer, as a small rounded colour badge before each label */
    .nav-item-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px; height: 26px;
        margin-right: 10px;
        border-radius: 8px;
        background: rgba(79,70,229,0.1);
        font-size: 14px;
        vertical-align: middle;
    }
    /* ============================================================
       MOBILE DRAWER — ek jaisi alignment + halki divider line
       ------------------------------------------------------------
       Pehle `justify-content: space-between` tha, isliye jis item me
       icon nahi hota (jaise "Career") uska label alag jagah se shuru
       hota tha — list tedhi lagti thi.

       Ab sab rows ka structure ek jaisa hai:
         [ icon (34px, hamesha reserve) ][ label — left aligned ][ arrow ]
       ============================================================ */
    nav.main-menu > a,
    .nav-dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
        text-align: left;
        padding: 13px 14px;
        border-radius: 8px;
    }

    /* Har row ke beech halki line */
    nav.main-menu > a,
    nav.main-menu > .nav-dropdown {
        border-bottom: 1px solid var(--color-border);
    }
    nav.main-menu > a:last-child,
    nav.main-menu > .nav-dropdown:last-child { border-bottom: none; }

    /* Icon ka slot HAMESHA 34px — chahe icon ho ya na ho.
       Icon khud 26px + 8px margin-right = 34px total, isliye label
       hamesha ek hi jagah se shuru hota hai (icon ho ya na ho),
       aur icon aur text ke beech thoda margin bhi ban jaata hai. */
    .nav-item-icon {
        margin-right: 8px !important;
        flex: 0 0 26px;
    }

    /* Jin items me icon nahi hai unke liye khaali jagah reserve karo,
       taaki saare labels ek hi line se shuru hon */
    nav.main-menu > a:not(:has(.nav-item-icon))::before,
    .nav-dropdown-toggle:not(:has(.nav-item-icon))::before {
        content: '';
        flex: 0 0 34px;
    }

    /* Label ko poori bachi jagah do — isse text hamesha left se lagta hai
       aur arrow apne aap right kinare par chala jaata hai */
    .nav-item-label {
        flex: 1;
        min-width: 0;
        text-align: left;
        line-height: 1.35;
    }

    /* Badge (jaise "New") label ke turant baad, arrow se pehle */
    .nav-item-badge { flex: 0 0 auto; margin-left: 8px; }

    /* Dropdown submenus are collapsed by default on mobile; tap the arrow to expand */
    .nav-dropdown-toggle {
        font-weight: 700;
        font-size: 13.5px;
        color: var(--color-text);
        cursor: pointer;
    }
    .nav-dropdown-toggle:hover { background: rgba(79,70,229,0.08); }
    .nav-dropdown-toggle::after {
        content: '\25BE';
        font-size: 12px;
        opacity: .7;
        flex: 0 0 auto;
        margin-left: auto;
        padding-left: 10px;
        transition: transform .2s ease;
    }
    .nav-dropdown.open .nav-dropdown-toggle::after { transform: rotate(180deg); }
    .nav-dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        /* Left me 48px = 14px row padding + 34px icon slot,
           taaki submenu items parent label ke exactly neeche aayein */
        padding: 2px 0 8px 48px;
        margin-top: 0;
        background: transparent;
        /* Halki line jo sub-items ko parent se jodti hai */
        position: relative;
        /* IMPORTANT: desktop rule (line ~741) sets top:100%/left:0 for its
           absolute positioning. Ye same class hai isliye wahi values yahan
           bhi carry ho jaate the — position:relative ke saath top:100%
           element ko apni hi height jitna neeche dhakel deta tha, jisse
           submenu neeche wale menu items ke upar overlap ho jaata tha.
           Yahan explicitly cancel kar rahe hain taaki submenu apni normal
           jagah par, list ke andar hi khule. */
        top: auto;
        left: auto;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block !important; }
    .nav-dropdown-menu::before {
        content: '';
        position: absolute;
        left: 30px;
        top: 0;
        bottom: 8px;
        width: 1px;
        background: var(--color-border);
    }
    .nav-dropdown-menu a {
        padding: 9px 12px;
        font-size: 13.5px;
        border-radius: 7px;
    }
    .nav-dropdown-menu .submenu-label { padding: 9px 12px 4px; }

    .nav-mega-menu {
        min-width: 0;
        max-width: none;
        width: 100%;
        grid-template-columns: 1fr;
        padding: 4px 0 8px 48px;
        gap: 4px;
        position: relative;
        top: auto;
        left: auto;
    }
    .nav-dropdown.open .nav-mega-menu { display: grid !important; }
    .nav-mega-menu::before {
        content: '';
        position: absolute;
        left: 30px;
        top: 0;
        bottom: 8px;
        width: 1px;
        background: var(--color-border);
    }
    .nav-mega-col-title { padding: 11px 12px 6px; font-size: 12.5px; }
    .nav-mega-col a { padding: 9px 12px; font-size: 13.5px; border-radius: 7px; }

    .drawer-social { display: flex !important; flex-direction: column; gap: 4px; }
    .drawer-social a { padding: 10px 14px; border-radius: 8px; font-size: 13.5px; color: var(--color-text); }
    .drawer-social a:hover { background: rgba(79,70,229,0.08); }

    .search-box { right: -60px; width: 250px; }

    .header-actions .btn-outline span,
    .header-actions .btn-primary span { display: none; }
    .hero-search { flex-direction: column; border-radius: 16px; }
    .footer-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; }
}

/* ---------- LEGAL PAGES (Terms, Privacy Policy) ---------- */
.legal-hero {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 46px 0 38px;
}
.legal-hero h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.6px; margin-bottom: 10px; }
.legal-hero p { color: var(--color-text-muted); font-size: 14.5px; margin: 0; }
.legal-updated {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--color-accent);
    background: rgba(249,115,22,.10); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; padding: 46px 0 72px; }
.legal-toc { position: sticky; top: calc(var(--header-height) + 18px); }
.legal-toc h4 {
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--color-text-muted); margin-bottom: 12px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
    display: block; padding: 6px 0 6px 26px; font-size: 13px; line-height: 1.45;
    color: var(--color-text-muted); position: relative;
}
.legal-toc a::before {
    content: counter(toc); position: absolute; left: 0; top: 6px;
    font-size: 11px; font-weight: 700; color: var(--color-border);
}
.legal-toc a:hover { color: var(--color-primary); }
.legal-toc a:hover::before { color: var(--color-primary); }

.legal-body { max-width: 760px; }
.legal-note {
    background: rgba(79,70,229,.06); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 18px 20px; margin-bottom: 34px;
}
.legal-note strong { display: block; margin-bottom: 6px; font-size: 14.5px; }
.legal-note p { font-size: 13.5px; color: var(--color-text-muted); margin: 0 0 8px; line-height: 1.7; }
.legal-note p:last-child { margin-bottom: 0; }

.legal-body section { scroll-margin-top: calc(var(--header-height) + 20px); margin-bottom: 34px; }
.legal-body h2 {
    font-size: 19px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
}
.legal-body h2 span { color: var(--color-primary); font-size: 14px; margin-right: 8px; }
.legal-body h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
.legal-body p, .legal-body li { font-size: 14.5px; line-height: 1.8; color: var(--color-text); }
.legal-body p { margin-bottom: 12px; }
.legal-body ul { margin: 0 0 14px; padding-left: 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body li::marker { color: var(--color-primary); }
.legal-hi {
    font-size: 13.5px; color: var(--color-text-muted); line-height: 1.75;
    border-left: 3px solid var(--color-accent); padding: 2px 0 2px 14px; margin: 0 0 14px;
}
.legal-hi b { color: var(--color-text); }
.legal-contact-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 20px 22px;
}
.legal-contact-card p { margin-bottom: 8px; font-size: 14px; }
.legal-contact-card p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 0; padding: 30px 0 56px; }
    .legal-toc { position: static; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
    .legal-toc ol { columns: 2; column-gap: 18px; }
    .legal-hero { padding: 32px 0 28px; }
    .legal-body h2 { font-size: 17.5px; }
}

/* ---------- FOOTER BOTTOM BAR (copyright left, policy links right) ---------- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 26px;
    flex-wrap: wrap;
    text-align: left;
    border-top: 1px solid #2c2950;
    padding-top: 18px;
    color: #726f8f;
    font-size: 13px;
}
.footer-legal-links {
    display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-left: auto;
    /* Back-to-top button bottom-right par float karta hai — aakhri link uske
       peechhe chhup na jaye, isliye utni jagah chhod di gayi hai. */
    padding-right: 58px;
}
.footer-legal-links a { color: #a9a6c4; font-size: 13px; }
.footer-legal-links a:hover { color: #ffffff; }
@media (max-width: 600px) {
    .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
    .footer-legal-links { margin-left: 0; justify-content: center; padding-right: 0; padding-bottom: 70px; }
}

/* ---------- PRODUCT REVIEWS & RATINGS ---------- */
.pr-wrap { margin-top: 34px; }
.pr-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pr-head h3 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.pr-count {
    font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--color-primary); background: rgba(79,70,229,.10);
    padding: 5px 13px; border-radius: 999px;
}

/* ---- Summary: big score + breakdown bars ---- */
.pr-summary {
    display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 24px 26px; margin-bottom: 22px;
    position: relative; overflow: hidden;
}
.pr-summary::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 120% at 0% 0%, rgba(249,115,22,.10), transparent 65%);
}
.pr-score { position: relative; text-align: center; }
.pr-score-num {
    font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -2px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pr-score-stars { font-size: 19px; letter-spacing: 2px; margin: 8px 0 6px; color: #dcdce8; }
.pr-score-stars .on { color: #f59e0b; }
.pr-score-sub { font-size: 12.5px; color: var(--color-text-muted); }

.pr-bars { position: relative; display: flex; flex-direction: column; gap: 8px; }
.pr-bar-row { display: grid; grid-template-columns: 42px 1fr 30px; align-items: center; gap: 12px; }
.pr-bar-label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.pr-bar-track { height: 9px; border-radius: 99px; background: var(--color-bg); overflow: hidden; }
.pr-bar-track i { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.pr-bar-track i.s5 { background: linear-gradient(90deg,#22c55e,#16a34a); }
.pr-bar-track i.s4 { background: linear-gradient(90deg,#84cc16,#65a30d); }
.pr-bar-track i.s3 { background: linear-gradient(90deg,#f59e0b,#f97316); }
.pr-bar-track i.s2 { background: linear-gradient(90deg,#fb923c,#ea580c); }
.pr-bar-track i.s1 { background: linear-gradient(90deg,#f87171,#dc2626); }
.pr-bar-n { font-size: 12.5px; color: var(--color-text-muted); text-align: right; }

/* ---- Review cards ---- */
.pr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 26px; }
.pr-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 18px 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(79,70,229,.35); }
.pr-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pr-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 17px;
}
.pr-who { min-width: 0; }
.pr-who strong { display: block; font-size: 14.5px; line-height: 1.3; }
.pr-who time { display: block; font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }
.pr-verified {
    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    color: #16a34a; background: rgba(34,197,94,.12);
    padding: 2px 8px; border-radius: 999px; margin-top: 3px;
}
.pr-card-stars { font-size: 15px; letter-spacing: 1px; color: #dcdce8; margin-bottom: 10px; }
.pr-card-stars .on { color: #f59e0b; }
.pr-card-stars.r1 .on, .pr-card-stars.r2 .on { color: #ef4444; }
.pr-card-stars.r3 .on { color: #f97316; }
.pr-text { font-size: 13.5px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }

/* ---- Empty state ---- */
.pr-empty {
    background: var(--color-card); border: 1px dashed var(--color-border);
    border-radius: var(--radius); padding: 34px 20px; text-align: center; margin-bottom: 22px;
}
.pr-empty-stars { font-size: 26px; letter-spacing: 4px; color: #e6e6f0; display: block; margin-bottom: 10px; }
.pr-empty h4 { font-size: 16px; margin-bottom: 6px; }
.pr-empty p { font-size: 13.5px; color: var(--color-text-muted); margin: 0; }

/* ---- Write a review ---- */
.pr-form-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 24px 26px; max-width: 560px;
    position: relative; overflow: hidden;
}
.pr-form-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #f59e0b, #f97316, var(--color-primary));
}
.pr-form-card h4 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.pr-form-sub { font-size: 13px; color: var(--color-text-muted); margin-bottom: 18px; line-height: 1.6; }
.pr-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px;
}

/* Radio buttons ko clickable stars bana diya hai. DOM mein 5..1 order hai aur
   row-reverse se wo screen par 1..5 dikhte hain — isse `input:checked ~ label`
   se pehle wale saare stars rang jaate hain, bina JavaScript ke. */
.pr-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; margin-bottom: 20px; }
.pr-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.pr-star-input label {
    font-size: 32px; line-height: 1; color: #dcdce8; cursor: pointer; padding: 0 3px;
    transition: color .15s ease, transform .15s ease;
}
.pr-star-input input:checked ~ label,
.pr-star-input label:hover,
.pr-star-input label:hover ~ label { color: #f59e0b; }
.pr-star-input label:hover { transform: scale(1.18); }
.pr-star-input input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.pr-star-text {
    order: -1; margin-left: 14px; font-size: 13.5px; font-weight: 700;
    color: var(--color-accent); white-space: nowrap;
}
.pr-form-card textarea {
    width: 100%; border: 1px solid var(--color-border); border-radius: 12px;
    padding: 12px 14px; font-family: var(--font-main); font-size: 15px;
    line-height: 1.7; resize: vertical; background: var(--color-bg-alt); color: var(--color-text);
}
.pr-form-card textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.pr-submit { width: 100%; margin-top: 16px; padding: 13px; }
.pr-note { font-size: 11.5px; color: var(--color-text-muted); text-align: center; margin: 10px 0 0; }

@media (max-width: 700px) {
    .pr-summary { grid-template-columns: 1fr; gap: 20px; padding: 20px; text-align: center; }
    .pr-bars { text-align: left; }
    .pr-list { grid-template-columns: 1fr; }
    .pr-form-card { padding: 20px; }
    .pr-star-input { flex-wrap: wrap; }
    .pr-star-text { order: 0; width: 100%; margin: 8px 0 0; }
}

/* ---------- MATH CAPTCHA (spam se bachaav) ---------- */
.cap-box {
    background: rgba(79,70,229,.05);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 18px 0;
}
.cap-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px;
}
.cap-row { display: flex; align-items: center; gap: 12px; }
.cap-q {
    font-size: 20px; font-weight: 800; letter-spacing: 1px;
    color: var(--color-primary); white-space: nowrap;
}
.cap-row input[type="number"] {
    width: 90px; padding: 10px 12px; font-size: 17px; font-weight: 700; text-align: center;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg-alt); color: var(--color-text); font-family: var(--font-main);
    -moz-appearance: textfield;
}
.cap-row input[type="number"]::-webkit-outer-spin-button,
.cap-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-row input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.cap-hint { font-size: 11.5px; color: var(--color-text-muted); margin: 9px 0 0; }
/* Honeypot — screen par kabhi nahi dikhta, sirf bots ise bharte hain */
.cap-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---------- PUBLIC COMMENTS (PYQ + Study Content) ---------- */
.cm-wrap { margin-top: 34px; }
.cm-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cm-head h3 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0; display: flex; align-items: center; gap: 8px; }
.cm-head-icon { font-size: 20px; }
.cm-count {
    font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--color-primary); background: rgba(79,70,229,.10);
    padding: 5px 13px; border-radius: 999px;
}

/* ---- Comment thread: chat-bubble style ---- */
.cm-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.cm-item { display: flex; gap: 12px; align-items: flex-start; }
.cm-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 15px; margin-top: 2px;
}
.cm-bubble {
    position: relative; flex: 1; min-width: 0;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 4px 16px 16px 16px; padding: 14px 18px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cm-bubble:hover { border-color: rgba(79,70,229,.35); box-shadow: var(--shadow); }
.cm-bubble-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cm-bubble-top strong { font-size: 14px; }
.cm-bubble-top time { font-size: 11.5px; color: var(--color-text-muted); }
.cm-badge-user {
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    color: #16a34a; background: rgba(34,197,94,.12);
    padding: 2px 8px; border-radius: 999px;
}
.cm-text { font-size: 13.5px; line-height: 1.75; color: var(--color-text); margin: 0; white-space: pre-wrap; }
.cm-image-link { display: inline-block; margin-top: 10px; }
.cm-image {
    max-width: 220px; max-height: 220px; border-radius: 10px; display: block;
    border: 1px solid var(--color-border); object-fit: cover;
}

/* ---- Empty state ---- */
.cm-empty {
    background: var(--color-card); border: 1px dashed var(--color-border);
    border-radius: var(--radius); padding: 30px 20px; text-align: center; margin-bottom: 22px;
}
.cm-empty-icon { font-size: 30px; display: block; margin-bottom: 8px; }
.cm-empty h4 { font-size: 15.5px; margin-bottom: 4px; }
.cm-empty p { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ---- Add-a-comment form ---- */
.cm-form-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 24px 26px; max-width: 620px;
    position: relative; overflow: hidden;
}
.cm-form-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--color-primary), #7c3aed, #f97316);
}
.cm-form-card h4 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.cm-form-sub { font-size: 13px; color: var(--color-text-muted); margin-bottom: 18px; line-height: 1.6; }
.cm-guest-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }
.cm-field { margin-bottom: 14px; }
.cm-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px;
}
.cm-form-card input[type="text"], .cm-form-card input[type="email"], .cm-form-card textarea {
    width: 100%; border: 1px solid var(--color-border); border-radius: 12px;
    padding: 12px 14px; font-family: var(--font-main); font-size: 14.5px;
    line-height: 1.7; resize: vertical; background: var(--color-bg-alt); color: var(--color-text);
    margin-bottom: 14px;
}
.cm-form-card input[type="text"]:focus, .cm-form-card input[type="email"]:focus, .cm-form-card textarea:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.cm-upload {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    border: 1.5px dashed var(--color-border); border-radius: 12px;
    padding: 12px 16px; margin-bottom: 4px; background: var(--color-bg-alt);
    transition: border-color .2s ease, background .2s ease; font-size: 13.5px; color: var(--color-text-muted);
}
.cm-upload:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cm-upload.cm-upload-has-file { border-style: solid; border-color: #16a34a; color: #16a34a; }
.cm-upload input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-upload-icon { font-size: 18px; }
.cm-preview { max-width: 140px; max-height: 140px; border-radius: 10px; margin: 10px 0 4px; display: block; border: 1px solid var(--color-border); }
.cm-submit { width: 100%; margin-top: 6px; padding: 13px; }
.cm-note { font-size: 11.5px; color: var(--color-text-muted); text-align: center; margin: 10px 0 0; }

@media (max-width: 600px) {
    .cm-guest-row { grid-template-columns: 1fr; gap: 0; }
    .cm-form-card { padding: 18px; }
    .cm-avatar { width: 34px; height: 34px; font-size: 13px; }
}

/* ---------- PYQ QUESTION PAGE LAYOUT ---------- */
/* Pehle ye inline `grid-template-columns:2.2fr 1fr` tha jiska koi mobile
   version nahi tha — isliye phone par bhi do patli columns side-by-side
   dikhti thi aur "Related Questions" ka sidebar question ke bagal mein
   ghus jata tha. Ab mobile par sidebar question ke NEECHE jata hai. */
.pyq-back-link {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
    color: var(--color-primary); text-decoration: none;
}
.pyq-back-link:hover { text-decoration: underline; }
.pyq-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .pyq-layout { grid-template-columns: 1fr; gap: 24px; }
    .pyq-layout > aside { order: 2; }      /* sidebar hamesha content ke baad */
    .pyq-layout > :not(aside) { order: 1; }
}

/* ---------- MOBILE OVERFLOW GUARD ---------- */
/* PYQ questions mein KaTeX se bani lambi equations (jaise
   2AgCl(s) + H2(g) -> 2Ag(s) + 2HCl) wrap nahi hoti thi, isliye
   poora page daayein ki taraf khisak jata tha aur mobile frame ke
   bahar chala jata tha. Ab equation apne hi box ke andar side mein
   scroll hoti hai, page nahi hilta. */
.katex-display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.katex-display > .katex { white-space: normal; }
.katex { max-width: 100%; }

/* Lambe shabd, URL aur formula kabhi layout na tode */
.rich-content,
.content-body,
.pr-text,
.ann-body,
.pyq-layout,
.card p,
.admin-table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Admin-pasted content ke andar tables/code/iframe apne box mein hi rahein */
.rich-content table,
.content-body table,
.ann-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rich-content pre,
.content-body pre { max-width: 100%; overflow-x: auto; }
.rich-content iframe,
.content-body iframe { max-width: 100%; }

/* Aakhri suraksha: koi bhi cheez viewport se bahar na nikale */
@media (max-width: 900px) {
    .pyq-layout, .pyq-layout > * { min-width: 0; max-width: 100%; }
    .container { overflow-x: clip; }
}

/* ---------- HEADER DROPDOWNS ON MOBILE ---------- */
/* Paper cart aur search box `right: 0` par the, aur mobile par ye icons
   screen ke baayein hisse mein hote hain — isliye 300px chaura panel
   baayein nikal kar screen se bahar chala jata tha (aadha kat jata tha).
   Mobile par ab ye poori chaudai mein, screen ke andar khulte hain. */
@media (max-width: 768px) {
    .paper-cart-dropdown,
    .search-box {
        position: fixed;
        top: calc(var(--header-height) + 6px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        margin-top: 0;
        max-height: 72vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 920;
    }
    .paper-cart-list { max-height: 46vh; overflow-y: auto; }
}

/* ---------- PRODUCT DETAIL PAGE ---------- */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 36px;
    margin-top: 20px;
    align-items: start;
}

/* ---- Gallery ---- */
.product-gallery { position: sticky; top: calc(var(--header-height) + 16px); min-width: 0; }
.product-main-img {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    /* Fixed shape — image load hote waqt page uchhalta nahi */
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.product-main-img img {
    width: 100%; height: 100%;
    object-fit: contain;                 /* notes/book covers poore dikhein, kate nahi */
    cursor: zoom-in;
    background: #fff;
}
.product-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 60px; color: var(--color-text-muted);
}

/* ---- Thumbnails ---- */
.product-thumbs {
    display: flex; gap: 10px; margin-top: 12px;
    overflow-x: auto;                    /* bahut saari images ho to side mein scroll */
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.product-thumbs button {
    flex: 0 0 auto;
    width: 66px; height: 66px;
    padding: 0; cursor: pointer;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.product-thumbs button:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.product-thumbs button.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,70,229,.16); }
.product-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-info { min-width: 0; }

/* ---- Lightbox (image par click karne par) ---- */
.pd-lightbox {
    position: fixed; inset: 0; z-index: 9600; display: none;
    align-items: center; justify-content: center;
    padding: 24px 18px;
    background: rgba(15,14,35,.88);
}
.pd-lightbox.show { display: flex; }
.pd-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; }
.pd-lightbox button {
    position: absolute; top: 16px; right: 16px;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.92); color: #1e1b3a; font-size: 24px; line-height: 1;
}

@media (max-width: 900px) {
    /* Mobile par sab kuch ek ke neeche ek — pehle images side mein
       sikud kar patli patti ban jati thi */
    .product-detail { grid-template-columns: 1fr; gap: 22px; }
    .product-gallery { position: static; }
    .product-main-img { aspect-ratio: 1 / 1; border-radius: 12px; }
    .product-thumbs button { width: 58px; height: 58px; }
}
@media (max-width: 480px) {
    .product-main-img { aspect-ratio: 4 / 3; }
}

/* ---------- DYNAMIC MENU: icon + badge ---------- */
.nav-item-icon-img { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; margin-right: 2px; }
.nav-item-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 999px; color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    vertical-align: middle; line-height: 1.6;
}

/* ============================================================
   STUDY CONTENT VIEW — mobile full-width + sidebar layout
   ------------------------------------------------------------
   Problem: admin jab body text-box mein HTML design (notes card
   waghera) daalta hai to mobile par side mein kaafi jagah bach
   jaati thi. Wajah: container 20px + card padding 30px = har
   taraf 50px kha jata tha, aur admin ke HTML mein fixed width
   (jaise width:700px / max-width:600px) mobile par bhi wahi
   rehti thi. Neeche mobile par ye sab full-width ho jata hai.
   ============================================================ */
.content-view-wrap { padding: 30px; }

.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.content-layout.has-sidebar { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }

@media (max-width: 900px) {
    .content-layout.has-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .content-view-section { padding: 16px 0; }
    .content-view-section .container { padding: 0 8px; }
    .content-view-wrap { padding: 12px 8px; border-radius: 10px; }

    /* Admin ke HTML mein fixed/limited width wale boxes mobile
       par poori chaudai le lein — inline style ko yahin se
       override karte hain (stylesheet ka !important inline
       style se jeet jata hai). */
    .content-view-wrap .rich-content div[style*="width"],
    .content-view-wrap .rich-content section[style*="width"],
    .content-view-wrap .rich-content article[style*="width"],
    .content-view-wrap .rich-content table[style*="width"] {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .content-view-wrap .rich-content [style*="max-width"] { max-width: 100% !important; }
    .content-view-wrap .rich-content > * { max-width: 100% !important; }
}

/* ============================================================
   BLOG POST LAYOUT — pehle inline grid tha jo mobile par bhi
   2 column banata tha; ab responsive class se chalta hai.
   ============================================================ */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
.post-layout.has-sidebar { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
@media (max-width: 900px) {
    .post-layout.has-sidebar { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- SIDEBAR WIDGETS (admin se manage hote hain) ---------- */
.site-sidebar { min-width: 0; }
.site-sidebar .sidebar-widget { margin-bottom: 18px; }
.site-sidebar .sidebar-widget:last-child { margin-bottom: 0; }
.site-sidebar .sidebar-widget h3 { font-size: 15px; margin-bottom: 12px; }
.site-sidebar .sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.site-sidebar .sidebar-widget ul li { padding: 7px 0; border-bottom: 1px dashed var(--color-border); font-size: 13.5px; }
.site-sidebar .sidebar-widget ul li:last-child { border-bottom: none; }
.site-sidebar .sidebar-widget .rich-content { line-height: 1.7; font-size: 14px; }
.site-sidebar .sb-search { display: flex; gap: 8px; }
.site-sidebar .sb-search input { flex: 1; min-width: 0; }

/* ============================================================
   FOOTER WIDGETS (admin/footer.php se manage) + SUBSCRIBE FORM
   ============================================================ */
.footer-grid-dynamic { display: grid; gap: 30px; margin-bottom: 30px; }
.footer-col { min-width: 0; }
.footer-widget { margin-bottom: 26px; }
.footer-widget:last-child { margin-bottom: 0; }
.footer-widget h4 { margin-bottom: 14px; font-size: 15px; color: #fbbf24; }
.footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget ul li { margin-bottom: 8px; font-size: 13.5px; color: inherit; opacity: .85; }
.footer-widget ul li a { color: inherit; opacity: .95; font-size: 13.5px; }
.footer-widget ul li a:hover { color: #ffffff; opacity: 1; }
.footer-widget p { font-size: 13.5px; opacity: .85; }
.footer-logo { max-height: 46px; width: auto; margin-bottom: 12px; display: block; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; font-size: 17px;
    background: rgba(255,255,255,0.08); color: inherit; text-decoration: none;
}
.footer-social a:hover { background: rgba(255,255,255,0.18); color: #fff; }

@media (max-width: 900px) {
    .footer-grid-dynamic { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
    .footer-grid-dynamic { grid-template-columns: 1fr !important; }
}

/* ---------- Subscribe form (footer + /subscribe.php dono jagah) ---------- */
.subscribe-form .sub-email-row { display: flex; gap: 8px; }
.subscribe-form .sub-email-row input {
    flex: 1; min-width: 0; height: 42px; padding: 0 14px;
    border-radius: 9px; border: 1px solid var(--color-border);
    font-size: 14px; font-family: inherit;
}
.subscribe-form .sub-email-row .btn { height: 42px; white-space: nowrap; }
.subscribe-form .sub-sections { margin-top: 12px; }
.subscribe-form .sub-sections.sub-sections-collapsed { display: none; }
.subscribe-form .sub-toggle-link {
    display: inline-block; margin-top: 8px; background: none; border: none; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: inherit; opacity: .75; padding: 0; text-decoration: underline;
}
.subscribe-form .sub-toggle-link:hover { opacity: 1; }
.subscribe-form .sub-sections-title { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.subscribe-form .sub-check {
    display: flex; gap: 8px; align-items: center;
    font-size: 13px; padding: 4px 0; cursor: pointer;
}
.subscribe-form .sub-check input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }

/* Footer wale compact form ke rang footer se match karein */
.footer-widget-subscribe .sub-email-row input {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff;
}
.footer-widget-subscribe .sub-email-row input::placeholder { color: rgba(255,255,255,0.5); }
.footer-widget-subscribe .sub-sections-title { opacity: .8; }
.footer-widget-subscribe .sub-check { opacity: .85; }
.footer-widget-subscribe .sub-check:hover { opacity: 1; }

/* ============================================================
   SUBSCRIBE — floating button + popup form
   (Admin > Subscribers se on/off, text, side, color)
   ============================================================ */
.subscribe-fab {
    position: fixed;
    bottom: 84px;                 /* back-to-top button (right,24px) ke upar */
    z-index: 900;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform .15s ease;
}
.subscribe-fab:hover { transform: translateY(-2px); }
.subscribe-fab-right { right: 20px; }
.subscribe-fab-left  { left: 20px; }
@media (max-width: 768px) {
    /* Mobile par bottom nav ke upar */
    .subscribe-fab { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
    .subscribe-fab-left { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

.subscribe-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 13, 35, .6);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.subscribe-popup.open { display: flex; }
.subscribe-popup-box {
    position: relative;
    background: var(--color-card, #fff);
    color: var(--color-text, #1e1b3a);
    border-radius: 16px;
    padding: 26px 24px 24px;
    width: 100%;
    max-width: 420px;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    animation: subPopIn .18s ease;
}
@keyframes subPopIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.subscribe-popup-close {
    position: absolute;
    top: 10px; right: 12px;
    border: none; background: none;
    font-size: 26px; line-height: 1;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
}
.subscribe-popup-close:hover { color: var(--color-text, #1e1b3a); }

/* ============================================================
   PORTFOLIO PAGE (certificate QR se yahi khulta hai)
   ============================================================ */
.portfolio-head { display: flex; gap: 22px; padding: 26px; align-items: flex-start; }
.portfolio-photo {
    width: 92px; height: 92px; flex: 0 0 92px;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 36px; font-weight: 800;
}
.portfolio-photo img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--color-text-muted); }
.portfolio-certs { display: flex; flex-direction: column; gap: 12px; }
.portfolio-cert { display: flex; gap: 16px; align-items: center; padding: 18px 20px; }
.portfolio-cert-icon { font-size: 30px; flex: 0 0 auto; }
.portfolio-cert-hl { border: 2px solid #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
@media (max-width: 600px) {
    .portfolio-head { flex-direction: column; align-items: center; text-align: center; }
    .portfolio-stats { justify-content: center; }
    .portfolio-cert { flex-wrap: wrap; }
}

/* ---------- QR verification box ---------- */
.cert-verify-box {
    display: flex; gap: 16px; align-items: flex-start;
    border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
}
.cert-verify-box p { margin: 4px 0 0; font-size: 13.5px; }
.cert-verify-ok  { background: rgba(22,163,74,.08); border: 1.5px solid #16a34a; color: #14532d; }
.cert-verify-bad { background: rgba(220,38,38,.07); border: 1.5px solid #dc2626; color: #7f1d1d; }
.cert-verify-badge {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: #fff;
}
.cert-verify-ok  .cert-verify-badge { background: #16a34a; }
.cert-verify-bad .cert-verify-badge { background: #dc2626; }

/* ============================================================
   CERTIFICATE DESIGN + PRINT
   ============================================================ */
.cert-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.certificate {
    background: #fffdf5;
    color: #1e1b3a;
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    max-width: 860px; margin: 0 auto;
}
.cert-border {
    border: 3px double #b8860b;
    outline: 1.5px solid #e6c766;
    outline-offset: -12px;
    padding: 44px 48px 36px;
    text-align: center;
}
.cert-logo { max-height: 52px; margin-bottom: 8px; }
.cert-site { font-size: 21px; font-weight: 800; color: #4f46e5; margin-bottom: 8px; }
.cert-title {
    font-size: 32px; font-weight: 800; letter-spacing: 1px;
    color: #b8860b; margin: 10px 0 4px; text-transform: uppercase;
}
.cert-sub { font-size: 13.5px; color: #6b7280; margin-top: 12px; }
.cert-name {
    font-size: 34px; font-weight: 800; margin-top: 8px; color: #1e1b3a;
    border-bottom: 2px solid #e6c766; display: inline-block; padding: 0 26px 6px;
}
.cert-course { font-size: 21px; font-weight: 700; color: #4f46e5; margin-top: 8px; }
.cert-meta { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: #374151; }
.cert-foot {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 44px; gap: 18px;
}
.cert-sign, .cert-no { flex: 1; }
.cert-sign { text-align: left; }
.cert-no { text-align: right; }
.cert-sign-line {
    font-size: 14px; font-weight: 700;
    border-top: 1.5px solid #9ca3af; display: inline-block; padding-top: 6px; min-width: 150px;
}
.cert-sign-label { font-size: 11px; color: #6b7280; margin-top: 3px; }
.cert-qr { flex: 0 0 auto; text-align: center; }
.cert-qr img, .cert-qr canvas { border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.cert-qr-label { font-size: 10.5px; color: #6b7280; margin-top: 5px; }

@media (max-width: 640px) {
    .cert-border { padding: 26px 16px 22px; }
    .cert-title { font-size: 22px; }
    .cert-name { font-size: 24px; }
    .cert-course { font-size: 16px; }
    .cert-foot { flex-wrap: wrap; justify-content: center; }
    .cert-sign, .cert-no { flex: 1 1 100%; text-align: center; }
}

/* ---------- Print: sirf certificate chhape ---------- */
@media print {
    header, footer, .site-footer, .mobile-bottom-nav, .back-to-top,
    .subscribe-fab, .subscribe-popup, .cert-actions, .no-print,
    .top-bar, .site-header { display: none !important; }
    body { background: #fff !important; }
    .cert-page-section { padding: 0 !important; }
    .certificate { box-shadow: none !important; max-width: 100% !important; }
    @page { size: landscape; margin: 8mm; }
}

/* ============================================================
   LMS — COURSES, LEARNING PAGE, MY COURSES
   ============================================================ */
/* ---------- Catalog cards ---------- */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .course-grid { grid-template-columns: 1fr; } }
.course-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .15s ease, box-shadow .15s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.course-thumb {
    position: relative; aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: #fff;
}
.course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-tag {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; color: #fff;
}
.course-tag-free { background: #16a34a; }
.course-tag-paid { background: #ea580c; }
.course-tag-enrolled { background: #4f46e5; }
.course-card-body { padding: 14px 16px 16px; }
.course-card-body b { font-size: 14.5px; line-height: 1.4; display: block; }
.course-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.course-validity { font-size: 11.5px; color: var(--color-text-muted); margin-top: 7px; }

/* ---------- Course landing ---------- */
.course-hero { display: flex; gap: 22px; padding: 24px; align-items: flex-start; }
.course-hero-thumb { width: 260px; max-width: 38%; border-radius: 12px; flex: 0 0 auto; }
@media (max-width: 720px) { .course-hero { flex-direction: column-reverse; } .course-hero-thumb { width: 100%; max-width: 100%; } }
.course-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.course-valid-chip { font-size: 12.5px; color: var(--color-text-muted); }
.course-lesson-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--color-border); }
.course-lesson-row:last-child { border-bottom: none; }
.course-lesson-title { font-size: 13.5px; min-width: 0; }
.course-lesson-meta { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Player / viewers ---------- */
.lms-player-wrap {
    position: relative; aspect-ratio: 16/9; background: #000;
    border-radius: 12px; overflow: hidden;
}
.lms-player-wrap iframe, .lms-player-wrap video { width: 100%; height: 100%; border: 0; display: block; }
.lms-watermark {
    position: absolute; bottom: 12px; right: 14px;
    font-size: 11px; color: rgba(255,255,255,.55);
    background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 6px;
    pointer-events: none; user-select: none;
}
.lms-pdf-wrap { height: 78vh; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); }
.lms-pdf-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Learn layout ---------- */
.learn-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.learn-progress { display: flex; gap: 10px; align-items: center; min-width: 220px; flex: 1; max-width: 420px; }
.learn-progress-bar {
    flex: 1; height: 8px; border-radius: 999px;
    background: rgba(120,120,160,.18); overflow: hidden;
}
.learn-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), #7c3aed); border-radius: 999px; transition: width .3s ease; }
.learn-layout { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .learn-layout { grid-template-columns: 1fr; } }
.learn-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.learn-sidebar { position: sticky; top: calc(var(--header-height, 64px) + 14px); max-height: 82vh; overflow-y: auto; }
@media (max-width: 900px) { .learn-sidebar { position: static; max-height: none; } }
.learn-sec-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-muted); margin: 12px 0 6px; }
.learn-les {
    display: flex; gap: 8px; align-items: center;
    padding: 7px 9px; border-radius: 8px;
    font-size: 12.5px; color: inherit; text-decoration: none;
}
.learn-les:hover { background: rgba(79,70,229,.07); }
.learn-les-active { background: rgba(79,70,229,.12); font-weight: 700; }

/* ---------- My Courses ---------- */
.mycourse-card { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; padding: 16px 18px; }
.mycourse-thumb {
    width: 110px; aspect-ratio: 16/9; flex: 0 0 110px;
    border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px;
}
.mycourse-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
    .mycourse-card { flex-wrap: wrap; }
    .mycourse-card > div:last-child { text-align: left; width: 100%; }
}

/* ============================================================
   LMS PHASE 2 — Quiz, Doubts
   ============================================================ */
.quiz-q { padding: 14px 0; border-bottom: 1px dashed var(--color-border); }
.quiz-q:last-of-type { border-bottom: none; }
.quiz-q-text { font-size: 14.5px; line-height: 1.6; }
.quiz-q-marks { font-size: 11px; color: var(--color-text-muted); font-weight: 400; margin-left: 8px; white-space: nowrap; }
.quiz-opt {
    display: flex; gap: 10px; align-items: center;
    padding: 9px 12px; margin-top: 7px;
    border: 1px solid var(--color-border); border-radius: 9px;
    font-size: 13.5px; cursor: pointer; transition: background .12s ease;
}
.quiz-opt:hover { background: rgba(79,70,229,.06); }
.quiz-opt input { width: 16px; height: 16px; accent-color: var(--color-primary); flex: 0 0 auto; }
.quiz-timer {
    position: sticky; top: calc(var(--header-height, 64px) + 8px);
    z-index: 5; display: inline-block;
    background: rgba(79,70,229,.1); color: var(--color-primary);
    font-weight: 800; font-size: 15px;
    padding: 7px 14px; border-radius: 999px; margin-bottom: 10px;
}
.quiz-result { text-align: center; padding: 30px; }
.quiz-pass { border: 2px solid #16a34a; }
.quiz-fail { border: 2px solid #dc2626; }

/* ---------- Doubts ---------- */
.doubt-item { padding: 13px 0; border-bottom: 1px dashed var(--color-border); }
.doubt-item:last-child { border-bottom: none; }
.doubt-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.doubt-time { font-size: 11px; color: var(--color-text-muted); }
.doubt-admin-badge { background: linear-gradient(135deg, var(--color-primary), #7c3aed); color: #fff; font-size: 9.5px; }
.doubt-body { font-size: 13.5px; line-height: 1.65; margin-top: 5px; }
.doubt-actions { display: flex; gap: 16px; margin-top: 6px; font-size: 12.5px; }
.doubt-reply {
    margin: 10px 0 0 22px; padding: 9px 13px;
    background: rgba(79,70,229,.05); border-radius: 9px;
    border-left: 3px solid var(--color-primary);
}

/* ============================================================
   COURSE CATALOG — filters bar + creative course cards (v2)
   ============================================================ */
.course-filters-bar { margin-bottom: 24px; }
.cf-search { display: flex; gap: 8px; max-width: 420px; margin-bottom: 12px; }
.cf-search input {
    flex: 1; min-width: 0; height: 44px; padding: 0 16px;
    border-radius: 10px; border: 1px solid var(--color-border); font-size: 14px;
}
.cf-search button {
    width: 44px; height: 44px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed); color: #fff;
    font-size: 15px; cursor: pointer;
}
.cf-selects { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cf-selects select {
    height: 38px; padding: 0 12px; border-radius: 999px;
    border: 1.5px solid var(--color-border); background: var(--color-bg-card, #fff);
    font-size: 12.5px; font-weight: 600; color: var(--color-text);
    cursor: pointer;
}
.cf-selects select:hover { border-color: var(--color-primary); }
.cf-clear {
    font-size: 12px; font-weight: 700; color: #dc2626;
    padding: 8px 4px; text-decoration: none;
}
.cf-clear:hover { text-decoration: underline; }

/* ---------- Creative Course Card v2 ---------- */
.course-card-v2 {
    display: block; text-decoration: none; color: inherit;
    border-radius: 18px; overflow: hidden;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.course-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(79,70,229,.16);
}
.cc2-thumb {
    position: relative; aspect-ratio: 16/10; overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    display: flex; align-items: center; justify-content: center;
}
.cc2-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.course-card-v2:hover .cc2-thumb img { transform: scale(1.07); }
.cc2-thumb-emoji { font-size: 48px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); }
.cc2-thumb-fade {
    position: absolute; inset: auto 0 0 0; height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
    pointer-events: none;
}
.cc2-tag {
    position: absolute; top: 11px; left: 11px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.cc2-tag-free { background: linear-gradient(120deg, #16a34a, #22c55e); }
.cc2-tag-paid { background: linear-gradient(120deg, #ea580c, #f97316); }
.cc2-tag-enrolled { background: linear-gradient(120deg, #4f46e5, #7c3aed); }
.cc2-hours {
    position: absolute; bottom: 10px; right: 11px;
    background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
    color: #fff; font-size: 10.5px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
}
.cc2-body { padding: 16px 17px 18px; }
.cc2-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.cc2-tags span {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(79,70,229,.09); color: var(--color-primary);
}
.cc2-title { font-size: 15px; line-height: 1.4; display: block; margin-bottom: 9px; min-height: 42px; }
.cc2-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-muted); margin-bottom: 12px; }
.cc2-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    color: #fff; font-size: 10px; font-weight: 800;
}
.cc2-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px dashed var(--color-border);
    font-size: 11.5px; color: var(--color-text-muted); flex-wrap: wrap; gap: 6px;
}

/* Course grid jab filter-sidebar ke saath (narrower results column) ho to auto-fit rakhein */
.course-grid-filtered { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ============================================================
   MOCK TEST — CATALOG CARDS + FILTERS + INSTRUCTIONS PAGE
   ============================================================ */
.mock-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.mock-card {
    display: block; text-decoration: none; color: inherit;
    border-radius: 16px; overflow: hidden;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mock-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(79,70,229,.14); }
.mock-card-thumb {
    position: relative; aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1e1b3a 0%, #4f46e5 60%, #7c3aed 100%);
    display: flex; align-items: center; justify-content: center; font-size: 38px; color: #fff;
}
.mock-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mock-tag { position: absolute; top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; }
.mock-tag-free { background: #16a34a; }
.mock-tag-paid { background: #ea580c; }
.mock-attempted-chip { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mock-card-body { padding: 14px 16px 16px; }
.mock-card-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); margin: 8px 0 10px; }

.mock-instr-hero { text-align: center; padding: 26px 20px; background: linear-gradient(135deg, rgba(79,70,229,.06), rgba(147,51,234,.05)); border-radius: 16px; }
.mock-instr-stats { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.mock-instr-stats div { text-align: center; }
.mock-instr-stats b { display: block; font-size: 20px; color: var(--color-primary); }
.mock-instr-stats span { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .3px; }

/* ============================================================
   MOCK TEST — EXAM INTERFACE (premium, exam-like)
   ============================================================ */
.exam-shell {
    --exam-bg: #f4f5fa; --exam-card: #ffffff; --exam-text: #1e1b3a; --exam-border: #e6e6f0;
    background: var(--exam-bg); color: var(--exam-text); min-height: 100vh; margin: calc(-1 * var(--header-height, 64px)) -100vw 0; padding: var(--header-height, 64px) 100vw 0;
}
.exam-shell.exam-dark { --exam-bg: #0f1420; --exam-card: #161d2e; --exam-text: #f1f5f9; --exam-border: #263042; }

.exam-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; background: linear-gradient(120deg, #1e1b3a, #4f46e5);
    color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15); flex-wrap: wrap; gap: 8px;
}
.exam-title { font-size: 14px; font-weight: 700; }
.exam-topbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exam-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1); color: #fff; font-size: 12px; cursor: pointer;
}
.exam-icon-btn:hover { background: rgba(255,255,255,.2); }
.exam-timer {
    background: rgba(255,255,255,.15); font-weight: 800; font-size: 15px;
    padding: 6px 14px; border-radius: 999px; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.exam-timer-critical { background: #dc2626 !important; animation: examPulse 1s infinite; }
@keyframes examPulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.exam-tab-warn { background: rgba(249,115,22,.25); color: #fed7aa; font-size: 11px; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }

.exam-body { display: flex; gap: 18px; max-width: 1200px; margin: 18px auto; padding: 0 16px; align-items: flex-start; }
.exam-main {
    flex: 1; min-width: 0; background: var(--exam-card); border: 1px solid var(--exam-border);
    border-radius: 14px; padding: 22px 26px; box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.exam-q-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--exam-border); flex-wrap: wrap; }
.exam-passage { background: rgba(79,70,229,.05); border-left: 3px solid var(--color-primary); padding: 14px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }
.exam-question-html { font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; }
.exam-options { margin-bottom: 22px; }
.exam-opt-row {
    display: flex; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 10px;
    border: 1.5px solid var(--exam-border); border-radius: 10px; cursor: pointer; font-size: 14px;
    transition: border-color .12s ease, background .12s ease;
}
.exam-opt-row:hover { border-color: var(--color-primary); background: rgba(79,70,229,.04); }
.exam-opt-row input { width: 17px; height: 17px; accent-color: var(--color-primary); flex: 0 0 auto; }
.exam-match-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.exam-match-table th, .exam-match-table td { padding: 8px 10px; border-bottom: 1px solid var(--exam-border); text-align: left; }
.exam-match-table select { width: 100%; }

.exam-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding-top: 16px; border-top: 1px dashed var(--exam-border); }

.exam-sidebar {
    width: 300px; flex: 0 0 300px; background: var(--exam-card); border: 1px solid var(--exam-border);
    border-radius: 14px; padding: 18px; position: sticky; top: 74px; max-height: 82vh; overflow-y: auto;
}
.exam-palette-legend { display: flex; flex-direction: column; gap: 6px; font-size: 11px; margin-bottom: 14px; }
.exam-palette-legend span { display: flex; align-items: center; gap: 8px; }
.pl-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pl-answered, .pl-btn.pl-answered { background: #16a34a; }
.pl-notanswered, .pl-btn.pl-notanswered { background: #dc2626; }
.pl-marked, .pl-btn.pl-marked { background: #9333ea; }
.pl-markedans, .pl-btn.pl-markedans { background: #7c3aed; position: relative; }
.pl-notvisited, .pl-btn.pl-notvisited { background: #cbd5e1; }
.exam-palette-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--color-text-muted); margin: 12px 0 6px; }
.exam-palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pl-btn {
    aspect-ratio: 1; border: none; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: transform .1s ease;
}
.pl-btn:hover { transform: scale(1.08); }
.pl-btn.pl-current { outline: 3px solid #f59e0b; outline-offset: 1px; }

.exam-palette-fab {
    display: none; position: fixed; bottom: 20px; right: 20px; z-index: 50;
    width: 54px; height: 54px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed); color: #fff; font-size: 20px;
    box-shadow: 0 8px 22px rgba(79,70,229,.35); cursor: pointer;
}
.exam-sidebar-overlay { display: none; }

@media (max-width: 940px) {
    .exam-body { flex-direction: column; }
    .exam-sidebar {
        position: fixed; top: 0; right: -320px; height: 100vh; width: 290px; z-index: 100;
        transition: right .25s ease; border-radius: 0;
    }
    .exam-sidebar.open { right: 0; }
    .exam-sidebar-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99;
    }
    .exam-sidebar-overlay.open { display: block; }
    .exam-palette-fab { display: flex; align-items: center; justify-content: center; }
    .exam-main { padding: 16px; }
    .exam-title { font-size: 12.5px; }
}

/* ---------- Modals (submit confirm, calculator, rough sheet) ---------- */
.exam-modal-overlay { position: fixed; inset: 0; background: rgba(15,13,35,.6); display: none; align-items: center; justify-content: center; z-index: 500; padding: 16px; }
.exam-modal-overlay.open { display: flex; }
.exam-modal { background: var(--exam-card, #fff); color: var(--exam-text, #1e1b3a); border-radius: 16px; padding: 24px; width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.exam-modal h3 { margin: 0 0 6px; }
.exam-sum-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--exam-border, #e6e6f0); font-size: 13.5px; }
.exam-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-key { height: 42px; border-radius: 8px; border: 1px solid var(--exam-border, #e6e6f0); background: var(--exam-bg, #f4f5fa); font-size: 14px; cursor: pointer; }
.calc-key:hover { background: rgba(79,70,229,.1); }

.exam-toast {
    position: fixed; top: 76px; left: 50%; transform: translateX(-50%) translateY(-20px);
    background: #1e1b3a; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 13px;
    box-shadow: 0 10px 26px rgba(0,0,0,.25); z-index: 600; opacity: 0; pointer-events: none; transition: .25s ease;
}
.exam-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   MOCK TEST — RESULT PAGE
   ============================================================ */
.mock-result-hero {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(120deg, rgba(79,70,229,.06), rgba(147,51,234,.05));
    border-radius: 16px; padding: 22px 26px;
}
.mock-score-badge {
    background: linear-gradient(135deg, var(--color-primary), #7c3aed); color: #fff;
    border-radius: 14px; padding: 14px 24px; text-align: center; min-width: 140px;
}
.mock-score-badge b { display: block; font-size: 28px; line-height: 1; }
.mock-score-badge span { font-size: 11.5px; opacity: .85; }

.mock-stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .mock-stat-grid { grid-template-columns: repeat(3, 1fr); } }
.mock-stat-card { background: var(--color-bg-card, #fff); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 10px; text-align: center; }
.mock-stat-card b { display: block; font-size: 18px; color: var(--color-primary); }
.mock-stat-card span { font-size: 10.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .3px; }

.mock-pie { width: 160px; height: 160px; border-radius: 50%; margin: 0 auto 16px; }
.mock-pie-legend { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.mock-pie-legend span { display: flex; align-items: center; gap: 6px; }
.mock-pie-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.mock-bar-row { margin-bottom: 14px; }
.mock-bar-label { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.mock-bar-track { height: 9px; border-radius: 999px; background: rgba(120,120,160,.15); overflow: hidden; }
.mock-bar-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), #7c3aed); border-radius: 999px; }

.mock-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }

/* ---------- Solutions page ---------- */
.sol-card { border-left: 4px solid #cbd5e1; margin-bottom: 16px; }
.sol-card.sol-correct { border-left-color: #16a34a; }
.sol-card.sol-wrong { border-left-color: #dc2626; }
.sol-card.sol-skip { border-left-color: #94a3b8; }
.sol-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--color-text-muted); }
.sol-status { font-weight: 700; }
.sol-answers { font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border); }
.sol-explain { font-size: 13px; margin-top: 10px; background: rgba(79,70,229,.05); padding: 10px 14px; border-radius: 8px; }
.sol-actions { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; }

/* ---------- Leaderboard ---------- */
.lb-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.lb-podium-item { text-align: center; font-size: 12.5px; }
.lb-podium-avatar {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 6px;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; overflow: hidden;
}
.lb-podium-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-podium-medal { font-size: 20px; }
.lb-podium-0 { order: 1; } .lb-podium-1 { order: 2; transform: scale(1.15); } .lb-podium-2 { order: 3; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--color-border); }
.lb-row:last-child { border-bottom: none; }
.lb-row-me { background: rgba(79,70,229,.06); margin: 0 -12px; padding: 11px 12px; border-radius: 10px; }
.lb-rank { font-weight: 800; width: 34px; flex: 0 0 auto; color: var(--color-primary); }
.lb-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-name { flex: 1; min-width: 0; font-size: 13.5px; }
.lb-marks { font-weight: 800; color: var(--color-primary); }

/* ---------- My Tests ---------- */
.mock-my-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

/* ============================================================
   SIMULATIONS — fixed responsive box + fullscreen
   ============================================================ */
.sim-box-wrap { width: 100%; }
.sim-box {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #0b0d14; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.sim-iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
.sim-fs-btn {
    position: absolute; bottom: 14px; right: 14px; z-index: 5;
    background: rgba(15,13,35,.7); color: #fff; border: none;
    padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; backdrop-filter: blur(6px); transition: background .15s ease;
}
.sim-fs-btn:hover { background: rgba(15,13,35,.9); }

.sim-box:fullscreen { width: 100vw; height: 100vh; aspect-ratio: unset; border-radius: 0; border: none; }
.sim-box:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: unset; border-radius: 0; border: none; }
.sim-box:fullscreen .sim-fs-btn,
.sim-box:-webkit-full-screen .sim-fs-btn { bottom: 20px; right: 20px; }

@media (max-width: 640px) {
    .sim-box { aspect-ratio: 4 / 3; border-radius: 12px; }
    .sim-fs-btn { padding: 8px 13px; font-size: 11.5px; bottom: 10px; right: 10px; }
}

/* ============================================================
   REVIEWS & RATINGS — full-width, colorful page
   ============================================================ */
.rev-hero {
    background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #ec4899 130%);
    color: #fff; padding: 54px 0 46px; text-align: center;
    position: relative; overflow: hidden;
}
.rev-hero::before, .rev-hero::after {
    content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none;
}
.rev-hero::before { width: 340px; height: 340px; top: -160px; left: -100px; }
.rev-hero::after { width: 260px; height: 260px; bottom: -140px; right: -60px; }
.rev-hero-kicker {
    display: inline-block; background: rgba(255,255,255,.18); padding: 6px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px;
}
.rev-hero h1 { font-size: 32px; margin-bottom: 10px; }
.rev-hero p { font-size: 14.5px; opacity: .92; max-width: 560px; margin: 0 auto; }
.rev-hero-stats { display: flex; justify-content: center; gap: 34px; margin-top: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.rev-hero-stat b { display: block; font-size: 26px; font-weight: 800; }
.rev-hero-stat span { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .4px; }

.rev-wide { max-width: 1240px; }

/* ---------- Rate Us panel ---------- */
.rev-rate-panel {
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; margin: -70px 0 40px;
    border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(79,70,229,.2); position: relative; z-index: 2;
}
.rev-rate-side {
    background: linear-gradient(160deg, #1e1b3a 0%, #4f46e5 55%, #7c3aed 100%); color: #fff; padding: 40px 36px;
    display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.rev-rate-side::before {
    content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); top: -60px; right: -60px;
}
.rev-rate-side::after {
    content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(236,72,153,.25), transparent 70%); bottom: -50px; left: -40px;
}
.rev-rate-emoji {
    font-size: 30px; margin-bottom: 14px; width: 56px; height: 56px; border-radius: 16px;
    background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; backdrop-filter: blur(4px);
}
.rev-rate-side h2 { font-size: 23px; margin-bottom: 10px; position: relative; z-index: 1; line-height: 1.3; }
.rev-rate-side p { font-size: 13.5px; opacity: .88; margin-bottom: 22px; position: relative; z-index: 1; }
.rev-rate-summary { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.12); padding: 16px 18px; border-radius: 14px; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.15); }
.rev-rate-num { font-size: 32px; font-weight: 800; }
.rev-rate-stars span { color: rgba(255,255,255,.35); font-size: 15px; }
.rev-rate-stars span.on { color: #fbbf24; }
.rev-rate-count { font-size: 11px; opacity: .8; }

.rev-rate-form {
    background: linear-gradient(160deg, #f5f4ff 0%, #fdf2f8 100%);
    padding: 40px 36px; display: flex; align-items: center;
}
.rev-form-only { width: 100%; }
.rev-form-only .pr-head, .rev-form-only .pr-summary, .rev-form-only .pr-list, .rev-form-only .pr-empty { display: none; }
.rev-form-only .pr-form-card { border: none; padding: 0; box-shadow: none; background: transparent; }
.rev-form-only .pr-form-card::before { display: none; }
.rev-form-only .pr-form-card > h4, .rev-form-only .pr-form-card > .pr-form-sub { display: none; }
.rev-form-only .pr-star-input { justify-content: center; background: #fff; padding: 16px; border-radius: 14px; box-shadow: 0 6px 18px rgba(79,70,229,.08); margin-bottom: 22px; }
.rev-form-only .pr-star-input label { font-size: 30px; }
.rev-form-only .pr-star-text { font-size: 13px; font-weight: 800; }
.rev-form-only .pr-label { font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.rev-form-only .pr-form-card textarea { border-radius: 14px; border: 1.5px solid rgba(79,70,229,.15); background: #fff; }
.rev-form-only .pr-submit {
    background: linear-gradient(120deg, #4f46e5, #ec4899); border: none; border-radius: 12px;
    font-size: 14.5px; font-weight: 800; padding: 15px; box-shadow: 0 10px 24px rgba(79,70,229,.28);
}
.rev-form-only .pr-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(79,70,229,.34); }
.rev-form-only .cap-box { background: #fff; border-radius: 14px; border: 1.5px solid rgba(79,70,229,.12); }

/* ---------- Feed header + filter pills ---------- */
.rev-feed-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rev-feed-head h2 { font-size: 19px; }
.rev-type-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.rev-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--color-border);
    color: var(--color-text); background: var(--color-bg-card, #fff); transition: transform .12s ease;
}
.rev-pill:hover { transform: translateY(-1px); }
.rev-pill.active { color: #fff; border-color: transparent; }
.rev-pill.active, .rev-pill.tone-indigo.active { background: linear-gradient(135deg,#4f46e5,#7c3aed); }
.rev-pill.tone-orange.active { background: linear-gradient(135deg,#f59e0b,#f97316); }
.rev-pill.tone-sky.active { background: linear-gradient(135deg,#0ea5e9,#3b82f6); }
.rev-pill.tone-green.active { background: linear-gradient(135deg,#22c55e,#16a34a); }
.rev-pill.tone-rose.active { background: linear-gradient(135deg,#f43f5e,#ec4899); }

/* ---------- Aggregated grid ---------- */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rev-card {
    background: var(--color-bg-card, #fff); border: 1px solid var(--color-border); border-left: 4px solid #4f46e5;
    border-radius: 14px; padding: 18px; transition: transform .15s ease, box-shadow .15s ease;
}
.rev-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.rev-card.tone-indigo { border-left-color: #4f46e5; }
.rev-card.tone-orange { border-left-color: #f97316; }
.rev-card.tone-sky { border-left-color: #0ea5e9; }
.rev-card.tone-green { border-left-color: #16a34a; }
.rev-card.tone-rose { border-left-color: #ec4899; }
.rev-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rev-avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }
.rev-who { flex: 1; min-width: 0; }
.rev-who strong { display: block; font-size: 13.5px; }
.rev-who time { font-size: 10.5px; color: var(--color-text-muted); }
.rev-type-badge {
    font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    background: rgba(79,70,229,.12); color: #4f46e5;
}
.rev-type-badge.tone-orange { background: rgba(249,115,22,.12); color: #ea580c; }
.rev-type-badge.tone-sky { background: rgba(14,165,233,.12); color: #0284c7; }
.rev-type-badge.tone-green { background: rgba(22,163,74,.12); color: #16a34a; }
.rev-type-badge.tone-rose { background: rgba(236,72,153,.12); color: #db2777; }
.rev-stars span { color: #d1d5db; font-size: 13px; }
.rev-stars span.on { color: #f59e0b; }
.rev-text { font-size: 13px; line-height: 1.6; margin: 8px 0 10px; color: var(--color-text); }
.rev-target-link { font-size: 11.5px; font-weight: 700; color: #4f46e5; text-decoration: none; }
.rev-target-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .rev-rate-panel { grid-template-columns: 1fr; margin-top: -40px; }
    .rev-hero h1 { font-size: 26px; }
}

/* ============================================================
   CREDIT SYSTEM EXPLANATION PAGE
   ============================================================ */
.credit-explain-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--color-border); }
.credit-explain-row:last-child { border-bottom: none; }
.credit-explain-ico {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    background: rgba(79,70,229,.1); display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.credit-explain-row b { display: block; font-size: 14px; margin-bottom: 3px; }
.credit-explain-row p { font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.credit-use-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.credit-use-item { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; }
.credit-use-item span { font-size: 20px; flex: 0 0 auto; }
.credit-use-item b { display: block; font-size: 12.5px; }
.credit-use-item small { font-size: 11px; color: var(--color-text-muted); }

/* ============================================================
   CONTENT PROTECTION TOAST (right-click/copy block)
   ============================================================ */
.copy-protect-toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-16px);
    background: #1e1b3a; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 26px rgba(0,0,0,.25); z-index: 9999; opacity: 0; pointer-events: none; transition: .25s ease;
}
.copy-protect-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   PIN TO TOP  --  pinned card ko baaki cards se alag dikhana
   ===================================================================== */
.card.is-pinned {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--color-card), var(--color-card)) padding-box,
        linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%) border-box;
    box-shadow: 0 8px 26px rgba(245, 158, 11, .20);
}
.card.is-pinned::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245,158,11,.10) 0%, rgba(236,72,153,.05) 55%, transparent 100%);
    pointer-events: none;
}
.card.is-pinned > * { position: relative; z-index: 1; }
.card.is-pinned:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(245, 158, 11, .30);
}
.card.is-pinned::before { opacity: 0 !important; }   /* default hover bar band */

.pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: 1.5;
    box-shadow: 0 2px 10px rgba(239, 68, 68, .38);
}

/* list/table layout wale listings ke liye */
tr.is-pinned, .list-item.is-pinned {
    background: linear-gradient(90deg, rgba(245,158,11,.13), rgba(245,158,11,.02));
}

@media (prefers-reduced-motion: reduce) {
    .card.is-pinned:hover { transform: none; }
}

/* Jobs listing tutor-card ke liye wahi pinned look */
.tutor-card.is-pinned {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--color-card), var(--color-card)) padding-box,
        linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%) border-box;
    box-shadow: 0 8px 26px rgba(245, 158, 11, .20);
}

/* =====================================================================
   Admin list: WordPress-style row actions under the Name
   ===================================================================== */
.admin-table td > strong { font-weight: 600; display: block; }
.admin-table .row-actions {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    visibility: hidden;          /* jagah reserved rehti hai, row uchhalti nahi */
}
.admin-table tr:hover .row-actions,
.admin-table tr:focus-within .row-actions { visibility: visible; }
/* touch devices par hover hota hi nahi, isliye hamesha dikhao */
@media (hover: none) { .admin-table .row-actions { visibility: visible; } }

.admin-table .row-actions a { text-decoration: none; }
.admin-table .row-actions a:hover { text-decoration: underline; }
.admin-table .row-actions a.danger { color: #dc2626; }
.admin-table .row-actions .sep { color: #cbd5e1; margin: 0 4px; }

.pin-link { text-decoration: none; white-space: nowrap; color: #94a3b8; }
.pin-link.pinned { color: #b45309; font-weight: 700; }

/* =====================================================================
   PYQ — QUESTION & SOLUTION TEXT (FADE FIX)
   ---------------------------------------------------------------------
   Dikkat kya thi: md_to_html() har paragraph ko <p> me lapetta hai. PYQ
   ke view page par ye <p> ".card" ke andar aate hain, aur is file ka
   global rule —

       .card p { color: var(--color-text-muted); font-size: 13.5px; }

   — unhe halka slate-gray (#6b7280) aur chhota (13.5px) bana deta tha.
   Isi wajah se question aur "Answer & Solution" dono fade dikh rahe the.
   KaTeX equations bhi fade thi kyunki wo apne parent <p> ka color
   inherit karti hain. Headings (### wale) theek dikh rahe the kyunki
   md_to_html unhe <div> banata hai, <p> nahi — yahi is bug ka sabse bada
   sabot tha.

   Fix: ".md-body" wrapper. Specificity ".card .md-body p" (0,2,1) upar
   wale ".card p" (0,1,1) se zyada hai, isliye ye jeet jaata hai.
   Global ".card p" rule ko jaan-boojh kar haath nahi lagaya — warna
   poore site ke cards ka chhota muted description text bhi badal jaata
   (home page feature cards, listing cards, etc.).
   ===================================================================== */
.md-body {
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.85;
}
.card .md-body p,
.card .md-body li,
.card .md-body td,
.card .md-body th,
.card .md-body blockquote,
.md-body p,
.md-body li,
.md-body td,
.md-body th,
.md-body blockquote {
    color: var(--color-text);
    font-size: inherit;
    line-height: inherit;
}
.md-body strong,
.md-body b { font-weight: 700; color: inherit; }
.md-body em,
.md-body i { color: inherit; }
.md-body a { color: var(--color-primary); text-decoration: underline; }
/* md_to_html blockquote par inline "opacity:.9" lagata hai — usse bhi
   halka lagta tha, isliye yahan wapas full kar diya. */
.md-body blockquote { opacity: 1 !important; }
.md-body .katex { color: inherit; font-size: 1.05em; }
.md-body .katex-display { margin: 16px 0; }
.md-body > *:last-child { margin-bottom: 0 !important; }

/* Question ka block — thoda bada aur poora dark */
.pyq-qtext {
    font-size: 17px;
    line-height: 1.8;
    font-weight: 600;
    color: var(--color-text);
}
/* Green solution panel ke andar ka body text */
.pyq-solution-body {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--color-text);
}
.pyq-solution-panel .pyq-solution-body,
.pyq-solution-panel .pyq-solution-body p,
.pyq-solution-panel .pyq-solution-body li { color: var(--color-text); }

@media (max-width: 768px) {
    .pyq-qtext { font-size: 16px; }
    .pyq-solution-body { font-size: 15px; }
}

/* Future-proof guard: agar kabhi WYSIWYG rich content kisi .card ke andar
   render ho (abhi blog/page/product sab card ke bahar hain), to wahan bhi
   paragraph muted-gray na ho jaaye. */
.card .rich-content p,
.card .rich-content li,
.card .content-body p,
.card .content-body li {
    color: var(--color-text);
    font-size: inherit;
}