/* ==========================================================================
   Mobile / small-screen presentation layer.

   Driven by the admin's «إعدادات الجوال» page. All rules live behind the
   860px breakpoint so the desktop layout is untouched.

   Guidance applied:
   - Bottom bar sits in the thumb zone (bottom ~40% of the screen).
   - Touch targets are at least 48px (Android) / 44pt (iOS).
   - Icons are always paired with labels unless the admin turns labels off.
   - iPhone home-indicator handled with env(safe-area-inset-bottom).
   ========================================================================== */

/* Utility: an element the admin has hidden on mobile. */
@media (max-width: 860px) {
  .m-off { display: none !important; }
}

@media (max-width: 860px) {

  /* ---------- global scale knobs ---------- */
  html { font-size: calc(16px * var(--m-font-scale, 100%) / 100%); }

  /* hero height is owned by hero.css / HeroUI */

  .card, .prod-grid .card, .col-card { border-radius: var(--m-card-radius, 14px); }

  .prod-grid { grid-template-columns: repeat(var(--m-grid-cols, 2), minmax(0, 1fr)); gap: 12px; }
  .prod-grid .card .name { font-size: .9rem; }

  /* ---------- header behaviour ---------- */
  body.m-sticky header { position: sticky; top: 0; z-index: 90; }

  /* Auto-hide gives the content back its vertical space while scrolling down. */
  body.m-autohide header {
    transition: transform .28s ease;
    will-change: transform;
  }
  body.m-autohide.m-scrolled-down header { transform: translateY(-100%); }

  /* ---------- bottom tab bar ---------- */
  body.has-mbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .mbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line, #e7ded9);
    box-shadow: 0 -6px 24px -16px rgba(46, 26, 36, .55);
  }

  .mbar-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;             /* Android 48dp / iOS 44pt floor */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border: none;
    background: transparent;
    border-radius: 12px;
    color: var(--muted, #8a7b82);
    font-family: inherit;
    font-size: .66rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mbar-item svg { width: 22px; height: 22px; flex: 0 0 22px; }

  .mbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mbar-item:active { background: var(--blush, #faf6f2); }

  .mbar-item.on {
    color: var(--plum, #2e1a24);
    font-weight: 700;
  }

  /* A small pill above the active item reads faster than colour alone. */
  .mbar-item.on::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    width: 26px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--gold, #c9a24b);
  }
  .mbar-item { position: relative; }

  .mbar-item:focus-visible {
    outline: 2px solid var(--gold, #c9a24b);
    outline-offset: -3px;
  }

  /* ---------- drawer side ---------- */
  body[data-drawer-side="start"] .mobile-menu { inset-inline-start: 0; inset-inline-end: auto; }
  body[data-drawer-side="end"]   .mobile-menu { inset-inline-end: 0; inset-inline-start: auto; }

  /* Drawer links also deserve a comfortable target. */
  .mobile-menu a { min-height: 48px; display: flex; align-items: center; }

  /* Leave room for the bar so the last drawer link isn't covered. */
  body.has-mbar .mobile-menu { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* The bar is a mobile affordance only. */
@media (min-width: 861px) {
  .mbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.m-autohide header { transition: none; }
  .mbar-item { transition: none; }
}

/* Home sections the admin has switched off for small screens. */
@media (max-width: 860px) {
  [data-msec].m-hidden { display: none !important; }
}

/* ==========================================================================
   Floating WhatsApp button + collapsible footer
   ========================================================================== */
/* The floating button is a mobile affordance only. Declared hidden OUTSIDE
   any media query so it can never render unstyled on desktop — which is what
   made the raw SVG stretch to full width above the footer. */
.mfab { display: none; }

@media (max-width: 860px) {
  .mfab {
    display: grid;
    position: fixed;
    inset-inline-end: 16px;
    inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    place-items: center;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .38);
    z-index: 80;
    transition: transform .18s ease;
  }
  .mfab svg { width: 28px; height: 28px; flex: 0 0 28px; }
  .mfab:active { transform: scale(.94); }

  /* Lift it clear of the bottom bar when both are on. */
  body.has-mbar .mfab {
    inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* --- collapsible footer columns ---
     Scoped to .foot-col so the brand column (logo / about / socials) is never
     turned into an accordion panel. */
  body.m-facc footer .foot-col > h4 {
    position: relative;
    cursor: pointer;
    padding-inline-end: 30px;
    margin-bottom: 0;
    min-height: 48px;                 /* 44px+ tap target */
    display: flex;
    align-items: center;
    user-select: none;
  }

  /* chevron (default) */
  body.m-facc footer .foot-col > h4::after {
    content: "";
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .22s ease;
    opacity: .55;
  }
  body.m-facc footer .foot-col.open > h4::after {
    transform: translateY(-25%) rotate(225deg);
  }

  /* plus / minus */
  body.m-facc[data-mfacc-icon="plusminus"] footer .foot-col > h4::after {
    content: "+";
    border: 0;
    transform: none;
    font-size: 1.15rem;
    line-height: 1;
    top: 50%;
    margin-top: -.55em;
    opacity: .6;
  }
  body.m-facc[data-mfacc-icon="plusminus"] footer .foot-col.open > h4::after {
    content: "\2212";                  /* proper minus sign */
  }

  body.m-facc footer .foot-col > ul {
    display: none;
    padding-block-start: 6px;
  }
  body.m-facc footer .foot-col.open > ul { display: block; }

  /* Footer links get real tap targets once they are a mobile menu. */
  footer .foot-col > ul > li { margin-bottom: 2px; }
  footer .foot-col > ul > li > a {
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- footer density modes (data-mfoot) --- */
  /* compact: brand block + copyright, link columns hidden via .m-off in Blade */
  body[data-mfoot="compact"] footer { padding-block: 34px 22px; }
  body[data-mfoot="minimal"] footer { padding-block: 26px 18px; }
  body[data-mfoot="minimal"] footer .foot-grid { gap: 12px; }

  /* --- alignment --- */
  body[data-mfoot-align="center"] footer .foot-grid,
  body[data-mfoot-align="center"] footer .foot-brand-col { text-align: center; }
  body[data-mfoot-align="center"] footer .foot-brand-col .brand { justify-content: center; }
  body[data-mfoot-align="center"] footer .socials { justify-content: center; }
  /* Column headings stay start-aligned: a centred accordion header with an
     edge affordance reads as broken. */
  body[data-mfoot-align="center"].m-facc footer .foot-col > h4 { text-align: start; }

  /* --- socials position --- */
  body[data-mfoot-social="bottom"] footer .foot-brand-col .socials {
    order: 99;
    margin-top: 18px;
  }
  body[data-mfoot-social="bottom"] footer .foot-brand-col {
    display: flex;
    flex-direction: column;
  }
  body[data-mfoot-social="bottom"] footer .socials { margin-bottom: 0; }

  footer .socials a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mfab { transition: none; }
}

/* ==========================================================================
   Mobile header layout — a three-zone app bar.

   Rule (NN/g + Material + iOS): a centred logo costs brand recall and makes
   returning home markedly harder, so it is only used when nothing competes
   with it. As soon as one trailing action renders, the logo moves to the
   start and the bar becomes leading | logo | actions.
   ========================================================================== */
@media (max-width: 860px) {

  header .nav {
    display: grid;
    align-items: center;
    column-gap: 10px;
    /* Admin-controlled; 56px is the Material top-app-bar default. */
    min-height: var(--m-header-h, 56px);
  }
  /* Keep the logo proportionate to a taller/shorter bar. */
  header .brand .mono { font-size: clamp(1.4rem, calc(var(--m-header-h, 56px) * 0.34), 2.2rem); }

  /* Hidden pieces must not keep reserving a grid column. */
  header .nav .menu { display: none; }

  /* --- with trailing actions: leading | logo (start) | actions (end) --- */
  header .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  header .nav .brand { justify-self: start; }
  header .nav .actions { justify-self: end; }

  /* --- no leading button: logo simply starts the bar --- */
  body[data-mlead="0"] header .nav { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-mlead="0"] header .nav .burger { display: none; }

  /* --- nothing competing: centre the logo, balanced by an equal spacer --- */
  body[data-macts="0"] header .nav { grid-template-columns: 1fr auto 1fr; }
  body[data-macts="0"] header .nav .brand { justify-self: center; }
  body[data-macts="0"] header .nav .actions { display: none; }

  /* no leading button *and* no actions → truly centred, no spacers needed */
  body[data-macts="0"][data-mlead="0"] header .nav { grid-template-columns: 1fr; }
  body[data-macts="0"][data-mlead="0"] header .nav .brand { justify-self: center; }

  /* --- trailing actions: 48px targets, tightened as they add up --- */
  header .nav .actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  header .nav .actions > * {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body[data-macts="3"] header .nav .actions { gap: 2px; }
  body[data-macts="3"] header .nav .actions > * { min-width: 40px; }
  body[data-macts="3"] header .nav .cur-switch { padding: 6px 8px; font-size: .74rem; }

  /* The logo shrinks before it ever pushes an action off the bar. */
  header .nav .brand { min-width: 0; overflow: hidden; }
  body[data-macts="3"] header .nav .brand .sub { display: none; }

  /* Leading button keeps a full touch target. */
  header .nav .burger {
    min-width: 44px;
    min-height: 44px;
    justify-self: start;
  }
}

/* ==========================================================================
   Logo composition on mobile (data-mlogo)
   mono = the OC monogram only · word = the wordmark only · both = default
   ========================================================================== */
@media (max-width: 860px) {
  body[data-mlogo="mono"] header .nav .brand .word { display: none; }
  body[data-mlogo="word"] header .nav .brand .mono { display: none; }

  /* The monogram alone is small — give it presence and a real touch target. */
  body[data-mlogo="mono"] header .nav .brand {
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }
  body[data-mlogo="mono"] header .nav .brand .mono { font-size: 1.35rem; }

  /* The wordmark alone can breathe: keep "Couture" even at three actions. */
  body[data-mlogo="word"][data-macts="3"] header .nav .brand .sub { display: block; }
}