/* TryAndJudge · Achat Maroc V2 shared UI foundation.
   Page styles may compose these primitives but should not redefine the tokens. */
:root{
  --buyer-bg:#070d19;
  --buyer-surface:#101b2c;
  --buyer-surface-raised:#15283b;
  --buyer-surface-active:#173a42;
  --buyer-line:#304b62;
  --buyer-line-strong:#4b6b80;
  --buyer-text:#edf5ff;
  --buyer-muted:#a4b6ca;
  --buyer-gold:#f5b757;
  --buyer-teal:#52dccb;
  --buyer-blue:#82a9ff;
  --buyer-success:#72e4d5;
  --buyer-warning:#ffd181;
  --buyer-danger:#ff858b;
  --buyer-radius-sm:8px;
  --buyer-radius-md:10px;
  --buyer-radius-lg:15px;
  --buyer-shadow:0 18px 45px #02091680;
  --buyer-motion-fast:180ms;
  --buyer-font-min:10.5px;
}

.buyer-panel{border:1px solid var(--buyer-line);border-radius:var(--buyer-radius-lg);background:linear-gradient(150deg,#172b3b,#0d1a29);box-shadow:var(--buyer-shadow)}
.buyer-micro-card{border:1px solid #355066;border-radius:var(--buyer-radius-md);background:linear-gradient(145deg,#14283a,#101f30)}
.buyer-kicker{color:var(--buyer-teal);font-size:var(--buyer-font-min);font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.buyer-copy-muted{color:var(--buyer-muted);font-size:max(var(--buyer-font-min),.75rem)}
.buyer-field{width:100%;min-height:43px;border:1px solid #3d5b70;border-radius:9px;outline:0;background:#102539;color:var(--buyer-text);transition:border-color var(--buyer-motion-fast),box-shadow var(--buyer-motion-fast),background var(--buyer-motion-fast)}
.buyer-field:hover{border-color:#55758a;background:#122a3d}
.buyer-field:focus,.buyer-field:focus-within{border-color:var(--buyer-teal);box-shadow:0 0 0 3px #52dccb18;background:#132b3f}
.buyer-choice{border:1px solid #3b5870;border-radius:9px;background:#152a3e;color:#b8c9d8;transition:border-color var(--buyer-motion-fast),background var(--buyer-motion-fast),color var(--buyer-motion-fast),transform var(--buyer-motion-fast)}
.buyer-choice:hover{border-color:#64859a;background:#193448;color:#fff;transform:translateY(-1px)}
.buyer-choice.is-active{border-color:var(--buyer-gold);background:#30291e;color:#ffd387}
.buyer-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:41px;border:0;border-radius:9px;background:linear-gradient(105deg,#f7c36f,#e8a33d);color:#251c13;font-size:var(--buyer-font-min);font-weight:900;transition:transform var(--buyer-motion-fast),box-shadow var(--buyer-motion-fast)}
.buyer-action:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 20px #eaa83a3c}
.buyer-action:disabled{cursor:not-allowed;opacity:.62}
.buyer-status{display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:4px 8px;border:1px solid currentColor;border-radius:999px;font-size:var(--buyer-font-min);font-weight:850}
.buyer-status.is-success{color:var(--buyer-success);background:#153a38}
.buyer-status.is-warning{color:var(--buyer-warning);background:#392f20}
.buyer-status.is-danger{color:var(--buyer-danger);background:#3b2029}
.buyer-icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.buyer-interactive:focus-visible{outline:2px solid var(--buyer-teal);outline-offset:2px}

@media(prefers-reduced-motion:reduce){.buyer-choice,.buyer-action,.buyer-field{transition-duration:.01ms!important}}
.buyer-rich-rating{width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:6px 9px;border:1px solid #e2c27d66;border-radius:999px;background:#fffaf0e8;color:#4b5668;font-size:10px;font-weight:850;line-height:1.2;box-shadow:0 5px 14px #18263b0d}.buyer-rich-rating b{color:#e7a427;font-size:10px;letter-spacing:.07em}@media(max-width:560px){.buyer-rich-rating{white-space:normal}}

/* Compact, clickable trust signal shared by the buyer home and catalog. */
.buyer-rich-rating{position:relative;isolation:isolate;gap:8px;padding:8px 11px;overflow:hidden;border-color:#e5bd6766;background:linear-gradient(115deg,#fffaf0f2,#fff5dfe8);color:#3d4858;text-decoration:none;box-shadow:0 7px 20px #18263b12;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.buyer-rich-rating::after{position:absolute;inset:-50% auto -50% -35%;z-index:-1;width:26%;background:linear-gradient(90deg,transparent,#fff9,transparent);content:"";transform:skewX(-18deg);transition:left .42s ease}
.buyer-rich-rating:hover{transform:translateY(-2px);border-color:#e2ad46aa;box-shadow:0 10px 24px #18263b1c}
.buyer-rich-rating:hover::after{left:112%}
.buyer-rich-rating:focus-visible{outline:2px solid #e8b653;outline-offset:3px}
.buyer-rich-rating b{color:#e7a427;font-size:12px;letter-spacing:.08em;text-shadow:0 0 12px #e7a42738}
.buyer-rich-rating strong{color:#273345;font-size:11.5px;line-height:1;white-space:nowrap}
.buyer-rich-rating i{width:1px;height:14px;background:linear-gradient(transparent,#d4a846,transparent);opacity:.8}
.buyer-rich-rating span{color:#667184;font-size:10.5px;white-space:nowrap}
.buyer-rich-rating .buyer-rich-availability{display:inline-flex;align-items:center;gap:5px;color:#16855d;font-weight:900}.buyer-rich-rating .buyer-rich-availability::before{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#2bb77b;box-shadow:0 0 0 3px #2bb77b1f,0 0 9px #2bb77b42;content:""}
@media(max-width:560px){.buyer-rich-rating{gap:6px;padding:8px 9px}.buyer-rich-rating b{font-size:11px}.buyer-rich-rating strong{font-size:11px}.buyer-rich-rating span{font-size:10px}}