/* ==========================================================================
   Lucky Logistics — /login mobile social-row patch
   Goal:  3 social buttons (Google / LINE / Facebook) NEVER stack on mobile.
          1:1 square tiles, brand-color filled, white icon + white label,
          tactile press feedback, "last used" pulsing dot.

   This single stylesheet supports BOTH deployment paths:

   PATH A — CSS-only patch (zero markup change to login-main.blade.php):
            Targets the legacy `.auth-page__social .auth-page__button` markup.
            Overrides the existing `flex-direction: column !important` rule
            that stacks buttons at ≤575px.

   PATH B — Clean rewrite (uses _login-social-row.blade.php partial):
            Targets the new `.lk-srow .lk-srow__tile` markup. Same visual
            treatment, no need for `!important` since no legacy rules to fight.

   Selectors are written with both class hierarchies so this single file works
   for whichever path you adopt. Mobile-only — wrapped in @media (max-width: 768px).
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------------------------------------------------------------------- */
  /*  CONTAINER — force 3-column grid that NEVER stacks (the core fix)     */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social,
  body.auth-page--login .auth-page__social.auth-page__social--highlighted,
  body.auth-page--login .lk-srow {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: row !important;        /* defensive — kills inherited column */
    gap: 10px !important;
    width: 100%;
    margin-top: 16px;
    padding: 0;
  }

  /* ---------------------------------------------------------------------- */
  /*  TILE — 1:1 square, brand-color filled, white text                     */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button,
  body.auth-page--login .lk-srow .lk-srow__tile {
    /* Defeat legacy flex sizing rules (they set width:auto !important) */
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /* The actual tile shape */
    aspect-ratio: 1 / 1;
    min-height: 0 !important;     /* override legacy 44px min-height */
    margin: 0 !important;
    padding: 8px 6px !important;
    border: 0 !important;
    border-radius: 18px !important;

    /* Layout: icon on top, label underneath, both centred */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    /* Typography */
    font-family: 'Sora', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none;

    /* Behaviour */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;

    /* Motion */
    transition:
      transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ---------------------------------------------------------------------- */
  /*  INSET HIGHLIGHT — tactile depth (subtle white-to-transparent gradient)*/
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button::before,
  body.auth-page--login .lk-srow .lk-srow__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  /* Keep all real children (svg + label) above the highlight overlay */
  body.auth-page--login .auth-page__social .auth-page__button > svg,
  body.auth-page--login .lk-srow .lk-srow__tile > svg,
  body.auth-page--login .lk-srow .lk-srow__tile > .lk-srow__tile-label {
    position: relative;
    z-index: 1;
  }

  /* ---------------------------------------------------------------------- */
  /*  ICON SIZE                                                             */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button > svg,
  body.auth-page--login .lk-srow .lk-srow__tile > svg {
    width: 26px !important;
    height: 26px !important;
    display: block;
  }

  /* ---------------------------------------------------------------------- */
  /*  PRESS FEEDBACK + HOVER                                                */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button:hover:not(:disabled),
  body.auth-page--login .lk-srow .lk-srow__tile:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-2px);
  }
  body.auth-page--login .auth-page__social .auth-page__button:active:not(:disabled),
  body.auth-page--login .lk-srow .lk-srow__tile:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
    transition-duration: 80ms;
  }
  body.auth-page--login .auth-page__social .auth-page__button:disabled,
  body.auth-page--login .lk-srow .lk-srow__tile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
  }

  /* ---------------------------------------------------------------------- */
  /*  BRAND COLOR FILLS (Google blue / LINE green / Facebook blue)          */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button--google,
  body.auth-page--login .lk-srow .lk-srow__tile--google {
    background: #4285F4 !important;
    box-shadow: 0 4px 14px rgba(66, 133, 244, 0.30);
  }
  body.auth-page--login .auth-page__social .auth-page__button--line,
  body.auth-page--login .lk-srow .lk-srow__tile--line {
    background: #00B900 !important;
    box-shadow: 0 4px 14px rgba(0, 185, 0, 0.30);
  }
  body.auth-page--login .auth-page__social .auth-page__button--facebook,
  body.auth-page--login .lk-srow .lk-srow__tile--facebook {
    background: #1877F2 !important;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.30);
  }

  /* ---------------------------------------------------------------------- */
  /*  GOOGLE LOGO PATH OVERRIDE (Path A only)                               */
  /*                                                                        */
  /*  The legacy markup at lines 305-311 of login-main.blade.php uses      */
  /*  multi-color Google brand paths (#4285F4, #34A853, #FBBC05, #EA4335). */
  /*  On a brand-blue background they look broken. Force all paths white.  */
  /*  CSS `fill` declaration wins over SVG `fill="..."` presentation       */
  /*  attributes (per SVG 2 spec). Path B uses pre-white SVG so this is    */
  /*  a no-op for that path.                                                */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button--google svg path {
    fill: #fff !important;
  }

  /* ---------------------------------------------------------------------- */
  /*  "LAST USED" INDICATOR — pulsing white dot top-right                   */
  /*                                                                        */
  /*  Path A — overrides the legacy `\2713` checkmark in `::after`.        */
  /*  Path B — uses [data-last-used="true"] attribute toggled by Vue.      */
  /*                                                                        */
  /*  Replaces the cliché ✓ which renders as a red box on some Android     */
  /*  Roboto fallback fonts (audit P3-9).                                   */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social .auth-page__button--last-used::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 8px !important;
    height: 8px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45) !important;
    color: transparent !important;     /* hide any inherited \2713 char */
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 2;
    animation: lk-srow-pulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  }
  body.auth-page--login .lk-srow .lk-srow__tile[data-last-used="true"]::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
    z-index: 2;
    animation: lk-srow-pulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  }
  @keyframes lk-srow-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18); transform: scale(1.12); }
  }

  /* ---------------------------------------------------------------------- */
  /*  HIGHLIGHTED STATE (after wrong-password — existing Vue logic sets     */
  /*  the modifier class). Add a subtle outer dashed ring around the grid. */
  /* ---------------------------------------------------------------------- */
  body.auth-page--login .auth-page__social.auth-page__social--highlighted,
  body.auth-page--login .lk-srow[data-highlighted="true"] {
    position: relative;
    padding: 6px;
    border-radius: 22px;
  }
  body.auth-page--login .auth-page__social.auth-page__social--highlighted::before,
  body.auth-page--login .lk-srow[data-highlighted="true"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px dashed rgba(37, 99, 235, 0.35);
    border-radius: inherit;
    pointer-events: none;
    animation: lk-srow-ring 2s cubic-bezier(0.2, 0.8, 0.2, 1) 2;
  }
  @keyframes lk-srow-ring {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
  }
}

/* ==========================================================================
   REDUCED MOTION — kill all animation/transition for users who opt out.
   Per WCAG 2.3.3, !important here is the standard pattern.
   ========================================================================== */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.auth-page--login .auth-page__social .auth-page__button,
  body.auth-page--login .lk-srow .lk-srow__tile,
  body.auth-page--login .auth-page__social .auth-page__button--last-used::after,
  body.auth-page--login .lk-srow .lk-srow__tile[data-last-used="true"]::after,
  body.auth-page--login .auth-page__social.auth-page__social--highlighted::before,
  body.auth-page--login .lk-srow[data-highlighted="true"]::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   HIGH CONTRAST — keep tiles distinguishable when system contrast is boosted.
   ========================================================================== */
@media (max-width: 768px) and (prefers-contrast: more) {
  body.auth-page--login .auth-page__social .auth-page__button,
  body.auth-page--login .lk-srow .lk-srow__tile {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  }
}