/* core.css — design tokens, reset, typography and the components both
   the public site and the admin panel use. Loaded by every layout.
   Generated by scripts/build_css.php — edit the parts, not theme.css. */

/* ── Self-hosted fonts ────────────────────────────────────────────────────
   Inter and Material Icons used to come from fonts.googleapis.com on every
   page load. They are served from this repository now: no third-party request,
   no dependency on Google being reachable, and nothing for a visitor's browser
   to report to anyone else. Subset to latin + latin-ext, which covers English,
   Turkish and Hungarian.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Material Icons is kept only for the two glyphs Font Awesome Free has no
   equivalent for (see the `icon()` helper). Everything else is Font Awesome. */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material-icons/material-icons.woff2') format('woff2');
}

/* TBTrading Hub — theme
   Tokens ported from the tbtrading.eu reference build (build/assets/app-*.css). */
:root {
  /* Brand navy — tbtrading-950 … 500 */
  --navy-900: #061425;
  --navy-800: #0d2238;
  --navy-700: #0a2540;
  --navy-600: #14304f;
  --navy-500: #2d5384;
  --navy-200: #b4c5db;
  --navy-50: #f0f4f9;

  /* Accent yellow — CTAs, market bar, highlights */
  --accent-50: #fefce8;
  --accent-100: #fef3c7;
  --accent-300: #fde68a;
  --accent-400: #fcd34d;
  --accent: #facc15;
  --accent-600: #eab308;
  --accent-700: #ca8a04;
  --accent-800: #854d0e;
  --on-accent: #0a2540;

  /* Gold — premium tier only (reference accent-* ramp) */
  --gold-50: #fbf8f1;
  --gold-300: #ddbe78;
  --gold-400: #d3aa55;
  --gold: #c9a961;
  --gold-600: #a78640;
  --gold-800: #6c532c;

  /* Legacy aliases */
  --secondary: #facc15;
  --secondary-dim: #fcd34d;
  --secondary-fixed: #fde68a;
  --secondary-container: #fef3c7;
  --on-secondary: #0a2540;
  --on-secondary-container: #422006;

  --teal: #17a2a2;
  --green: #1f9d55;
  --green-50: #e7f6ee;
  --green-600: #1a8749;
  --green-700: #15803d;
  --red: #ba1a1a;
  --red-50: #fdeaea;
  --red-600: #a11616;
  --red-700: #871212;
  --amber-50: #fef3e2;
  --amber: #b45309;
  --amber-600: #96450a;
  --amber-700: #7c3a08;

  /* Surfaces + text — Material-3 roles from the reference build */
  --ink: #1b1c1e;
  --text: #43474d;
  --muted: #74777e;
  --line: #e6e6e4;
  --line-strong: #d2d2cf;
  --bg: #ffffff;
  --bg-soft: #faf9fb;
  --bg-muted: #f5f3f6;
  --bg-container: #efedf0;
  --bg-container-high: #e9e8ea;
  --white: #ffffff;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px;
  --fs-xl: 24px; --fs-2xl: 36px; --fs-3xl: clamp(38px, 5.4vw, 64px);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10,37,64,.04);
  --shadow: 0 6px 20px rgba(10,37,64,.08);
  --shadow-lg: 0 18px 44px rgba(10,37,64,.14);
  --container: 1280px;
  --header-h: 66px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-base);
  color: var(--text); background: var(--bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01", "ss03";
}
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 var(--sp-3); font-weight: 600; }
h1 { font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -.01em; }
h3 { font-size: var(--fs-md); line-height: 1.4; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--navy-500); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
.muted { color: var(--muted); }
.sr-only, .hp-field {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.container--xs { max-width: 460px; }
/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  padding: 11px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: .15s ease; white-space: nowrap; text-align: center;
}
.btn--sm { padding: 8px 13px; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-600); color: var(--on-accent); border-color: var(--accent-600); }
.btn--primary:active { background: var(--accent-700); border-color: var(--accent-700); }
.btn--yellow { background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary); }
.btn--yellow:hover { background: var(--secondary-dim); color: var(--on-secondary); border-color: var(--secondary-dim); }
.btn:disabled, .btn[disabled] { cursor: not-allowed; opacity: .5; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy-600); color: var(--navy-600); background: var(--bg-soft); }
.btn--link { background: transparent; color: var(--navy-600); border: 0; padding: 8px 4px; }
.btn--link:hover { text-decoration: underline; }
.btn .icon { font-size: 18px; }
.market-bar__clock .icon { font-size: 14px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.5);} 70% { box-shadow: 0 0 0 6px rgba(31,157,85,0);} 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0);} }
/* Flags — drawn as inline SVG by App\Core\Flag, because emoji flags are not
   rendered on Windows and degrade to two bare letters ("EN EN" in the footer). */
.flag { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 2px; overflow: hidden; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(10,37,64,.18); }
.flag svg { display: block; width: 100%; height: 100%; }
.flag--code { width: auto; height: auto; border-radius: 0; box-shadow: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.selector__toggle .flag, .selector__item .flag { margin-right: 6px; }
.selector__toggle .icon { font-size: 15px; }
.selector__menu--wide { min-width: 210px; }
.selector__item.is-active { color: var(--navy-600); font-weight: 600; }
.selector__item .icon { font-size: 16px; color: var(--green); }
.brand__word { font-weight: 800; font-size: var(--fs-lg); color: var(--ink); letter-spacing: -.01em; }
.brand__word span { color: var(--accent); }
.brand__word--light { color: #fff; font-size: var(--fs-lg); }
.header-actions .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.header-actions .btn--ghost:hover { background: var(--bg-soft); color: var(--navy-600); border-color: var(--navy-600); }
.header-actions__membership .icon:first-child { font-size: 16px; color: var(--accent-600); }
.inline-form { margin: 0; display: inline; }
.menu-toggle { display: none; background: var(--bg-muted); border: 0; color: var(--ink); padding: 8px; border-radius: var(--radius-sm); cursor: pointer; }
.megamenu__icon .icon { font-size: 21px; }
.megamenu__icon--dark .icon { color: #fff; }
.megamenu__icon--gold .icon { color: var(--accent-600); }
.header-bell .icon { font-size: 22px; }
.alert { display: flex; align-items: center; gap: var(--sp-2); padding: 12px 16px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.alert .icon { font-size: 19px; }

/* Toasts — flash messages sit above the top-right corner instead of pushing
   the page down, and the fade-out is an animation rather than a JS timer so
   the message still clears itself when the module never runs. */
.toast-stack {
  position: fixed; z-index: 1080; top: var(--sp-4); right: var(--sp-4);
  display: grid; gap: var(--sp-2); width: min(380px, calc(100vw - var(--sp-5)));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm);
  background: var(--bg); box-shadow: var(--shadow); pointer-events: auto;
  animation: toast-in .22s ease-out both, toast-out .4s ease-in 5s both;
}
.toast .icon { font-size: 19px; flex-shrink: 0; }
.toast__msg { flex: 1; min-width: 0; }
.toast__close {
  flex-shrink: 0; background: none; border: 0; padding: 0; margin: 1px 0 0;
  color: inherit; opacity: .55; cursor: pointer; line-height: 1;
}
.toast__close:hover { opacity: 1; }
.toast__close .icon { font-size: 17px; }
.toast--success { background: var(--green-50); color: #146c3a; border: 1px solid #bfe6cf; }
.toast--error { background: var(--red-50); color: #a5302f; border: 1px solid #f4c9c8; }
.toast.is-leaving { animation: toast-out .3s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.98); visibility: hidden; } }
@keyframes toast-fade { to { opacity: 0; visibility: hidden; } }
@media (max-width: 560px) {
  .toast-stack { top: var(--sp-3); right: var(--sp-3); left: var(--sp-3); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-fade .01s linear 5s both; }
  .toast.is-leaving { animation: toast-fade .01s linear both; }
}
/* Sections */
.section { padding: var(--sp-8) 0; }
/* Hero */
.hero { background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 60%, var(--navy-900) 100%); color: #fff; padding: var(--sp-8) 0; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(250,204,21,.14); color: var(--accent); border: 1px solid rgba(250,204,21,.3); padding: 6px 13px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; margin-bottom: var(--sp-4); }
.hero__badge .icon { font-size: 15px; }
.hero__title { color: #fff; font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.hero__subtitle { color: #b9cde0; font-size: var(--fs-md); max-width: 30em; margin-bottom: var(--sp-5); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.hero__stats { display: flex; gap: var(--sp-6); margin: 0; }
.hero__stats dt { font-size: var(--fs-xl); font-weight: 800; color: var(--accent); }
.hero__stats dd { margin: 0; font-size: var(--fs-xs); color: #9db6cd; text-transform: uppercase; letter-spacing: .04em; }
.trade-desk { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.trade-desk__head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: rgba(255,255,255,.05); color: #cfe0f0; font-size: var(--fs-sm); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); }
.trade-desk__list { max-height: 340px; overflow: hidden; }
.trade-desk__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: var(--fs-sm); animation: fadeUp .5s ease; }
.trade-desk__route { color: #eaf2fa; display: inline-flex; align-items: center; gap: 6px; }
.trade-desk__route .icon { font-size: 15px; color: var(--accent); }
.trade-desk__amt { color: #fff; font-weight: 700; text-align: right; }
.trade-desk__sector { color: #8fb3d6; font-size: var(--fs-xs); }
.status--delivered .trade-desk__amt { color: #7ee0a6; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }
/* Stats strip */
.stats-strip { background: var(--navy-800); color: #fff; }
.stats-strip__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); padding: var(--sp-6) 0; text-align: center; }
.stats-strip__grid > div { display: flex; flex-direction: column; gap: 4px; color: #9db6cd; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.stats-strip__num { font-size: var(--fs-2xl); font-weight: 800; color: #fff; }
/* Steps */
.steps { display: grid; gap: var(--sp-4); }
.steps--4 { grid-template-columns: repeat(4,1fr); }
.steps--3 { grid-template-columns: repeat(3,1fr); }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); position: relative; }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-700); color: #fff; font-weight: 700; margin-bottom: var(--sp-3); }
.step__icon { color: var(--accent); font-size: 30px; margin-bottom: var(--sp-3); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.steps--flow .step--flow { text-align: center; }
/* Benefits */
.benefit { text-align: center; padding: var(--sp-4); }
.benefit__icon { font-size: 34px; color: var(--navy-600); margin-bottom: var(--sp-3); }
.benefit h3 { margin-bottom: 6px; }
.benefit p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
/* Corridors */
.corridor { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); }
.corridor__route { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.corridor__route .icon { color: var(--accent); }
.corridor__meta { color: var(--muted); font-size: var(--fs-sm); }
.cc-flag .icon { font-size: 18px; }
.cc-role .icon { font-size: 14px; color: var(--accent-700); }
.company-card__actions .btn { width: 100%; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.badge .icon { font-size: 13px; }
.badge--premium { background: var(--gold-50); color: var(--gold-800); border-color: var(--gold-300); }
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-card__image { position: relative; aspect-ratio: 4/3; background: var(--bg-muted); display: block; overflow: hidden; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.image-placeholder .icon { font-size: 46px; }
.tag--origin { right: 8px; background: rgba(10,37,64,.82); color: #fff; }
.product-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__cat { font-size: var(--fs-xs); color: var(--teal); font-weight: 600; }
.product-card__title { font-size: var(--fs-base); margin: 0; }
.product-card__title a { color: var(--ink); }
.product-card__supplier { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.product-card__supplier .icon { font-size: 14px; color: #1461a8; }
.product-card__price { margin-top: auto; font-weight: 700; color: var(--ink); font-size: var(--fs-md); }
.price-converted { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); }
.price-request { color: var(--teal); font-weight: 600; font-size: var(--fs-sm); }
.product-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.industry-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); }
.industry-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--bg-muted); display: grid; place-items: center; flex-shrink: 0; }
.industry-card__icon .icon { color: var(--navy-600); }
.industry-card__name { font-weight: 700; color: var(--ink); display: block; }
.industry-card__nace { font-size: var(--fs-xs); color: var(--teal); font-weight: 600; }
.industry-card__counts { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.plan-card--popular { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-card__features .icon { font-size: 17px; color: var(--green); flex-shrink: 0; }
.plan-card .btn { margin-top: auto; }
.filters__check, .form__check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.filters__actions { display: grid; gap: 6px; }
.directory__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-4); }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form label { font-size: var(--fs-sm); color: var(--muted); }
.sort-form select { width: auto; }
.empty-state .icon { font-size: 52px; color: var(--line-strong); }
.profile__loc .icon { font-size: 16px; }
.chip { background: var(--bg-muted); color: var(--navy-600); font-size: var(--fs-xs); font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); }
a.chip:hover { background: var(--navy-600); color: #fff; }
.contact-list .icon { font-size: 18px; color: var(--navy-600); }
.gallery__thumb.is-active { border-color: var(--accent); }
.product-detail__supplier .icon { font-size: 17px; color: #1461a8; }
/* Forms */
.form { display: grid; gap: var(--sp-4); }

/* ── Control primitive ────────────────────────────────────────────────────
   One definition for every text-like control, select and textarea in the
   product. It replaces the old blanket `.filters input, .form input, …` rule,
   which set a border and a full width on *every* input in a form — including
   checkboxes, file pickers and hidden fields — and then needed one-off
   `width: auto` patches scattered around to undo the damage.

   The shape here is base + reset rather than one selector carrying a chain of
   :not()s. A long :not() chain inflates specificity, and the state rules below
   (:disabled, :user-invalid) would then quietly lose to the base rule.

   Scoped to .form/.form__group/.filters rather than a bare element selector so
   it cannot reach into third-party or intentionally-native markup.
   ------------------------------------------------------------------------ */
.form__group input, .form__group select, .form__group textarea,
.form input, .form select, .form textarea,
.filters input, .filters select,
.sort-form select,
.control {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Inputs that are not text fields opt back out. Same specificity as the base
   rule, declared after it, so these win without an !important anywhere. */
.form__group input[type='checkbox'], .form__group input[type='radio'],
.form__group input[type='file'], .form__group input[type='hidden'],
.form__group input[type='submit'], .form__group input[type='button'],
.form input[type='checkbox'], .form input[type='radio'],
.form input[type='file'], .form input[type='hidden'],
.form input[type='submit'], .form input[type='button'],
.filters input[type='checkbox'], .filters input[type='radio'] {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: normal;
}

.form__group textarea, .form textarea, textarea.control { min-height: 96px; resize: vertical; }
/* Compact variant for filter bars and inline table widgets, where a
   full-height control would push the row out of proportion. */
.control--sm { padding: 6px 10px; font-size: var(--fs-xs); }
select.control--sm { padding-right: 28px; background-position: right 8px center; background-size: 14px; }
.control--auto { width: auto; }
/* Controls that are meant to hug their content. These need to come *after*
   the primitive: `.sort-form select` and the primitive's `.form select` have
   equal specificity, so source order decides, and the earlier declaration of
   this override would otherwise lose. */
.sort-form select, .filters--inline select { width: auto; }

.form__group input:hover:not(:disabled), .form__group select:hover:not(:disabled),
.form__group textarea:hover:not(:disabled),
.form input:hover:not(:disabled), .form select:hover:not(:disabled),
.form textarea:hover:not(:disabled),
.control:hover:not(:disabled) { border-color: var(--navy-200); }
/* …but a checkbox has no border to recolour. */
.form__group input[type='checkbox']:hover, .form__group input[type='radio']:hover,
.form input[type='checkbox']:hover, .form input[type='radio']:hover { border-color: transparent; }

/* The global :focus-visible ring is a 3px outline, which on a bordered box
   reads as a second border floating off the edge. Controls get a tighter
   ring drawn on the border itself instead. Checkboxes keep the global ring. */
.form__group input:focus-visible, .form__group select:focus-visible,
.form__group textarea:focus-visible,
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible,
.control:focus-visible {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px var(--navy-50);
}
.form__group input[type='checkbox']:focus-visible, .form__group input[type='radio']:focus-visible,
.form input[type='checkbox']:focus-visible, .form input[type='radio']:focus-visible,
.form__group input[type='file']:focus-visible, .form input[type='file']:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none;
}

.form__group input:disabled, .form__group select:disabled, .form__group textarea:disabled,
.form input:disabled, .form select:disabled, .form textarea:disabled,
.control:disabled {
  background: var(--bg-muted); color: var(--muted); cursor: not-allowed;
}
.form__group input::placeholder, .form__group textarea::placeholder,
.form input::placeholder, .form textarea::placeholder,
.control::placeholder { color: var(--muted); }

/* Only after the field has been touched — :invalid alone paints every
   required field red before the user has typed anything. */
.form__group input:user-invalid, .form__group select:user-invalid, .form__group textarea:user-invalid,
.form input:user-invalid, .form select:user-invalid, .form textarea:user-invalid,
.control:user-invalid { border-color: var(--red); }
.form__group input:user-invalid:focus-visible, .form input:user-invalid:focus-visible,
.control:user-invalid:focus-visible { box-shadow: 0 0 0 3px var(--red-50); }

/* Native selects render their own arrow at wildly different sizes across
   browsers; this replaces it with one that matches the border colour. */
.form__group select, .form select, .filters select, .sort-form select, select.control {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2374777e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
}
[dir='rtl'] .form__group select, [dir='rtl'] .form select {
  padding-right: 12px; padding-left: 34px; background-position: left 11px center;
}

/* Date and time inputs size themselves to their text and end up narrower
   than everything beside them; the indicator is nudged to match the arrow. */
.form__group input[type='date'], .form__group input[type='time'],
.form__group input[type='datetime-local'] { min-height: 38px; }
.form__group input::-webkit-calendar-picker-indicator,
.form input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.form__group input::-webkit-calendar-picker-indicator:hover,
.form input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* File inputs: the native control is a grey button plus unstyleable text.
   The button half is restyled to read as a secondary action. */
.form__group input[type='file'], .form input[type='file'] {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text);
}
.form__group input[type='file']::file-selector-button,
.form input[type='file']::file-selector-button {
  margin-inline-end: var(--sp-3);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: .15s ease;
}
.form__group input[type='file']::file-selector-button:hover,
.form input[type='file']::file-selector-button:hover {
  background: var(--bg-container); border-color: var(--navy-200);
}

/* Checkboxes and radios keep native semantics; only the accent is themed. */
.form__group input[type='checkbox'], .form__group input[type='radio'],
.form input[type='checkbox'], .form input[type='radio'],
.filters input[type='checkbox'], .filters input[type='radio'],
.form__check input, .form__toggle input, .filters__check input {
  width: 16px; height: 16px; flex: none; accent-color: var(--navy-600); cursor: pointer;
}

/* A hint or error sits under its control, not beside it. */
.form__group small, .form__hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }

/* ── Form sections + field grid ───────────────────────────────────────────
   A form with more than a handful of fields needs grouping, and fields need
   widths that suit their content. `repeat(auto-fit, minmax(200px, 1fr))`
   gives every field the same width, so on a wide screen a date and a URL
   are equally cramped while the row runs off toward the horizon.

   .field-grid is a 12-column track; a field declares how much it needs.
   ------------------------------------------------------------------------ */
.form-section { border: 0; padding: 0; margin: 0; }
.form-section + .form-section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.form-section__legend {
  display: block; width: 100%; padding: 0; margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.form-section__hint { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }

.field-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); align-items: start; }
.field-grid > * { grid-column: span 12; min-width: 0; }
.field--2 { grid-column: span 2; }
.field--3 { grid-column: span 3; }
.field--4 { grid-column: span 4; }
.field--6 { grid-column: span 6; }
.field--8 { grid-column: span 8; }
.field--12 { grid-column: span 12; }
@media (max-width: 991px) {
  .field--2, .field--3, .field--4 { grid-column: span 6; }
  .field--6, .field--8 { grid-column: span 12; }
}
@media (max-width: 575px) {
  .field-grid > * { grid-column: span 12; }
}

/* A checkbox that carries real weight — publish state, consent — reads
   better as a bordered row than as a stray tick under the last field. */
.form__toggle {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-soft); cursor: pointer;
}
.form__toggle:hover { border-color: var(--navy-200); }
.form__toggle:has(input:checked) { border-color: var(--navy-500); background: var(--navy-50); }
.form__toggle input { margin-top: 2px; flex: none; }
.form__toggle strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.form__toggle small { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* Form actions pinned under the form, separated from the last field. */
.form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.form__actions--end { justify-content: flex-end; }
/* align-content:start keeps the input at its natural height when the grid row
   is taller than this group — otherwise a field with a hint underneath makes
   every input beside it grow to match. */
.form__group { display: grid; gap: 6px; align-content: start; }
.form__group label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
/* An existing image sits above the picker that would replace it, so "choose
   file" reads as "change this" rather than as an empty slot. */
.form__preview { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-muted); }
.field-error { color: var(--red); font-size: var(--fs-xs); }

/* File fields — the native control paints its own button and "no file chosen"
   text from the browser's UI language, which no stylesheet or translation can
   reach. The input stays (and stays focusable) but is covered by a label; the
   label opens the picker without JavaScript, and the module writes the chosen
   filename into the slot beside it. */
.filefield {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-soft); transition: border-color .15s ease, background .15s ease;
}
.filefield.is-dropping { border-color: var(--navy-600); background: var(--navy-50); }
/* Two fixes the visually-hidden pattern needs here, both about layout rather
   than paint. `.form input[type='file']` sets width:100%, and at (0,1,1) it
   outranked the single-class rule below — so the "hidden" input was still a
   full-width box. And with no positioned ancestor it was absolute against the
   initial containing block, so that box hung off the side of the document and
   gave every page with a file field a horizontal scrollbar on a phone. The
   descendant selector wins the width, and `position: relative` above contains
   it. clip/clip-path only ever hid the pixels, never the geometry. */
.filefield input.filefield__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.filefield .filefield__btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; transition: .15s ease; white-space: nowrap;
}
.filefield .filefield__btn:hover { border-color: var(--navy-600); color: var(--navy-600); }
.filefield .filefield__btn .icon { font-size: 16px; }
.filefield__input:focus-visible + .filefield__btn { outline: 3px solid var(--accent); outline-offset: 2px; }
.filefield__name {
  flex: 1; min-width: 0; color: var(--muted); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filefield__name.is-filled { color: var(--ink); font-weight: 600; }
.filefield__clear {
  flex-shrink: 0; background: none; border: 0; padding: 4px; border-radius: 50%;
  color: var(--muted); cursor: pointer; line-height: 1;
}
.filefield__clear:hover { background: var(--bg-muted); color: var(--red); }
.filefield__clear .icon { font-size: 14px; }
.filefield__hint { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); }
.filefield .field-error { flex-basis: 100%; }
/* Auth */
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.auth-card h1 { text-align: center; margin-bottom: var(--sp-5); }
.auth-alt { text-align: center; margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.industry-hero__icon .icon { color: var(--accent); font-size: 34px; }
.socials .icon { font-size: 18px; }
@media (max-width: 1199px) {
  .steps--4 { grid-template-columns: repeat(2,1fr); }
  .stats-strip__grid { grid-template-columns: repeat(5,1fr); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__desk { max-width: 520px; }
}
@media (max-width: 991px) {
  .stats-strip__grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 767px) {
  :root { --fs-2xl: 27px; --fs-3xl: 32px; --fs-xl: 22px; }
  .main-nav, .header-actions .btn--ghost, .header-actions__membership, .link-signin, .header-actions .inline-form, .header-bell { display: none; }
  .menu-toggle { display: inline-flex; }
  .steps--3, .steps--4 { grid-template-columns: 1fr; }
  .stats-strip__grid { grid-template-columns: repeat(2,1fr); }
  .section { padding: var(--sp-6) 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
.stepper__item.is-active .stepper__num { border-color: var(--navy-600); color: var(--navy-600); }
.stepper__item.is-active .stepper__label, .stepper__item.is-done .stepper__label { color: var(--ink); font-weight: 600; }
.rfq__files .icon { font-size: 15px; color: var(--navy-600); }
.dash__nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); position: sticky; top: calc(var(--header-h) + 12px); }
.dash__user { display: flex; align-items: center; gap: 10px; padding: var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.dash__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; font-weight: 700; }
.dash__uname { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.dash__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); font-weight: 500; width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.dash__link:hover { background: var(--bg-soft); color: var(--ink); }
.dash__link .icon { font-size: 19px; }
.dash__link--logout { color: var(--red); }
.dash__logout { margin-top: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.dash__title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.dash__stat .icon { color: var(--navy-600); }
.dash__company { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.dash__notifs .icon { color: var(--line-strong); }
.dash__notifs li.is-unread .icon { color: var(--accent); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.data-table code { background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; font-size: var(--fs-xs); }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; }
.status-pill--open { background: #e6f4ff; color: #1461a8; }
.status-pill--matched { background: #e7f6ee; color: #15803d; }
.status-pill--quoted { background: #fdf0d8; color: #9a6b0f; }
.status-pill--closed, .status-pill--expired { background: var(--bg-muted); color: var(--muted); }
/* Two states that had no rule and so rendered as a bare pill, identical to
   every other: 'held' arrives with the moderation gate, 'withdrawn' with
   supplier-editable offers. */
.status-pill--held { background: #fdf0d8; color: var(--amber); }
/* The yearly price beside the monthly one on the public plan card — it existed
   only in the dashboard, so the "yearly saves 16%" pitch was invisible to
   anyone who had not already signed up. */
.plan-card__yearly { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.status-pill--withdrawn { background: var(--bg-muted); color: var(--muted); text-decoration: line-through; }

/* RFQ status trail. Shared by the buyer's page, the guest tracking page and
   the admin detail, so it lives in core rather than in one surface's sheet. */
.rfq-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rfq-timeline__item { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); }
.rfq-timeline__note { color: var(--text); }
.rfq-timeline time { margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; }

/* The guest confirmation screen's "keep this link" block. */
.rfq-success__track { margin: var(--sp-4) 0; padding: var(--sp-4); background: var(--bg-muted); border-radius: var(--radius-sm); display: grid; gap: 10px; justify-items: center; }
.offer-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.offer-row:last-child { border-bottom: 0; }
/* Approval and job states reuse the pill; without these the class fell through
   to the bare .status-pill and every state looked identical. */
.status-pill--approved, .status-pill--verified, .status-pill--ok { background: #e3f4ea; color: var(--green-700); }
.status-pill--submitted, .status-pill--pending, .status-pill--overdue { background: #fdf0d8; color: var(--amber); }
.status-pill--rejected, .status-pill--suspended, .status-pill--failed { background: var(--red-50); color: var(--red); }
.status-pill--draft, .status-pill--never { background: var(--bg-muted); color: var(--muted); }
.btn--icon.is-active { color: var(--red); border-color: var(--red); }
@media (max-width: 991px) {
  .dash__nav { position: static; }
  .dash__nav nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .dash__nav nav a { width: auto; }
}
/* Company dashboard */
.dash__nav-label { display: block; padding: 12px 12px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
/* Row actions hug the right edge and shrink to their content, so the columns
   that carry information get the space instead. */
.data-table__actions { white-space: nowrap; text-align: right; }
td.data-table__actions, th.data-table__actions { width: 1%; }
.data-table__actions > form, .data-table__actions > .inline-form { display: inline-block; margin: 0; vertical-align: middle; }
.data-table__actions > a, .data-table__actions > button { vertical-align: middle; }
.gallery-manage .btn { padding: 6px; background: rgba(255,255,255,.9); }
.btn--dark { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.btn--dark:hover { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }
.btn--dark:active { background: var(--navy-900); border-color: var(--navy-900); }

/* Decision colours — a button that commits to something wears the colour of
   the consequence, in a row action, a form footer or a confirmation dialog. */
.btn--danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn--danger:hover { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.btn--danger:active { background: var(--red-700); border-color: var(--red-700); }
.btn--success { background: var(--green); color: #fff; border-color: var(--green); }
.btn--success:hover { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.btn--success:active { background: var(--green-700); border-color: var(--green-700); }
.btn--warn { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn--warn:hover { background: var(--amber-600); color: #fff; border-color: var(--amber-600); }
.btn--warn:active { background: var(--amber-700); border-color: var(--amber-700); }
.link-arrow { color: var(--accent-600); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.link-arrow:hover { color: var(--accent); }
.hero2__slide.is-active { opacity: 1; }
.hero2__arrow .icon { font-size: 22px; }
.hero2__dot.is-active { width: 26px; background: var(--accent); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.audit__icon .icon { color: var(--accent); font-size: 28px; }
.escrow2__label .icon { font-size: 16px; }
.benefits2__icon .icon { color: var(--navy-600); }
.sector2__icon .icon { color: var(--navy-600); font-size: 22px; }
.admin-sidebar__link .icon { font-size: 19px; }
.admin-h2 { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-md); }
.admin-tile__icon { color: var(--navy-600); font-size: 24px; }
.billing-plan--current { border-color: var(--accent-600); box-shadow: 0 0 0 1px var(--accent-600) inset; }
code { background: var(--bg-muted); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.msg-head__back .icon { font-size: 18px; }
.msg-head__company .icon { font-size: 16px; }
.msg-item--mine { justify-content: flex-end; }
.msg-file .icon { font-size: 14px; }
.msg-bubble__flag .icon { font-size: 15px; }
.msg-bubble__flagged .icon { font-size: 14px; }
.container > .ad-slot { flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin: var(--sp-5) 0; }
.container > .ad-slot .ad-slot__tag { flex-basis: 100%; }
.container > .ad-slot .ad-card { flex: 1 1 240px; max-width: 360px; }
.quote-card__supplier .icon { font-size: 18px; color: var(--navy-600); }
.status-pill--sent { background: #fdefd9; color: var(--accent-600); }
.status-pill--accepted { background: #e3f4ea; color: var(--green); }
.status-pill--declined { background: var(--bg-muted); color: var(--muted); }
/* Image lightbox (module 13) */
[data-lightbox] { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(6,26,46,.92); display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 12px; right: 20px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.directory__head .muted { max-width: 70ch; }
.directory__head .muted b, .directory__head .muted strong { color: var(--ink); font-weight: 700; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-100); border: 1px solid var(--accent-300);
  color: var(--on-secondary-container); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: var(--fs-xs); font-weight: 600;
}
.filter-chip .icon { font-size: 15px; }
.filter-chips__clear { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-decoration: underline; }
.filter-chips__clear:hover { color: var(--ink); }
/* Premium tier panel — company profile sidebar */
.tier-panel {
  display: flex; gap: var(--sp-3); background: var(--bg-muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); margin-top: var(--sp-4);
}
.tier-panel__icon { color: var(--gold); }
.tier-panel__icon .icon { font-size: 22px; }
.tier-panel__title { font-weight: 700; color: var(--ink); margin: 0 0 4px; font-size: var(--fs-base); }
.tier-panel p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.filters__search-btn .icon { font-size: 18px; }
.chip-filter .icon { font-size: 14px; color: var(--muted); }
.chip-filter.is-active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.chip-filter.is-active .icon { color: #fff; }
.p-card__media .image-placeholder .icon { font-size: 30px; color: var(--line-strong); }
.p-card__verified .icon { font-size: 17px; color: var(--green-700); }
.p-card__stock .icon { font-size: 17px; }
.p-card__stock--in_stock .icon { color: var(--green-700); }
.p-card__stock--made_to_order .icon { color: #e08a1e; }
.p-card__stock--out_of_stock .icon { color: #d97706; }
.pager .pagination { margin-top: 0; justify-content: flex-end; }
.pagination__link--nav .icon { font-size: 18px; }
.empty-state--card .btn { margin-top: var(--sp-3); }
.site-footer__col h4 .icon { font-size: 16px; color: var(--accent); }
.site-footer__col a .icon { font-size: 15px; vertical-align: -3px; margin-right: 5px; }
.site-footer__cta .icon { font-size: 14px; margin: 0 0 0 4px; }
.site-footer__cookies .icon { font-size: 15px; }
.site-footer__locales a.is-active { color: #fff; }
@media (max-width: 767px) {
  .pager .pagination { justify-content: center; }
}
.stat-pill .icon { font-size: 17px; color: var(--muted); }
.stat-pill--dark .icon { color: var(--accent); }
.sector-card__icon .icon { font-size: 22px; }
.sector-card__stat .icon { font-size: 17px; color: var(--muted); }
.sector-card__go .icon { font-size: 20px; }
.hiw-head--center .muted { margin: 0; }
.hiw-step__icon .icon { font-size: 18px; }
.hiw-compare__link .icon { font-size: 17px; }
.faq-item summary .icon { font-size: 20px; color: var(--muted); transition: transform .15s ease; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.flow-step__marker .icon { font-size: 20px; }
.flow-step__action .icon { font-size: 14px; }
.dash-tab .icon { font-size: 18px; }
.dash-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--navy-700); }
.panel-tile__head .icon { font-size: 18px; color: var(--muted); }
.panel-tile__foot .icon { font-size: 14px; }
.panel__next > .muted { margin: 0 0 var(--sp-4); }
.next-card__icon .icon { font-size: 18px; }
.next-card__link .icon { font-size: 16px; }
.supplier-card__meta .icon { font-size: 14px; }
.supplier-card__go .icon { font-size: 19px; }
.panel-card__head .page-eyebrow .icon { font-size: 14px; }
.panel-card__link .icon { font-size: 15px; }
.trend-card__media .image-placeholder .icon { font-size: 26px; color: var(--line-strong); }
.trend-card__views .icon { font-size: 12px; }
.quick-row .icon { font-size: 18px; color: var(--muted); }
.limit-badge .icon { font-size: 13px; }
.panel-table__sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.quick-row .icon:last-child { color: var(--muted); font-size: 16px; }
/* Sticky table headers (D6) */
.table-wrap { max-height: none; }
.data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-muted); box-shadow: inset 0 -1px 0 var(--line);
}
.data-table__sort .icon { font-size: 15px; opacity: .45; }
.data-table__sort:hover .icon { opacity: .8; }
.data-table__sort.is-active .icon { opacity: 1; color: var(--accent-700); }
.admin-tile__top .icon { font-size: 18px; color: var(--muted); }
.admin-tile__delta .icon { font-size: 14px; align-self: center; }
.admin-empty .icon { font-size: 20px; color: var(--line-strong); }
.health-strip__item .icon { font-size: 16px; }
.admin-views__remove .icon { font-size: 14px; }
.admin-bulk__actions .btn--link { color: var(--navy-200); }
@media (max-width: 767px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.admin-search--global > .icon { font-size: 18px; color: var(--muted); }
.admin-content .admin-search--global > .icon { color: var(--muted); }
.admin-results__group .admin-card__head .icon { font-size: 19px; color: var(--navy-600); }
.impersonation-bar .icon { font-size: 20px; }
.tfa-steps { margin: 0 0 var(--sp-3); padding-left: 1.2em; display: grid; gap: 10px; color: var(--text); font-size: var(--fs-sm); }
.tfa-secret { display: inline-block; margin-top: 6px; padding: 7px 12px; background: var(--bg-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: var(--fs-md); letter-spacing: .12em; user-select: all; }
.tfa-confirm { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tfa-confirm__form { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0; }
.recovery-card { border-left: 3px solid var(--accent); }
.recovery-card .admin-card__head h2 { display: inline-flex; align-items: center; gap: 8px; }
.recovery-codes { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.recovery-codes code { display: block; padding: 8px 10px; background: var(--bg-muted); border-radius: var(--radius-sm); text-align: center; letter-spacing: .06em; user-select: all; }
.tfa-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xl); letter-spacing: .28em; text-align: center; }
.tfa-confirm .tfa-input { width: 170px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
@media (max-width: 767px) {
  .tfa-confirm .tfa-input { width: 100%; }
}
body.admin-nav-open { overflow: hidden; }

/* ── Icons ────────────────────────────────────────────────────────────────
   `icon()` emits either a Font Awesome glyph (<i class="icon fa-solid …">) or,
   for the two names Font Awesome Free has no match for, a Material Icons
   ligature (<span class="icon icon--mi">). Both answer to `.icon`, so every
   existing size and colour rule keeps working.
   ---------------------------------------------------------------------- */
.icon { display: inline-block; line-height: 1; font-size: 20px; text-align: center; }
i.icon { font-style: normal; }
.icon--mi {
  font-family: 'Material Icons';
  font-weight: normal; font-style: normal; letter-spacing: normal;
  text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* SweetAlert2, themed to match the panel rather than its own defaults. */
.swal-tb { border-radius: var(--radius-lg); font-family: inherit; }
.swal-tb .swal2-title { font-size: var(--fs-lg); color: var(--ink); }
.swal-tb .swal2-html-container { font-size: var(--fs-sm); color: var(--text); }
.swal-tb .swal2-actions { gap: 10px; }
.swal-tb .btn { min-width: 110px; justify-content: center; margin: 0; }

/* The icon carries the same decision colour as the confirm button, so the
   dialog does not warn in orange while the button promises something green. */
.swal-tb--danger .swal2-icon.swal2-warning { border-color: var(--red); color: var(--red); background: var(--red-50); }
.swal-tb--warn .swal2-icon.swal2-warning { border-color: var(--amber); color: var(--amber); background: var(--amber-50); }
.swal-tb--success .swal2-icon.swal2-question { border-color: var(--green); color: var(--green); background: var(--green-50); }
.swal-tb--primary .swal2-icon.swal2-question { border-color: var(--accent-600); color: var(--accent-700); background: var(--accent-50); }
.swal-tb--neutral .swal2-icon.swal2-question { border-color: var(--navy-600); color: var(--navy-600); background: var(--navy-50); }

/* Gallery grid — used on the public company page *and* the admin editor.
   Lived in site.css only, so the admin gallery stacked vertically. */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gallery-grid img { border-radius: var(--radius-sm); aspect-ratio: 4/3; object-fit: cover; }

.pf { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.pf__form { display: contents; }
.pf__main { grid-column: 1; grid-row: 1; display: grid; gap: var(--sp-4); min-width: 0; }
.pf__side { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--sp-4); position: sticky; top: 84px; align-self: start; }
.pf__gallery { grid-column: 1; grid-row: 2; min-width: 0; }
.pf-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); min-width: 0; }
.pf-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--sp-4); }
.pf-card__head h3 { margin: 0; font-size: var(--fs-md); line-height: 1.3; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-card__head p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.pf-card__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--navy-50); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.pf-card--fold { padding-bottom: 6px; }
.pf-card--fold > summary { list-style: none; cursor: pointer; }
.pf-card--fold > summary::-webkit-details-marker { display: none; }
.pf-card--fold:not([open]) > summary { margin-bottom: 14px; }
.pf-card__chev { margin-left: auto; color: var(--muted); transition: transform .15s; align-self: center; }
.pf-card--fold[open] .pf-card__chev { transform: rotate(180deg); }
.pf-count { font-size: var(--fs-xs); font-weight: 600; color: var(--navy-600); background: var(--navy-50); border-radius: var(--radius-pill); padding: 2px 9px; }
.pf-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.pf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid--3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); }
.pf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-grid .form__group, .pf-tabs .form__group, .pf__side .form__group { margin: 0; }
.pf-tabs__panel { display: grid; gap: var(--sp-4); }
.pf-tabs__panel[hidden] { display: none; }
.pf-tabs__bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); overflow-x: auto; }
.pf-tabs__btn { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-tabs__btn:hover { color: var(--ink); }
.pf-tabs__btn.is-active { color: var(--navy-700); border-bottom-color: var(--navy-700); }
.pf-tabs__btn .flag { width: 18px; height: 12px; }
.pf-tabs__btn .flag svg { width: 100%; height: 100%; border-radius: 2px; display: block; }
.pf-tabs__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pf-tabs__hint { margin: 0; }
.pf-req { color: #c0392b; }
.pf-short { min-height: 64px !important; }
.pf-price { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--line); }
.pf-price .pf-grid { margin-bottom: var(--sp-3); transition: opacity .15s; }
.pf-price:has(input[name='price_on_request']:checked) .pf-price__amount { opacity: .45; }
.pf-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; position: relative; }
.pf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-switch__track { flex: 0 0 38px; width: 38px; height: 22px; border-radius: 11px; background: #cfd3da; position: relative; transition: background .15s; margin-top: 1px; }
.pf-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.pf-switch input:checked + .pf-switch__track { background: var(--navy-700); }
.pf-switch input:checked + .pf-switch__track::after { transform: translateX(16px); }
.pf-switch input:focus-visible + .pf-switch__track { outline: 2px solid var(--navy-600); outline-offset: 2px; }
.pf-switch__text { display: grid; gap: 1px; font-size: var(--fs-sm); }
.pf-switch__text small { color: var(--muted); font-size: var(--fs-xs); }
.pf-side__title { margin: 0 0 14px; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-700); display: flex; align-items: center; gap: 8px; }
.pf-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-muted); border-radius: var(--radius-sm); padding: 3px; margin-bottom: var(--sp-4); }
.pf-seg label { position: relative; cursor: pointer; }
.pf-seg input { position: absolute; opacity: 0; }
.pf-seg span { display: block; text-align: center; padding: 8px 6px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.pf-seg input:checked + span { background: var(--bg); color: var(--navy-700); box-shadow: 0 1px 3px rgba(10,37,64,.12); }
.pf-seg input[value='published']:checked + span { color: var(--green-700); }
.pf-seg input:focus-visible + span { outline: 2px solid var(--navy-600); outline-offset: 1px; }
.pf-actions { display: grid; gap: 8px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pf-dirty { margin: 0; font-size: var(--fs-xs); color: #b45309; text-align: center; }
.pf-dirty[hidden] { display: none; }
.pf__side .form__group + .form__group { margin-top: var(--sp-3); }
.pf-cover { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-muted); border: 1px solid var(--line); margin-bottom: var(--sp-3); display: flex; align-items: center; justify-content: center; }
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-cover__empty { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); }
.pf-cover__empty .icon { font-size: 26px; }
.pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pf-head h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.pf-head p { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-sm); }
.pf-head__meta { display: inline-flex; align-items: center; gap: 6px; }
.pf-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--bg-muted); color: var(--muted); }
.pf-pill--live { background: var(--green-50); color: var(--green-700); }
.pf-note { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-4); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--navy-50); color: var(--navy-700); font-size: var(--fs-sm); }
.pimg-grid { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.pimg-tile { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); display: grid; }
.pimg-tile.is-primary { border-color: var(--gold-600); box-shadow: 0 0 0 1px var(--gold-600); }
.pimg-tile__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-muted); }
.pimg-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pimg-tile__badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--gold-600); color: #fff; font-size: 11px; font-weight: 700; }
.pimg-tile__star, .pimg-tile__del { position: absolute; top: 6px; margin: 0; }
.pimg-tile__star { left: 6px; }
.pimg-tile__del { right: 6px; }
.pimg-tile__star button, .pimg-tile__del button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pimg-tile__del button { color: #b91c1c; }
.pimg-tile__star button:hover { color: var(--gold-600); }
.pimg-tile__del button:hover { background: #fee2e2; }
.pimg-tile__alt { display: flex; gap: 4px; padding: 8px 8px 0; margin: 0; }
.pimg-tile__alt input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-xs); padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.pimg-tile__alt input:focus { outline: 2px solid var(--navy-600); outline-offset: 0; border-color: transparent; }
.pimg-tile__alt button, .pimg-tile__move button { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; }
.pimg-tile__alt button:hover, .pimg-tile__move button:hover:not(:disabled) { background: var(--navy-50); }
.pimg-tile__move { display: flex; align-items: center; justify-content: space-between; padding: 8px; font-size: var(--fs-xs); color: var(--muted); }
.pimg-tile__move form { margin: 0; }
.pimg-tile__move button:disabled { opacity: .35; cursor: default; }
.pimg-upload { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0; padding: var(--sp-3); border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); }
.pimg-upload .filefield { flex: 1 1 260px; }
@media (max-width: 1100px) { .pf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pf { grid-template-columns: 1fr; }
  .pf__main, .pf__side, .pf__gallery { grid-column: 1; grid-row: auto; }
  .pf__side { position: static; }
}
@media (max-width: 560px) {
  .pf-grid--2, .pf-grid--3, .pf-grid--4 { grid-template-columns: 1fr; }
  .pf-card { padding: 16px; }
}
.pimg-tile button .icon, .pimg-tile__badge .icon { font-size: 13px; width: auto; height: auto; line-height: 1; }
.pimg-tile__badge .icon { font-size: 11px; }
.pf-card__icon .icon, .pf-side__title .icon { font-size: 15px; line-height: 1; }
.lightbox { gap: 12px; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.lightbox__img { max-width: min(92vw, 1400px); max-height: 82vh; object-fit: contain; background: rgba(255,255,255,.04); }
.lightbox__caption { color: rgba(255,255,255,.85); font-size: var(--fs-sm); text-align: center; max-width: 80vw; }
.lightbox__caption[hidden], .lightbox__nav[hidden] { display: none; }
.lightbox__nav { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255,255,255,.26); }
.lightbox__close { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pimg-tile__media img, .pf-cover img { cursor: zoom-in; }
.pimg-tile__media img:focus-visible, .pf-cover img:focus-visible { outline: 3px solid var(--navy-600); outline-offset: -3px; }
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox__nav { position: absolute; bottom: 18px; }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
  .lightbox__img { max-height: 72vh; }
}
.pf-tabs__bar { align-items: center; }
.pf-at-all { margin-left: auto; appearance: none; border: 1px solid var(--line); background: var(--bg); color: var(--navy-700); border-radius: var(--radius-pill); padding: 5px 12px; font: inherit; font-size: var(--fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; margin-bottom: 6px; }
.pf-at-all:hover:not(:disabled) { background: var(--navy-50); border-color: var(--navy-200, #c7d3e3); }
.pf-at-all:disabled, .pf-at__btn:disabled { opacity: .5; cursor: not-allowed; }
.pf-at-all .icon, .pf-at__btn .icon { font-size: 14px; }
.pf-at { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--line); }
.pf-at__text { display: grid; gap: 2px; min-width: 0; }
.pf-at__off { color: #b45309; }
.pf-at__btn { flex: 0 0 auto; white-space: nowrap; }
.is-busy { position: relative; pointer-events: none; }
.is-busy .icon { animation: pf-spin 1s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-at-status { margin: 0; font-size: var(--fs-xs); padding: 8px 12px; border-radius: var(--radius-sm); background: var(--navy-50); color: var(--navy-700); }
.pf-at-status[hidden] { display: none; }
.pf-at-status--ok { background: var(--green-50); color: var(--green-700); }
.pf-at-status--error { background: #fef2f2; color: #b91c1c; }
.pf-tabs > .pf-at-status { margin-bottom: var(--sp-3); }
@media (max-width: 560px) { .pf-at { flex-direction: column; } }
.pf__fs { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.pf-mt { margin-top: var(--sp-4); }
.pf-card .field-grid .form__group { margin: 0; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { position: relative; cursor: pointer; }
.pf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); transition: background .12s, border-color .12s, color .12s; user-select: none; }
.pf-chip span .icon { font-size: 11px; width: 0; overflow: hidden; opacity: 0; transition: width .12s, opacity .12s; }
.pf-chip span .flag { width: 18px; height: 12px; }
.pf-chip span .flag svg { width: 100%; height: 100%; display: block; border-radius: 2px; }
.pf-chip:hover span { border-color: var(--navy-600); }
.pf-chip input:checked + span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pf-chip input:checked + span .icon { width: 12px; opacity: 1; }
.pf-chip input:focus-visible + span { outline: 2px solid var(--navy-600); outline-offset: 2px; }
.pf-chip input:disabled + span { opacity: .6; cursor: default; }
.pf-facts { margin: 0 0 var(--sp-3); display: grid; gap: 8px; }
.pf-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.pf-facts dt { color: var(--muted); }
.pf-facts dd { margin: 0; font-weight: 600; text-align: right; }
.pf-facts + .pf-actions { margin-top: var(--sp-3); }
.pf-cover--logo { aspect-ratio: 1 / 1; max-width: 160px; margin-left: auto; margin-right: auto; background: #fff; }
.pf-cover--logo img { object-fit: contain; padding: 10px; }
.pf-cover--wide { aspect-ratio: 16 / 6; }
.pf-head__meta .flag { width: 18px; height: 12px; }
.pf-head__meta .flag svg { width: 100%; height: 100%; display: block; border-radius: 2px; }
.adm-ent { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-ent__thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--bg-muted); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.adm-ent__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-ent__thumb--logo { background: #fff; }
.adm-ent__thumb--logo img { object-fit: contain; padding: 3px; }
.adm-ent__thumb .icon { font-size: 16px; }
.adm-ent__text { min-width: 0; display: block; }
.adm-ent__name { font-weight: 600; color: var(--ink); }
.adm-ent__name:hover { color: var(--navy-600); text-decoration: underline; }
.adm-ent__star { color: var(--gold-600); font-size: 13px; white-space: nowrap; }
.adm-ent__text small { display: block; margin-top: 2px; }
.adm-loc { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.adm-loc .flag { width: 20px; height: 14px; flex: none; }
.adm-loc .flag svg { width: 100%; height: 100%; display: block; border-radius: 2px; }
.pf-sched { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); margin-bottom: var(--sp-4); }
.pf-sched .form__group { margin: 0; }
.pf-sched .form__group small { grid-column: 1 / -1; }
.pf-sched > .btn { width: auto; margin-bottom: 22px; }
@media (max-width: 560px) { .pf-sched { grid-template-columns: 1fr; } .pf-sched > .btn { margin-bottom: 0; } }

/* Date picker (assets/js/modules/datepicker.js): a text field in the ledger's
   date format with a popover calendar; the ISO value travels in a hidden input. */
.dp { position: relative; display: block; min-width: 0; }
.dp .dp__input { padding-right: 30px !important; font-variant-numeric: tabular-nums; }
.dp .dp__input.is-invalid { border-color: var(--red); }
.dp__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.dp__toggle:hover, .dp.is-open .dp__toggle { color: var(--navy-600); background: var(--bg-soft); }
.dp__pop { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: 272px; padding: 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 12px 32px rgba(15, 30, 55, .18); }
.dp__pop--up { top: auto; bottom: calc(100% + 4px); }
.dp__pop[hidden] { display: none; }
.dp__head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.dp__title { display: flex; gap: 4px; flex: 1; min-width: 0; }
.dp__month, .dp__year { height: 28px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.dp__month, .acc-form .acc-f .dp__pop select.dp__month, .form .dp__pop select.dp__month { flex: 1 1 auto; width: auto; min-width: 0; height: 28px; padding: 2px 6px; font-size: 13px; }
.dp__year, .acc-form .acc-f .dp__pop input.dp__year, .form .dp__pop input.dp__year { flex: 0 0 68px; width: 68px; height: 28px; padding: 2px 6px; font-size: 13px; text-align: center; -moz-appearance: textfield; }
.dp__year::-webkit-outer-spin-button, .dp__year::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp__nav { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.dp__nav:hover { background: var(--bg-soft); border-color: var(--line-strong); }
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp__dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; text-transform: uppercase; letter-spacing: .04em; }
.dp__day { height: 32px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.dp__day:hover { background: var(--bg-soft); border-color: var(--line); }
.dp__day.is-out { color: #b0b6c0; }
.dp__day.is-weekend:not(.is-out) { color: var(--navy-600); }
.dp__day.is-today { border-color: var(--accent-600); font-weight: 600; }
.dp__day.is-selected { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.dp__day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--navy-50); border-color: var(--navy-500); }
.dp__foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp__link { border: 0; background: transparent; color: var(--navy-600); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.dp__link:hover { background: var(--bg-soft); }
.admin-modal .dp__pop { z-index: 1101; }
.dp .dp__pop select.dp__month, .dp .dp__pop input.dp__year { flex-shrink: 1; height: 28px; min-height: 0; padding: 2px 6px; font-size: 13px; border-radius: 4px; box-shadow: none; }
.dp .dp__pop select.dp__month { flex: 1 1 auto; width: auto; }
.dp .dp__pop input.dp__year { flex: 0 0 68px; width: 68px; text-align: center; }
.dp__day:disabled, .dp__day.is-disabled { color: #c9ced6; background: transparent; border-color: transparent; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.15); }
.dp__foot { align-items: center; gap: 6px; }
.dp .dp__pop input.dp__time { width: 96px; height: 28px; min-height: 0; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: none; background: #fff; color: var(--ink); }
.dp .dp__pop input.dp__time:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-50); }
.dp__title--year { justify-content: center; align-items: center; font-weight: 700; font-size: 14px; color: var(--ink); }
.dp__pop--month { width: 240px; }
.dp__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dp__mon { height: 36px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.dp__mon:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--line); }
.dp__mon.is-today { border-color: var(--accent-600); font-weight: 600; }
.dp__mon.is-selected { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.dp__mon:disabled { color: #c9ced6; cursor: not-allowed; }
.admin-filters__range .dp, .form-row--inline .dp { flex: 1 1 140px; }
.inline-form .dp { display: inline-block; width: 150px; vertical-align: middle; }
.dp .dp__input { width: 100%; }
@media (max-width: 400px) { .dp__pop { width: min(272px, calc(100vw - 24px)); } }
.pf-cari__empty { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }

.pw-field { position: relative; display: block; }
.pw-field > input { width: 100%; padding-right: 44px; }
.pw-field__btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.pw-field__btn:hover, .pw-field__btn:focus-visible { color: var(--ink); background: rgba(0,0,0,.05); }
.pw-field > input::-ms-reveal, .pw-field > input::-ms-clear { display: none; }