/*
 * COD Shield for WooCommerce — storefront order form. Scoped under .cs-root, plus the
 * product-page button (.cod-shield-buy-now) and the dedicated COD page host (#cod-shield-page).
 *
 * A neutral ink system: 4px grid, 8px controls, 12px cards, separation by border. The only
 * saturated colour is the merchant's accent (form.accent_color) and the status tones.
 */
.cs-root {
  --cs-accent: #303030;
  --cs-on-accent: #ffffff;
  --cs-accent-hover: color-mix(in srgb, var(--cs-accent) 86%, #000);
  --cs-accent-soft: color-mix(in srgb, var(--cs-accent) 7%, #fff);
  --cs-accent-ring: color-mix(in srgb, var(--cs-accent) 18%, transparent);

  --cs-text: #303030;
  --cs-muted: #616161;
  --cs-subtle: #8a8a8a;
  --cs-border: #e3e3e3;
  --cs-border-input: #d4d4d4;
  --cs-border-hover: #b5b5b5;
  --cs-surface: #ffffff;
  --cs-bg: #f1f1f1;
  --cs-recessed: #f7f7f7;
  --cs-focus: #005bd3;

  --cs-critical: #8e0b21;
  --cs-critical-fill: #c70a24;
  --cs-critical-bg: #fee8eb;
  --cs-critical-border: #fec1c7;
  --cs-success: #014b40;
  --cs-success-fill: #047b5d;
  --cs-success-bg: #cdfed4;
  --cs-caution: #5e4200;

  --cs-radius-sm: 8px;
  --cs-radius: 12px;
  --cs-radius-lg: 16px;
  --cs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* The device's own UI font, never the theme's — a serif or display face on a checkout form
     hurts legibility, and this is the same system stack the admin falls back to. */
  --cs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Bengali", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  position: fixed;
  inset: 0;
  /* The literal CSS z-index ceiling — some third-party cart/upsell widgets stack at this
     value too, so anything lower can still lose. This modal must always win. */
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: var(--cs-font);
  font-size: 14px;
  color: var(--cs-text);
  line-height: 1.45;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
.cs-root[hidden] { display: none !important; }
.cs-root *, .cs-root *::before, .cs-root *::after { box-sizing: border-box; }
/* Themes style bare headings, paragraphs and buttons globally; start from a known floor. */
.cs-root :where(h2, h3, p, ol, li, button, summary) { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; }
.cs-root :where(h2, h3) { font-family: inherit; }
.cs-root svg { display: block; flex: none; }

.cs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- backdrop */

/* The backdrop is an empty div, and some themes ship
   `div:empty { display: none }` — so its visibility can't be left to the cascade. */
.cs-root > .cs-overlay {
  display: block !important;
  visibility: visible !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  background: rgba(20, 20, 20, 0.52);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: cs-fade-in 0.22s ease-out both;
  cursor: pointer;
}
.cs-root.cs-closing .cs-overlay { animation: cs-fade-out 0.2s ease-in both; }

/* ---------------------------------------------------------------- dialog frame */

.cs-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  background: var(--cs-surface);
  border-radius: var(--cs-radius-lg);
  box-shadow:
    0 0 0 1px rgba(26, 26, 26, 0.06),
    0 24px 48px -12px rgba(26, 26, 26, 0.35),
    0 8px 16px -8px rgba(26, 26, 26, 0.2);
  outline: none;
  animation: cs-pop 0.26s var(--cs-ease) both;
}
.cs-root.cs-closing .cs-dialog { animation: cs-pop-out 0.18s ease-in both; }
.cs-dialog--center { max-width: 440px; }

.cs-head {
  flex: none;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: start;
  gap: 8px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-surface);
}
.cs-head-copy { min-width: 0; padding-top: 5px; text-align: center; }
.cs-head--bare { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; border: 0; background: transparent; pointer-events: none; }
.cs-head--bare > * { pointer-events: auto; }
.cs-head-spacer { display: block; width: 36px; height: 36px; }

.cs-icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cs-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.cs-icon-btn:hover { background: var(--cs-recessed); color: var(--cs-text); }
.cs-icon-btn:active { background: var(--cs-border); }

.cs-title { font-size: 18px; font-weight: 650; line-height: 1.3; color: var(--cs-text); }
.cs-subtitle { margin-top: 2px; font-size: 13px; color: var(--cs-muted); }
.cs-subtitle strong { color: var(--cs-text); font-weight: 650; white-space: nowrap; }

.cs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
  scroll-padding-block: 16px;
}
.cs-dialog--center .cs-body { padding-top: 44px; }

.cs-foot {
  flex: none;
  display: grid;
  gap: 10px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface);
}
.cs-foot-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cs-muted);
  text-align: center;
}

/* Phones: a bottom sheet with a grab handle, thumb-reach for the primary button. */
@media (max-width: 560px) {
  .cs-root { align-items: flex-end; padding: 0; }
  .cs-dialog:not(.cs-wide) {
    max-width: none;
    max-height: calc(100dvh - 24px);
    border-radius: 20px 20px 0 0;
    animation-name: cs-sheet;
  }
  .cs-root.cs-closing .cs-dialog:not(.cs-wide) { animation: cs-sheet-out 0.2s ease-in both; }
  .cs-dialog:not(.cs-wide)::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 3;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 999px;
    background: var(--cs-border);
  }
  .cs-head { padding-top: 18px; }
  .cs-body { padding: 16px; }
  .cs-foot { padding-inline: 16px; }
}

@keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cs-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes cs-pop-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes cs-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cs-sheet-out { from { transform: none; } to { transform: translateY(100%); } }

/* ---------------------------------------------------------------- payment choice */

.cs-choices { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.cs-choice, .cs-payment-cod {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  color: inherit;
  font: inherit;
  text-align: left;
}
.cs-choice {
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cs-choice:hover { border-color: var(--cs-border-hover); background: var(--cs-recessed); }
.cs-choice:active { transform: scale(0.99); }
.cs-choice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
}
.cs-choice-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cs-choice-copy strong { font-size: 15px; font-weight: 650; color: var(--cs-text); }
.cs-choice-copy span { font-size: 13px; color: var(--cs-muted); }
.cs-choice-arrow { color: var(--cs-subtle); transition: transform 0.15s, color 0.15s; }
.cs-choice:hover .cs-choice-arrow { color: var(--cs-text); transform: translateX(2px); }
.cs-choice-total { font-variant-numeric: tabular-nums; min-height: 1.45em; }

.cs-payment-cod { border-color: var(--cs-accent); background: var(--cs-accent-soft); box-shadow: inset 0 0 0 1px var(--cs-accent); }
.cs-payment-cod .cs-choice-icon { background: var(--cs-surface); }
.cs-payment-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--cs-accent);
  color: var(--cs-on-accent);
}

/* ---------------------------------------------------------------- form */

.cs-form { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.cs-section { display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.cs-section[hidden] { display: none; }
.cs-section-title { font-size: 14px; font-weight: 650; color: var(--cs-text); }
.cs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-row > *, .cs-form > *, .cs-section > * { min-width: 0; }
.cs-row--single { grid-template-columns: minmax(0, 1fr); }
.cs-row[hidden] { display: none; }
@media (max-width: 400px) { .cs-row { grid-template-columns: minmax(0, 1fr); } }

.cs-field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; }
.cs-field[hidden] { display: none; }
.cs-field label { font-size: 13px; font-weight: 550; color: var(--cs-text); }
.cs-field label .cs-opt { font-weight: 450; color: var(--cs-subtle); }

.cs-root .cs-input {
  display: block;
  float: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--cs-border-input);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
  line-height: 1.4;
  color: var(--cs-text);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-root .cs-input::placeholder { color: var(--cs-subtle); opacity: 1; }
.cs-root .cs-input:hover { border-color: var(--cs-border-hover); }
.cs-root .cs-input:focus { outline: none; border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-accent-ring); }
.cs-root .cs-input[hidden] { display: none; }
.cs-root textarea.cs-input { min-height: 68px; resize: vertical; }
.cs-root select.cs-input {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.cs-root .cs-input.cs-invalid, .cs-root .cs-location-inputs.cs-invalid .cs-input:not([hidden]) {
  border-color: var(--cs-critical-fill);
  box-shadow: 0 0 0 3px rgba(199, 10, 36, 0.1);
}
.cs-location-inputs { display: block; }

/* Country code and number read as one control. */
.cs-phone-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--cs-border-input);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-phone-group:hover { border-color: var(--cs-border-hover); }
.cs-phone-group:focus-within { border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-accent-ring); }
.cs-phone-group:has(.cs-invalid) { border-color: var(--cs-critical-fill); box-shadow: 0 0 0 3px rgba(199, 10, 36, 0.1); }
.cs-phone-group:has(.cs-valid) { border-color: var(--cs-success-fill); }
.cs-root .cs-phone-group .cs-input { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cs-root .cs-phone-group .cs-input:focus { box-shadow: none; }
.cs-root .cs-phone-group .cs-country-code { flex: none; width: 76px; text-align: center; font-variant-numeric: tabular-nums; border-radius: var(--cs-radius-sm) 0 0 var(--cs-radius-sm); }
.cs-root .cs-phone-group .cs-input:last-child { flex: 1; min-width: 0; border-radius: 0 var(--cs-radius-sm) var(--cs-radius-sm) 0; }
.cs-phone-divider { width: 1px; margin-block: 10px; background: var(--cs-border); }

.cs-hint { min-height: 0; font-size: 12px; color: var(--cs-muted); }
.cs-hint:empty { display: none; }
.cs-hint.cs-warn { color: var(--cs-caution); }
.cs-hint.cs-ok { color: var(--cs-success); }
.cs-hint.cs-ok::before { content: "✓ "; font-weight: 700; }
.cs-field-error { font-size: 12px; color: var(--cs-critical); }
.cs-field-error[hidden] { display: none; }

/* Autofill detection hook (CartShield listened for this but never defined it). */
.cs-root input:-webkit-autofill { animation-name: cs-autofill; animation-duration: 1ms; }
@keyframes cs-autofill { from { opacity: 1; } to { opacity: 1; } }

.cs-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Delivery method */
.cs-shipping { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.cs-radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.cs-radio-card:hover { border-color: var(--cs-border-hover); }
.cs-radio-card:has(.cs-radio:checked), .cs-radio-card--single {
  border-color: var(--cs-accent);
  background: var(--cs-accent-soft);
  box-shadow: inset 0 0 0 1px var(--cs-accent);
}
.cs-radio-card--single { cursor: default; }
.cs-root .cs-radio {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--cs-border-hover);
  border-radius: 999px;
  background: var(--cs-surface);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cs-root .cs-radio::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--cs-on-accent); transform: scale(0); transition: transform 0.15s var(--cs-ease); }
.cs-root .cs-radio:checked { border-color: var(--cs-accent); background: var(--cs-accent); }
.cs-root .cs-radio:checked::before { transform: scale(1); }
.cs-radio:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-radio-icon { color: var(--cs-accent); }
.cs-radio-title { flex: 1; min-width: 0; font-weight: 550; }
.cs-price { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- order summary */

.cs-disclosure {
  margin-bottom: 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-recessed);
  overflow: hidden;
}
.cs-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cs-disclosure > summary::-webkit-details-marker { display: none; }
.cs-disclosure > summary::marker { content: ""; }
.cs-disclosure-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 550; color: var(--cs-text); }
.cs-disclosure-icon { color: var(--cs-muted); }
.cs-disclosure-count { color: var(--cs-muted); font-weight: 450; font-variant-numeric: tabular-nums; }
.cs-disclosure-chevron { color: var(--cs-muted); transition: transform 0.2s var(--cs-ease); }
.cs-disclosure[open] .cs-disclosure-chevron { transform: rotate(180deg); }
.cs-disclosure-total { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-disclosure > .cs-summary { padding: 4px 14px 14px; border-top: 1px solid var(--cs-border); }
.cs-disclosure--recap { margin: 20px 0 0; }

.cs-summary { font-size: 14px; transition: opacity 0.15s; }
.cs-summary.cs-updating { opacity: 0.5; pointer-events: none; }
.cs-lines { display: grid; gap: 4px; padding-top: 10px; grid-template-columns: minmax(0, 1fr); }
.cs-line { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.cs-line-thumb { position: relative; flex: none; width: 48px; height: 48px; }
.cs-line-thumb img, .cs-line-thumb-empty {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-subtle);
}
.cs-line-qty-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--cs-recessed);
  border-radius: 999px;
  background: var(--cs-muted);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cs-line-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cs-line-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.cs-line-variant { font-size: 12px; color: var(--cs-muted); }
.cs-line-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-totals { display: grid; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--cs-border); }
.cs-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.cs-total-row > span:last-child { color: var(--cs-text); }
.cs-total-discount > span:last-child { color: var(--cs-success); }
.cs-total-row.cs-grand { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--cs-border); color: var(--cs-text); font-size: 16px; font-weight: 650; }
.cs-grand small { display: block; font-size: 12px; font-weight: 450; color: var(--cs-muted); }
.cs-grand > span:last-child { font-size: 18px; }
.cs-summary-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; color: var(--cs-muted); }

/* Skeletons — the same shimmer the admin uses while its pages load. */
.cs-skeleton {
  display: block;
  flex: none;
  border-radius: 4px;
  background: linear-gradient(100deg, #ececec 40%, #f6f6f6 50%, #ececec 60%);
  background-size: 250% 100%;
  animation: cs-shimmer 1.6s ease-in-out infinite;
}
.cs-skeleton-thumb { width: 48px; height: 48px; border-radius: var(--cs-radius-sm); }
.cs-skeleton-text { height: 10px; width: 70%; margin-block: 3px; }
.cs-skeleton-short { width: 40%; }
.cs-skeleton-price { width: 56px; height: 12px; }
.cs-skeleton-inline { display: inline-block; width: 72px; height: 12px; vertical-align: middle; }
@keyframes cs-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------------------------------------------------------------- buttons & alerts */

.cs-root .cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 50px;
  margin: 0;
  padding: 12px 20px;
  text-transform: none;
  letter-spacing: normal;
  border: 0;
  border-radius: var(--cs-radius);
  background: var(--cs-accent);
  color: var(--cs-on-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background-color 0.15s, transform 0.1s, opacity 0.15s;
}
.cs-root .cs-btn:hover { background: var(--cs-accent-hover); }
.cs-root .cs-btn:active { transform: scale(0.99); }
.cs-root .cs-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.cs-root .cs-btn.cs-btn--busy[disabled] { opacity: 0.85; cursor: progress; }
.cs-btn-total { font-variant-numeric: tabular-nums; }
.cs-btn-total::before { content: "·"; margin-right: 8px; opacity: 0.6; }
.cs-root .cs-btn--secondary { background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border-input); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); }
.cs-root .cs-btn--secondary:hover { background: var(--cs-recessed); }

.cs-btn-link {
  min-height: 32px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--cs-text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: var(--cs-border-hover);
  text-underline-offset: 3px;
  cursor: pointer;
}
.cs-btn-link:hover { text-decoration-color: currentColor; }
.cs-btn-link[disabled] { color: var(--cs-subtle); cursor: default; text-decoration: none; }

.cs-root :is(button, a, input, select, textarea, summary):focus-visible,
.cs-dialog:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-root .cs-input:focus-visible { outline: none; }

.cs-spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0.9; animation: cs-spin 0.7s linear infinite; }
.cs-spinner.cs-dark { width: 24px; height: 24px; margin: 20px auto 4px; color: var(--cs-subtle); }
@keyframes cs-spin { to { transform: rotate(360deg); } }

.cs-alert {
  padding: 10px 12px;
  border: 1px solid var(--cs-critical-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-critical-bg);
  color: var(--cs-critical);
  font-size: 13px;
}
.cs-alert[hidden] { display: none; }

/* ---------------------------------------------------------------- centred screens */

.cs-center { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cs-center .cs-subtitle { max-width: 34ch; margin-top: 0; font-size: 14px; }
.cs-icon-top {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
}
.cs-icon-top.cs-danger { background: var(--cs-critical-bg); color: var(--cs-critical-fill); }
.cs-icon-top.cs-caution { background: #fff1d6; color: #b35f00; }
.cs-icon-top.cs-success {
  background: var(--cs-success-bg);
  color: var(--cs-success-fill);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--cs-success-bg) 45%, transparent);
  animation: cs-pop-in 0.45s var(--cs-ease) both;
}
@keyframes cs-pop-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

/* What happens next — a short vertical timeline in the admin's timeline idiom. */
.cs-steps { display: grid; margin: 24px 0 0; padding: 16px; list-style: none; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-recessed); }
.cs-step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.cs-step:last-child { padding-bottom: 0; }
.cs-step:not(:last-child)::before { content: ""; position: absolute; top: 22px; bottom: 2px; left: 9px; width: 2px; border-radius: 2px; background: var(--cs-border); }
.cs-step.is-done:not(:last-child)::before { background: var(--cs-success-fill); }
.cs-step-dot { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--cs-border-hover); border-radius: 999px; background: var(--cs-surface); color: #fff; }
.cs-step.is-done .cs-step-dot { border-color: var(--cs-success-fill); background: var(--cs-success-fill); }
.cs-step.is-current .cs-step-dot { border-color: var(--cs-accent); box-shadow: inset 0 0 0 3px var(--cs-surface), inset 0 0 0 10px var(--cs-accent); }
.cs-step-copy { display: grid; gap: 2px; padding-top: 1px; }
.cs-step-copy strong { font-size: 14px; font-weight: 650; }
.cs-step-copy span { font-size: 13px; color: var(--cs-muted); }
.cs-step.is-todo .cs-step-copy strong { color: var(--cs-muted); }

/* OTP: one input drawn as digit boxes */
.cs-otp-form { display: grid; gap: 12px; margin-top: 24px; }
.cs-otp { position: relative; width: min(100%, calc(var(--cs-otp-len, 6) * 52px)); margin: 0 auto; }
.cs-otp-boxes { display: grid; grid-template-columns: repeat(var(--cs-otp-len, 6), minmax(0, 1fr)); gap: 8px; }
.cs-otp-box {
  display: grid;
  place-items: center;
  height: 54px;
  border: 1px solid var(--cs-border-input);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-otp-box.is-filled { border-color: var(--cs-border-hover); }
.cs-otp-box.is-active { border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-accent-ring); }
.cs-otp-box.is-active:empty::after { content: ""; width: 2px; height: 22px; background: var(--cs-accent); animation: cs-caret 1s steps(1) infinite; }
.cs-otp.is-error .cs-otp-box { border-color: var(--cs-critical-fill); }
.cs-otp.is-error { animation: cs-shake 0.35s ease; }
.cs-root .cs-otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  letter-spacing: 40px;
  opacity: 0.01;
  cursor: text;
}
.cs-root .cs-otp-input:focus-visible { outline: none; }
.cs-otp-meta { display: grid; justify-items: center; gap: 2px; margin-top: 16px; font-size: 13px; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.cs-otp-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--cs-subtle); }
.cs-otp-links .cs-btn-link { white-space: nowrap; }
@keyframes cs-caret { 50% { opacity: 0; } }
@keyframes cs-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.cs-captcha-widget { display: flex; justify-content: center; min-height: 72px; margin: 20px 0 12px; }
.cs-captcha-widget[hidden] { display: none; }
.cs-dialog--center .cs-alert { margin-top: 12px; text-align: center; }

/* Block / contact */
.cs-contact { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cs-border); text-align: center; }
.cs-contact-label { font-size: 13px; color: var(--cs-muted); }
.cs-contact-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cs-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--cs-border-input);
  border-radius: 999px;
  background: var(--cs-surface);
  color: var(--cs-text) !important;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none !important;
  transition: background-color 0.15s, border-color 0.15s;
}
.cs-contact-btn:hover { background: var(--cs-recessed); border-color: var(--cs-border-hover); }
.cs-contact-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cs-accent); }
.cs-wa .cs-contact-dot { background: #25d366; }
.cs-messenger .cs-contact-dot { background: #0a7cff; }
.cs-telegram .cs-contact-dot { background: #229ed9; }

/* ---------------------------------------------------------------- dedicated COD page */

/*
 * form.checkout_flow = page: the form is part of a theme page (#cod-shield-page), not a popup.
 * The same screens render in the page flow: no backdrop, no fixed positioning, no inner scroll.
 */
#cod-shield-page { min-height: 50vh; }
.cs-page-loading { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 40vh; margin: 0; color: #616161; font-size: 14px; }
.cs-page-loading::before { content: ""; width: 24px; height: 24px; border: 2px solid #8a8a8a; border-right-color: transparent; border-radius: 50%; animation: cs-spin 0.7s linear infinite; }

.cs-root.cs-root--inline {
  position: static;
  z-index: auto;
  display: block;
  padding: 24px 0 48px;
}
.cs-root--inline > .cs-overlay { display: none !important; }
.cs-root--inline .cs-dialog {
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  border: 1px solid var(--cs-border);
  box-shadow: none;
  animation: cs-fade-in 0.2s ease-out both;
}
.cs-root--inline .cs-dialog::before { display: none; }
.cs-root--inline .cs-dialog:not(.cs-wide) { max-width: 480px; max-height: none; border-radius: var(--cs-radius-lg); animation-name: cs-fade-in; }
.cs-root--inline .cs-body { overflow: visible; }
.cs-root--inline .cs-foot { border-radius: 0 0 var(--cs-radius-lg) var(--cs-radius-lg); }

/* The form itself: two columns, the order summary beside the fields. */
.cs-root--inline .cs-dialog.cs-wide {
  max-width: 1080px;
  border-radius: var(--cs-radius-lg);
  background: var(--cs-surface);
  overflow: hidden;
}
.cs-page { flex: 1; min-height: 0; }

.cs-proxy-secure { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--cs-muted); }

.cs-proxy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.cs-proxy-main { padding: 32px 40px 48px; }
.cs-proxy-main > .cs-proxy-inner { max-width: 560px; margin-left: auto; }
.cs-proxy-aside { padding: 32px 40px; border-left: 1px solid var(--cs-border); background: var(--cs-recessed); }
.cs-proxy-aside > .cs-proxy-inner { position: sticky; top: 32px; max-width: 420px; }
.cs-proxy-intro { margin-bottom: 24px; }
.cs-proxy-title { font-size: 22px; font-weight: 700; line-height: 1.25; }

/* Desktop: the summary is a fixed panel, not a toggle. */
.cs-proxy-aside .cs-disclosure { margin: 0; border: 0; background: transparent; overflow: visible; }
.cs-proxy-aside .cs-disclosure > summary { padding: 0 0 12px; pointer-events: none; }
.cs-proxy-aside .cs-disclosure-chevron { display: none; }
.cs-proxy-aside .cs-disclosure > .cs-summary { padding: 0; border-top: 0; }
.cs-proxy-aside .cs-line-qty-badge { border-color: var(--cs-recessed); }
.cs-root .cs-proxy-main .cs-btn { margin-top: 4px; min-height: 54px; font-size: 16px; }
.cs-return-link { display: inline-flex; align-items: center; justify-self: center; gap: 4px; min-height: 40px; color: var(--cs-muted); font-size: 14px; text-decoration: none; }
.cs-return-link:hover { color: var(--cs-text); }

@media (max-width: 860px) {
  .cs-root.cs-root--inline { padding: 0 0 32px; }
  .cs-root--inline .cs-dialog.cs-wide { border-left: 0; border-right: 0; border-radius: 0; }
  .cs-proxy-grid { grid-template-columns: 1fr; }
  .cs-proxy-main { padding: 24px 16px 40px; }
  .cs-proxy-main > .cs-proxy-inner { max-width: 560px; margin: 0 auto; }
  .cs-proxy-aside { order: -1; padding: 0; border-left: 0; border-bottom: 1px solid var(--cs-border); }
  .cs-proxy-aside > .cs-proxy-inner { position: static; max-width: 560px; margin: 0 auto; }
  .cs-proxy-aside .cs-disclosure > summary { padding: 14px 16px; pointer-events: auto; }
  .cs-proxy-aside .cs-disclosure-chevron { display: block; }
  .cs-proxy-aside .cs-disclosure > .cs-summary { padding: 0 16px 16px; }
}

/* ---------------------------------------------------------------- product-page button */

/*
 * "Order with Cash on Delivery", printed after the theme's add-to-cart button (and by the
 * [cod_shield_button] shortcode). It borrows the theme's own button classes; this only spaces it.
 */
.cod-shield-buy-now-wrap { clear: both; display: block; width: 100%; margin-top: 12px; }
.cod-shield-buy-now-wrap--inline { display: inline-block; width: auto; margin-top: 0; }
.cod-shield-buy-now { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.cod-shield-buy-now-wrap:not(.cod-shield-buy-now-wrap--inline) .cod-shield-buy-now { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cs-root *, .cs-root *::before, .cs-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}