/* ============================================================================
   SchoolNotes — SITE-WIDE UPGRADE PASS (v9)
   File: assets/css/site-v9.css
   Loaded from includes/header.php on EVERY public page (after app.min.css).

   Owns four upgrades:
   1. MOBILE TOP BAR — compact header: tighter paddings, single-row layout,
      the offer bar slims to one line and the logo subtitle hides on phones
      so the whole top bar reads as one clean strip.
   2. COMPACT DROPDOWNS — every board/class/section/medium filter select is
      shrunk (smaller padding + font, min-width instead of full-width) so
      four filters fit side by side on one row, on desktop AND mobile.
   3. ADVANCED FOOTER — richer link grid, hover affordances, trust badges
      row, payment icons strip and an app-download hint panel.
   4. APP-STYLE BOTTOM QUICKLINKS — the .mobile-app-nav bar is polished
      (glassy white, active states, safe-area padding) and now appears ONLY
      on the homepage: body.home-page shows it, every other page hides it.
   5. CHECKOUT STICKY PAY BAR — guaranteed fixed to the viewport bottom
      (never mid-page), above the safe area, on mobile only.
   ========================================================================== */

/* ============================================ 1. MOBILE TOP BAR ============ */
@media (max-width: 900px) {
  /* Offer notice bar: single slim line, hide the LIVE chip on the smallest
     screens so the coupon text has full room. */
  .pv8-bar .wrap { padding-inline: 12px; }
  .pv8-bar .pv8-slide { font-size: 0.8rem; }
  .pv8-bar .pv8-live { display: none; }
  @media (max-width: 560px) {
    .pv8-bar .pv8-rot { height: 34px; }
    .pv8-bar .pv8-slide { font-size: 0.76rem; }
  }

  /* Header: one tight row — logo, search, cart, burger */
  .site-header .header-row { padding: 8px 12px; gap: 10px; }
  .site-header .logo-text em { display: none; }      /* "Class 6-12 notes" tagline hidden on phones */
  .site-header .logo-img { width: 34px; height: 34px; }
  .site-header .mobile-search-wrap { padding-inline: 12px; }
  .site-header .mobile-search input { padding: 10px 12px; }

  /* Section tabs rail: v19 - previously hidden entirely on phones (the
     homepage class-chips + footer quicklinks were assumed to cover
     navigation), but that left mobile visitors on every non-home page
     with no way to jump between categories at all. Now shown as a
     compact horizontally-scrolling strip instead of hidden, matching
     the desktop behaviour, with the "View All" tab guaranteeing every
     category is reachable even if the rail scrolls off-screen. */
  .section-tabs { display: block; }
  .section-tabs-inner { padding-block: 8px; gap: 5px; }
  .section-tabs .tab { font-size: 0.78rem; padding: 7px 12px; }
}

/* "View All" tab: mustard accent so it reads as the escape-hatch to the
   full /sections.php grid, not just another category - same treatment on
   mobile and desktop. */
.section-tabs .tab-view-all {
  background: var(--mustard); color: var(--navy); border-color: var(--mustard);
  font-weight: 800;
}
.section-tabs .tab-view-all:hover { background: var(--navy); color: #fff; }
@keyframes header-chat-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================ 7. MOBILE NAV DRAWER v2 ====== */
/* Grouped "advanced options" drawer (Browse / Account / Company sections,
   a profile row, a WhatsApp CTA) replacing the old flat 4-link list -
   modelled on the richer mobile menu pattern seen on rightwaynotes.in.
   Reuses the existing .mobile-nav / #nav-backdrop open-close/scroll-lock
   wiring in assets/js/app.js untouched - only the inner markup changed. */
.mnav-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14); margin-bottom: 6px;
}
.mnav-head img { border-radius: 8px; }
.mnav-head span { color: #fff; font-weight: 800; font-size: 1.05rem; }

.mnav-account-row {
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; border-top: none !important;
}
.mnav-account-row .mnav-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--mustard); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.mnav-account-row > span:not(.mnav-avatar) { flex: 1; color: #fff; font-weight: 700; font-size: 0.94rem; display: flex; flex-direction: column; }
.mnav-account-row small { color: rgba(255,255,255,0.6); font-weight: 500; font-size: 0.74rem; margin-top: 2px; }
.mnav-account-row i.fa-chevron-right { color: rgba(255,255,255,0.5); font-size: 0.8rem; }

.mnav-group { margin-bottom: 4px; }
.mnav-group-label {
  display: block; color: var(--mustard); font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 12px 0 4px;
}
.mnav-group a { border-top: 1px solid rgba(255,255,255,0.1) !important; }
.mnav-group a:first-of-type { border-top: none !important; }

.mnav-whatsapp-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
  background: #25D366; color: #0b1f14 !important; border-radius: 10px; padding: 12px !important;
  font-weight: 800 !important; border-top: none !important; text-align: center;
}

/* ============================================ 2. COMPACT DROPDOWNS ========= */
/* Search-page filter panel + homepage find-form + section-page filters-bar:
   all selects become compact pills that sit on ONE row instead of stacking. */
.find-form,
.search-filters,
.filters-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;                    /* graceful on very narrow screens */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.find-form::-webkit-scrollbar,
.search-filters::-webkit-scrollbar,
.filters-bar::-webkit-scrollbar { display: none; }

.find-form .find-select,
.search-filters .find-select { flex: 1 1 0; min-width: 0; }

.find-form .find-select select,
.search-filters .find-select select,
.filters-bar select {
  width: 100%;
  min-width: 0;
  padding: 9px 26px 9px 10px;
  font-size: 0.85rem;
  line-height: 1.3;
  border-radius: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.filters-bar { margin: 14px 0 4px; }
.filters-bar select { flex: 1 1 0; min-width: 0; padding-right: 26px; }

.search-filters-q {
  flex: 2 1 130px;
  min-width: 0;
  padding: 9px 10px;
  font-size: 0.85rem;
  border-radius: 9px;
  border: 1px solid var(--paper-line);
}
.btn-find {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Phone: filters stay on one scrollable row — never stack into a tall form */
@media (max-width: 760px) {
  .find-form,
  .search-filters,
  .filters-bar {
    flex-wrap: nowrap;
    gap: 7px;
  }
  .find-form .find-select select,
  .search-filters .find-select select,
  .filters-bar select { padding: 8px 24px 8px 9px; font-size: 0.82rem; }
  .search-filters-q { flex: 2 1 110px; }
}

/* ============================================ 3. ADVANCED FOOTER =========== */
.site-footer {
  padding-top: 48px;
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(26,103,196,0.22), transparent 60%),
    radial-gradient(900px 380px at 0% 110%, rgba(232,169,58,0.12), transparent 55%),
    var(--navy);
}
.footer-grid { row-gap: 36px; }
.footer-grid h4 {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid rgba(232,169,58,0.5); padding-bottom: 8px;
}
.footer-grid h4 i { font-size: 0.8rem; color: var(--mustard); }
.footer-grid a { transition: color .15s ease, transform .15s ease; }
.footer-grid a:hover { color: #fff; transform: translateX(3px); }
.footer-grid a i { color: var(--mustard); }
.footer-grid .muted { color: #b8c2d6; }

/* Social icons: lift + brand colours on hover */
.footer-social a { transition: transform .18s ease, background .18s ease, color .18s ease; }
.footer-social a:hover { transform: translateY(-3px); color: #fff; }
.footer-social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.footer-social a[aria-label="YouTube"]:hover   { background: #ff0000; }
.footer-social a[aria-label="Facebook"]:hover  { background: #1877f2; }

/* Trust badges + payment methods strip */
.footer-trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.18);
}
.footer-trust-strip span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #b8c2d6; }
.footer-trust-strip span i { color: var(--mustard); }
.footer-pay-icons { display: inline-flex; gap: 10px; align-items: center; font-size: 1.35rem; color: #d8dfeb; margin-left: auto; }
.footer-pay-icons i { color: #d8dfeb; }

/* Quicklinks row: horizontal scroll strip, no wrap, no scrollbar chrome */
.footer-quicklinks { padding: 18px 20px 8px; }
.quicklinks-row {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.quicklinks-row::-webkit-scrollbar { display: none; }
.quicklinks-row a {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: #d8dfeb; font-size: 0.8rem; font-weight: 600; margin: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.quicklinks-row a i { font-size: 0.75rem; color: var(--mustard); }
.quicklinks-row a:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.3); }

/* App hint panel */
.app-hint {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 18px; padding: 12px 16px;
  background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 12px; color: #c9d4e6; font-size: 0.8rem; line-height: 1.5;
}
.app-hint i { font-size: 1.3rem; color: var(--mustard); flex: 0 0 auto; }

@media (max-width: 900px) {
  .footer-trust-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-pay-icons { margin-left: 0; }
  .quicklinks-row a { justify-content: flex-start; }
}

/* ============================================ 4. APP BOTTOM NAV (homepage only) === */
/* Polished app-style bar: glassy, active-tab accent, safe-area aware. */
.mobile-app-nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--paper-line);
  box-shadow: 0 -6px 24px rgba(20,51,92,0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-app-nav a { color: var(--ink-soft); transition: color .15s ease, transform .15s ease; }
.mobile-app-nav a:active { transform: scale(0.94); }
.mobile-app-nav a[href="/"] { color: var(--blue); }   /* homepage tab always highlighted on the home page */
.mobile-app-nav a i { font-size: 1.2rem; }

/* SHOW only on the homepage — body.home-page is set by index.php.
   Everywhere else (product, section, cart, checkout, account...) the bar
   vanishes so it never fights the sticky buy bar or checkout pay bar. */
.mobile-app-nav { display: none !important; }
body.home-page .mobile-app-nav { display: flex !important; }
@media (max-width: 900px) {
  body.home-page { padding-bottom: 62px; }
}

/* ============================================ 5. CHECKOUT STICKY PAY BAR === */
/* Always pinned to the exact bottom of the viewport on phones, above the
   home-indicator safe area — previously it could sit mid-page once the user
   scrolled past the form. Hidden on desktop (the form button is the CTA). */
.checkout-sticky-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) {
  .checkout-sticky-bar { display: flex; }
  body.checkout-body { padding-bottom: 84px; }
  body.checkout-body .footer-quicklinks { padding-bottom: 12px; }
}
.checkout-sticky-bar.sticky-bar-hidden { display: none !important; }

/* Cart page: the "Proceed to Checkout" button also gets a pinned bar on
   phones so the CTA is always one tap away without scrolling. */
.cart-sticky-bar { display: none; }
@media (max-width: 900px) {
  .cart-sticky-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-top: 1px solid var(--paper-line);
    box-shadow: 0 -6px 20px rgba(20,51,92,0.12);
    padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px));
  }
  body.cart-body { padding-bottom: 84px; }
}
.cart-sticky-bar .sticky-buy-price { display: flex; align-items: baseline; gap: 8px; }
.cart-sticky-bar .sticky-buy-price .price { font-size: 1.25rem; font-weight: 800; color: var(--navy); }

@media (max-width: 900px) {
}

/* ============================================ MISC POLISH ================== */
/* Product grid: consistent card heights + roomier mobile grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.product-card { height: 100%; }
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card .pc-cta-row .buy-btn { font-size: 0.8rem; padding: 9px 10px; }
}

/* ==========================================================================
   ACCOUNT DASHBOARD v3 (redesign) — card-based user dashboard
   ========================================================================== */
.dash-wrap { padding-top: 26px; padding-bottom: 60px; }
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--navy), var(--navy-light)); border-radius: 18px;
  padding: 26px 28px; color: #fff; box-shadow: var(--card-shadow-lg); margin-bottom: 18px; }
.dash-hero-id { display: flex; align-items: center; gap: 16px; }
.dash-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--mustard); color: var(--navy);
  font-weight: 800; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; flex-shrink: 0; }
.dash-hi { margin: 0; font-size: .85rem; opacity: .85; }
.dash-hero h1 { margin: 0; font-size: 1.5rem; color: #fff; }
.dash-email { margin: 2px 0 0; font-size: .85rem; opacity: .8; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.dash-stat { background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease; }
.dash-stat:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-lg); }
.dash-stat strong { font-size: 1.45rem; color: var(--navy); font-family: 'Poppins', sans-serif; }
.dash-stat > span:last-child { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.dash-stat-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: .95rem; margin-bottom: 6px; }
.dash-stat-ic.is-blue { background: var(--blue); }
.dash-stat-ic.is-green { background: var(--green); }
.dash-stat-ic.is-pink { background: #db2777; }
.dash-stat-ic.is-gold { background: var(--mustard); color: var(--navy); }
.dash-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.dash-nav { background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--card-shadow); position: sticky; top: 84px; }
.dash-nav a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 600;
  font-size: .9rem; color: var(--ink); border-left: 3px solid transparent; }
.dash-nav a:hover { background: var(--paper); }
.dash-nav a.active { color: var(--navy); border-left-color: var(--mustard); background: var(--paper); }
.dash-nav i { width: 20px; color: var(--blue); }
.dash-nav-logout { color: var(--red) !important; border-top: 1px solid var(--paper-line); }
.dash-nav-logout i { color: var(--red) !important; }
.dash-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; padding: 22px 24px;
  box-shadow: var(--card-shadow); margin-bottom: 20px; scroll-margin-top: 90px; }
.dash-card h2 { margin: 0 0 16px; font-size: 1.12rem; color: var(--navy); display: flex; align-items: center; gap: 9px; }
.dash-card h2 i { color: var(--blue); font-size: 1rem; }
.dash-empty { text-align: center; padding: 26px 10px; color: var(--ink-soft); }
.dash-empty i { font-size: 2rem; color: var(--paper-line); margin-bottom: 8px; display: block; }
.dash-order { border: 1px solid var(--paper-line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.dash-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--paper); flex-wrap: wrap; }
.dash-receipt { font-weight: 700; color: var(--navy); font-size: .92rem; display: inline-flex; gap: 7px; align-items: center; }
.dash-date { font-size: .78rem; color: var(--ink-soft); margin-left: 12px; }
.dash-pill { font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em; }
.dash-pill.is-paid { background: #dcfce7; color: #15803d; }
.dash-pill.is-due { background: #fef3c7; color: #b45309; }
.dash-order-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--paper-line); flex-wrap: wrap; }
.dash-order-item > i { color: var(--blue); }
.dash-order-name { flex: 1; min-width: 200px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.dash-downloads { display: flex; flex-direction: column; gap: 10px; }
.dash-dl-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--paper-line);
  border-radius: 12px; padding: 12px 16px; flex-wrap: wrap; }
.dash-dl-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--blue-tint, #EAF1FB);
  color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-dl-info { flex: 1; min-width: 180px; }
.dash-dl-name { display: block; font-weight: 700; color: var(--navy); font-size: .9rem; }
.dash-dl-meta { font-size: .76rem; color: var(--ink-soft); }
.dash-referral p { margin: 0 0 12px; }
.dash-ref-stats { display: flex; gap: 30px; margin-top: 16px; }
.dash-ref-stats strong { display: block; font-size: 1.3rem; color: var(--navy); }
.dash-ref-stats span { font-size: .78rem; color: var(--ink-soft); }
.dash-coupons { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 6px; }
  .dash-nav a { border-left: 0; border-radius: 9px; white-space: nowrap; padding: 9px 13px; font-size: .84rem; }
  .dash-nav a.active { background: var(--navy); color: #fff; }
  .dash-nav a.active i { color: var(--mustard); }
  .dash-hero { padding: 20px; }
  .dash-hero h1 { font-size: 1.2rem; }
}

/* ==========================================================================
   v18 PRODUCT-TITLE SIZING (smaller, 2-line clamp) — final override block.
   site-v9.css loads AFTER app.min.css on every page, so these win.
   Card grid titles: desktop .82rem -> tablet .78rem -> phones .74rem.
   Product-page H1: 1.32rem desktop, 1.12rem under 640px.
   ========================================================================== */
.product-card h4 { font-size: .82rem; line-height: 1.32; min-height: 2.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) { .product-card h4 { font-size: .78rem; } }
@media (max-width: 560px)  { .product-card h4 { font-size: .74rem; } }
.pv7-title { font-size: 1.32rem !important; }
@media (max-width: 640px) { .pv7-title { font-size: 1.12rem !important; } }