/* ═══════════════════════════════════════════════════════════
   MLGCash — Price Your Device Widget v6
   Design: Matches Theme v8 — Inter + Sora, green brand system
   Mobile-first. 390px base. Every rule scoped to .pyd.
   All critical rules use !important to beat any theme reset.
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@700;800;900&display=swap');

/* ── Design tokens (scoped inside widget) ── */
.pyd {
  --g1: #1a7a1a;
  --g2: #8DC63F;
  --g3: #f0fae4;
  --g4: #e2f5c8;
  --grad: linear-gradient(135deg, #1a7a1a 0%, #2d9e2d 60%, #8DC63F 100%);
  --dark: #0a1a0a;
  --ink: #141f14;
  --muted: #617061;
  --white: #ffffff;
  --off: #f9fdf6;
  --border: #d4ecb4;
  --border2: #e8f5d4;
  --amber: #f59e0b;
  --red: #dc2626;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sh-sm: 0 2px 12px rgba(26,122,26,.10);
  --sh-md: 0 4px 28px rgba(26,122,26,.14);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .2s;
}

/* ── RESET — scoped to widget only ── */
.pyd, .pyd * { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; }
.pyd { font-family: 'Inter', system-ui, sans-serif !important; color: var(--ink) !important; max-width: 720px !important; margin: 0 auto !important; }
.pyd button { cursor: pointer !important; font-family: 'Inter', sans-serif !important; -webkit-appearance: none !important; border: none !important; background: none !important; }
.pyd input, .pyd select, .pyd textarea { font-family: 'Inter', sans-serif !important; -webkit-appearance: none !important; }
.pyd img { max-width: 100% !important; display: block !important; }
.pyd h1, .pyd h2, .pyd h3 { font-family: 'Sora', sans-serif !important; letter-spacing: -.02em !important; line-height: 1.06 !important; }

/* ══ OFFER BAR ═══════════════════════════════════════════ */
.pyd-offer-bar {
  background: var(--grad) !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
.pob-label { font-size: 12px !important; font-weight: 700 !important; color: rgba(255,255,255,.75) !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.pob-amount { font-family: 'Sora', sans-serif !important; font-size: 28px !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; }
.pob-sub { font-size: 11px !important; color: rgba(255,255,255,.6) !important; }

/* ══ HEADER ══════════════════════════════════════════════ */
.pyd-header {
  background: linear-gradient(165deg, #081a08 0%, #122e12 30%, #1a5c1a 65%, #1e7a1e 100%) !important;
  padding: 28px 20px 22px !important;
  position: relative !important;
  overflow: hidden !important;
}
.pyd-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(141,198,63,.15) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.pyd-header-content { position: relative !important; z-index: 1 !important; margin-bottom: 16px !important; }
.pyd-headline { font-size: clamp(24px, 7vw, 38px) !important; font-weight: 900 !important; color: #fff !important; margin-bottom: 6px !important; }
.pyd-headline span { background: linear-gradient(135deg, #8DC63F, #d4ff80) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.pyd-subline { font-size: 13px !important; color: rgba(255,255,255,.6) !important; }
.pyd-trust-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; position: relative !important; z-index: 1 !important; }
.pyd-trust-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 12px !important;
}
.ptc-stars { color: var(--amber) !important; font-size: 11px !important; }
.ptc-icon { font-size: 13px !important; }
.ptc-label { font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,.85) !important; }

/* ══ PROGRESS BAR ════════════════════════════════════════ */
.pyd-progress {
  background: rgba(10,26,10,.95) !important;
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid rgba(141,198,63,.15) !important;
}
.pyd-prog-track {
  height: 3px !important;
  background: rgba(255,255,255,.1) !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
.pyd-prog-fill {
  height: 100% !important;
  background: var(--grad) !important;
  border-radius: var(--r-pill) !important;
  transition: width .4s var(--ease) !important;
}
.pyd-prog-steps {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 2px !important;
}
.pyd-prog-step { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; flex: 1 !important; }
.pyd-prog-dot {
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.15) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .3s var(--ease) !important;
  position: relative !important;
}
.pyd-prog-step.pyd-active .pyd-prog-dot { background: #fff !important; border-color: #fff !important; }
.pyd-prog-step.pyd-done .pyd-prog-dot { background: var(--g2) !important; border-color: var(--g2) !important; }
.ppd-num { font-family: 'Sora', sans-serif !important; font-size: 10px !important; font-weight: 900 !important; color: rgba(255,255,255,.5) !important; line-height: 1 !important; }
.pyd-prog-step.pyd-active .ppd-num { color: var(--dark) !important; }
.ppd-check { display: none !important; font-size: 10px !important; font-weight: 900 !important; color: #fff !important; }
.pyd-prog-step.pyd-done .ppd-num { display: none !important; }
.pyd-prog-step.pyd-done .ppd-check { display: block !important; }
.pyd-prog-label { font-size: 9px !important; font-weight: 700 !important; color: rgba(255,255,255,.4) !important; text-align: center !important; line-height: 1.2 !important; }
.pyd-prog-step.pyd-active .pyd-prog-label { color: rgba(255,255,255,.85) !important; }
.pyd-prog-step.pyd-done .pyd-prog-label { color: var(--g2) !important; }

/* ══ MAIN PANEL AREA ═════════════════════════════════════ */
.pyd-main { background: #fff !important; }
.pyd-panel { padding: 20px 16px 24px !important; }

/* Step badge */
.pyd-step-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--g3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 12px !important;
  font-size: 11px !important; font-weight: 800 !important;
  color: var(--g1) !important; letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* Panel title + sub */
.pyd-panel-title { font-size: clamp(18px, 5vw, 22px) !important; font-weight: 900 !important; color: var(--dark) !important; margin-bottom: 5px !important; }
.pyd-panel-sub { font-size: 13px !important; color: var(--muted) !important; line-height: 1.65 !important; margin-bottom: 20px !important; }

/* Back button */
.pyd-back-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  color: var(--muted) !important; font-size: 13px !important; font-weight: 600 !important;
  background: none !important; border: none !important; cursor: pointer !important;
  padding: 0 !important; margin-bottom: 14px !important;
  transition: color var(--t) !important;
}
.pyd-back-btn:hover { color: var(--g1) !important; }

/* ══ BRAND GRID ══════════════════════════════════════════ */
.pyd-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.pyd-brand-btn {
  background: #fff !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 8px !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 8px !important;
  cursor: pointer !important;
  transition: all var(--t) var(--ease) !important;
  width: 100% !important;
}
.pyd-brand-btn:hover { border-color: var(--g2) !important; background: var(--g3) !important; transform: translateY(-2px) !important; box-shadow: var(--sh-sm) !important; }
.pyd-brand-btn.pyd-selected { border-color: var(--g1) !important; background: var(--g3) !important; box-shadow: 0 0 0 3px rgba(26,122,26,.12) !important; }
.pbd-logo { display: flex !important; align-items: center !important; justify-content: center !important; color: var(--ink) !important; }
.pbd-samsung { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: linear-gradient(135deg, #1428A0, #3344cc) !important; color: #fff !important; font-family: 'Sora', sans-serif !important; font-size: 18px !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pbd-google { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335) !important; color: #fff !important; font-family: 'Sora', sans-serif !important; font-size: 18px !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pbd-name { font-size: 13px !important; font-weight: 800 !important; color: var(--ink) !important; }
.pbd-sub { font-size: 10px !important; color: var(--muted) !important; }

/* ══ MODEL LIST ══════════════════════════════════════════ */
.pyd-search-wrap {
  position: relative !important;
  margin-bottom: 12px !important;
}
.pyd-search-input {
  width: 100% !important;
  padding: 12px 40px 12px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  font-size: 15px !important;
  background: var(--off) !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: all var(--t) !important;
}
.pyd-search-input:focus { border-color: var(--g1) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(26,122,26,.07) !important; }
.pyd-search-clear { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; background: none !important; border: none !important; color: var(--muted) !important; font-size: 14px !important; cursor: pointer !important; padding: 4px !important; }
.pyd-model-list { display: flex !important; flex-direction: column !important; gap: 4px !important; max-height: 340px !important; overflow-y: auto !important; }
.pyd-model-btn {
  width: 100% !important; text-align: left !important;
  background: #fff !important; border: 1.5px solid var(--border2) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 14px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  cursor: pointer !important; transition: all var(--t) !important;
}
.pyd-model-btn:hover { border-color: var(--g2) !important; background: var(--g3) !important; }
.pyd-model-btn.pyd-selected { border-color: var(--g1) !important; background: var(--g3) !important; }
.pmb-name { font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; }
.pmb-cat { font-size: 11px !important; color: var(--muted) !important; margin-top: 2px !important; }
.pmb-arrow { color: var(--g2) !important; font-size: 16px !important; }

/* Model group header */
.pyd-model-group { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--muted) !important; padding: 10px 14px 5px !important; }

/* ══ CHIP GRID (storage / carrier) ═══════════════════════ */
.pyd-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
.pyd-carrier-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pyd-chip-btn {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 6px !important;
  text-align: center !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--ink) !important; cursor: pointer !important;
  transition: all var(--t) !important;
  min-height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.pyd-chip-btn:hover { border-color: var(--g2) !important; background: var(--g3) !important; }
.pyd-chip-btn.pyd-selected { border-color: var(--g1) !important; background: var(--g3) !important; color: var(--g1) !important; font-weight: 800 !important; box-shadow: 0 0 0 2px rgba(26,122,26,.1) !important; }

/* API note */
.pyd-api-note { font-size: 13px !important; color: var(--muted) !important; background: var(--off) !important; border: 1.5px dashed var(--border) !important; border-radius: var(--r-md) !important; padding: 14px !important; text-align: center !important; margin-top: 10px !important; }

/* ══ CONDITIONS ══════════════════════════════════════════ */
.pyd-cond-q {
  background: var(--off) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
}
.pyd-cond-question { font-size: 14px !important; font-weight: 700 !important; color: var(--dark) !important; margin-bottom: 10px !important; }
.pyd-cond-opts { display: flex !important; gap: 7px !important; flex-wrap: wrap !important; }
.pyd-cond-opt {
  flex: 1 !important; min-width: 0 !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 6px !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--ink) !important; cursor: pointer !important;
  text-align: center !important; transition: all var(--t) !important;
  min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important;
}
.pyd-cond-opt:hover { border-color: var(--g2) !important; background: var(--g3) !important; }
.pyd-cond-opt.pyd-selected { background: var(--g1) !important; color: #fff !important; border-color: var(--g1) !important; font-weight: 800 !important; }
.pyd-next-btn {
  width: 100% !important; margin-top: 16px !important;
  background: var(--grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) !important;
  padding: 15px !important; font-family: 'Sora', sans-serif !important;
  font-size: 15px !important; font-weight: 800 !important;
  cursor: pointer !important; transition: all var(--t) !important;
  box-shadow: var(--sh-md) !important; min-height: 52px !important;
}
.pyd-next-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 28px rgba(26,122,26,.22) !important; }

/* ══ FORM ════════════════════════════════════════════════ */
.pyd-form { }
.pyd-form-section { margin-bottom: 20px !important; }
.pyd-form-section-title { font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: var(--muted) !important; margin-bottom: 10px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--border2) !important; }
.pyd-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.pyd-field { display: flex !important; flex-direction: column !important; gap: 5px !important; margin-bottom: 10px !important; }
.pyd-field label { font-size: 12px !important; font-weight: 700 !important; color: var(--ink) !important; }
.req { color: var(--g1) !important; }
.pyd-input {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-size: 16px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ink) !important;
  background: var(--off) !important;
  outline: none !important;
  transition: all var(--t) !important;
  min-height: 48px !important;
}
.pyd-input:focus { border-color: var(--g1) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(26,122,26,.07) !important; }

/* Offer display */
.pyd-offer-display {
  background: var(--grad) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important; text-align: center !important;
  margin-bottom: 20px !important;
}
.pod-label { font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(255,255,255,.7) !important; margin-bottom: 4px !important; }
.pod-amount { font-family: 'Sora', sans-serif !important; font-size: 38px !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; margin-bottom: 4px !important; }
.pod-note { font-size: 11px !important; color: rgba(255,255,255,.6) !important; }

/* Payment options */
.pyd-pay-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.pyd-pay-opt {
  background: #fff !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 10px !important; text-align: center !important;
  cursor: pointer !important; transition: all var(--t) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important;
}
.pyd-pay-opt:hover { border-color: var(--g2) !important; background: var(--g3) !important; }
.pyd-pay-opt.pyd-pay-active { border-color: var(--g1) !important; border-width: 2px !important; background: var(--g3) !important; box-shadow: 0 0 0 3px rgba(26,122,26,.1) !important; }
.ppo-icon { font-size: 22px !important; }
.ppo-name { font-size: 13px !important; font-weight: 800 !important; color: var(--ink) !important; }
.ppo-status { font-size: 10px !important; font-weight: 700 !important; }
.ppo-live { color: var(--g1) !important; }
.ppo-soon { color: var(--muted) !important; }

/* Promo */
.pyd-promo-row { display: flex !important; gap: 8px !important; }

/* Consent */
.pyd-consent-section { margin-bottom: 18px !important; }
.pyd-check-label {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  font-size: 13px !important; color: var(--ink) !important; line-height: 1.55 !important;
  cursor: pointer !important;
}
.pyd-check-label input[type="checkbox"] { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin-top: 1px !important; accent-color: var(--g1) !important; }
.pyd-text-link { background: none !important; border: none !important; color: var(--g1) !important; text-decoration: underline !important; cursor: pointer !important; font-size: inherit !important; padding: 0 !important; font-family: inherit !important; }

/* Submit button */
.pyd-submit-btn {
  width: 100% !important; margin-top: 4px !important;
  background: var(--grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) !important;
  padding: 16px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 16px !important; font-weight: 800 !important;
  cursor: pointer !important; transition: all var(--t) !important;
  box-shadow: 0 4px 20px rgba(26,122,26,.3) !important;
  min-height: 54px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.pyd-submit-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 28px rgba(26,122,26,.35) !important; }
.pyd-submit-btn:active { transform: scale(.98) !important; }
.pyd-submit-note { font-size: 12px !important; color: var(--muted) !important; text-align: center !important; margin-top: 10px !important; line-height: 1.6 !important; }

/* Form error */
.pyd-form-err { background: #fef2f2 !important; border: 1.5px solid #fca5a5 !important; border-radius: var(--r-sm) !important; padding: 10px 14px !important; font-size: 13px !important; color: var(--red) !important; margin-bottom: 10px !important; }

/* ══ ID UPLOAD ════════════════════════════════════════════ */
.pyd-id-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 14px !important; }
.pyd-id-zone {
  background: var(--off) !important;
  border: 2px dashed var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  transition: border-color var(--t) !important;
}
.pyd-id-zone.pyd-confirmed { border-style: solid !important; border-color: var(--g1) !important; background: var(--g3) !important; }
.pyd-id-placeholder { padding: 22px 16px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; }
.pid-icon { font-size: 28px !important; margin-bottom: 2px !important; }
.pyd-id-placeholder strong { font-size: 14px !important; font-weight: 800 !important; color: var(--dark) !important; }
.pyd-id-placeholder span { font-size: 12px !important; color: var(--muted) !important; }
.pyd-upload-actions { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; margin-top: 10px !important; }
.pyd-cam-btn {
  background: var(--g1) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) !important;
  padding: 12px 20px !important; font-size: 14px !important; font-weight: 700 !important;
  cursor: pointer !important; width: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-height: 48px !important;
  box-shadow: 0 4px 14px rgba(26,122,26,.28) !important;
  transition: all var(--t) !important;
}
.pyd-cam-btn:active { transform: scale(.97) !important; }
.pyd-gal-btn {
  background: transparent !important;
  color: var(--g1) !important;
  border: 1.5px solid var(--g1) !important;
  border-radius: var(--r-pill) !important;
  padding: 11px 20px !important; font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer !important; width: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-height: 46px !important; transition: all var(--t) !important;
}
.pyd-gal-btn:hover { background: var(--g3) !important; }

/* Desktop: hide camera button, make gallery primary */
@media (min-width: 768px) {
  .pyd-cam-btn { display: none !important; }
  .pyd-gal-btn { background: var(--g1) !important; color: #fff !important; border-color: var(--g1) !important; font-size: 14px !important; padding: 12px 20px !important; min-height: 48px !important; }
}

/* Preview */
.pyd-id-preview { }
.pip-header { font-size: 12px !important; font-weight: 700 !important; color: var(--dark) !important; background: var(--off) !important; padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; }
.pyd-id-preview img { width: 100% !important; height: 180px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; }
.pip-tip { font-size: 11px !important; color: var(--muted) !important; padding: 8px 14px !important; background: var(--off) !important; border-top: 1px solid var(--border2) !important; line-height: 1.5 !important; }
.pip-actions { display: flex !important; gap: 8px !important; padding: 10px 12px !important; background: #fff !important; border-top: 1px solid var(--border2) !important; }
.pyd-retake-btn {
  flex: 1 !important; background: #fff !important;
  color: var(--red) !important; border: 1.5px solid #fca5a5 !important;
  border-radius: var(--r-pill) !important; padding: 10px !important;
  font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important; transition: all var(--t) !important;
  min-height: 42px !important;
}
.pyd-retake-btn:hover { background: #fef2f2 !important; border-color: var(--red) !important; }
.pyd-approve-btn {
  flex: 1 !important;
  background: var(--g1) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) !important;
  padding: 10px !important; font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important; transition: all var(--t) !important;
  box-shadow: 0 3px 10px rgba(26,122,26,.25) !important;
  min-height: 42px !important;
}
.pyd-id-note { font-size: 12px !important; color: var(--muted) !important; line-height: 1.65 !important; margin-bottom: 14px !important; }

/* Confirmed state */
.pyd-confirmed-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; width: 100% !important; }
.pyd-confirmed-ok { font-size: 13px !important; font-weight: 700 !important; color: var(--g1) !important; }
.pyd-retake-link { background: none !important; border: none !important; color: var(--muted) !important; font-size: 12px !important; text-decoration: underline !important; cursor: pointer !important; padding: 0 !important; }
.pyd-retake-link:hover { color: var(--red) !important; }

/* ══ VERIFY / OTP ════════════════════════════════════════ */
.pyd-verify-wrap { text-align: center !important; padding: 24px 16px !important; }
.pvw-icon { font-size: 44px !important; margin-bottom: 12px !important; }
.pvw-title { font-size: 22px !important; font-weight: 900 !important; color: var(--dark) !important; margin-bottom: 8px !important; }
.pvw-sub { font-size: 14px !important; color: var(--muted) !important; line-height: 1.65 !important; margin-bottom: 20px !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; }
.pyd-otp-row { display: flex !important; gap: 10px !important; max-width: 320px !important; margin: 0 auto 12px !important; }
.pyd-otp-input {
  flex: 1 !important; text-align: center !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 24px !important; font-weight: 900 !important;
  letter-spacing: 6px !important;
  padding: 14px !important; border: 2px solid var(--border) !important;
  border-radius: var(--r-md) !important; color: var(--ink) !important;
  background: var(--off) !important; outline: none !important;
  transition: all var(--t) !important; min-height: 58px !important;
}
.pyd-otp-input:focus { border-color: var(--g1) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(26,122,26,.07) !important; }
.pyd-verify-btn {
  background: var(--grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-md) !important;
  padding: 14px 18px !important; font-family: 'Sora', sans-serif !important;
  font-size: 15px !important; font-weight: 800 !important;
  cursor: pointer !important; transition: all var(--t) !important;
  min-height: 58px !important; white-space: nowrap !important;
}
.pyd-verify-btn:hover { transform: translateY(-1px) !important; }
.pvw-note { font-size: 12px !important; color: var(--muted) !important; }

/* ══ SUCCESS ═════════════════════════════════════════════ */
.pyd-success { text-align: center !important; padding: 28px 16px 32px !important; }
.pys-ring {
  width: 68px !important; height: 68px !important;
  border-radius: 50% !important;
  background: var(--g3) !important;
  border: 3px solid var(--g1) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 16px !important;
}
.pys-check { font-size: 28px !important; color: var(--g1) !important; font-weight: 900 !important; }
.pys-title { font-size: 24px !important; font-weight: 900 !important; color: var(--dark) !important; margin-bottom: 8px !important; }
.pys-sub { font-size: 14px !important; color: var(--muted) !important; margin-bottom: 24px !important; }
.pyd-offer-badge-success { background: var(--grad) !important; color: #fff !important; border-radius: var(--r-pill) !important; padding: 10px 20px !important; display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 18px !important; font-weight: 900 !important; margin-bottom: 20px !important; }
.pys-steps { display: flex !important; flex-direction: column !important; gap: 10px !important; text-align: left !important; margin-bottom: 24px !important; }
.pys-step { display: flex !important; align-items: flex-start !important; gap: 12px !important; background: var(--off) !important; border-radius: var(--r-md) !important; padding: 12px !important; }
.pss-num { width: 26px !important; height: 26px !important; border-radius: 50% !important; background: var(--g1) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Sora', sans-serif !important; font-size: 12px !important; font-weight: 900 !important; flex-shrink: 0 !important; }
.pss-body strong { display: block !important; font-size: 13px !important; font-weight: 800 !important; color: var(--dark) !important; margin-bottom: 2px !important; }
.pss-body span { font-size: 12px !important; color: var(--muted) !important; }
.pyd-find-store-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  background: var(--grad) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) !important;
  padding: 14px 28px !important; font-family: 'Sora', sans-serif !important;
  font-size: 15px !important; font-weight: 800 !important;
  cursor: pointer !important; box-shadow: var(--sh-md) !important;
  transition: all var(--t) !important; width: 100% !important;
  text-decoration: none !important;
}
.pyd-find-store-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 28px rgba(26,122,26,.3) !important; }

/* Ghost link */
.pyd-ghost-link { display: block !important; text-align: center !important; background: none !important; border: none !important; color: var(--muted) !important; font-size: 13px !important; cursor: pointer !important; text-decoration: underline !important; padding: 6px !important; transition: color var(--t) !important; }
.pyd-ghost-link:hover { color: var(--g1) !important; }

/* ══ MODALS ══════════════════════════════════════════════ */
.pyd-overlay { position: fixed !important; inset: 0 !important; z-index: 9990 !important; background: rgba(0,0,0,.45) !important; backdrop-filter: blur(3px) !important; }
.pyd-modal {
  position: fixed !important; z-index: 9999 !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: #fff !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  padding: 28px 20px 40px !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.2) !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
}
.pyd-modal h3 { font-size: 20px !important; font-weight: 900 !important; color: var(--dark) !important; margin-bottom: 8px !important; }
.pyd-modal p { font-size: 14px !important; color: var(--muted) !important; line-height: 1.7 !important; margin-bottom: 18px !important; }
.pyd-modal-close { position: absolute !important; top: 16px !important; right: 16px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: var(--off) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 14px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pyd-terms-modal { max-height: 70vh !important; }
.pyd-terms-body { font-size: 13px !important; color: var(--muted) !important; line-height: 1.75 !important; margin-bottom: 20px !important; }
.pyd-terms-body p { margin-bottom: 12px !important; }

@media (min-width: 600px) {
  .pyd-modal { position: fixed !important; bottom: auto !important; top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%,-50%) !important; border-radius: var(--r-xl) !important; max-width: 480px !important; width: 90% !important; }
}

/* ══ DESKTOP ADJUSTMENTS ════════════════════════════════ */
@media (min-width: 600px) {
  .pyd-panel { padding: 28px 28px 32px !important; }
  .pyd-header { padding: 36px 28px 28px !important; }
  .pyd-brand-grid { gap: 14px !important; }
  .pyd-brand-btn { padding: 22px 12px !important; }
  .pbd-name { font-size: 14px !important; }
  .pyd-id-grid { grid-template-columns: 1fr 1fr !important; display: grid !important; }
}