/* =========================================================================
   responsive.css — mobile / tablet refinements layered on top of app.css.
   LAYOUT & SPACING ONLY. No colour, font-family, or database changes.
   Loaded after app.css (public header.php + admin_header.php).
   Breakpoints: 991.98 / 899.98 / 767.98 / 575.98 / 479.98 / 399.98.
   Mobile side gutter is 5px per request.
   ========================================================================= */

/* Prevent accidental horizontal scroll from the large decorative blur blobs.
   `clip` (not `hidden`) is used so it never breaks the sticky header. */
html { overflow-x: clip; }

/* ── Tablet & below (≤991.98px) ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .section   { padding-block: 4rem; }
  .cta-block { padding: 3rem 1.75rem; }
}

/* ── Single-column stacked layouts (≤899.98px) ──────────────────────────── */
@media (max-width: 899.98px) {
  /* Booking: show the form BEFORE the "How it works" aside on phones. */
  .account-grid aside { order: 2; }
  /* Account: horizontally-scrolling pill nav instead of a tall vertical stack. */
  .side-nav { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
  .side-nav a { flex: 0 0 auto; white-space: nowrap; padding: .55rem .9rem; }
}

/* ── Phones (≤767.98px) ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* 5px side gutters — content uses nearly the full screen width. */
  .container   { padding-inline: 5px; }
  .site-header { padding-inline: 5px; }

  .section      { padding-block: 3rem; }
  .section-head { margin-bottom: 2rem; }
  .page-hero    { padding: 2.5rem 0 1.5rem; }
  .panel        { padding: 1.35rem 1.1rem; }
  .cta-block    { padding: 2.5rem 1.15rem; }

  /* iOS Safari zooms the page when a focused input is < 16px. */
  .input, .field input, .field textarea, .field select { font-size: 16px; }

  /* Tables: tighter cells (wrappers provide horizontal scroll). */
  .data-table th, .data-table td { padding: .6rem .7rem; font-size: .82rem; }

  /* Footer: single stacked column, full width (matches the affoo reference).
     A hairline between each block separates Brand / Quick Links / Shop /
     Get in Touch so the long link lists read as clean sections, not one run. */
  .site-footer { margin-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr; padding-block: 2rem; gap: 0; }
  .footer-grid > * { padding-block: 1.4rem; border-top: 1px solid color-mix(in oklab, var(--border) 45%, transparent); }
  .footer-grid > :first-child { padding-top: 0; border-top: 0; }
  .footer-brand p { max-width: none; margin: .9rem 0 1rem; }
  .footer-col ul { gap: .7rem; }               /* roomier tap targets */
  .footer-contact li { margin-bottom: .6rem; }
  .footer-bottom .container { padding-inline: 5px; text-align: center; }
  .footer-bottom .links { justify-content: center; }
  .newsletter  { flex-wrap: wrap; margin-top: 1rem; }
  .newsletter input, .newsletter .btn { flex: 1 1 100%; }

  /* Bigger touch targets for the header + footer controls. */
  .icon-btn, .socials a { width: 44px; height: 44px; }
  .pill        { padding: .55rem 1.05rem; }
  .filter-pills{ gap: .6rem; }

  /* Centre-align product-card text and the About content on phones. */
  .product-card                { text-align: center; }
  .product-card .p-price       { justify-content: center; }
  .about-grid > p              { text-align: center; }
  .feature-cells .cell         { text-align: center; }
  .feature-cells .cell svg     { display: block; margin-left: auto; margin-right: auto; }
}

/* ── Small phones (≤575.98px) ───────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .section    { padding-block: 2.5rem; }
  .page-hero  { padding: 2rem 0 1.25rem; }
  .panel      { padding: 1.15rem 1rem; }
  .panel h3   { font-size: 1.2rem; }
  .auth-card  { padding: 1.35rem 1rem; }

  /* Header pill: let the brand shrink, drop the tiny tagline, keep actions. */
  .nav-pill    { padding: .5rem .8rem; gap: .5rem; }
  .brand       { flex-shrink: 1; min-width: 0; }
  .brand-logo  { height: 38px; max-width: min(44vw, 160px); }
  .brand-name  { font-size: 1.02rem; }
  .brand-name small { display: none; }
  .nav-actions { flex-shrink: 0; }

  /* Full-width buttons wrap instead of overflowing the rounded pill. */
  .btn-block  { white-space: normal; }
  .btn-square { padding: 0 1.3rem; letter-spacing: .1em; }

  /* Product grid: stays 2-up but tighter; action row stacks; labels can wrap. */
  .grid-4                       { gap: 1rem; }
  .product-card h4              { font-size: .98rem; min-height: 2.4em; }
  .product-card .p-actions .row { grid-template-columns: 1fr; }
  .product-card .btn            { white-space: normal; padding-inline: .6rem; }

  /* Astrologer cards: one per row so the photo + buttons never overflow. */
  .astro-grid { grid-template-columns: 1fr; }
  .astro-card { padding: 1.25rem 1rem; }

  /* Cart line item: image + details on top, price on its own row beneath. */
  .cart-item             { grid-template-columns: 64px 1fr; }
  .cart-item .line-total { grid-column: 1 / -1; text-align: right; white-space: normal; font-size: 1.1rem; margin-top: .25rem; }

  .feature-cells .cell    { padding: 1.1rem; }
  .feature-cells .cell h4 { font-size: 1.1rem; }

  /* Admin shell breathing room on phones. */
  .admin-content   { padding: 1.1rem 5px 2.25rem; }
  .admin-topbar    { padding: .8rem .75rem; }
  .admin-topbar h1 { font-size: 1.15rem; }
  .stat-card       { padding: 1.15rem 1.2rem; }
}

/* ── Tiny phones (≤479.98px) ────────────────────────────────────────────── */
@media (max-width: 479.98px) {
  .grid-4        { gap: .75rem; }
  .hero-stats    { gap: .5rem; }
  .hero-stats .k { font-size: 1.35rem; }
  .hero-stats .v { letter-spacing: .08em; font-size: .58rem; }
  .tabs          { gap: .25rem; }
  .tabs button   { flex: 1 1 auto; padding: .55rem .5rem; font-size: .88rem; white-space: nowrap; }
}

/* ── Very tight (≤399.98px) ─────────────────────────────────────────────── */
@media (max-width: 399.98px) {
  /* Text-heavy 2-up cells become unreadable slivers — go single column. */
  .feature-cells { grid-template-columns: 1fr; }
}