/* ============================================================
   XOMETRY THEME LAYER (2026-10-06)
   Visual reskin only — colors, fonts, component styling.
   NO layout, HTML structure, copy, or behavior changes.
   Loaded last so it overrides polish.css cleanly.
   Design tokens sampled from xometry.com:
     primary blue #0064E0 | royal #0053b3 | navy #0A1317
     headings DM Sans | body Manrope
     bg white / #F5F6F8 | borders #E5E7EB | chip wash #EAF0FA
   ============================================================ */

/* Astryx port (2026-11-10): --xo-* and remapped vars are one-line
   aliases to astryx-tokens.css. Xometry blue #1565C0 retires. */
:root {
  /* Xometry palette */
  --xo-blue: var(--color-accent);
  --xo-blue-dark: var(--ax-accent-deep);
  --xo-blue-deep: var(--ax-accent-deep);
  --xo-royal: var(--ax-accent-deep);
  --xo-navy: var(--color-text-primary);
  --xo-grey-bg: var(--color-background-body);
  --xo-chip: var(--color-accent-muted);
  --xo-line: var(--color-border);
  --xo-heading: var(--color-text-primary);
  --xo-body: var(--color-text-secondary);

  /* Remap the polish-layer tokens to Astryx */
  --ink: var(--color-text-primary);
  --ink-soft: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --faint: var(--color-text-disabled);
  --line: var(--color-border);
  --line-soft: var(--color-border);
  --bg: var(--color-background-surface);
  --card: var(--color-background-card);
  --teal: var(--color-accent);
  --teal-dark: var(--ax-accent-deep);
  --teal-wash: var(--color-accent-muted);
  /* Remap the marketplace accent variable to Astryx blue */
  --pm-accent: var(--color-accent);
  --pm-accent-deep: var(--ax-accent-deep);
  --pm-accent-soft: var(--color-accent-muted);
}

/* ---------- Typography: DM Sans headings, Manrope body ---------- */
body {
  font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--xo-body);
  background: #ffffff;
}
h1, .h1, h2, .h2, .section-title,
.pm-hero h1, .hero-title {
  font-family: "DM Sans", "Manrope", -apple-system, "Segoe UI", sans-serif;
  color: var(--xo-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}
h3, .h3 {
  font-family: "DM Sans", "Manrope", sans-serif;
  color: var(--xo-heading);
  font-weight: 600;
}
button, input, select, textarea { font-family: inherit; }

/* ---------- Links: Xometry blue ---------- */
a { color: var(--xo-blue-dark); }
a:hover { color: var(--xo-blue-deep); }

/* ---------- Buttons: blue primary, 6px geometry ---------- */
.btn, button.btn, a.btn, input[type="submit"].btn { border-radius: 6px; }
.btn-primary, a.btn-primary, button.btn-primary,
.btn-teal, a.btn-teal, button.btn-teal {
  background: var(--xo-blue);
  border-color: var(--xo-blue);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover,
.btn-teal:hover, a.btn-teal:hover, button.btn-teal:hover {
  background: var(--xo-blue-dark);
  border-color: var(--xo-blue-dark);
  color: #fff;
}
.btn-sm { border-radius: 6px; }
.btn-lg { border-radius: 8px; }
/* Secondary buttons: white, dark text, light border (already the base .btn) */
.btn:hover { border-color: #c9d2dd; }

/* ---------- Back buttons: keep polish-pass design, blue hover fill ---------- */
.back-link:hover .back-arrow,
.admin-back:hover .back-arrow,
.supplier-back:hover .back-arrow,
.buyer-back:hover .back-arrow {
  background: var(--xo-blue);
  border-color: var(--xo-blue);
  color: #fff;
}
.back-link:focus-visible,
.admin-back:focus-visible,
.supplier-back:focus-visible,
.buyer-back:focus-visible {
  outline: 2px solid var(--xo-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.back-link, .admin-back, .supplier-back, .buyer-back { color: var(--xo-body); }
.back-link:hover, .admin-back:hover, .supplier-back:hover, .buyer-back:hover { color: var(--xo-heading); }

/* ---------- Cards: 12px radius, light border, soft shadow ---------- */
.card, .pm-card, .form-card, .product-card, .supplier-card, .rfq-card, .auth-card {
  border-radius: 12px;
  border: 1px solid var(--xo-line);
  box-shadow: var(--shadow-sm);
}
a.card:hover, a.pm-card:hover, .product-card:hover, .supplier-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #d4dce6;
}
.table, table.table { border-radius: 12px; border: 1px solid var(--xo-line); }

/* ---------- Forms: blue focus ring ---------- */
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus {
  border-color: var(--xo-blue);
  box-shadow: 0 0 0 3px rgba(27, 115, 232, .14);
  outline: none;
}
.form-ok { background: var(--xo-chip); border-color: #c9dbF5; color: var(--xo-blue-deep); }
input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color: var(--xo-blue); }

/* ---------- Badges & chips: blue wash family ---------- */
.badge-verified { background: var(--xo-chip); color: var(--xo-blue-deep); border: 1px solid #c9dbf5; }
/* Circular icon chips: light-blue wash, blue glyph */
.icon-chip, .feat-chip, .svc-icon, .cat-ic,
.pm-ic, .step-ic {
  background: var(--xo-chip);
  color: var(--xo-blue);
  border-radius: 50%;
}

/* ---------- Footer: deep navy ---------- */
.site-footer, .pm-footer {
  background: var(--xo-navy);
  border-top: 3px solid var(--xo-royal);
  color: #aeb9c7;
}
.site-footer a, .pm-footer a,
.site-footer a.f, .pm-footer a.f { color: #aeb9c7; }
.site-footer a:hover, .pm-footer a:hover,
.site-footer a.f:hover, .pm-footer a.f:hover { color: #ffffff; }
.site-footer h4, .pm-footer h4 { color: #ffffff; }
.site-footer .muted, .pm-footer .muted,
.pm-foot-bottom, .pm-foot-bottom a { color: #8b98ab; }
.pm-foot-bottom a:hover { color: #ffffff; }

/* ---------- Section rhythm: white / light-grey bands ---------- */
.section-alt, .band-grey, .bg-grey { background: var(--xo-grey-bg); }
.table thead th { background: var(--xo-grey-bg); color: var(--xo-body); }

/* ---------- Misc Xometry touches ---------- */
::selection { background: rgba(27, 115, 232, .18); }
/* Hero headline accent: blue shimmer (beats style.css .cb-cine h1 em teal on specificity) */
.cb-cine h1 em.fx-shine {
  background: linear-gradient(110deg, #0064E0 20%, #0053b3 40%, #0064E0 60%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shine 5s linear infinite;
}
/* GeoIP first-visit confirmation modal ("shop like a local").
   Large centered confirmation on first paint, once per session, 30-day
   dismissal; crawlers never see it (app.js skips bots). Xometry blue primary,
   clean white card, subtle fade/slide-in only — no 3D. */
.geo-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:20px;animation:geoFade .22s ease-out}
.geo-modal-backdrop{position:absolute;inset:0;background:rgba(11,36,71,.55)}
.geo-modal-card{position:relative;background:#fff;border-radius:20px;max-width:520px;width:100%;
  padding:40px 36px 32px;text-align:center;box-shadow:0 24px 64px rgba(11,36,71,.28);
  animation:geoPop .25s ease-out;
  font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.geo-modal-x{position:absolute;top:10px;right:10px;background:transparent;border:0;color:#8A97A5;
  font-size:18px;cursor:pointer;width:44px;height:44px;border-radius:50%;line-height:1;padding:0}
.geo-modal-x:hover{background:#F1F3F6;color:#0A1317}
.geo-modal-x-form{margin:0}
.geo-modal-icon{font-size:52px;line-height:1;margin-bottom:14px}
.geo-modal-title{font-family:"DM Sans","Manrope",-apple-system,"Segoe UI",sans-serif;
  font-size:28px;font-weight:700;color:#0A1317;margin:0 0 8px;line-height:1.25}
.geo-modal-sub{color:#5C6B7A;font-size:15px;margin:0 0 22px}
.geo-modal-picks{display:flex;gap:12px;justify-content:center;margin:0 0 24px;flex-wrap:wrap}
.geo-modal-pick{background:#E8F0FE;border:1px solid #D2E3FC;border-radius:12px;padding:10px 20px;
  display:flex;flex-direction:column;gap:2px;min-width:120px}
.geo-modal-pick strong{color:#0A1317;font-size:17px}
.geo-modal-pick span{color:#5C6B7A;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.geo-modal-form{margin:0}
.geo-modal-primary{display:block;width:100%;background:#0064E0;color:#fff;border:0;border-radius:12px;
  padding:16px;font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;min-height:56px;margin-bottom:12px}
.geo-modal-primary:hover{background:#1765CC}
.geo-modal-secondary{display:block;width:100%;background:#fff;color:#0A1317;border:1.5px solid #DADCE0;
  border-radius:12px;padding:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;min-height:52px}
.geo-modal-secondary:hover{background:#F8FAFD;border-color:#0064E0}
body.geo-modal-open{overflow:hidden}
@keyframes geoFade{from{opacity:0}to{opacity:1}}
@keyframes geoPop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .geo-modal{padding:16px}
  .geo-modal-card{padding:32px 22px 26px}
  .geo-modal-title{font-size:23px}
  .geo-modal-pick{min-width:100px}
}
/* Country flag badge (seller origin) — flag + name, better than a bare flag. */
.cf-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.cf-flag{border-radius:4px;box-shadow:0 0 0 1px rgba(11,36,71,.12);object-fit:cover;flex:none}
.cf-name{font-size:12px;color:#5C6B7A;font-family:'Manrope',system-ui,sans-serif;white-space:nowrap}
.cb-cine h1 em.fx-shine {
  background: linear-gradient(110deg, #0064E0 20%, #0053b3 40%, #0064E0 60%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shine 5s linear infinite;
}
/* Progress / accent bars that used teal now read blue via token remap */
.fx-progress { background: var(--xo-blue); }
/* Keep danger semantics red */
.btn-danger, a.btn-danger { background: #fff; border-color: #e5c4c0; color: #b3261e; }
.btn-danger:hover { background: #fdf3f2; border-color: #b3261e; color: #b3261e; }

/* ---------- Mobile: theme holds at 390px ---------- */
@media (max-width: 480px) {
  .btn, button.btn, a.btn { min-height: 44px; }
}

/* ---------- Country dropdown (searchable, flags) — 2026-10-06 ----------
   Replaces every free-text country input. Xometry blue, no 3D. */
.cselect { position: relative; display: block; }
.cselect-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; font: inherit; color: inherit; text-align: left;
  background: #fff; border: 1px solid #d8dee9; border-radius: 10px; cursor: pointer;
}
.cselect-btn:hover { border-color: #0064E0; }
.cselect-btn:focus-visible { outline: 2px solid #0064E0; outline-offset: 1px; }
.cselect-btn [data-cselect-flag] { display: inline-flex; width: 22px; justify-content: center; }
.cselect-btn [data-cselect-flag] img { border-radius: 2px; border: 1px solid #e3e7ee; display: block; }
.cselect-btn [data-cselect-label] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-caret { color: #8a94a6; font-size: 12px; }
.cselect-drop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #d8dee9; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 36, 71, 0.14); overflow: hidden;
}
.cselect-search {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 0; border-bottom: 1px solid #edf0f5; outline: none;
}
.cselect-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.cselect-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
.cselect-opt img { border-radius: 2px; border: 1px solid #e3e7ee; }
.cselect-opt:hover, .cselect-opt[aria-selected="true"] { background: #eaf2fe; }

/* ---------- Social sign-up buttons — 2026-10-06 ---------- */
.auth-social { margin-top: 18px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: #8a94a6; font-size: 13px; margin-bottom: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #e6eaf1; }
.auth-social-btns { display: flex; flex-direction: column; gap: 8px; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid #d8dee9; border-radius: 10px;
  padding: 10px 12px; font-weight: 600; font-size: 14px; color: #1b2340; text-decoration: none;
}
.btn-social:hover { border-color: #0064E0; background: #f7faff; }
.btn-social[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }