/* ==========================================================
   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);
}

.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;
}
.nav-dropdown:hover .nav-dropdown-menu,
.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;
}

/* ---------- MEGA MENU ("Find" — Find Tuition / Find Coaching Inst. / Find Job) ---------- */
.nav-mega-menu {
    display: none;
    min-width: 640px;
    padding: 18px;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 22px;
}
.nav-dropdown:hover .nav-mega-menu,
.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: 0; right: 0; bottom: 0;
    z-index: 800;
    background: var(--header-bg, #ffffff);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(23,21,46,0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav a {
    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: 10px;
}
.mobile-bottom-nav a .mbn-icon { font-size: 19px; line-height: 1; }
.mobile-bottom-nav a.active { color: var(--color-primary); background: rgba(79,70,229,0.08); }

/* ---------- 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(58px + env(safe-area-inset-bottom, 0px)); }
    .back-to-top { bottom: calc(74px + 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;
    }
    nav.main-menu > a { display: flex; align-items: center; }

    /* Dropdown submenus are collapsed by default on mobile; tap the arrow to expand */
    .nav-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 13.5px;
        color: var(--color-text);
        padding: 12px 14px;
        border-radius: 8px;
        cursor: pointer;
    }
    .nav-dropdown-toggle:hover { background: rgba(79,70,229,0.08); }
    .nav-dropdown-toggle::after {
        content: '\25BE';
        font-size: 12px;
        opacity: .7;
        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;
        padding: 2px 0 6px 10px;
        margin-top: 0;
        background: transparent;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block !important; }
    .nav-dropdown-menu a { padding: 9px 20px; font-size: 13.5px; }
    .nav-dropdown-menu .submenu-label { padding: 8px 20px 4px; }

    .nav-mega-menu {
        min-width: 0;
        width: 100%;
        grid-template-columns: 1fr;
        padding: 4px 0 6px 10px;
        gap: 4px;
    }
    .nav-dropdown.open .nav-mega-menu { display: grid !important; }
    .nav-mega-col-title { padding: 10px 20px 6px; font-size: 12.5px; }
    .nav-mega-col a { padding: 9px 20px; font-size: 13.5px; }

    .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; }

/* ---------- 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-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;
}