/* ============================================================
   GyaanShala — mobile app layer (2026-09-05)
   Swiggy/Zomato-grade compaction for the cart + checkout, plus the
   site-wide floating cart button. MOBILE ONLY (<=760px): every rule is
   inside the media query so desktop is untouched. Loaded after the page's
   own stylesheet, so these win by cascade order (equal specificity).
   Tokens (--ink/--haldi/--neem/--rose/--line/--paper) come from gs-brand.css.
   ============================================================ */

/* ---- floating cart button: every page, appears only when the cart has items ---- */
.gs-cartfab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:1200;
  display:none;align-items:center;gap:9px;padding:12px 18px 12px 15px;border-radius:100px;
  background:#101A33;color:#fff;font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:14px;
  box-shadow:0 10px 30px rgba(16,26,51,.34);text-decoration:none;line-height:1}
.gs-cartfab.show{display:inline-flex}
.gs-cartfab .ic{font-size:17px}
.gs-cartfab .n{background:#F5B301;color:#101A33;border-radius:100px;min-width:20px;height:20px;padding:0 6px;
  display:grid;place-items:center;font-size:12px;font-weight:800}
.gs-cartfab .amt{font-variant-numeric:tabular-nums}
/* On cart + checkout the sticky pay-bar replaces the FAB. The FAB is rendered
   by footer.php OUTSIDE the .gsx-cart/.gsx-checkout wrappers, so a descendant
   selector (`.gsx-cart .gs-cartfab`) can never match it — that dead rule let
   the FAB cover the Proceed/Pay CTA (2026-09-03). footer.php now skips
   rendering it on those pages entirely; the body:has() rules below are the
   backstop. On course landings the .mobile-buy bar owns the bottom edge, so
   the FAB rides above it instead of covering its CTA. */
body:has(.gsx-cart) .gs-cartfab,body:has(.gsx-checkout) .gs-cartfab{display:none!important}
body:has(.gsx .mobile-buy) .gs-cartfab{bottom:calc(86px + env(safe-area-inset-bottom))}
@media(min-width:761px){.gs-cartfab{display:none!important}}

/* ---- sticky bottom pay-bar (cart + checkout) ---- */
.gs-paybar{display:none}
@media(max-width:760px){
  .gs-paybar{position:fixed;left:0;right:0;bottom:0;z-index:1150;display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;
    border-top:1px solid var(--line,rgba(16,26,51,.13));box-shadow:0 -8px 24px rgba(16,26,51,.1)}
  .gs-paybar .pb-left{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .gs-paybar .pb-amt{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:21px;
    letter-spacing:-.03em;color:var(--ink,#101A33);font-variant-numeric:tabular-nums}
  .gs-paybar .pb-sub{font-size:11.5px;color:var(--ink-2,#1B2749);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gs-paybar .pb-cta{margin-left:auto;flex:none;background:var(--haldi,#F5B301);color:var(--ink,#101A33);
    font-weight:800;font-size:15px;padding:13px 22px;border-radius:100px;border:0;cursor:pointer;
    box-shadow:0 3px 0 #C98F00;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .gs-paybar .pb-cta:active{transform:translateY(2px);box-shadow:0 1px 0 #C98F00}
}

@media(max-width:760px){
  /* room so the sticky bar never covers the last content or the desktop CTA */
  .gsx-cart .sec,.gsx-checkout .sec{padding-bottom:96px!important}
  /* the desktop rail's own buttons are redundant on mobile — the bar carries them */
  .gsx-cart .rail .btn-primary.btn-lg,.gsx-checkout form>.block-c:last-child .btn-primary.btn-lg{display:none}

  /* ---- compact cart items ---- */
  .gsx-cart .banner{padding:20px 0 16px}
  .gsx-cart .banner h1{font-size:24px}
  .gsx-cart .items{padding:4px 0}
  .gsx-cart .items-hd h2{font-size:17px}
  .gsx-cart .item{grid-template-columns:64px 1fr auto!important;gap:12px!important;padding:12px 0!important;align-items:start}
  .gsx-cart .item-art{width:64px;border-radius:10px}
  .gsx-cart .item h3{font-size:14.5px;line-height:1.25}
  .gsx-cart .item-meta{margin-top:5px;font-size:11.5px;gap:3px 10px}
  .gsx-cart .item-tags{display:none}         /* "Lifetime access" already stated once in the header */
  .gsx-cart .item-acts{margin-top:7px;font-size:12.5px}
  .gsx-cart .item-price{grid-column:3!important;text-align:right!important;display:block!important}
  .gsx-cart .item-price b{font-size:16px}
  .gsx-cart .item-price s{font-size:11.5px;margin-left:0;display:block}

  /* ---- summary panel: tighter ---- */
  .gsx-cart .rail .panel{padding:16px 16px 18px;border-radius:16px}
  .gsx-cart .panel-head h2{font-size:17px}
  .gsx-cart .sum-row{padding:7px 0;font-size:13.5px}
  .gsx-cart .sum-total{margin-top:12px;padding-top:12px}
  .gsx-cart .sum-total .v{font-size:24px}
  .gsx-cart .paylogos,.gsx-cart .trust,.gsx-cart .gstnote{display:none}   /* the pay-bar + fineprint below carry trust */
  .gsx-cart .savings{font-size:12.5px;padding:10px 12px}

  /* ---- recommendations → compact horizontal rail (both the in-cart grid and the strip) ---- */
  .gsx-cart .suggest{margin-top:10px}
  .gsx-cart .suggest h2{font-size:16px}
  .gsx-cart .suggest .lede{font-size:12px;margin-bottom:10px}
  .gsx-cart .suggest .grid,
  .gsx .gsx-xsell-grid{display:flex!important;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:2px 18px 8px}
  .gsx-cart .suggest .grid::-webkit-scrollbar,.gsx .gsx-xsell-grid::-webkit-scrollbar{display:none}
  .gsx-cart .suggest .course-card,
  .gsx .gsx-xsell-card{flex:0 0 150px!important;scroll-snap-align:start;border-radius:12px}
  .gsx-cart .suggest .course-card .course-card-art,
  .gsx .gsx-xsell-art{aspect-ratio:1/1}
  .gsx-cart .suggest .course-card h3{font-size:12.5px;line-height:1.25}
  .gsx-cart .suggest .course-card-meta{font-size:11px}
  .gsx-cart .suggest .course-card-foot{padding:8px 10px;flex-wrap:wrap;gap:6px}
  .gsx-cart .suggest .price b,.gsx .gsx-xsell-price{font-size:14px}
  .gsx-cart .suggest .btn-sm{font-size:12px;padding:7px 11px}
  /* The two rules above originally targeted .gsx-xsell-foot/.gsx-xsell-add —
     classes that don't exist; the markup has .gsx-xsell-act and a .btn inside
     it. Unshrunk, the 15px/14-24px 100px-radius pill wrapped "Add to cart"
     onto three lines in the 150px tile and rendered as a yellow circle.
     One line, small pill (2026-09-03). */
  .gsx .gsx-xsell-act{padding:8px 10px 10px;gap:6px}
  .gsx .gsx-xsell-act .btn{white-space:nowrap;font-size:12px;padding:8px 10px}
  .gsx .gsx-xsell-act .btn-primary{box-shadow:0 2px 0 #C98F00}
  .gsx .gsx-xsell-view{font-size:12px}
  .gsx .gsx-xsell{margin-top:14px}
  .gsx .gsx-xsell-h{font-size:16px}

  /* ---- compact checkout ---- */
  .gsx-checkout .banner{padding:18px 0 14px}
  .gsx-checkout .banner h1{font-size:23px}
  .gsx-checkout .steps-bar{gap:6px;font-size:11px;margin-top:10px}
  .gsx-checkout .shop{gap:16px}
  .gsx-checkout .block-c{padding:16px;border-radius:14px;margin-bottom:12px}
  .gsx-checkout .block-c h2{font-size:16px}
  .gsx-checkout .block-c .sub{font-size:12.5px;margin-bottom:12px}
  .gsx-checkout .field{margin-bottom:12px}
  .gsx-checkout .field label{font-size:13px;margin-bottom:5px}
  .gsx-checkout .input{padding:12px 14px;font-size:15px}   /* >=15px so iOS never zooms the field */
  .gsx-checkout .hint{font-size:11.5px;margin-top:5px}
  /* review rail first on mobile is noise before the form — keep it, but tighten */
  .gsx-checkout .rail .panel{padding:16px;border-radius:14px}
  .gsx-checkout .gsx-bump-head{font-size:14px}
  .gsx-checkout .fineprint{font-size:11px}
}