/* ═══════════════════════════════════════════════════════════════════════════
   COREVERSE V71 — DARK FOOTER (MOBILE ONLY)

   On phones the footer becomes a dark slab with white type and a white logo.
   Desktop keeps the original light translucent panel, so this file is entirely
   inside a mobile media query.

   Two details worth knowing before editing:

   1. `.footer__logo` uses `mix-blend-mode:multiply`. That blend mode keeps the
      DARKER of the layers, so on a dark background the artwork disappears
      completely. The blend has to be switched off before the invert filter can
      do anything — inverting alone would not have worked.

   2. The logo and the social icons are dark artwork, not text, so `color`
      cannot reach them. `filter:brightness(0) invert(1)` crushes the artwork to
      pure black and then flips it to pure white, which turns any dark logo
      white regardless of its original colours.

   The LINE QR code is deliberately NOT inverted. A QR code's dark-on-light
   polarity is part of how scanners read it; inverting it would break scanning
   on many phones. It keeps its white plate instead.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:700px){

  .footer{
    background:#0d0d10 !important;
    border-top:1px solid rgba(255,255,255,.1);
    color:#fff;
  }

  /* ── Brand ─────────────────────────────────────────────────────────────── */
  .footer__logo{
    /* multiply would erase the mark against a dark field — see note 1 above */
    mix-blend-mode:normal;
    filter:brightness(0) invert(1);
  }
  .footer .footer__tag{color:#fff;opacity:.92}

  /* The CD's centre hole is punched with the page's light grey; on a dark
     footer that reads as a bright dot, so it has to match the new backdrop. */
  .footer__cd::after{
    background:#0d0d10;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* These carry the `.footer` prefix on purpose: the typography layer styles
     them as `.footer .footer__social i`, which outranks a bare class selector
     no matter which file loads last. Specificity has to match to win. */
  .footer .micro{color:rgba(255,255,255,.72)}
  .footer .footer__social b{color:#fff}
  .footer .footer__social i{color:rgba(255,255,255,.62)}
  .footer .footer__thai{color:rgba(255,255,255,.82)}
  .footer__thai [lang="en"]{color:rgba(255,255,255,.6)}
  .footer .footer__mail{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
  .footer__mail:hover{color:#fff;border-bottom-color:#fff}
  .footer a{color:#fff}

  /* ── Icons and panels ──────────────────────────────────────────────────── */
  .footer__sicon{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.22);
    color:#fff;
  }
  .footer__line-card{
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
  }
  /* QR stays dark-on-light so scanners can still read it — see note above. */
  .footer__qr{
    background:#fff;
    border-color:rgba(255,255,255,.3);
  }

  /* ── Bottom bar ────────────────────────────────────────────────────────── */
  .footer__bottom{border-top-color:rgba(255,255,255,.14)}
  .footer .footer__bottom .micro{color:rgba(255,255,255,.6)}
  .footer__legal span{color:rgba(255,255,255,.55)}
  .footer__admin{color:rgba(255,255,255,.75)}
  .footer__admin:hover{color:#fff}

}

/* ═══════════════════════════════════════════════════════════════════════════
   V72 — STICKY ACTION BAR

   The bar was designed as a DARK pill (rgba(20,20,23,.9)) carrying white text.
   The V70 performance pass, while stripping backdrop-filter, repainted it white
   and !important'd the change — but the white text stayed. "Try On" and "Queue"
   became white-on-white and vanished; only the LINE button, which sets its own
   dark text, survived.

   The bar stays light (it reads better over the new dark footer) and the type
   is now dark, as requested. LINE keeps its filled treatment so the three
   buttons still have a clear primary action rather than three identical chips.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .mobile-action-bar{
    border:1px solid rgba(20,20,25,.1);
    box-shadow:0 14px 40px rgba(10,10,12,.18);
  }
  /* Prefixed with .mobile-action-bar twice to outrank the base rule's
     `.mobile-action-bar a{color:#fff}` without reaching for !important. */
  .mobile-action-bar a,
  .mobile-action-bar a:link,
  .mobile-action-bar a:visited{
    color:#141419;
    border:1px solid rgba(20,20,25,.14);
    background:rgba(20,20,25,.03);
  }
  .mobile-action-bar a:active{background:rgba(20,20,25,.08)}
  /* LINE stays the filled primary action. */
  .mobile-action-bar a:last-child,
  .mobile-action-bar a:last-child:link,
  .mobile-action-bar a:last-child:visited{
    background:#141419;
    border-color:#141419;
    color:#fff;
  }
}