/* ==========================================================================
   SchoolNotes — v16 "focus" layer
   File: assets/css/site-v16-focus.css   (loaded LAST in includes/header.php)

   Contents
   1. DISTRACTION-FREE PAGES  — every page EXCEPT the homepage loses the
      animated offer strip, the category marquee rail, the newsletter block,
      the app-install card, the quick-links strip and the mobile tab bar, and
      every decorative animation/transition is frozen so nothing moves while
      a buyer is deciding. (body.focus-page, added in includes/header.php)
   2. HERO CTA ORDER ON MOBILE — the primary CTAs sit directly BELOW the hero
      banner on phones (hero banner -> CTA buttons -> headline/copy).
   3. CHECKOUT BOTTOM BAR     — price fixed on ONE side (left), "Proceed to
      Buy" on the RIGHT; the bar never animates, never jumps and never hides.
   4. SMALLER WISHLIST HEART  — 26px instead of 32/40px.
   5. CONTENT / SCREENSHOT PROTECTION styling (deterrents only).
   6. REVIEW WALL (100 reviews, mixed lengths) used by includes/home_reviews.php
   ========================================================================== */

/* ============================ 1. FOCUS PAGES ============================ */
body.focus-page .pv8-bar,
body.focus-page .section-tabs,
body.focus-page .newsletter-cta,
body.focus-page .why-us,
body.focus-page .app-download-cta,
body.focus-page .footer-quicklinks,
body.focus-page .footer-social,
body.focus-page .mobile-app-nav,
body.focus-page .promo-banners,
body.focus-page .minicart-drawer,
body.focus-page .minicart-overlay {
  display: none !important;
}

/* Freeze every decorative animation / transition on focus pages, but keep
   functional spinners (the "Processing..." payment spinner) alive. */
body.focus-page *:not(.fa-spin):not(.fa-spin *) {
  animation: none !important;
  transition: none !important;
}
body.focus-page .fa-spin { animation: fa-spin 1s linear infinite !important; }
body.focus-page .hero-bg-shapes,
body.focus-page .cat-marquee { display: none !important; }

/* A calmer, tighter canvas for focused buying. */
body.focus-page { background-image: none; }
body.focus-page .section-heading { margin-top: 30px; }
body.focus-page .site-footer { margin-top: 34px; }

/* ======================= 2. HERO CTAs BELOW THE BANNER =================== */
@media (max-width: 900px) {
  body.home-page .hero-grid { display: flex; flex-direction: column; gap: 18px; }
  /* display:contents lets us order the individual copy elements (and lift the
     CTA row out) without touching the markup. */
  body.home-page .hero-copy { display: contents; }
  body.home-page .hero-media { order: 1; }
  body.home-page .hero-cta-row { order: 2; margin: 4px 0 0; }
  body.home-page .hero-eyebrow { order: 3; align-self: flex-start; }
  body.home-page .hero h1 { order: 4; }
  body.home-page .hero-sub { order: 5; }
  body.home-page .hero-trust-row { order: 6; }
  body.home-page .hero-cta-row .btn { flex: 1 1 auto; }
  body.home-page .hero-stats-bar { margin-top: 16px; }
}

/* ======================== 3. CHECKOUT BOTTOM BAR ======================== */
/* Price on the LEFT, "Proceed to Buy" on the RIGHT — fixed, no animation. */
.checkout-sticky-bar,
.checkout-sticky-bar.sticky-buy-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}
.checkout-sticky-bar .sticky-buy-price {
  margin-right: auto;
  flex: 0 0 auto;
  min-width: 0;
}
.checkout-sticky-bar .checkout-sticky-pay {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
body.checkout-body .checkout-sticky-bar { transform: translateY(0) !important; }
body.checkout-body.sn-scroll-down .checkout-sticky-bar { transform: translateY(0) !important; }

@media (max-width: 900px) {
  .checkout-sticky-bar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .checkout-sticky-bar .checkout-sticky-pay { padding: 12px 18px; }
}

/* ====================== 4. SMALLER WISHLIST HEART ======================= */
.wishlist-heart,
.wishlist-heart-v13,
.product-card .wishlist-heart {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  top: 8px !important;
  right: 8px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
}
.wishlist-heart i { font-size: 0.72rem !important; }
@media (max-width: 620px) {
  .wishlist-heart, .wishlist-heart-v13, .product-card .wishlist-heart {
    width: 24px !important; height: 24px !important;
    min-width: 24px !important; min-height: 24px !important;
  }
}

/* =============== 5. CONTENT / SCREENSHOT PROTECTION (deterrents) ======== */
body:not(.admin-body) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body:not(.admin-body) input,
body:not(.admin-body) textarea,
body:not(.admin-body) select,
body:not(.admin-body) [contenteditable],
body:not(.admin-body) [contenteditable="true"],
body:not(.admin-body) .sn-selectable,
body:not(.admin-body) [data-allow-copy] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
/* Never let a long-press on artwork raise the OS image menu. */
body:not(.admin-body) img,
body:not(.admin-body) .cover-photo,
body:not(.admin-body) .cover-icon {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
}
/* Best-effort screen-capture deterrence: hide the content the moment the tab
   loses visibility (snipping tools / app switchers that background the page
   first) and while the window is unfocused. True blocking is impossible in a
   browser — see the honest note at the top of assets/js/protect.js. */
html.sn-shot-hidden body:not(.admin-body) > *:not(#sn-protect-toast):not(.sn-pay-keep-sharp):not(.sn-chat-keep-sharp) {
  filter: blur(26px) saturate(0.6);
  transition: filter 0.05s linear;
}
html.sn-privacy-blur body:not(.admin-body) > *:not(#sn-protect-toast):not(.sn-pay-keep-sharp):not(.sn-chat-keep-sharp) {
  filter: blur(18px);
}
/* When the checkout page initiates a payment, the parent page loses focus
   to the Razorpay iframe and would otherwise get blurred by the
   screenshot-deterrent. We add `.sn-pay-keep-sharp` to the visible card so
   the buyer keeps seeing what they are paying for. The pay-also bisects
   any payment-modal root inside the same document. */
.sn-pay-keep-sharp, .sn-pay-keep-sharp * { filter: none !important; }
/* Same guard for the chat panel — when the input is focused and the panel
   steals focus from the body, the chatbot message list remains sharp. */
.sn-chat-keep-sharp, .sn-chat-keep-sharp * { filter: none !important; }
/* Absolutely never blur the body when the whole body is the payment flow
   (e.g. checkout page being the only document and a lightbox modal is open
   inside it). Anything tagged .sn-no-screen-blur on checkout stays sharp. */
html.sn-shot-hidden .sn-no-screen-blur,
html.sn-privacy-blur .sn-no-screen-blur { filter: none !important; }
#sn-protect-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 9999;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: rgba(20, 51, 92, 0.95); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 600; max-width: 92vw; text-align: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#sn-protect-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ========================= 6. REVIEW WALL (100) ========================= */
.rv-wall { position: relative; margin: 8px 0 4px; }
.rv-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.rv-count { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.rv-nav { display: flex; gap: 8px; }
.rv-nav button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--paper-line); background: #fff; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.rv-nav button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.rv-rail {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.rv-card {
  flex: 0 0 286px; scroll-snap-align: start; background: #fff;
  border: 1px solid var(--paper-line); border-radius: 14px; padding: 16px;
  box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 8px;
}
.rv-card.is-few { flex-basis: 214px; }
.rv-card.is-one { flex-basis: 168px; justify-content: center; text-align: center; }
.rv-stars i { color: var(--mustard-dark); font-size: 0.76rem; }
.rv-text { font-size: 0.9rem; line-height: 1.45; color: var(--ink); margin: 0; }
.rv-card.is-one .rv-text { font-size: 1.12rem; font-weight: 800; color: var(--navy); }
.rv-card.is-few .rv-text { font-size: 0.98rem; font-weight: 600; }
.rv-who { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.rv-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem;
}
.rv-meta { min-width: 0; }
.rv-meta strong { display: block; font-size: 0.82rem; color: var(--navy); }
.rv-meta span { font-size: 0.72rem; color: var(--ink-soft); }
.rv-verified { font-size: 0.68rem; color: var(--green); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.rv-footnote { font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 620px) {
  .rv-card { flex-basis: 250px; }
  .rv-card.is-few { flex-basis: 190px; }
  .rv-card.is-one { flex-basis: 150px; }
}

/* ===================== 6b. REVIEW WALL REDESIGN (v21) =====================
   Unified wall: featured testimonials + curated/approved reviews in one
   consistent card design (quote mark, colour-coded avatars, subject tag,
   featured ribbon) instead of the old plain grid + plain carousel pair. */
.rv-count { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.rv-count-score { font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.rv-card {
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rv-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--mustard-dark));
  opacity: .85;
}
.rv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,51,92,.14); border-color: rgba(26,103,196,.35); }
.rv-card.is-featured { border-color: rgba(199,154,46,.55); background: linear-gradient(180deg, #FFFBF0 0%, #fff 60%); }
.rv-featured-badge {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--mustard-dark); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
.rv-quote { color: rgba(26,103,196,.22); font-size: 1.15rem; }
.rv-text { position: relative; }
.rv-who { position: relative; }
.rv-role-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-verified {
  font-size: .64rem; color: #1a7d43; font-weight: 700; display: inline-flex; align-items: center; gap: 3px;
  background: #EAF7EE; padding: 1px 6px; border-radius: 999px;
}
.rv-tag {
  margin-left: auto; flex-shrink: 0; font-size: .68rem; font-weight: 700; color: var(--blue);
  background: rgba(26,103,196,.1); padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.rv-av-1 { background: linear-gradient(135deg, #1A67C4, #14335C); }
.rv-av-2 { background: linear-gradient(135deg, #C79A2E, #8A6A1B); }
.rv-av-3 { background: linear-gradient(135deg, #2E9E63, #17603A); }
.rv-av-4 { background: linear-gradient(135deg, #B0468A, #6E2856); }
.rv-av-5 { background: linear-gradient(135deg, #E06B3E, #9A3F1D); }
.rv-card.is-one { background: linear-gradient(160deg, #F2F7FF 0%, #fff 70%); }
.rv-card.is-one:hover { border-color: rgba(26,103,196,.4); }

/* =============== 7. PREMIUM HANDWRITTEN NOTES CLASS COVERS ============== */
/* The per-class cover art (assets/images/covers/class-6..12.png) is a 3:2
   landscape design, so it must never be upscaled/cropped oddly. */
.cover-photo.cover-class { object-fit: cover; object-position: center; }