/*
 * DrugsGeneral — quick-checkout-styles.css  v68.0
 * REDESIGNED: Unified checkout header, cleaner hierarchy.
 * UX improvements:
 *   - Consolidated nav+brand into single slim header bar
 *   - Trust bar remains at very top (full-width, green)
 *   - Removed redundant header layers (was: trust > nav > brand > steps = 4 layers)
 *   - Now: trust > unified header > steps = clean 3-layer max
 *   - Details screen same treatment: trust > unified header (with steps) > content
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  --co-navy:        #008296;
  --co-navy-deep:   #005F6B;
  --co-navy-mid:    #00A0B4;
  --co-teal:        #FFB800;
  --co-green:       #1A7A3C;
  --co-green-light: #DCFCE7;
  --co-green-mid:   #22A84F;
  --co-amber:       #E77600;
  --co-amber-bg:    #FFFBEB;
  --co-red:         #EF4444;
  --co-ink:         #1E293B;
  --co-slate:       #475569;
  --co-muted:       #94A3B8;
  --co-bg:          #F4F6FB;
  --co-white:       #FFFFFF;
  --co-border:      #E2E8F0;
  --co-border-mid:  #C7D2FE;
  --co-r-sm:        8px;
  --co-r-md:        12px;
  --co-r-lg:        16px;
  --co-shadow:      0 1px 4px rgba(0,0,0,.06);
  --co-font-h:      'Outfit', -apple-system, sans-serif;
  --co-font-b:      'Inter',  -apple-system, sans-serif;
}

/* ── Scoped reset ── */
#dgco-qc-root *, #dgco-qc-root *::before, #dgco-qc-root *::after {
  box-sizing: border-box;
}
#dgco-qc-root {
  font-family: var(--co-font-b);
  font-size: 14px;
  color: var(--co-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Page ── */
body.woocommerce-checkout { background: var(--co-bg) !important; }

/* ── Kill WC defaults ── */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout h1.page-title,
.woocommerce-checkout .page-title { display: none !important; }

/* ══════════════════════════════════════════════════
   TRUST BAR — full width top strip (green)
   Kept exactly as-is per design intent.
══════════════════════════════════════════════════ */
.dg-co-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--co-navy-deep);
  color: rgba(255,255,255,.82);
  font-family: var(--co-font-b);
  font-size: 11.5px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.dg-co-trust-bar > span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 9px 20px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.dg-co-trust-bar > span:last-child { border-right: none; }
.dg-co-trust-bar svg { color: #7DD3FC; flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   UNIFIED CHECKOUT HEADER BAR
   Replaces separate nav-bar + brand-row.
   Single bar: [Logo + Name] ··· [Nav links] ··· [Secure badge]
   Lives ABOVE the card, outside the card surface.
══════════════════════════════════════════════════ */
.dg-co-checkout-header {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--co-white);
  border-bottom: 1px solid var(--co-border);
  padding: 0 24px;
  min-height: 58px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* Brand mark + name — left side */
.dg-co-hdr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.dg-co-hdr-mark {
  width: 34px; height: 34px;
  background: var(--co-navy);
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--co-font-h);
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.dg-co-hdr-name {
  font-family: var(--co-font-h);
  font-size: 15px; font-weight: 800;
  color: var(--co-navy);
  line-height: 1;
}
.dg-co-hdr-sub {
  font-size: 9px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--co-muted); display: block; line-height: 1; margin-top: 2px;
}

/* Nav links — center */
.dg-co-hdr-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 0 16px;
}
.dg-co-hdr-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-slate);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.dg-co-hdr-nav-link:hover {
  background: var(--co-bg);
  color: var(--co-navy);
  text-decoration: none;
}
.dg-co-hdr-nav-link svg { flex-shrink: 0; opacity: .75; }

/* Divider between brand and nav */
.dg-co-hdr-divider {
  width: 1px;
  height: 28px;
  background: var(--co-border);
  flex-shrink: 0;
  margin: 0 12px;
}

/* Secure badge — right side */
.dg-co-hdr-secure {
  display: flex; align-items: center; gap: 6px;
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  color: var(--co-green);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.dg-co-hdr-secure svg { flex-shrink: 0; }

/* ── Legacy nav-bar (keep hidden — replaced by unified header) ── */
.dg-co-nav-bar { display: none !important; }

/* ── Legacy brand-row (keep hidden — replaced by unified header) ── */
.dg-co-brand-row { display: none !important; }

/* ══════════════════════════════════════════════════
   OUTER GRID
══════════════════════════════════════════════════ */
.dg-co-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 28px 24px 72px;
  align-items: start;
}
.dg-co-left  { min-width: 0; }
.dg-co-right { position: sticky; top: 24px; }

/* ══════════════════════════════════════════════════
   SHARED CARD SURFACE
══════════════════════════════════════════════════ */
.dg-co-card {
  background: var(--co-white);
  border: 1px solid var(--co-border);
  border-radius: var(--co-r-lg);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--co-shadow);
}

/* ══════════════════════════════════════════════════
   STEPS HEADER — full-width navy strip (details screen)
══════════════════════════════════════════════════ */
.dg-co-steps-hdr {
  background: var(--co-navy-deep);
  width: 100%;
  border-radius: var(--co-r-lg) var(--co-r-lg) 0 0;
}
.dg-co-steps-hdr-inner {
  display: flex;
  align-items: stretch;
  position: relative;
}
.dg-co-steps-hdr-inner::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.12);
  transform: translateY(-50%);
  z-index: 0;
}
.dg-co-steps-hdr-inner::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 60%;
  height: 2px;
  background: rgba(255,255,255,.4);
  transform: translateY(-50%);
  z-index: 1;
}

.dg-co-shdr-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 8px 16px;
  gap: 7px;
  position: relative;
  z-index: 2;
  cursor: default;
}
.dg-co-shdr-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--co-font-h);
  font-size: 13px; font-weight: 800;
  color: rgba(255,255,255,.4);
  transition: all .2s;
  flex-shrink: 0;
}
.dg-co-shdr-step.done .dg-co-shdr-dot {
  background: var(--co-green-mid);
  border-color: var(--co-green-mid);
  color: #fff;
}
.dg-co-shdr-step.active .dg-co-shdr-dot {
  background: var(--co-white);
  border-color: var(--co-white);
  color: var(--co-navy);
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
  font-size: 14px;
}
.dg-co-shdr-lbl {
  font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
}
.dg-co-shdr-step.done  .dg-co-shdr-lbl { color: rgba(255,255,255,.65); }
.dg-co-shdr-step.active .dg-co-shdr-lbl { color: #fff; font-weight: 700; }
.dg-co-shdr-step + .dg-co-shdr-step::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: rgba(255,255,255,.08);
}

/* META ROW — urgency + email chip */
.dg-co-details-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 14px;
  background: var(--co-white);
  border-bottom: 1px solid var(--co-border);
  flex-wrap: wrap;
  gap: 10px;
}
.dg-co-urgency {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--co-slate);
}
.dg-co-urgency svg { color: var(--co-amber); flex-shrink: 0; }
.dg-co-urgency strong {
  color: var(--co-navy);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.dg-co-email-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--co-navy);
  color: #fff;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px; font-weight: 600;
}
.dg-co-email-chip svg { opacity: .65; }

/* old progress / steps (email+otp+account screens) */
.dg-co-prog {
  height: 3px;
  background: var(--co-border);
  margin: 0;
}
.dg-co-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--co-navy), var(--co-teal));
  transition: width .4s ease;
}
.dg-co-steps {
  display: flex;
  align-items: flex-start;
  padding: 14px 24px;
  position: relative;
  border-bottom: 1px solid var(--co-border);
}
.dg-co-steps::before {
  content: '';
  position: absolute;
  top: 31px; left: 24px; right: 24px;
  height: 2px;
  background: var(--co-border);
  z-index: 0;
}
.dg-co-step {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  position: relative; z-index: 1;
}
.dg-co-step-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--co-border);
  background: var(--co-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--co-font-h);
  font-size: 12px; font-weight: 700;
  color: var(--co-muted);
  transition: all .2s;
}
.dg-co-step-lbl {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--co-muted);
  white-space: nowrap;
}
.dg-co-step.active .dg-co-step-dot {
  background: var(--co-navy); border-color: var(--co-navy); color: #fff;
  box-shadow: 0 0 0 4px rgba(26,43,107,.12);
}
.dg-co-step.active .dg-co-step-lbl { color: var(--co-navy); font-weight: 700; }
.dg-co-step.done .dg-co-step-dot  { background: var(--co-green); border-color: var(--co-green); color: #fff; }
.dg-co-step.done .dg-co-step-lbl  { color: var(--co-green); }

/* ══════════════════════════════════════════════════
   SCREEN BODY
══════════════════════════════════════════════════ */
.dg-co-screen-body { padding: 30px 26px; }
.dg-co-screen-title {
  font-family: var(--co-font-h);
  font-size: 22px; font-weight: 800;
  color: var(--co-ink); margin-bottom: 6px;
  letter-spacing: -.01em;
}
.dg-co-screen-sub {
  font-size: 14px; color: var(--co-slate); margin-bottom: 24px;
}
.dg-co-spam-hint {
  font-size: 12.5px; color: var(--co-muted); margin-top: 10px;
}

/* ══════════════════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════════════════ */
.dg-co-field { margin-bottom: 14px; }
.dg-co-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--co-slate); margin-bottom: 6px;
  letter-spacing: .02em;
}
.dg-co-inp {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--co-border);
  border-radius: var(--co-r-sm);
  font-family: var(--co-font-b);
  font-size: 14px;
  color: var(--co-ink);
  background: #FAFBFD;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none; -webkit-appearance: none;
}
.dg-co-inp:focus {
  border-color: var(--co-navy);
  box-shadow: 0 0 0 3px rgba(26,43,107,.09);
  background: var(--co-white);
}
.dg-co-inp.dg-co-pre-filled {
  background: #E0F5F1;
  border-color: var(--co-border-mid);
}
select.dg-co-inp { cursor: pointer; }
.dg-co-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dg-co-phone-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.dg-co-dial { font-size: 13px !important; }
.dg-co-err { font-size: 12px; color: var(--co-red); margin-top: 4px; display: none; }

/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.dg-co-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--co-teal);
  color: #0F1111;
  border: 1.5px solid #C8860A; border-radius: var(--co-r-md);
  font-family: var(--co-font-h);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s, opacity .15s;
  margin-top: 6px;
}
.dg-co-btn-primary:hover:not(:disabled) { background: #F0AC00; transform: translateY(-1px); }
.dg-co-btn-primary:disabled { opacity: .65; cursor: not-allowed; }

.dg-co-btn-place {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 18px 24px;
  background: #FFD814;
  color: #0F1111;
  border: 1.5px solid #C7A600; border-radius: var(--co-r-md);
  font-family: var(--co-font-h);
  font-size: 18px; font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
  box-shadow: 0 4px 18px rgba(255,216,20,.35);
}
.dg-co-btn-place:hover:not(:disabled) { background: #F7CA00; transform: translateY(-2px); }
.dg-co-btn-place:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.dg-co-link {
  background: none; border: none;
  color: var(--co-navy); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--co-font-b);
  padding: 0; text-decoration: underline;
  transition: color .15s;
}
.dg-co-link:hover { color: var(--co-teal); }
.dg-co-link:disabled { color: var(--co-muted); cursor: not-allowed; text-decoration: none; }
.dg-co-back { display: block; margin-top: 14px; text-align: center; }

.dg-co-btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff;
  padding: 12px 22px; border-radius: var(--co-r-md);
  font-family: var(--co-font-h); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: opacity .15s;
}
.dg-co-btn-wa:hover { opacity: .88; }
.dg-co-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--co-white); color: var(--co-navy);
  border: 2px solid var(--co-border-mid);
  padding: 11px 22px; border-radius: var(--co-r-md);
  font-family: var(--co-font-h); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: background .15s;
}
.dg-co-btn-ghost:hover { background: var(--co-bg); }

/* ══════════════════════════════════════════════════
   OTP
══════════════════════════════════════════════════ */
.dg-co-otp-row {
  display: flex; gap: 10px;
  justify-content: center;
  margin: 20px 0 14px;
}
.dg-co-otp-box {
  width: 52px; height: 58px;
  border: 2px solid var(--co-border);
  border-radius: var(--co-r-sm);
  font-family: var(--co-font-h);
  font-size: 24px; font-weight: 700;
  text-align: center; color: var(--co-ink);
  background: var(--co-white);
  outline: none;
  transition: border-color .15s, background .15s;
  -moz-appearance: textfield;
}
.dg-co-otp-box::-webkit-outer-spin-button,
.dg-co-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; }
.dg-co-otp-box:focus {
  border-color: var(--co-navy);
  box-shadow: 0 0 0 3px rgba(26,43,107,.1);
}
.dg-co-otp-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 12px;
}
.dg-co-otp-cd { font-size: 12.5px; color: var(--co-muted); }
.dg-co-resent {
  text-align: center; font-size: 13px;
  color: var(--co-green); font-weight: 600; margin-top: 6px;
}

/* ══════════════════════════════════════════════════
   TRUST ROW (email screen)
══════════════════════════════════════════════════ */
.dg-co-trust-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--co-border);
  font-size: 12px; color: var(--co-muted);
}
.dg-co-trust-row span { display: flex; align-items: center; gap: 5px; }
.dg-co-trust-row svg { color: var(--co-green); }

/* ══════════════════════════════════════════════════
   ACCOUNT SPLASH
══════════════════════════════════════════════════ */
.dg-co-account-splash { text-align: center; padding: 36px 24px; }
.dg-co-account-ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--co-green-light);
  border: 2px solid #86EFAC;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--co-green);
}
.dg-co-account-ring svg { width: 26px; height: 26px; stroke-width: 2.5; }
.dg-co-ac-badge {
  display: inline-block;
  padding: 6px 16px; border-radius: 50px;
  font-size: 12px; font-weight: 700;
  background: #E0F5F1; color: var(--co-navy);
  border: 1.5px solid var(--co-border-mid);
  margin: 10px 0 24px;
}

/* ══════════════════════════════════════════════════
   STEP CARDS
══════════════════════════════════════════════════ */
.dg-co-step-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--co-border);
}
.dg-co-step-icon {
  width: 38px; height: 38px;
  background: var(--co-bg);
  border-radius: var(--co-r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--co-navy);
  border: 1px solid var(--co-border);
}
.dg-co-step-title {
  font-family: var(--co-font-h);
  font-size: 15px; font-weight: 700;
  color: var(--co-ink);
}
.dg-co-step-meta {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--co-muted);
  background: var(--co-bg);
  padding: 3px 9px; border-radius: 50px;
  border: 1px solid var(--co-border);
  white-space: nowrap;
}
.dg-co-step-body { padding: 20px 22px; }

/* ══════════════════════════════════════════════════
   ADDRESS
══════════════════════════════════════════════════ */
.dg-co-addr-box {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  background: var(--co-bg);
  border: 1px solid var(--co-border);
  border-radius: var(--co-r-md);
  padding: 16px;
}
.dg-co-addr-name {
  font-family: var(--co-font-h);
  font-size: 14px; font-weight: 700;
  color: var(--co-ink); margin-bottom: 4px;
}
.dg-co-addr-lines,
.dg-co-addr-phone { font-size: 13px; color: var(--co-slate); line-height: 1.6; }
.dg-co-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  background: var(--co-white);
  border: 1.5px solid var(--co-border-mid);
  color: var(--co-navy);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--co-font-b);
  transition: background .15s;
}
.dg-co-edit-btn:hover { background: #E0F5F1; }

/* Save toggle */
.dg-co-save-row {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--co-bg);
  border: 1px solid var(--co-border);
  border-radius: var(--co-r-sm);
  margin-top: 4px;
  transition: background .15s;
  user-select: none;
}
.dg-co-save-row:hover { background: #E0F5F1; }
.dg-co-save-box {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--co-navy);
  border: 2px solid var(--co-navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.dg-co-save-row small { font-size: 12px; color: var(--co-muted); }
.dg-co-hint { font-size: 13px; color: var(--co-slate); margin-bottom: 12px; }

/* ══════════════════════════════════════════════════
   SHIPPING
══════════════════════════════════════════════════ */
.dg-co-ship-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 2px solid var(--co-border);
  border-radius: var(--co-r-md);
  cursor: pointer;
  background: var(--co-white);
  transition: border-color .15s, background .15s;
  margin-bottom: 10px;
}
.dg-co-ship-opt:hover { border-color: var(--co-border-mid); background: var(--co-bg); }
.dg-co-ship-opt.selected { border-color: var(--co-navy); background: #E0F5F1; }
.dg-co-ship-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--co-border);
  flex-shrink: 0; position: relative;
}
.dg-co-ship-opt.selected .dg-co-ship-radio {
  border-color: var(--co-navy);
  background: var(--co-navy);
  box-shadow: inset 0 0 0 3px var(--co-white);
}
.dg-co-ship-info { flex: 1; }
.dg-co-ship-info strong { font-size: 14px; font-weight: 700; color: var(--co-ink); display: block; }
.dg-co-ship-info small  { font-size: 12px; color: var(--co-slate); }
.dg-co-ship-price { font-family: var(--co-font-h); font-size: 15px; font-weight: 700; color: var(--co-ink); }

/* ══════════════════════════════════════════════════
   PAYMENT TABS
══════════════════════════════════════════════════ */
.dg-co-pay-tabs {
  display: flex;
  border: 1.5px solid var(--co-border);
  border-radius: var(--co-r-md);
  overflow: hidden;
  margin-bottom: 18px;
}
.dg-co-pay-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px;
  border: none;
  border-right: 1.5px solid var(--co-border);
  background: var(--co-white);
  color: var(--co-slate);
  font-family: var(--co-font-b);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dg-co-pay-tab:last-child { border-right: none; }
.dg-co-pay-tab:hover { background: var(--co-bg); color: var(--co-ink); }
.dg-co-pay-tab.active { background: var(--co-navy); color: #fff; }
.dg-co-pay-tab.active svg { stroke: #fff !important; }

/* ══════════════════════════════════════════════════
   PAYMENT AMOUNT BLOCK
══════════════════════════════════════════════════ */
.dg-co-amount-block {
  background: var(--co-navy-deep);
  border-radius: var(--co-r-md);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.dg-co-amount-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.dg-co-amount-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 6px;
}
.dg-co-amount-val {
  font-family: var(--co-font-h);
  font-size: 36px; font-weight: 800;
  color: #fff;
  letter-spacing: -.025em; line-height: 1;
}
.dg-co-amount-val-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dg-co-amt-copy { font-size: 11px; padding: 4px 10px; }
.dg-co-paypal-email-col { text-align: right; padding: 4px 0 4px 12px; }
.dg-co-paypal-email-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; }
.dg-co-paypal-email-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dg-co-paypal-addr { font-size: 15px; font-weight: 700; color: #fff; word-break: break-all; letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dg-co-copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--co-r-sm);
  font-family: var(--co-font-b);
  font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.dg-co-copy-btn:hover { background: rgba(255,255,255,.22); }
.dg-co-copy-btn.dg-co-copy-dark {
  background: #1A2B6B;
  border-color: #1A2B6B;
  color: #fff;
}
.dg-co-copy-btn.dg-co-copy-dark:hover { background: #243a8e; border-color: #243a8e; }
.dg-co-paypal-copy-btn { background: rgba(255,255,255,.95); color: var(--co-navy); border-color: rgba(255,255,255,.95); }
.dg-co-paypal-copy-btn:hover { background: #fff; }
.dg-co-paypal-note { font-size: 12.5px; color: rgba(255,255,255,.75); margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.dg-co-paypal-note strong { color: #fff; }

/* How to pay */
.dg-co-how-to { margin-top: 0; }
.dg-co-how-title {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--co-muted); margin-bottom: 12px;
}
.dg-co-how-list {
  padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: how; margin-bottom: 14px;
}
.dg-co-how-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; line-height: 1.55; color: var(--co-slate);
  counter-increment: how;
}
.dg-co-how-list li::before {
  content: counter(how);
  min-width: 24px; height: 24px;
  background: var(--co-navy); color: #fff;
  border-radius: 50%;
  font-family: var(--co-font-h);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-co-how-list strong { color: var(--co-ink); font-weight: 700; }

.dg-co-bank-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: 14px; background: var(--co-bg);
  border-radius: var(--co-r-sm); overflow: hidden;
}
.dg-co-bank-table tr:not(:last-child) td { border-bottom: 1px solid var(--co-border); }
.dg-co-bank-k { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--co-slate); width: 130px; }
.dg-co-bank-v { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--co-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dg-co-network-copy { font-size: 10px; padding: 2px 8px; }
.dg-co-bank-copy {
  background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.13);
  color: var(--co-ink); font-size: 11px; padding: 4px 9px; flex-shrink: 0;
}
.dg-co-bank-copy:hover { background: rgba(0,0,0,.1); }

.dg-co-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  background: var(--co-amber-bg);
  border: 1px solid #FDE68A;
  border-radius: var(--co-r-sm);
  font-size: 12.5px; color: #92400E;
}
.dg-co-warn svg { flex-shrink: 0; margin-top: 1px; color: var(--co-amber); }
.dg-co-warn strong { color: #B45309; }

/* ══════════════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════════════ */
.dg-co-upload-zone {
  display: block;
  border: 2px dashed var(--co-border-mid);
  border-radius: var(--co-r-md);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--co-bg);
  transition: border-color .2s, background .2s;
  position: relative;
}
.dg-co-upload-zone:hover { border-color: var(--co-navy); background: #E0F5F1; }
.dg-co-upload-zone.drag-over { border-color: var(--co-teal); background: #E0F5F1; border-style: solid; }
.dg-co-upload-zone.uploaded { border-color: var(--co-green); border-style: solid; background: var(--co-green-light); }
.dg-co-upload-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
  pointer-events: none;
}
.dg-co-upload-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--co-white);
  border: 1px solid var(--co-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--co-navy); margin-bottom: 2px;
  transition: background .2s, color .2s;
}
.dg-co-upload-zone:hover .dg-co-upload-icon { background: var(--co-navy); color: #fff; }
.dg-co-upload-zone.uploaded .dg-co-upload-icon { background: var(--co-green); color: #fff; border-color: var(--co-green); }
.dg-co-upload-label { font-size: 14px; font-weight: 600; color: var(--co-navy); display: block; }
.dg-co-upload-zone.uploaded .dg-co-upload-label { color: var(--co-green); }
.dg-co-upload-sub { font-size: 12px; color: var(--co-muted); }
.dg-co-spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(26,43,107,.15);
  border-top-color: var(--co-navy);
  border-radius: 50%;
  animation: co-spin .75s linear infinite;
}
@keyframes co-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   TERMS & DONE
══════════════════════════════════════════════════ */
.dg-co-terms-note {
  text-align: center;
  font-size: 11.5px; color: var(--co-muted); margin-top: 12px;
}
.dg-co-terms-note a { color: var(--co-navy); text-decoration: underline; }
.dg-co-done-card { text-align: center; padding: 40px 28px; }
.dg-co-done-ring {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--co-green-light);
  border: 2px solid #86EFAC;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: var(--co-green);
}
.dg-co-done-ring svg { width: 28px; height: 28px; stroke-width: 2.5; }
.dg-co-done-next { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ══════════════════════════════════════════════════
   ORDER SUMMARY SIDEBAR
══════════════════════════════════════════════════ */
.dg-co-summary-card {
  background: var(--co-white);
  border: 1px solid var(--co-border);
  border-radius: var(--co-r-lg);
  overflow: hidden;
  box-shadow: var(--co-shadow);
}
.dg-co-summary-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--co-border);
}
.dg-co-summary-title {
  font-family: var(--co-font-h);
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--co-ink);
}
.dg-co-summary-count {
  font-size: 11px; font-weight: 600; color: var(--co-muted);
  background: var(--co-bg); padding: 3px 9px;
  border-radius: 50px; border: 1px solid var(--co-border);
}
.dg-co-summary-items { padding: 8px 16px; border-bottom: 1px solid var(--co-border); }
.dg-co-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--co-border);
}
.dg-co-item:last-child { border-bottom: none; }
.dg-co-item-img {
  width: 52px; height: 52px;
  border-radius: var(--co-r-sm);
  background: var(--co-bg);
  border: 1px solid var(--co-border);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dg-co-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dg-co-item-info { flex: 1; min-width: 0; }
.dg-co-item-name {
  font-size: 13px; font-weight: 600; color: var(--co-ink);
  line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dg-co-item-qty { font-size: 11.5px; color: var(--co-muted); margin-top: 2px; }
.dg-co-item-price { font-family: var(--co-font-h); font-size: 14px; font-weight: 700; color: var(--co-ink); flex-shrink: 0; }
.dg-co-summary-totals { padding: 12px 16px; border-bottom: 1px solid var(--co-border); }
.dg-co-sum-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--co-slate); margin-bottom: 7px;
}
.dg-co-sum-row:last-child { margin-bottom: 0; }
.dg-co-sum-save {
  display: flex; align-items: center; gap: 6px;
  background: var(--co-green-light);
  border: 1px solid #A7F3D0;
  border-radius: var(--co-r-sm);
  padding: 8px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--co-green);
  margin-bottom: 10px;
}
.dg-co-sum-save svg { color: var(--co-green); }
.dg-co-save-amt { margin-left: auto; font-size: 14px; font-weight: 800; }

/* ── Coupon ── */
.dg-co-coupon-wrap { margin-top: 4px; }
.dg-co-coupon-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--co-green-light);
  border: 1px dashed #A7F3D0;
  border-radius: var(--co-r-sm);
  padding: 7px 10px;
  font-size: 12.5px; font-weight: 700; color: var(--co-green);
  margin-bottom: 6px;
}
.dg-co-coupon-chip svg { color: var(--co-green); flex-shrink: 0; }
.dg-co-coupon-chip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-co-coupon-remove {
  background: none; border: none; cursor: pointer;
  color: var(--co-green); font-size: 18px; line-height: 1;
  padding: 0 2px; font-weight: 700;
}
.dg-co-coupon-remove:hover { color: var(--co-red); }
.dg-co-coupon-toggle { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.dg-co-coupon-toggle svg { color: var(--co-navy); }
.dg-co-coupon-form { display: flex; gap: 8px; margin-top: 2px; }
.dg-co-coupon-input { flex: 1; padding: 9px 12px; font-size: 13px; }
.dg-co-coupon-apply-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border: 1.5px solid var(--co-navy);
  border-radius: var(--co-r-sm);
  background: var(--co-navy);
  color: #fff;
  font-family: var(--co-font-h);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.dg-co-coupon-apply-btn:hover:not(:disabled) { opacity: .88; }
.dg-co-coupon-apply-btn:disabled { opacity: .6; cursor: not-allowed; }
.dg-co-coupon-msg { margin-top: 6px; }
.dg-co-coupon-msg-ok { color: var(--co-green) !important; }

.dg-co-summary-total-block { padding: 16px 18px; border-bottom: 1px solid var(--co-border); }
.dg-co-sum-total-label {
  font-family: var(--co-font-h);
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--co-ink); margin-bottom: 4px;
}
.dg-co-sum-total-val {
  font-family: var(--co-font-h);
  font-size: 38px; font-weight: 800;
  color: var(--co-navy);
  letter-spacing: -.025em; line-height: 1;
}
.dg-co-sum-total-cur { font-size: 13px; color: var(--co-muted); margin-top: 3px; }
.dg-co-summary-trust { display: flex; padding: 12px 16px; }
.dg-co-st-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center;
  padding: 0 4px;
  border-right: 1px solid var(--co-border);
}
.dg-co-st-item:last-child { border-right: none; }
.dg-co-st-item svg { color: var(--co-navy); }
.dg-co-st-item span { font-size: 11px; font-weight: 700; color: var(--co-ink); line-height: 1.1; }
.dg-co-st-item small { font-size: 10px; color: var(--co-muted); }

/* ══════════════════════════════════════════════════
   MOBILE SUMMARY TOGGLE
══════════════════════════════════════════════════ */
.dg-co-mb-sum-inline { display: none; }

.dg-co-mb-sum-toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #E0F5F1;
  border: 1px solid var(--co-border-mid);
  border-radius: var(--co-r-md);
  margin-bottom: 14px;
  cursor: pointer;
  font-family: var(--co-font-b);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--co-navy);
  transition: background .15s;
}
.dg-co-mb-sum-toggle:hover { background: #E0E7FF; }
.dg-co-mb-sum-toggle svg { flex-shrink: 0; }
.dg-co-mb-sum-total {
  margin-left: auto;
  font-family: var(--co-font-h);
  font-weight: 800;
  font-size: 15px;
  color: var(--co-ink);
}
.dg-co-mb-sum-chev { transition: transform .25s; }
.dg-co-mb-sum-toggle.open .dg-co-mb-sum-chev { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════
   LOADING SPINNER
══════════════════════════════════════════════════ */
#dgco-qc-loading {
  min-height: 60vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
#dgco-qc-loading p { margin: 0; font-size: 14px; color: var(--co-muted); font-family: var(--co-font-b); }

/* ══════════════════════════════════════════════════
   RESPONSIVE — Tablet
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dg-co-grid { grid-template-columns: 1fr 320px; gap: 20px; padding: 22px 20px 64px; }
}
@media (max-width: 860px) {
  .dg-co-grid { grid-template-columns: 1fr 280px; gap: 16px; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Mobile (<700px)
══════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Unified header: stack logo + hide nav + secure badge small */
  .dg-co-checkout-header {
    padding: 0 14px;
    min-height: 50px;
  }
  .dg-co-hdr-nav { display: none; }
  .dg-co-hdr-divider { display: none; }
  .dg-co-hdr-secure { font-size: 11px; padding: 4px 10px; }
  .dg-co-hdr-name { font-size: 13px; }
  .dg-co-hdr-sub { display: none; }

  /* Layout */
  .dg-co-grid { grid-template-columns: 1fr; padding: 12px 12px 88px; gap: 0; }
  .dg-co-right { order: 2; position: static; margin-bottom: 0; }
  .dg-co-left  { order: 1; }

  /* Trust bar: 2x2 grid on mobile */
  .dg-co-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    padding: 0;
    flex-wrap: unset;
    justify-content: unset;
  }
  .dg-co-trust-bar > span {
    justify-content: center;
    padding: 6px 8px;
    border-right: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
    font-size: 10px;
    gap: 4px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .dg-co-trust-bar > span:nth-child(2n)      { border-right: none; }
  .dg-co-trust-bar > span:nth-last-child(-n+2) { border-bottom: none; }

  /* Steps header on mobile */
  .dg-co-shdr-step { padding: 14px 4px 11px; gap: 5px; }
  .dg-co-shdr-dot { width: 28px; height: 28px; font-size: 11px; }
  .dg-co-shdr-lbl { font-size: 9px; }

  /* Details header meta: stack vertically */
  .dg-co-details-meta { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 16px 12px; }

  /* Inline summary slot */
  .dg-co-mb-sum-inline { display: block; margin: 0 0 10px; }
  .dg-co-mb-sum-inline .dg-co-summary-card { display: none; }
  .dg-co-mb-sum-inline .dg-co-summary-card.mb-open { display: block; margin-bottom: 0; }
  .dg-co-mb-sum-inline .dg-co-mb-sum-toggle { display: flex; }

  /* Right column: hide on mobile */
  .dg-co-right { display: none; }

  /* Step cards */
  .dg-co-step-head { padding: 13px 16px; }
  .dg-co-step-body { padding: 16px; }
  .dg-co-step-icon { width: 32px; height: 32px; }
  .dg-co-step-title { font-size: 13.5px; }

  /* Place order button */
  .dg-co-btn-place {
    background: #FFD814;
    color: #0F1111;
    border-color: #C7A600;
    box-shadow: 0 4px 14px rgba(255,216,20,.3);
    font-size: 16px; padding: 16px 20px;
  }
  .dg-co-btn-place:hover:not(:disabled) { background: #F7CA00; }

  /* Forms */
  .dg-co-form-grid { grid-template-columns: 1fr; gap: 0; }
  .dg-co-phone-row { grid-template-columns: 110px 1fr; }

  /* OTP */
  .dg-co-otp-box { width: 44px; height: 50px; font-size: 20px; }
  .dg-co-otp-row { gap: 7px; }

  /* Payment */
  .dg-co-amount-row { flex-direction: column; gap: 14px; }
  .dg-co-paypal-email-col { text-align: left; }
  .dg-co-paypal-email-row { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .dg-co-paypal-addr { font-size: 12px; word-break: break-all; }
  .dg-co-pay-tabs { flex-wrap: wrap; }
  .dg-co-pay-tab { min-width: 33.333%; border-right: none; border-bottom: 1.5px solid var(--co-border); }
  .dg-co-pay-tab:nth-child(3) { border-bottom: none; }
  .dg-co-amount-val { font-size: 30px; }
  .dg-co-sum-total-val { font-size: 30px; }
  .dg-co-how-list { gap: 12px; }
  .dg-co-how-list li { font-size: 13px; line-height: 1.5; }
  .dg-co-how-title { font-size: 10px; letter-spacing: .1em; }
  .dg-co-warn { font-size: 12px; padding: 10px 12px; }
  .dg-co-warn strong { display: inline; }

  /* Screen body */
  .dg-co-screen-body { padding: 22px 16px; }
  .dg-co-steps { padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════
   CHECKOUT PAGE — zero out site header gap
══════════════════════════════════════════════════ */
body.woocommerce-checkout,
body.woocommerce-checkout #page,
body.woocommerce-checkout .site,
body.woocommerce-checkout #main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .dg-main-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.woocommerce-checkout .dg-announcement,
body.woocommerce-checkout .dg-header,
body.woocommerce-checkout header.dg-header,
body.woocommerce-checkout #dg-header {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dgco-qc-root {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════
   NO-SHIP COUNTRY BANNER
══════════════════════════════════════════════════ */
.dg-no-ship-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #F0FBFC;
  border: 1.5px solid #00A0B4;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0 6px;
}
.dg-no-ship-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.dg-no-ship-body {
  flex: 1;
  min-width: 0;
}
.dg-no-ship-body strong {
  display: block;
  font-size: 13.5px;
  color: #005F6B;
  margin-bottom: 3px;
}
.dg-no-ship-body p {
  font-size: 12.5px;
  color: #0F4C56;
  margin: 0 0 10px;
  line-height: 1.5;
}
.dg-no-ship-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dg-no-ship-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  line-height: 1;
}
.dg-no-ship-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}
.dg-no-ship-wa {
  background: #25D366;
  color: #fff;
}
.dg-no-ship-email {
  background: #fff;
  color: #374151;
  border: 1.5px solid #D1D5DB;
}

/* Free shipping label */
.dg-ship-free {
  color: #059669;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  background: #D1FAE5;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════
   BLOCKED-COUNTRY STEP LOCK
══════════════════════════════════════════════════ */
.dg-co-step-card.dg-locked {
  position: relative;
  overflow: hidden;
}
.dg-co-step-card.dg-locked .dg-co-step-body {
  filter: blur(3px) grayscale(0.3);
  user-select: none;
  pointer-events: none;
}
.dg-co-step-card.dg-locked .dg-co-step-head {
  opacity: 0.55;
}
.dg-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 246, 251, 0.55);
  padding: 16px;
  text-align: center;
}
.dg-lock-overlay-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--co-white);
  border: 1.5px solid var(--co-border-mid);
  border-radius: var(--co-r-md);
  box-shadow: var(--co-shadow);
  padding: 10px 16px;
  font-family: var(--co-font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--co-slate);
  max-width: 280px;
  line-height: 1.4;
}
.dg-lock-overlay-msg svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--co-amber);
}