/* ============================================================================
   LECTREASURE FRONTEND THEME  —  "ZeroBook" design language
   Evergreen brand + cream canvas + Spectral/Inter pairing, premium & restrained.
   Loaded LAST in frontend/assets/head.php so it overrides custom.css.
   Colour/typography/card layer only — no structural markup changes.
   ========================================================================== */

:root{
  --brand:#0B6E4F; --brand-600:#0A5E44; --brand-700:#084c37; --brand-tint:#E6F2EC;
  --ink:#14231E; --muted:#5F726A; --faint:#8B9A92;
  --canvas:#F6F7F5; --surface:#FFFFFF; --surface-2:#FBFCFB;
  --line:#E4E7E3; --line-strong:#D3D9D4;
  --rust:#B03A2E; --amber:#B7791F; --indigo:#3B5BA5; --sky:#2E7D9A;
  --shadow-sm:0 1px 2px rgba(20,35,30,.04),0 1px 3px rgba(20,35,30,.06);
  --shadow-md:0 2px 6px rgba(20,35,30,.05),0 8px 24px rgba(20,35,30,.07);
  --radius:14px; --radius-sm:10px;
}

/* ---------- 1. Typography ------------------------------------------------- */
/* Inter for UI/body (needs !important to beat custom.css `a,li,p serif!important`).
   Spectral for display headings. Colour left un-!important so higher-specificity
   rules (white hero text, footer) keep winning. Icon fonts are NOT touched. */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  background:var(--canvas); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
p,a,li,ul,ol,label,td,th,span,input,select,textarea,button,
.header_mid ul li a,.footer_mid,.footer_mid_grid{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
}
/* keep icon glyph fonts intact (Inter above would otherwise clobber icon spans) */
[class^="flaticon-"],[class*=" flaticon-"],
[class^="feather-"],[class*=" feather-"],
.fa,.fas,.far,.fab,.fal,i[class*="fa-"]{ font-family:inherit !important; }
[class^="flaticon-"]:before,[class*=" flaticon-"]:before{ font-family:'Flaticon' !important; }

h1,h2,h3,h4,h5,h6,
.common_heading,.big_sec_heading,.course_title,.p-title,.v-title,.faq_heading,.heading{
  font-family:'Spectral',Georgia,serif !important;
  font-weight:600; letter-spacing:-.01em;
}
h1,h2,h3,h4,h5,h6{ color:var(--ink); }
a{ color:var(--brand-600); }
a:hover{ color:var(--brand); }

/* Section headings with a short evergreen underline */
.common_heading,.big_sec_heading{ color:var(--ink)!important; position:relative; }
.common_heading:after,.big_sec_heading:after{
  content:""; display:block; width:56px; height:3px; margin:14px auto 0;
  background:var(--brand); border-radius:3px;
}

/* ---------- 2. Buttons ---------------------------------------------------- */
.btn-primary,
button[type="submit"]:not(.close),
.modal__form_btn,
.add_to_cart,.buy_now,.course_btn,.theme_btn,.btn-theme{
  background-color:var(--brand)!important; border:1px solid var(--brand)!important;
  color:#fff!important; border-radius:var(--radius-sm)!important;
  font-weight:600; letter-spacing:.01em;
  transition:background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.btn-primary:hover,
button[type="submit"]:not(.close):hover,
.modal__form_btn:hover,
.add_to_cart:hover,.buy_now:hover,.course_btn:hover,.theme_btn:hover,.btn-theme:hover{
  background-color:var(--brand-600)!important; border-color:var(--brand-600)!important;
  color:#fff!important; transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(11,110,79,.28);
}
/* secondary / outline buttons */
.btn-outline,.btn-secondary,.btn-light{
  background:var(--surface)!important; color:var(--ink)!important;
  border:1px solid var(--line-strong)!important; border-radius:var(--radius-sm)!important;
}
.btn-outline:hover,.btn-secondary:hover,.btn-light:hover{ background:var(--surface-2)!important; }

/* ---------- 3. Top contact / social bar ----------------------------------- */
.top_header{ background:var(--brand-700)!important; }
.top_header a,.top_header .os,.top_header li a{ color:#dcece5!important; }
.top_header a:hover{ color:#fff!important; }

/* ---------- 4. Header / navigation ---------------------------------------- */
.header_main_fm{ background:var(--surface)!important; }
.header_top_fm{ background:var(--surface)!important; box-shadow:0 1px 0 var(--line),0 6px 20px rgba(20,35,30,.05); }
.header_mid ul li a{ color:var(--ink)!important; font-weight:500; transition:color .13s ease; }
.header_mid ul li a:hover,.header_mid ul li.active > a{ color:var(--brand)!important; }

.sub_menu{
  background:var(--surface)!important; border-top:3px solid var(--brand)!important;
  box-shadow:var(--shadow-md); border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.sub_menu ul li a{ color:var(--ink)!important; }
.sub_menu ul li a:hover{ color:#fff!important; background:var(--brand)!important; }

.header_right a,.header_right #sign_up,.header_right .flaticon-user,.mobile_black{ color:var(--ink)!important; }
.header_right #sign_up:hover{ color:var(--brand)!important; }
#cart_count{ color:var(--brand)!important; }
.mobile_bars .bar1,.mobile_bars .bar2,.mobile_bars .bar3{ background:var(--brand)!important; }

.login_profile_dropdown{ border-top:3px solid var(--brand); box-shadow:var(--shadow-md); }
.login_profile_inner ul li a{ color:var(--ink)!important; }
.login_profile_inner ul li a:hover{ color:var(--brand)!important; }
.login_profile_inner ul li a i{ color:var(--brand); }

/* ---------- 5. Hero / banner + search ------------------------------------- */
.hero_section{ background:linear-gradient(135deg,var(--brand-700) 0%,var(--brand) 100%); }
.search_in_banner input[type="text"],.search_in_banner input[type="search"]{
  border-radius:var(--radius-sm)!important; border:1px solid var(--line)!important;
  box-shadow:var(--shadow-md); padding-left:16px!important;
}
.search_in_banner button{
  background:var(--brand)!important; border-color:var(--brand)!important;
  color:#fff!important; border-radius:var(--radius-sm)!important;
}
.search_in_banner button:hover{ background:var(--brand-600)!important; }
.search_in_banner select{ border-radius:var(--radius-sm)!important; border:1px solid var(--line)!important; }

/* ---------- 6. Cards: courses / products / books -------------------------- */
.course_inner,.product,.course_sec .item,.pro_slider .item,
.small_slider .item,.book_item,.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius)!important; box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.course_inner:hover,.product:hover,.course_sec .item:hover,
.pro_slider .item:hover,.book_item:hover,.card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong);
}
.course_img img,.course_inner img,.product img{ border-radius:var(--radius) var(--radius) 0 0; }
.course_title,.course_detail .p-title,.product .p-title{ color:var(--ink)!important; font-weight:600; }
/* price = evergreen; crossed-out MRP = faint; OFF badge = rust */
.course_detail .price,.product .price,.v-title .price,.amount,.price_now{
  color:var(--brand-600)!important; font-weight:700; font-variant-numeric:tabular-nums;
}
.mrp,.price_old,.cut_price{ color:var(--faint)!important; text-decoration:line-through; }
.off,.discount,.off_badge{ color:var(--rust)!important; font-weight:600; }

/* soft cream band on alternating sections */
.course_sec:nth-of-type(even){ background:var(--surface-2); }

/* ---------- 7. Testimonials / scorer / feedback --------------------------- */
.feedback_slider .item,.top_scorer_item,.scorer_item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.top_scorer_item .name,.scorer_item .name{ color:var(--ink)!important; font-weight:600; }

/* ---------- 8. Forms / inputs --------------------------------------------- */
.floating-input:focus,.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 3px rgba(11,110,79,.14)!important;
}
.input_icons,.contact_inner_form_detail .fas,.contact_inner_form_detail .fa{ color:var(--brand); }
#nav-tab .nav-link.active{ color:var(--brand)!important; border-bottom:3px solid var(--brand)!important; }
#nav-tab .nav-link{ color:var(--muted)!important; }

/* ---------- 9. Footer ----------------------------------------------------- */
.footer_sec,.footer_mid{ background:var(--ink)!important; color:#b8c4bd!important; }
.footer_mid a,.footer_mid_grid a,.footer_mid li a{ color:#aab7b0!important; }
.footer_mid a:hover,.footer_mid_grid a:hover{ color:#fff!important; }
.footer_mid_grid h3,.footer_mid_grid h4,.footer_mid_grid .title{ color:#fff!important; font-weight:600; }
.footer_mid_grid h3:after,.footer_mid_grid h4:after{
  content:""; display:block; width:40px; height:3px; margin-top:10px;
  background:var(--brand); border-radius:3px;
}
.footer_bottom{ background:#0f1a16!important; color:#8ea097!important; }
.footer_bottom a{ color:#fff!important; }

/* ---------- 10. Misc accents --------------------------------------------- */
#snackbar,.snackbar{ background:var(--brand)!important; }
::selection{ background:var(--brand); color:#fff; }
.pagination .page-item.active .page-link,.pagination .active .page-link{
  background:var(--brand)!important; border-color:var(--brand)!important; color:#fff!important;
}
.pagination .page-link{ color:var(--brand-600); }
.breadcrumb .active,.page-title{ color:var(--ink); }

/* ============================================================================
   SHOP-STYLE HOMEPAGE (home-shop.php) — sidebar filters + sort + card grid
   Modeled on smartlearningdestination faculty listing, evergreen palette.
   ========================================================================== */
.shop-page{ background:var(--canvas); }
.shop-hero{
  background:linear-gradient(135deg,var(--brand-700) 0%,var(--brand) 100%);
  color:#fff; padding:34px 24px;
}
.shop-hero-inner{ max-width:1280px; margin:0 auto; }
.shop-title{ font-family:'Spectral',serif !important; color:#fff !important; font-size:30px; font-weight:600; margin:0; }
.shop-sub{ color:#d9ece4 !important; margin:6px 0 0; font-size:14.5px; max-width:640px; }

.shop-body{ max-width:1280px; margin:0 auto; padding:22px 24px 60px; display:flex; gap:24px; align-items:flex-start; }

/* ---- sidebar ---- */
.shop-sidebar{
  width:264px; flex:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:6px 0 10px;
  position:sticky; top:16px; align-self:flex-start;
}
.shop-sidebar-head{ display:flex; align-items:center; gap:8px; padding:14px 18px 12px; border-bottom:1px solid var(--line); }
.ssh-title{ font-family:'Spectral',serif !important; font-weight:600; font-size:17px; color:var(--ink); }
.ssh-clear{ margin-left:auto; background:none; border:0; color:var(--brand-600); font-weight:600; font-size:12.5px; cursor:pointer; }
.ssh-clear:hover{ color:var(--brand); text-decoration:underline; }
.ssh-close{ display:none; background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; }
#filter_scroll{ padding:4px 4px 0; }
.filter-group{ padding:14px 16px 10px; border-bottom:1px solid var(--line); }
.filter-group:last-child{ border-bottom:0; }
.filter-group h4{ font-family:'Inter',sans-serif !important; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-600); margin:0 0 10px; }
.filter-group ul{ list-style:none; margin:0; padding:0; max-height:190px; overflow-y:auto; }
.filter-group ul::-webkit-scrollbar{ width:6px; } .filter-group ul::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:6px; }
.filter-group li{ margin:0 0 3px; }
.filter-group label{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink); cursor:pointer; padding:4px 2px; line-height:1.35; }
.filter-group label:hover{ color:var(--brand-600); }
.filter-group input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; }
.shop-page .custom_check{ width:16px; height:16px; flex:none; border:1.5px solid var(--line-strong); border-radius:5px; background:var(--surface); position:relative; transition:.12s; }
.filter-group input:checked + .custom_check{ background:var(--brand); border-color:var(--brand); }
.filter-group input:checked + .custom_check:after{ content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ---- main / topbar ---- */
.shop-main{ flex:1; min-width:0; }
.shop-topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.shop-count{ font-size:13.5px; color:var(--muted); font-weight:500; }
.shop-sort{ display:flex; align-items:center; gap:9px; }
.shop-sort label{ font-size:13px; color:var(--muted); }
.sort-select{
  appearance:none; -webkit-appearance:none; background:var(--surface); color:var(--brand-600);
  border:1px solid var(--line-strong); border-radius:22px; padding:8px 34px 8px 15px; font-size:13px;
  font-weight:600; box-shadow:var(--shadow-sm); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%230A5E44' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.sort-select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,110,79,.14); }

/* ---- product grid + cards (scoped to .shop-page so ONLY the homepage gets
   the shop treatment — /lecture and other pages keep their original look) ---- */
.shop-page .course_grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:18px; }
.shop-page .course_grid .course_inner{
  width:auto !important; margin:0 !important; float:none !important; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop-page .course_grid .course_inner:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.shop-page .course_grid .course_img{ display:block; }
.shop-page .course_grid .course_img img{ width:100%; height:158px; object-fit:cover; border-radius:0; display:block; }
.shop-page .course_detail{ padding:12px 13px 6px; flex:1; }
.shop-page .course_detail h2{ font-family:'Inter',sans-serif !important; font-size:14px !important; font-weight:600; color:var(--ink) !important; line-height:1.35; margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.shop-page .course_detail > a > p, .shop-page .course_detail p{ font-size:12.5px; color:var(--brand-600) !important; font-weight:600; margin:0 0 8px; }
.shop-page .course_detail .price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px; }
.shop-page .course_detail .price .discount{ color:var(--faint) !important; text-decoration:line-through; font-size:12.5px; font-weight:500; }
.shop-page .course_detail .price .real_price{ color:var(--brand-600) !important; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; }
.shop-page .button_sec{ padding:8px 10px 12px; border-top:1px solid var(--line); }
.shop-page .button_sec ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; justify-content:space-between; }
.shop-page .button_sec ul li{ margin:0; }
.shop-page .button_sec ul li a img{ width:30px; height:30px; }
.shop-loading{ grid-column:1/-1; padding:50px 0; text-align:center; color:var(--muted); font-size:14px; }

/* ---- responsive ---- */
.shop-mobilebar{ display:none; }
@media(max-width:900px){
  .shop-body{ padding:16px 14px 50px; }
  .shop-mobilebar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--line); }
  .shop-mobilebar h4{ margin:0; font-size:15px; color:var(--ink); }
  .shop-mobilebar #mobile_filter{ background:var(--brand); color:#fff; border:0; border-radius:22px; padding:8px 16px; font-weight:600; font-size:13px; }
  .ssh-close{ display:block; }
  .shop-sidebar{ position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; z-index:1200; border-radius:0;
    transform:translateX(-105%); transition:transform .25s ease; overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.25); }
  .shop-sidebar.show_filter_in_mobile{ transform:translateX(0); }
}
@media(max-width:520px){
  .shop-page .course_grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .shop-page .course_grid .course_img img{ height:120px; }
  .shop-title{ font-size:24px; }
}

/* ============================================================================
   HOMEPAGE — search hero + faculty directory grid (home-faculty.php)
   Modeled on smartlearningdestination.com homepage, evergreen palette.
   ========================================================================== */
.fac-home{ background:var(--canvas); }
.fac-hero{ background:linear-gradient(135deg,var(--brand-700) 0%,var(--brand) 55%,#0f8a63 100%); padding:56px 20px 64px; text-align:center; }
.fac-hero-inner{ max-width:760px; margin:0 auto; }
.fac-hero-title{ font-family:'Spectral',serif !important; color:#fff !important; font-size:38px; font-weight:600; margin:0; letter-spacing:-.02em; }
.fac-hero-sub{ color:#d9ece4 !important; font-size:15.5px; margin:12px 0 26px; }
.fac-search{ position:relative; display:flex; align-items:stretch; background:#fff; border-radius:50px; box-shadow:0 16px 40px rgba(0,0,0,.20); padding:6px; max-width:660px; margin:0 auto; }
.fac-search-type{ appearance:none; -webkit-appearance:none; border:0 !important; background:transparent; color:var(--brand-600); font-weight:600; font-size:14px; padding:0 16px; border-right:1px solid var(--line) !important; border-radius:0 !important; cursor:pointer; outline:none; }
.fac-search input{ flex:1; border:0 !important; outline:none; font-size:15px; padding:12px 16px !important; color:var(--ink); background:transparent; border-radius:0 !important; }
.fac-search input:focus{ box-shadow:none !important; }
.fac-search-btn{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--brand) !important; color:#fff !important; border:0; display:grid; place-items:center; font-size:18px; cursor:pointer; }
.fac-search-btn:hover{ background:var(--brand-600) !important; }
.fac-search-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); max-height:360px; overflow-y:auto; text-align:left; z-index:60; display:none; padding:6px; }
.fac-search-results .search_result_listings{ border-radius:10px; }
.fac-search-results .search_result_listings:hover{ background:var(--surface-2); }

.fac-section{ max-width:1240px; margin:0 auto; padding:44px 24px 64px; }
.fac-section-head{ text-align:center; margin-bottom:30px; }
.fac-section-title{ font-family:'Spectral',serif !important; color:var(--ink) !important; font-size:27px; font-weight:600; margin:0; }
.fac-section-title:after{ content:""; display:block; width:56px; height:3px; background:var(--brand); border-radius:3px; margin:12px auto 0; }
.fac-section-sub{ color:var(--muted); font-size:14px; margin:14px 0 0; }

.fac-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px; }
.fac-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.fac-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.fac-card-img{ aspect-ratio:1/1; background:var(--brand-tint); overflow:hidden; }
.fac-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.fac-card:hover .fac-card-img img{ transform:scale(1.05); }
.fac-card-body{ padding:13px 14px 15px; text-align:center; }
.fac-card-name{ font-family:'Inter',sans-serif !important; font-size:14.5px; font-weight:600; color:var(--ink) !important; margin:0; line-height:1.3; }
.fac-card-inst{ font-size:12px; color:var(--muted) !important; margin:3px 0 0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.fac-card-count{ display:inline-block; margin-top:9px; font-size:11.5px; font-weight:600; color:var(--brand-600); background:var(--brand-tint); padding:3px 10px; border-radius:20px; }
.fac-empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 0; }

/* faculty-page back link (home-shop.php with preset) */
.shop-back{ display:inline-block; color:#d9ece4 !important; font-size:13px; font-weight:600; margin-bottom:8px; text-decoration:none; }
.shop-back:hover{ color:#fff !important; }

@media(max-width:600px){
  .fac-hero-title{ font-size:28px; }
  .fac-search{ flex-wrap:nowrap; }
  .fac-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .fac-section{ padding:32px 14px 48px; }
}

/* ============================================================================
   HOMEPAGE Section 1 — "Most popular" (Lecture|Book toggle + category pills)
   ========================================================================== */
.pop-section{ max-width:1240px; margin:0 auto; padding:44px 24px 8px; }
.pop-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.pop-head .fac-section-title{ margin:0; }
.pop-head .fac-section-title:after{ display:none; }
.pop-type-tabs{ display:inline-flex; background:var(--surface); border:1px solid var(--line-strong); border-radius:24px; padding:4px; box-shadow:var(--shadow-sm); }
.pop-type{ border:0; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; padding:7px 20px; border-radius:20px; cursor:pointer; transition:.14s; }
.pop-type.active{ background:var(--brand); color:#fff; }
.pop-cat-pills{ display:flex; gap:9px; overflow-x:auto; padding:4px 0 12px; margin-bottom:6px; }
.pop-cat-pills::-webkit-scrollbar{ height:5px; } .pop-cat-pills::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:5px; }
.pop-cat{ flex:none; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:500; font-size:13px; padding:7px 16px; border-radius:22px; cursor:pointer; white-space:nowrap; transition:.14s; }
.pop-cat:hover{ border-color:var(--brand); color:var(--brand-600); }
.pop-cat.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* fixed 4 columns so the 8 popular lectures fill exactly 2 complete rows */
.pop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:4px; min-height:60px; }
.pop-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pop-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.pop-card-img{ display:block; }
.pop-card-img img{ width:100%; height:150px; object-fit:cover; display:block; }
.pop-card-body{ padding:12px 13px 13px; display:flex; flex-direction:column; flex:1; }
.pop-card-title{ font-family:'Inter',sans-serif !important; font-size:13.5px; font-weight:600; color:var(--ink) !important; line-height:1.35; margin:0 0 5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:37px; }
.pop-card-fac{ font-size:12px; color:var(--brand-600) !important; font-weight:600; margin:0 0 8px; }
.pop-card-price{ display:flex; align-items:baseline; gap:8px; margin:auto 0 10px; }
.pop-card-price .pc-net{ color:var(--brand-600) !important; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; }
.pop-card-price .pc-mrp{ color:var(--faint) !important; text-decoration:line-through; font-size:12.5px; }
.pop-card-btn{ display:block; width:100%; text-align:center; background:var(--brand); color:#fff !important; border:0; border-radius:var(--radius-sm); padding:9px 0; font-weight:600; font-size:13px; cursor:pointer; transition:.14s; }
.pop-card-btn:hover{ background:var(--brand-600); }
.pop-card-btn.disabled{ background:var(--line); color:var(--muted) !important; cursor:default; }
.pop-loading,.pop-empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 0; }

/* ---- faculty search bar ---- */
.fac-searchbar{ position:relative; max-width:380px; margin:18px auto 0; }
.fac-searchbar .feather-search{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:16px; }
.fac-searchbar input{ width:100%; border:1px solid var(--line-strong) !important; border-radius:24px; padding:11px 16px 11px 40px !important; font-size:14px; background:var(--surface); color:var(--ink); }
.fac-searchbar input:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(11,110,79,.14) !important; outline:none; }

/* ---- faculty cards 40% smaller ---- */
.fac-grid{ grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:14px; }
.fac-card-body{ padding:8px 7px 10px; }
.fac-card-name{ font-size:12px; }
.fac-card-inst{ font-size:10px; margin-top:2px; }
.fac-card-count{ font-size:9.5px; padding:2px 7px; margin-top:6px; }
@media(max-width:600px){
  .fac-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .pop-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .pop-head{ justify-content:center; }
}

/* "View all" link under the Most-popular grid */
.pop-viewall{ text-align:center; padding:20px 0 6px; }
.pop-viewall a{ display:inline-flex; align-items:center; gap:8px; color:var(--brand-600); font-weight:600; font-size:14px; border:1px solid var(--brand); border-radius:26px; padding:10px 26px; text-decoration:none; transition:.15s; }
.pop-viewall a:hover{ background:var(--brand); color:#fff !important; box-shadow:0 6px 16px rgba(11,110,79,.25); }

/* ---- course category: search + horizontal-scroll pills ---- */
.pop-catbar{ display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.pop-cat-search{ position:relative; flex:none; width:220px; max-width:100%; }
.pop-cat-search .feather-search{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; }
.pop-cat-search input{ width:100%; border:1px solid var(--line-strong) !important; border-radius:24px; padding:9px 14px 9px 36px !important; font-size:13px; background:var(--surface); color:var(--ink); }
.pop-cat-search input:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(11,110,79,.14) !important; outline:none; }
.pop-catbar .pop-cat-pills{ flex:1; min-width:0; margin-bottom:0; padding-bottom:6px; flex-wrap:nowrap; scroll-behavior:smooth; }

/* ---- faculty grid: show ~4 rows, then scroll ---- */
.fac-grid{ max-height:700px; overflow-y:auto; padding-right:8px; }
.fac-grid::-webkit-scrollbar{ width:8px; }
.fac-grid::-webkit-scrollbar-track{ background:transparent; }
.fac-grid::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }
.fac-grid::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
@media(max-width:600px){
  .pop-cat-search{ width:100%; }
  .fac-grid{ max-height:560px; }
}

/* ---- course pills: arrows + drag-to-scroll ---- */
.pop-cat-scroller{ position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.pop-arrow{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--brand-600); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .14s ease, color .14s ease, border-color .14s ease, opacity .14s ease; }
.pop-arrow:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pop-arrow.disabled{ opacity:.3; pointer-events:none; }
.pop-cat-scroller .pop-cat-pills{ flex:1; min-width:0; cursor:grab; scrollbar-width:none; -ms-overflow-style:none; }
.pop-cat-scroller .pop-cat-pills::-webkit-scrollbar{ height:0; width:0; }
.pop-cat-pills.dragging{ cursor:grabbing; user-select:none; scroll-behavior:auto; }