/* ═══════════ WohlAura · Клієнтський кабінет (Фаза 3) ═══════════
   Строго у стилі сайту (токени --ink/--text/--border/--primary). Кнопки ТЕМНІ (--ink),
   оранжу мінімум (лише дрібні статус-акценти). Анімація з prefers-reduced-motion. Mobile-first. */
:root { --cab-ink:#18110d; --cab-line:#ececec; }

.cab { display:grid; grid-template-columns:1fr; gap:18px; max-width:1040px; margin:0 auto; }
@media (min-width:820px){ .cab{ grid-template-columns:248px 1fr; gap:26px; align-items:start; } }

/* ── Sidebar ── */
.cab-side{ background:var(--bg,#fff); border:1px solid var(--border,#e5e7eb); border-radius:16px; padding:16px; position:sticky; top:90px; }
.cab-side-user{ display:flex; align-items:center; gap:12px; padding:6px 6px 16px; border-bottom:1px solid var(--cab-line); margin-bottom:12px; }
.cab-avatar{ width:44px; height:44px; border-radius:50%; background:var(--cab-ink); color:#fff; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; flex:none; }
.cab-side-user-txt{ min-width:0; display:flex; flex-direction:column; }
.cab-side-hi{ font-weight:700; color:var(--text,#1e1e1e); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-side-mail{ font-size:12px; color:var(--text-muted,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-nav{ display:flex; flex-direction:column; gap:2px; }
.cab-nav-link{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:11px 12px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--text,#1e1e1e); transition:background .16s, color .16s; font-family:inherit; }
.cab-nav-link svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; opacity:.75; }
.cab-nav-link:hover{ background:var(--bg-light,#f9fafb); }
.cab-nav-link.active{ background:var(--cab-ink); color:#fff; }
.cab-nav-link.active svg{ opacity:1; }
.cab-nav-logout{ margin-top:8px; border-top:1px solid var(--cab-line); border-radius:0 0 10px 10px; color:var(--text-muted,#6b7280); }
.cab-nav-logout:hover{ background:#fdecec; color:#b3261e; }

/* ── Main / cards ── */
.cab-main{ min-width:0; }
.cab-head{ margin:2px 0 18px; }
.cab-head h1{ font-size:24px; margin:0 0 4px; color:var(--text,#1e1e1e); letter-spacing:-.4px; }
.cab-sub{ margin:0; color:var(--text-muted,#6b7280); font-size:14px; }
.cab-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.cab-card{ background:var(--bg,#fff); border:1px solid var(--border,#e5e7eb); border-radius:16px; padding:20px 22px; margin-bottom:16px; animation:cabIn .32s cubic-bezier(.22,.61,.36,1) both; }
.cab-card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cab-card-h h2{ font-size:16px; margin:0; color:var(--text,#1e1e1e); }
.cab-cols{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:560px){ .cab-cols{ grid-template-columns:1fr 1fr; } .cab-cols .cab-card{ margin-bottom:0; } }
.cab-muted{ color:var(--text-muted,#6b7280); font-size:13.5px; line-height:1.6; margin:0; }
.cab-error{ color:#b3261e; padding:20px; }
.cab-loading{ display:flex; justify-content:center; padding:60px 0; }

/* ── Status pill (єдиний дрібний акцент) ── */
.cab-pill{ display:inline-block; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; letter-spacing:.2px; }
.cab-pill.pill-new{ background:#eef0f2; color:#4b5563; }
.cab-pill.pill-paid{ background:#e7f6ec; color:#0f7a3d; }
.cab-pill.pill-sent{ background:#e8f0fe; color:#1d4ed8; }
.cab-pill.pill-done{ background:#e7f6ec; color:#0f7a3d; }
.cab-pill.pill-cancel{ background:#f3f4f6; color:#6b7280; }

/* ── Buttons (ТЕМНІ, не оранжеві) ── */
.cab-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid transparent; border-radius:11px; padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:transform .12s, box-shadow .16s, background .16s, color .16s; }
.cab-btn:active{ transform:translateY(1px); }
.cab-btn-dark{ background:var(--cab-ink); color:#fff; }
.cab-btn-dark:hover{ box-shadow:0 6px 18px rgba(24,17,13,.22); }
.cab-btn-line{ background:#fff; color:var(--cab-ink); border-color:var(--border,#e5e7eb); }
.cab-btn-line:hover{ border-color:var(--cab-ink); }
.cab-btn-danger{ background:#b3261e; color:#fff; }
.cab-btn-danger:hover{ box-shadow:0 6px 18px rgba(179,38,30,.22); }
.cab-btn-danger-ghost{ background:#fff; color:#b3261e; border-color:#f0c8c5; }
.cab-btn-danger-ghost:hover{ background:#fdecec; border-color:#b3261e; }
.cab-ghost{ background:none; border:none; color:var(--cab-ink); font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-family:inherit; padding:4px 2px; }
.cab-mini{ background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--cab-ink); cursor:pointer; font-family:inherit; transition:border-color .14s, background .14s; }
.cab-mini:hover:not([disabled]){ border-color:var(--cab-ink); }
.cab-mini[disabled]{ opacity:.4; cursor:not-allowed; }

/* ── Lieferinformationen + чорний степер статусу (деталь замовлення) ── */
.cab-ship-h{ font-weight:700; font-size:16px; color:var(--cab-ink,#141414); }
.cab-ship-eta{ font-size:14px; color:var(--text-muted,#6b7280); margin-top:3px; }
.cab-ship-eta b{ color:var(--cab-ink,#141414); font-weight:700; }
.cab-ship-note{ font-size:14px; color:var(--text-muted,#6b7280); margin-top:8px; }
.cab-ship-cancel-mini{ display:flex; justify-content:center; padding:6px 0; }
.cab-ship-cancel-mini span{ color:#6b7280; font-size:13px; font-weight:600; }

.cab-steps{ display:flex; position:relative; margin-top:22px; }
.cab-ship-mini .cab-steps{ margin-top:8px; }
.cab-step{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
/* конектор до наступного кроку: сіра база (::before) + чорне заповнення (::after, анімоване) */
.cab-step::before,.cab-step::after{ content:''; position:absolute; top:13px; left:50%; height:3px; z-index:0; }
.cab-step::before{ width:100%; background:var(--cab-line,#e5e5e5); }
.cab-step::after{ background:var(--cab-ink,#141414); transform-origin:left center; transform:scaleX(0); }
.cab-step:last-child::before,.cab-step:last-child::after{ display:none; }
.cab-step.seg-done::after{ width:100%; animation:cabFill .55s ease forwards; animation-delay:calc(var(--i,0)*.16s + .12s); }
.cab-step.seg-half::after{ width:50%; animation:cabFill .55s ease forwards; animation-delay:calc(var(--i,0)*.16s + .12s); }
.cab-step.seg-future::after{ width:0; }
@keyframes cabFill{ to{ transform:scaleX(1); } }

.cab-step-dot{ position:relative; z-index:1; width:28px; height:28px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid var(--cab-line,#d3d3d3);
  animation:cabDotPop .42s cubic-bezier(.2,.9,.3,1.5) both; animation-delay:calc(var(--i,0)*.16s); }
.cab-step.is-done .cab-step-dot{ background:var(--cab-ink,#141414); border-color:var(--cab-ink,#141414); }
.cab-step-dot svg{ width:15px; height:15px; }
@keyframes cabDotPop{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }

.cab-step-lbl{ margin-top:11px; font-size:13.5px; font-weight:500; color:var(--text-muted,#8a8f98); line-height:1.3; max-width:100px; }
.cab-step.is-done .cab-step-lbl{ color:var(--cab-ink,#141414); }
.cab-step.is-current .cab-step-lbl{ font-weight:700; }
.cab-step-date{ margin-top:3px; font-size:12px; color:var(--text-muted,#9aa0a8); }
.cab-step-sub{ margin-top:5px; font-size:12px; font-weight:700; color:var(--cab-ink,#141414); line-height:1.3; max-width:118px; }
.cab-track{ margin-top:14px; padding-top:12px; border-top:1px solid var(--cab-line); font-size:13px; color:var(--text-muted,#6b7280); }

/* ── Overview ── */
.cab-last-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cab-last-nr{ font-weight:800; font-size:16px; color:var(--text,#1e1e1e); }
.cab-last-date{ font-size:13px; color:var(--text-muted,#6b7280); margin-top:2px; }
.cab-tiles{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .cab-tiles{ grid-template-columns:repeat(3,1fr); } }
.cab-tile{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; background:var(--bg,#fff); border:1px solid var(--border,#e5e7eb); border-radius:14px; padding:18px; cursor:pointer; font-family:inherit; transition:transform .14s, box-shadow .16s, border-color .16s; }
.cab-tile:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(24,17,13,.08); border-color:#d9dde2; }
.cab-tile svg{ width:22px; height:22px; fill:none; stroke:var(--cab-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cab-tile span{ font-weight:700; color:var(--text,#1e1e1e); font-size:14.5px; }
.cab-tile small{ color:var(--text-muted,#6b7280); font-size:12.5px; }
.cab-empty-inline{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cab-empty-inline p{ margin:0; color:var(--text-muted,#6b7280); }

/* ── Orders list cards ── */
.cab-orders{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .cab-orders{ grid-template-columns:1fr 1fr; } }
.cab-oc{ text-align:left; background:var(--bg,#fff); border:1px solid var(--border,#e5e7eb); border-radius:16px; padding:16px 18px; cursor:pointer; font-family:inherit; transition:transform .14s, box-shadow .16s, border-color .16s; animation:cabIn .3s ease both; }
.cab-oc:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(24,17,13,.08); border-color:#d9dde2; }
.cab-oc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cab-oc-nr{ font-weight:800; color:var(--text,#1e1e1e); font-size:15px; }
.cab-oc-date{ font-size:12.5px; color:var(--text-muted,#6b7280); margin-top:2px; }
.cab-oc-thumbs{ display:flex; gap:8px; margin:14px 0; }
.cab-oc-thumb{ width:46px; height:46px; border-radius:9px; overflow:hidden; background:var(--bg-light,#f4f4f4); flex:none; }
.cab-oc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cab-oc-thumb.noimg{ background:linear-gradient(135deg,#f0f0f0,#e6e6e6); }
.cab-oc-more{ align-self:center; font-size:12.5px; color:var(--text-muted,#6b7280); font-weight:600; }
.cab-oc-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--cab-line); }
.cab-oc-total{ font-weight:800; color:var(--text,#1e1e1e); }
.cab-oc-go{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--cab-ink); }
.cab-oc-ret{ font-size:11.5px; font-weight:700; color:#92400e; background:#fef3e2; padding:3px 9px; border-radius:999px; }

/* ── Order detail ── */
.cab-back{ background:none; border:none; color:var(--text-muted,#6b7280); font-weight:600; font-size:13.5px; cursor:pointer; padding:4px 0; margin-bottom:10px; font-family:inherit; }
.cab-back:hover{ color:var(--cab-ink); }
.cab-di-list{ display:flex; flex-direction:column; }
.cab-di{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--cab-line); }
.cab-di:last-child{ border-bottom:none; }
.cab-di-thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--bg-light,#f4f4f4); flex:none; }
.cab-di-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cab-di-thumb.noimg{ background:linear-gradient(135deg,#f0f0f0,#e6e6e6); }
.cab-di-mid{ flex:1; min-width:0; }
.cab-di-name{ display:block; font-weight:600; color:var(--text,#1e1e1e); font-size:14px; text-decoration:none; }
a.cab-di-name:hover{ text-decoration:underline; }
.cab-di-meta{ font-size:12.5px; color:var(--text-muted,#6b7280); }
.cab-di-meta em{ color:#92400e; font-style:normal; }
.cab-di-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.cab-di-price{ font-weight:700; color:var(--text,#1e1e1e); font-size:14px; white-space:nowrap; }
.cab-di-acts{ display:flex; gap:6px; }
.cab-di-total{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:2px solid var(--cab-ink); }
.cab-di-total strong{ font-size:19px; color:var(--text,#1e1e1e); }
.cab-addr{ margin:0; color:var(--text,#1e1e1e); font-size:14px; line-height:1.6; }
.cab-detail-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cab-detail-actions .cab-btn{ flex:1; min-width:150px; }

/* ── Key-value / forms ── */
.cab-kv{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--cab-line); font-size:14px; }
.cab-kv:last-child{ border-bottom:none; }
.cab-kv span{ color:var(--text-muted,#6b7280); flex:none; }
.cab-kv b{ color:var(--text,#1e1e1e); font-weight:600; text-align:right; word-break:break-word; }
.cab-fg{ margin-bottom:12px; }
.cab-fg label{ display:block; font-size:12.5px; color:var(--text-muted,#6b7280); margin-bottom:5px; font-weight:600; }
.cab-fg input{ width:100%; padding:11px 13px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; font-size:14px; font-family:inherit; transition:border-color .14s; }
.cab-fg input:focus{ outline:none; border-color:var(--cab-ink); }
.cab-form-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cab-empty{ text-align:center; padding:38px 22px; }
.cab-empty h3{ margin:0 0 6px; color:var(--text,#1e1e1e); }
.cab-empty p{ margin:0 0 16px; color:var(--text-muted,#6b7280); }

/* ── Ф3b: трек-кнопка / Beleg / адреси / auth ── */
.cab-main{ padding-bottom:48px; } /* контент не липне до низу */
.cab-spacer{ height:20px; }
.cab-track{ margin-top:14px; padding-top:14px; border-top:1px solid var(--cab-line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cab-track-nr{ font-size:13px; color:var(--text-muted,#6b7280); }
.cab-track-nr strong{ color:var(--text,#1e1e1e); font-family:monospace; }
.cab-track-btn{ padding:10px 20px; }
a.cab-track-btn{ text-decoration:none; }
.cab-track-btn[disabled]{ opacity:.55; cursor:not-allowed; font-size:12.5px; font-weight:600; }
.cab-beleg{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cab-beleg-txt h2{ margin:0 0 4px; font-size:16px; color:var(--text,#1e1e1e); }
.cab-beleg-txt p{ margin:0; }
.cab-adr-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .cab-adr-grid{ grid-template-columns:1fr 1fr; } }
.cab-adr{ border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:14px 16px; }
.cab-adr-primary{ border-color:var(--cab-ink); box-shadow:inset 0 0 0 1px var(--cab-ink); }
.cab-adr-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cab-adr-label{ font-size:12px; font-weight:700; color:var(--text-muted,#6b7280); text-transform:uppercase; letter-spacing:.5px; }
.cab-adr-badge{ background:var(--cab-ink); color:#fff; font-size:10px; padding:2px 7px; border-radius:999px; letter-spacing:.3px; }
.cab-radio-row{ display:flex; gap:18px; flex-wrap:wrap; }
.cab-radio{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--text,#1e1e1e); cursor:pointer; min-height:44px; }
.cab-radio input{ width:18px; height:18px; accent-color:var(--cab-ink); }
.cab-hr{ border:none; border-top:1px solid var(--cab-line); margin:6px 0 16px; }
.cab-fg textarea{ width:100%; padding:11px 13px; border:1.5px solid var(--border,#e5e7eb); border-radius:10px; font-size:14px; font-family:inherit; resize:vertical; transition:border-color .14s; }
.cab-fg textarea:focus{ outline:none; border-color:var(--cab-ink); }
.cab-ro{ background:var(--bg-light,#f5f5f5); cursor:not-allowed; color:var(--text-muted,#6b7280); }
/* Екран входу */
.auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted,#9ca3af); font-size:12px; }
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:var(--cab-line); }
.auth-google .auth-g{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#fff; color:#4285F4; font-weight:800; margin-right:8px; font-size:13px; box-shadow:inset 0 0 0 1px var(--border,#e5e7eb); }
.auth-card .cab-btn{ margin-top:2px; }

/* ── Ф3c: клікабельні картки адрес, розділені поля, зміна email ── */
.cab-adr{ transition:border-color .2s, box-shadow .2s, transform .12s; position:relative; }
.cab-adr-click{ cursor:pointer; }
.cab-adr-click:hover{ border-color:var(--cab-ink); box-shadow:0 4px 14px rgba(24,17,13,.08); }
.cab-adr-click:active{ transform:translateY(1px); }
.cab-adr-primary{ animation:cabPrimIn .28s ease; }
@keyframes cabPrimIn{ from{ box-shadow:inset 0 0 0 3px rgba(24,17,13,.25); } to{ box-shadow:inset 0 0 0 1px var(--cab-ink); } }
.cab-adr-hint{ display:block; margin-top:8px; font-size:11.5px; color:var(--text-muted,#9ca3af); }
.cab-adr-x{ background:none; border:none; color:#b3261e; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; border-radius:6px; }
.cab-adr-x:hover{ background:#fdecec; }
.cab-adr-add{ display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed var(--border,#d9dde2); border-radius:12px; padding:18px; background:var(--bg-light,#fafafa); color:var(--cab-ink); font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; transition:border-color .16s, background .16s; }
.cab-adr-add:hover{ border-color:var(--cab-ink); background:#fff; }
.cab-adr-add span{ font-size:18px; }
.cab-frow{ display:flex; gap:12px; }
.cab-frow > .cab-fg{ flex:1; }
.cab-fg-plz{ max-width:120px; }
.cab-fg-nr{ max-width:100px; }
.cab-form-h{ font-size:14px; color:var(--text-muted,#6b7280); text-transform:uppercase; letter-spacing:.6px; margin:0 0 12px; font-weight:700; }
.cab-form-h-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cab-email-btn{ align-self:flex-end; white-space:nowrap; }
#pf-a2wrap{ animation:cabIn .25s ease; }

/* ── Мобільна проробка (тач-таргети ≥44px, відступи, нічого не тікає) ── */
@media (max-width:819px){
  .cab-side{ position:static; }
  .cab-nav-link{ min-height:46px; }
  .cab-btn{ min-height:46px; width:100%; }
  .cab-detail-actions .cab-btn, .cab-beleg .cab-btn, .cab-track-btn{ width:100%; }
  .cab-mini{ min-height:38px; padding:8px 12px; }
  .cab-head h1{ font-size:21px; }
  .cab-di{ flex-wrap:wrap; }
  .cab-di-right{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; margin-top:8px; }
  .cab-di-acts{ gap:8px; }
  /* Степер лишається ГОРИЗОНТАЛЬНИМ на мобільному; довгі підписи переносяться рядком. */
  .cab-step-lbl{ font-size:12px; max-width:88px; }
  .cab-step-sub{ font-size:11px; max-width:96px; }
  .cab-step-date{ font-size:11px; }
  .cab-step-dot{ width:26px; height:26px; }
  .cab-step::before,.cab-step::after{ top:12px; }
  .cab-beleg, .cab-track{ flex-direction:column; align-items:stretch; }
  .cab-ghost{ min-height:40px; display:inline-flex; align-items:center; }
  .cab-frow{ flex-direction:column; gap:0; }
  .cab-fg-plz, .cab-fg-nr{ max-width:none; }
  .cab-email-btn{ width:100%; align-self:stretch; margin-top:4px; }
  .cab-adr-grid{ grid-template-columns:1fr; }
}

/* ══════ Глобальний фікс мобільної шапки: «WohlAura» НІКОЛИ не налазить на іконки ══════ */
/* #header — id-специфічність, щоб перебити наявні class-правила. НЕ вживати max-width на .logo (колапсує 1fr). */
@media (max-width: 900px){
  #header .header-main-inner{ min-width:0; }
  #header .logo{ min-width:0; }
  #header .logo-name{ font-size:15px !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; }
  #header .header-btn{ min-width:44px !important; min-height:44px !important; }   /* тач-таргети ≥44px */
}
/* На вузьких портретних телефонах лишаємо лише лого-іконку — назва НІКОЛИ не налазить на іконки. */
@media (max-width: 400px){
  #header .logo-name{ display:none !important; }
  #header .header-main-inner{ grid-template-columns:56px 1fr 56px !important; }
  #header .header-actions{ grid-template-columns:44px 44px 1fr 44px 44px !important; }
}

/* ══════ Newsletter-Status im Konto (Фаза 4) — чесний індикатор 4 станів, без оранжу ══════ */
.cab-nl-status{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:6px 12px; border-radius:999px; background:#f3f4f6; color:#374151; }
.cab-nl-status .cab-nl-dot{ width:9px; height:9px; border-radius:50%; background:#9ca3af; flex:0 0 auto; }
.cab-nl-status.is-on{ background:#e7f6ec; color:#1a7a44; }
.cab-nl-status.is-on .cab-nl-dot{ background:#22a05a; box-shadow:0 0 0 3px rgba(34,160,90,.15); }
.cab-nl-status.is-wait{ background:#eaf1fe; color:#1d4ed8; }
.cab-nl-status.is-wait .cab-nl-dot{ background:#2f6fed; box-shadow:0 0 0 3px rgba(47,111,237,.15); animation:cabPulse 1.6s ease-in-out infinite; }
.cab-nl-status.is-soft{ background:#e6f4f6; color:#0e6b7a; }
.cab-nl-status.is-soft .cab-nl-dot{ background:#0e7490; }
.cab-nl-status.is-off{ background:#f3f4f6; color:#6b7280; }
.cab-nl-status.is-off .cab-nl-dot{ background:#9ca3af; }
@keyframes cabPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* §7(3)-Hinweis im Checkout — dezent, дрібний, не оранж */
.checkout-soft-note{ font-size:12px; line-height:1.55; color:#8a8f98; margin:14px 2px 10px;
  padding:11px 14px; background:#fafafa; border:1px solid #ececec; border-radius:10px; }
.checkout-soft-note a{ color:#4b5563; text-decoration:underline; }
.checkout-soft-note b{ color:#5c6270; font-weight:700; }

@keyframes cabIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .cab-card,.cab-oc{ animation:none !important; }
  .cab-btn,.cab-tile,.cab-oc,.cab-mini,.cab-nav-link{ transition:none !important; }
  .cab-nl-status.is-wait .cab-nl-dot{ animation:none !important; }
  /* Степер: без анімації — одразу кінцевий стан (галочки на місці, смуга заповнена). */
  .cab-step-dot{ animation:none !important; }
  .cab-step.seg-done::after,.cab-step.seg-half::after{ animation:none !important; transform:scaleX(1) !important; }
}