/* ============================================================================
   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: hide on phones — the homepage class-chips + the
     footer quicklinks already cover navigation, and the tab strip doubled
     the height of the sticky top bar. */
  .section-tabs { display: none !important; }
}

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

/* Chat widget cluster: keep clear of the fixed bottom bars on mobile */
@media (max-width: 900px) {
  .fw-cluster { top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: none; }
  body.home-page .fw-cluster { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

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