/* =====================================================================
   Ano Dreams · responsive-account.css
   Mobile/Touch polish for the CUSTOMER PANEL + AUTH + TRACKING only.
   Loads AFTER anodreams.css → equal/higher specificity wins.

   SCOPE (do not bleed elsewhere):
     account/index.php · account/order.php · account/addresses.php
     account/login.php · account/register.php · track.php
     (reorder.php / wishlist.php reuse catalog .card → owned by catalog,
      intentionally NOT styled here)

   RULES OF ENGAGEMENT:
     - Desktop (>768px) is never touched — everything is inside @media.
     - We do NOT redefine global atoms (.btn base, .field, .input, .tag,
       .nav, .footer). We only adjust them *as descendants* of these
       pages' layout containers, by structural scoping.
     - !important is used sparingly, ONLY where the markup carries inline
       `style="..."` (the .split grids and the status timeline) that would
       otherwise out-specify any external selector. Everywhere else plain
       specificity is enough.
   ===================================================================== */


/* =====================================================================
   TABLET / LARGE PHONE   ≤ 768px
   ===================================================================== */
@media (max-width: 768px) {

  /* ------------------------------------------------------------------
     1) Re-stack the two-column layouts.
     index.php / order.php / addresses.php set an INLINE
     grid-template-columns on `.split` (e.g. 1.5fr 1fr), which beats
     core's `.split{grid-template-columns:1fr}`. We override it back to a
     single column. Inline style → needs !important here (unavoidable).
     Scoped to `.section .split` so we only hit these page layouts.
  ------------------------------------------------------------------ */
  .section .split {
    grid-template-columns: 1fr !important;
    gap: 26px;
    align-items: stretch;
  }

  /* Trim the big top offset the pages push via inline padding-top so the
     content isn't buried under the fixed navbar on short screens. */
  .section[style*="padding-top:130px"],
  .section[style*="padding-top:140px"],
  .section[style*="padding-top:150px"] {
    padding-top: 104px;
  }

  /* ------------------------------------------------------------------
     2) ACCOUNT HEADER ROW  (index.php / addresses.php)
        <div class="flex between items-center wrap-f"> heading + buttons
        Stack the heading above the button group on phones.
  ------------------------------------------------------------------ */
  .section .flex.between.items-center.wrap-f {
    gap: 18px;
  }

  /* "Hey, Name" / "Adressbuch" headline scales down a touch */
  .section .h-1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    line-height: 1.1;
  }

  /* ------------------------------------------------------------------
     3) ACCOUNT BUTTON GROUP
        index.php: <div class="flex gap wrap-f"> of .btn.btn--ghost.btn--sm
        (Nochmal kaufen / Adressbuch / Wunschliste / Abmelden)
        Let it wrap full-width into evenly sized, tappable buttons.
  ------------------------------------------------------------------ */
  .section .flex.gap.wrap-f {
    width: 100%;
    gap: 10px;
  }
  .section .flex.gap.wrap-f > .btn {
    flex: 1 1 calc(50% - 10px);   /* two per row, grow to fill */
    min-width: 140px;
    min-height: 46px;             /* ≥44px touch target */
  }

  /* ------------------------------------------------------------------
     4) STAT CARDS  (index.php  .grid.grid--3)
        Already auto-fit; just guarantee comfortable min + spacing.
  ------------------------------------------------------------------ */
  .section .grid--3 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .section .grid--3 .panel.center {
    padding: 20px 14px;
  }

  /* ------------------------------------------------------------------
     5) RECENT-ORDER CARDS  (index.php  a.card → order.php?id=)
        Inner row is .flex.between.items-center.wrap-f.gap.
        Keep name block + price/status from overflowing on long content.
        Scoped under `.section .split` so we never touch catalog .card.
  ------------------------------------------------------------------ */
  .section .split a.card {
    padding: 16px !important;
  }
  .section .split a.card .flex.between {
    gap: 10px;
    row-gap: 8px;
  }
  /* name/date column may shrink; let the long order meta wrap */
  .section .split a.card .product__name {
    font-size: 1rem;
    word-break: break-word;
  }
  .section .split a.card .product__sub {
    font-size: .8rem;
    line-height: 1.5;
  }
  /* status tag + price + chevron group stays readable, no shrink-to-0 */
  .section .split a.card .flex.items-center.gap {
    flex: none;
    gap: 10px;
  }
  .section .split .tag {
    white-space: nowrap;
  }

  /* ------------------------------------------------------------------
     6) ORDER DETAIL  (order.php)
        Items list + totals are .flex.between rows inside .panel.
        Allow item name + meta to wrap so the price never collides.
  ------------------------------------------------------------------ */
  .section .split .panel .flex.between {
    gap: 12px;
  }
  .section .split .panel .flex.between > div:first-child {
    min-width: 0;          /* enable wrapping of long product names */
  }
  .section .split .panel .product__sub {
    line-height: 1.55;
  }

  /* ------------------------------------------------------------------
     7) ADDRESS ACTION BUTTONS  (addresses.php)
        <div class="flex items-center wrap-f gap"> with
        Bearbeiten / (Als Standard) / Löschen — two sit inside inline
        <form>. Make them wrap and stay tappable on phones.
  ------------------------------------------------------------------ */
  .section .split .card .flex.items-center.wrap-f.gap {
    gap: 8px;
    row-gap: 8px;
  }
  .section .split .card .flex.items-center.wrap-f.gap > .btn,
  .section .split .card .flex.items-center.wrap-f.gap form > .btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* inline <form> wrappers must not collapse the button width */
  .section .split .card .flex.items-center.wrap-f.gap form {
    display: inline-flex;
    margin: 0;
  }

  /* ------------------------------------------------------------------
     8) AUTH CARDS  (login.php / register.php)
        .panel.panel--narrow already centers via margin-inline:auto.
        Ensure block buttons + consent text read well on phones.
        Buttons are already .btn--block (100%); bump touch height.
  ------------------------------------------------------------------ */
  .section .panel--narrow .btn--block {
    min-height: 48px;
  }
  /* consent / helper links: comfortable line-height + tappable links */
  .section .panel--narrow .muted a,
  .section .panel--narrow p a {
    display: inline-block;
    padding: 2px 0;
  }

  /* ------------------------------------------------------------------
     9) TRACK.PHP — STATUS TIMELINE (Bestellt · Bezahlt · Versendet)
        Markup: <div class="flex between" style="position:relative">
        with 3 inline-styled step columns + an absolutely positioned
        inline-styled connector bar (top:18px;left:16%;right:16%).
        Inline styles → !important needed to keep labels from colliding
        and to re-anchor the connector under the 36px circles.
        Same pattern also appears in order.php (inside a .panel) → both
        are covered by `.section .panel .flex.between`.
  ------------------------------------------------------------------ */
  .section .panel > .flex.between[style*="position:relative"],
  .section .flex.between[style*="position:relative"] {
    gap: 4px;
  }
  /* each step column keeps equal width + centered label */
  .section .flex.between[style*="position:relative"] > div[style*="flex:1"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  /* step labels: shrink slightly so "Versendet" never wraps/collides */
  .section .flex.between[style*="position:relative"] > div[style*="flex:1"] > div:last-child {
    font-size: .72rem !important;
    line-height: 1.2;
  }
  /* the connector progress bar tracks the (now smaller) circle centers */
  .section .flex.between[style*="position:relative"] > div[style*="position:absolute"] {
    left: 16% !important;
    right: 16% !important;
    top: 18px !important;
  }
}


/* =====================================================================
   SMALL PHONE   ≤ 480px   (iPhone SE / Mini width)
   ===================================================================== */
@media (max-width: 480px) {

  /* tighter outer offset under the fixed navbar */
  .section[style*="padding-top:130px"],
  .section[style*="padding-top:140px"],
  .section[style*="padding-top:150px"] {
    padding-top: 96px;
  }

  /* headline a hair smaller on the narrowest screens */
  .section .h-1 {
    font-size: clamp(1.7rem, 8.5vw, 2.2rem);
  }

  /* ------------------------------------------------------------------
     Account button group → one full-width button per row.
     Each is a comfortable, clearly tappable target.
  ------------------------------------------------------------------ */
  .section .flex.gap.wrap-f > .btn {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 48px;
  }

  /* Stat cards stack to a single column so numbers stay large */
  .section .grid--3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .section .grid--3 .panel.center {
    padding: 18px 16px;
  }

  /* ------------------------------------------------------------------
     Recent-order card: stack name-block above price/status so neither
     side is squeezed; the whole card stays an easy tap target.
  ------------------------------------------------------------------ */
  .section .split a.card .flex.between.items-center.wrap-f.gap {
    flex-direction: column;
    align-items: flex-start;
  }
  .section .split a.card .flex.items-center.gap {
    width: 100%;
    justify-content: space-between;
  }

  /* order.php / track.php item rows: keep on one line but allow the
     name to wrap; price hugs the right edge. */
  .section .split .panel .flex.between,
  .section .panel .flex.between {
    column-gap: 10px;
  }

  /* ------------------------------------------------------------------
     Address action buttons → full-width stacked, each ≥44px,
     so Bearbeiten / Als Standard / Löschen are unmistakable taps.
  ------------------------------------------------------------------ */
  .section .split .card .flex.items-center.wrap-f.gap {
    flex-direction: column;
    align-items: stretch;
  }
  .section .split .card .flex.items-center.wrap-f.gap > .btn,
  .section .split .card .flex.items-center.wrap-f.gap form,
  .section .split .card .flex.items-center.wrap-f.gap form > .btn {
    width: 100%;
  }

  /* ------------------------------------------------------------------
     Auth cards: edge-to-edge comfortable padding, full-width controls.
  ------------------------------------------------------------------ */
  .section .panel--narrow {
    padding: 26px 20px;
  }

  /* ------------------------------------------------------------------
     Timeline on the narrowest screens: shrink step circles + labels a
     bit more and tighten the connector so the 3 steps never collide.
     (inline styles → !important.)
  ------------------------------------------------------------------ */
  .section .flex.between[style*="position:relative"] > div[style*="flex:1"] > div:first-child {
    width: 30px !important;
    height: 30px !important;
    font-size: .85rem;
  }
  .section .flex.between[style*="position:relative"] > div[style*="flex:1"] > div:last-child {
    font-size: .66rem !important;
  }
  .section .flex.between[style*="position:relative"] > div[style*="position:absolute"] {
    top: 15px !important;
    left: 17% !important;
    right: 17% !important;
  }

  /* Tracking-number / shipped alert block: keep long Sendungsnummer from
     forcing horizontal scroll. (track.php .alert--ok) */
  .section .panel .alert {
    word-break: break-word;
  }
}