/* ============================================================
   Commercin — focus visibility
   Loaded last by both layouts, so it wins over the twenty
   `outline:none` rules scattered through app.css.

   Nothing here is pasted into app.css or dashboard.css, so your
   own edits in those files stay untouched and this file is always
   safe to re-upload.

   Why it exists: twenty rules strip the focus ring from inputs,
   selects and buttons, and only six put anything back. A keyboard
   user tabbing through search or checkout had no idea where they
   were — a WCAG 2.4.7 failure on the payment path.

   :focus-visible is used throughout, so a mouse click never paints
   a ring; only keyboard focus does.
   ============================================================ */

:root{
  --focus-ring: #4D43AD;        /* passes contrast on white and on --paper */
  --focus-ring-on-dark: #FFB27A;
}

/* ---------- the baseline ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- form controls ----------
   These carry their own border, so a ring plus a halo reads more
   clearly than an outline alone. !important is deliberate and
   narrow: it exists only to beat the `outline:none` declarations
   these same elements already carry. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(77, 67, 173, .16);
}

/* Inputs that sit inside a composed control (the header search bar,
   the supplier search, the help search) look wrong with their own
   ring — the wrapper is what the eye reads as the control, so the
   wrapper takes the ring instead. */
.search-bar:focus-within,
.sup-search:focus-within,
.help-search:focus-within{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.search-bar:focus-within input:focus-visible,
.search-bar:focus-within select:focus-visible,
.sup-search:focus-within input:focus-visible,
.help-search:focus-within input:focus-visible{
  outline: none !important;
  box-shadow: none;
}

/* ---------- on dark surfaces ----------
   Indigo on navy is invisible, so these flip to the warm accent. */
.dash-sidebar a:focus-visible,
.dash-sidebar button:focus-visible,
footer a:focus-visible,
.auth-brand a:focus-visible,
.site-footer a:focus-visible{
  outline-color: var(--focus-ring-on-dark);
}

/* ---------- skip link ----------
   First tab stop on every page: lets a keyboard or screen-reader
   user jump the header and category menu instead of tabbing
   through dozens of links to reach the content. */
.skip-link{
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  background: var(--navy, #2A245E);
  color: #fff;
  padding: 11px 18px;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus{
  top: 0;
  outline: 2px solid var(--focus-ring-on-dark);
  outline-offset: 2px;
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- forced-colors / high-contrast mode ---------- */
@media (forced-colors: active){
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible{
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* ============================================================
   Language switcher — real flags
   ------------------------------------------------------------
   The flags used to be emoji (🇬🇧 🇫🇷 🇷🇺). Windows ships no glyph for
   regional-indicator pairs, so Chrome drew the letters instead — which is
   where the "GB / FR / RU" came from. They are inline SVG now
   (resources/views/layouts/partials/flag.blade.php).

   These rules live here, after app.css, rather than being edited into
   app.css, so the hand-tuned header sizing in that file is never at risk.
   app.css has `.ls-opt svg{width:14px;height:14px}` for the orange check
   mark; it also catches the flag, so the two selectors below out-specify it
   for the flag only (0,2,1 beats 0,1,1) and leave the check mark alone.
   ============================================================ */
.ls-opt .ls-flag{display:flex;font-size:0;}
.ls-opt .ls-flag svg{
  width:auto;height:auto;
  /* Hairline: the white band of the RU flag and the white field of the FR
     flag would otherwise bleed into the white panel and lose their edge. */
  box-shadow:inset 0 0 0 1px rgba(19,16,48,.16);
}

/* ============================================================
   Flash messages — public layout
   ------------------------------------------------------------
   Lives here rather than in app.css so the hand-tuned header
   sizing in that file is never at risk from a redeploy.
   ============================================================ */
.flash{
  display:flex;align-items:flex-start;gap:12px;
  margin:18px 0 0;padding:14px 16px;
  border:1px solid;border-radius:12px;
  font-size:14.5px;line-height:1.5;
}
.flash p{margin:0;flex:1;min-width:0;}
.flash > svg{width:20px;height:20px;flex-shrink:0;margin-top:1px;}
.flash button{
  background:none;border:none;padding:4px;margin:-4px -4px 0 0;
  cursor:pointer;color:inherit;opacity:.6;border-radius:6px;line-height:0;
}
.flash button:hover{opacity:1;}
.flash button svg{width:15px;height:15px;}
.flash-success{background:#f4fbf6;border-color:#bfe3cd;color:#1d6b3f;}
.flash-error{background:#fff5f6;border-color:#f3c9ce;color:#9b2235;}

/* Alpine sets x-show by toggling display; without x-cloak the message can
   flicker visible-then-hidden on slow loads. Hidden until Alpine is ready. */
[x-cloak]{display:none !important;}

@media (prefers-reduced-motion:no-preference){
  .flash{animation:flash-in .22s ease-out;}
  @keyframes flash-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
}

/* Shipping term (Incoterm) on the product page */
.pdp-incoterm{
  display:flex;align-items:center;gap:9px;
  margin:10px 0 0;padding:10px 12px;
  background:var(--paper,#f6f7f9);border:1px solid var(--line,#e5e7eb);
  border-radius:10px;font-size:13.5px;color:var(--navy,#131030);
}
.pdp-incoterm svg{width:19px;height:19px;flex-shrink:0;color:var(--muted,#6b7280);}
.pdp-incoterm strong{font-weight:700;}
.pdp-incoterm em{font-style:normal;color:var(--muted,#6b7280);}
.pdp-incoterm em::before{content:" — ";}

/* "Order again" — buyer order list and order detail */
.reorder-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:9px;
  padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  color:var(--navy,#131030);font-family:inherit;
  transition:border-color .14s, background .14s;
}
.reorder-btn::before{
  content:"";width:13px;height:13px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:var(--reorder-icon) center/contain no-repeat;
          mask:var(--reorder-icon) center/contain no-repeat;
}
:root{
  --reorder-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.6-6.4'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}
.reorder-btn:hover{border-color:var(--orange,#F2884B);background:#fff8f3;}