/* ============================================================================
   LOCKED SMM checkout v20260924v3
   Styled from each storefront's own design tokens, never a new palette:
     PHP shops  -> --accent / --ink / --ink-2 / --muted / --line / --line-2 /
                   --panel / --white / --radius / --radius-sm / --radius-pill /
                   --success* / --danger* / --shadow-hover / --orange-2 /
                   --purple-2 / --accent-soft / --orange-line / --purple-line
     indiagram SPA (app/ + shop/) -> --ig-brand-orange / --ig-brand-orange-hot /
                   --ig-brand-ink / --ig-brand-paper / --ig-radius-* / --ig-font-*
     andsocialmedia.in -> --bp-gold / --bp-indigo / --bp-line / --bp-paper /
                   --font-body / --font-display
   Every value below falls back to the neutral indiagram-IG defaults, so the
   card renders correctly even on a surface that declares none of the tokens.
   This file must win over site CSS: everything is scoped and !important.
   ============================================================================ */

/* ---- token bridge (scoped to the modal so nothing leaks) ------------------ */
#orderModal {
  --ck-accent: var(--bp-gold, var(--accent, var(--ig-brand-orange, #ff4d00)));
  --ck-accent-2: var(--orange-2, var(--purple-2, var(--ig-brand-orange-hot, var(--ck-accent))));
  --ck-accent-ink: var(--bp-indigo, #ffffff);
  --ck-accent-soft: var(--accent-soft, rgba(255, 77, 0, 0.12));
  --ck-accent-line: var(--orange-line, var(--purple-line, transparent));
  --ck-ink: var(--ink, var(--ig-brand-ink, #141414));
  --ck-ink-2: var(--ink-2, #3c3d42);
  --ck-muted: var(--muted, #747470);
  --ck-line: var(--bp-line, var(--line, #e8e8ea));
  --ck-line-2: var(--line-2, #cfcfd3);
  --ck-panel: var(--bp-paper, var(--panel, var(--ig-brand-paper, #f6f6f8)));
  --ck-white: var(--white, #ffffff);
  --ck-success: var(--success, #0f9f6e);
  --ck-success-soft: var(--success-soft, #e9faf4);
  --ck-success-ink: var(--success-ink, #0f8c63);
  --ck-danger: var(--danger, #c0392b);
  --ck-danger-soft: var(--danger-soft, #fdf0ee);
  --ck-radius: var(--radius, var(--ig-radius-card, 16px));
  --ck-radius-sm: var(--radius-sm, var(--ig-radius-control, 12px));
  --ck-radius-lg: var(--radius-lg, var(--ig-radius-feature, var(--ck-radius)));
  --ck-radius-pill: var(--radius-pill, 11px);
  --ck-font-body: var(--ig-font-body, var(--font-body, "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif));
  --ck-font-display: var(--ig-font-display, var(--font-display, "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif));
  --ck-shadow: var(--shadow-hover, 0 24px 64px rgba(10, 10, 10, 0.22));
}

/* ---- backdrop ------------------------------------------------------------- */
#orderModal.modal-backdrop,
.modal-backdrop#orderModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  background: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#orderModal.modal-backdrop.open,
#orderModal.modal-backdrop.is-open {
  display: flex !important;
}
@media (min-width: 720px) {
  #orderModal.modal-backdrop,
  #orderModal.modal-backdrop.open,
  #orderModal.modal-backdrop.is-open {
    align-items: center !important;
    padding: 24px !important;
  }
}

/* ---- card: solid, site radius, site type ---------------------------------- */
#orderModal .smm-checkout-card,
#orderModal .modal-card {
  width: min(420px, 100%) !important;
  max-height: min(92dvh, 680px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  margin: 0 !important;
  padding: 16px 16px 14px !important;
  background: var(--ck-white) !important;
  color: var(--ck-ink) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-radius-lg) !important;
  box-shadow: var(--ck-shadow) !important;
  font-family: var(--ck-font-body) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ---- header --------------------------------------------------------------- */
#orderModal .modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ck-line) !important;
}
#orderModal #orderModalTitle {
  margin: 0 !important;
  font-family: var(--ck-font-display) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--ck-ink) !important;
}
#orderModal #orderModalSub {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--ck-muted) !important;
  font-weight: 600 !important;
}
#orderModal .modal-close {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--ck-line) !important;
  background: var(--ck-white) !important;
  color: var(--ck-muted) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
}
#orderModal .modal-close:hover { color: var(--ck-ink) !important; border-color: var(--ck-line-2) !important; }

/* ---- order summary -------------------------------------------------------- */
#orderModal .order-summary {
  background: var(--ck-panel) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-radius-sm) !important;
  padding: 8px 12px !important;
  margin: 0 0 12px !important;
}
#orderModal .order-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 5px 0 !important;
  font-size: 12.5px !important;
  color: var(--ck-muted) !important;
}
#orderModal .order-summary-row strong {
  color: var(--ck-ink) !important;
  font-weight: 700 !important;
  text-align: right !important;
}
#orderModal .order-summary-total {
  border-top: 1px solid var(--ck-line) !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  font-weight: 800 !important;
  color: var(--ck-ink) !important;
}
#orderModal .order-summary-total strong {
  font-family: var(--ck-font-display) !important;
  font-size: 16px !important;
  color: var(--ck-accent) !important;
}

/* ---- fields --------------------------------------------------------------- */
#orderModal .field { margin: 0 0 11px !important; }
#orderModal .field label,
#orderModal label {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ck-ink-2) !important;
}
#orderModal .field .muted { color: var(--ck-muted) !important; font-weight: 600 !important; }
#orderModal input[type="text"],
#orderModal input[type="email"],
#orderModal input[type="file"],
#orderModal textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--ck-white) !important;
  color: var(--ck-ink) !important;
  border: 1px solid var(--ck-line-2) !important;
  border-radius: var(--ck-radius-sm) !important;
  padding: 11px 12px !important;
  font: 600 14px/1.35 var(--ck-font-body) !important;
  box-shadow: none !important;
  outline: none !important;
}
#orderModal textarea { resize: vertical !important; }
#orderModal input::placeholder,
#orderModal textarea::placeholder { color: var(--ck-muted) !important; }
#orderModal input:focus,
#orderModal textarea:focus {
  border-color: var(--ck-accent) !important;
  box-shadow: 0 0 0 3px var(--ck-accent-soft) !important;
}

/* ---- primary buttons ------------------------------------------------------ */
#orderModal #btnProceedPay,
#orderModal #btnCompletePayment {
  width: 100% !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: var(--ck-radius-pill) !important;
  background: linear-gradient(135deg, var(--ck-accent-2), var(--ck-accent)) !important;
  color: var(--ck-accent-ink) !important;
  font-family: var(--ck-font-display) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  margin-top: 2px !important;
  box-shadow: 0 8px 20px rgba(20, 20, 20, 0.16) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
#orderModal #btnProceedPay:hover,
#orderModal #btnCompletePayment:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
}
#orderModal #btnProceedPay:active,
#orderModal #btnCompletePayment:active { transform: translateY(0) scale(0.98) !important; }
#orderModal #btnProceedPay:disabled,
#orderModal #btnCompletePayment:disabled {
  opacity: 0.6 !important;
  transform: none !important;
  cursor: default !important;
}

/* ---- ghost buttons -------------------------------------------------------- */
#orderModal #btnPaidEarly,
#orderModal #btnSuccessClose,
#orderModal #btnCopyUpi {
  border-radius: 999px !important;
  border: 1px solid var(--ck-line) !important;
  background: var(--ck-white) !important;
  color: var(--ck-ink) !important;
  font: 700 12px/1 var(--ck-font-body) !important;
  cursor: pointer !important;
}
#orderModal #btnPaidEarly:hover,
#orderModal #btnSuccessClose:hover,
#orderModal #btnCopyUpi:hover { border-color: var(--ck-line-2) !important; }

/* ---- pay panel ------------------------------------------------------------ */
#orderModal .smm-pay-panel { text-align: center !important; }
#orderModal .badge,
#orderModal .badge-green {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--ck-accent-soft) !important;
  color: var(--ck-accent) !important;
  border: 1px solid var(--ck-accent-line) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font: 900 10px/1 var(--ck-font-body) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}
#orderModal .badge-green {
  background: var(--ck-success-soft) !important;
  color: var(--ck-success-ink) !important;
  border-color: transparent !important;
}
#orderModal .smm-pay-eyebrow,
#orderModal .upi-heading {
  margin: 10px 0 2px !important;
  font: 800 11px/1 var(--ck-font-body) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ck-muted) !important;
}
#orderModal .order-ref-line {
  margin: 2px 0 !important;
  font-size: 13px !important;
  color: var(--ck-ink) !important;
}
#orderModal .order-ref-line strong {
  font-family: var(--ck-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}
#orderModal .order-amount-line {
  margin: 2px 0 !important;
  font-size: 13px !important;
  color: var(--ck-ink) !important;
}
#orderModal .order-amount-line strong {
  font-family: var(--ck-font-display) !important;
  color: var(--ck-accent) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* ---- UPI app buttons (mobile) --------------------------------------------- */
#orderModal .upi-app-grid-4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}
#orderModal .btn-upi-app {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  border-radius: var(--ck-radius-sm) !important;
  font: 800 13px/1 var(--ck-font-body) !important;
  text-decoration: none !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 12px 10px !important;
  transition: filter 0.18s ease, transform 0.18s ease !important;
}
#orderModal .btn-upi-app:hover { filter: brightness(1.07) !important; transform: translateY(-1px) !important; }
#orderModal .btn-upi-app.is-gpay { background: #4285f4 !important; }
#orderModal .btn-upi-app.is-phonepe { background: #5f259f !important; }
#orderModal .btn-upi-app.is-paytm { background: #00baf2 !important; color: #002f3e !important; }
#orderModal .btn-upi-app.is-others { background: var(--ck-ink) !important; width: 100% !important; font: inherit !important; }

/* ---- UPI QR (desktop) ----------------------------------------------------- */
#orderModal .upi-qr-frame {
  display: inline-block !important;
  padding: 10px !important;
  background: var(--ck-white) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-radius-sm) !important;
  margin: 8px 0 4px !important;
}
#orderModal .upi-qr-frame img { display: block !important; width: 172px !important; height: 172px !important; }
#orderModal .upi-qr-fallback { font-size: 12px !important; color: var(--ck-muted) !important; }

/* ---- UPI ID block --------------------------------------------------------- */
#orderModal .upi-id-block {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border-radius: var(--ck-radius-sm) !important;
  background: var(--ck-panel) !important;
  text-align: left !important;
}
#orderModal .upi-id-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ck-muted) !important;
}
#orderModal .upi-id-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  color: var(--ck-ink) !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* ---- hints, errors, success ------------------------------------------------ */
#orderModal .form-hint { font-size: 12px !important; color: var(--ck-muted) !important; line-height: 1.45 !important; }
#orderModal .form-error {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border-radius: var(--ck-radius-sm) !important;
  background: var(--ck-danger-soft) !important;
  border: 1px solid #f6d5cf !important;
  color: var(--ck-danger) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
#orderModal .success-title {
  margin: 10px 0 2px !important;
  font-family: var(--ck-font-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--ck-ink) !important;
}
#orderModal .success-ref {
  margin: 4px 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ck-accent) !important;
}

/* ---- trust row (stays inside the card) ------------------------------------- */
#orderModal .smm-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--ck-line) !important;
}
#orderModal .smm-trust-lock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font: 800 10px/1 var(--ck-font-body) !important;
  letter-spacing: 0.02em !important;
  color: var(--ck-success-ink) !important;
  margin-right: 4px !important;
}
#orderModal .smm-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 16px !important;
  padding: 0 5px !important;
  border-radius: 4px !important;
  border: 1px solid var(--ck-line) !important;
  background: var(--ck-white) !important;
  font: 800 8px/1 var(--ck-font-body) !important;
  letter-spacing: 0.04em !important;
  color: var(--ck-ink-2) !important;
}
#orderModal .smm-brand-visa { color: #1a1f71 !important; }
#orderModal .smm-brand-mc { color: #eb001b !important; }
#orderModal .smm-brand-maestro { color: #0099df !important; }
#orderModal .smm-brand-rupay { color: #097939 !important; }
#orderModal .smm-brand-upi { color: #6c2bd9 !important; }

/* ---- device switching: mobile never shows QR, desktop never shows apps ---- */
.upi-mobile-qr,
#upiMobileQrWrap,
#btnShowMobileQr { display: none !important; }
@media (max-width: 768px) {
  #orderModal .upi-desktop-view { display: none !important; }
}
@media (min-width: 769px) {
  #orderModal .upi-mobile-view { display: none !important; }
}

/* Shop on WhatsApp: solid light green, black text, 3D pop */
.pkg-btn,
.card-buy,
.ig-boost-btn,
.ig-hero-cta,
button.pkg-btn,
a.pkg-btn,
[data-wa-shop="1"] {
  background: #d6f25c !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 #111111 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}
.pkg-btn:hover,
.card-buy:hover,
.ig-boost-btn:hover,
.ig-hero-cta:hover,
[data-wa-shop="1"]:hover {
  background: #e4f98a !important;
  color: #111111 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #111111 !important;
}
.pkg-btn:active,
.card-buy:active,
.ig-boost-btn:active,
.ig-hero-cta:active,
[data-wa-shop="1"]:active {
  background: #c6e24a !important;
  color: #111111 !important;
  transform: translateY(3px);
  box-shadow: 0 1px 0 #111111 !important;
}
.pkg-card.is-popular .pkg-btn,
.pkg-card.is-popular .pkg-btn:hover {
  background: #d6f25c !important;
  color: #111111 !important;
  border-color: #111111 !important;
}

/* ---- compact pay step (kd 2026-10-11): one aligned, centred column, nothing repeated ---------------- */
#orderModal .smm-pay-panel { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; text-align: center !important; padding: 0 !important; margin: 0 !important; }
#orderModal .smm-pay-panel > * { margin: 0 !important; }
#orderModal .smm-pay-panel .badge { display: inline-flex !important; width: auto !important; align-self: center !important; padding: 4px 10px !important; font-size: 11px !important; border-radius: 999px !important; }
#orderModal .smm-pay-eyebrow { display: none !important; }
#orderModal .order-ref-line { font-size: 12px !important; color: var(--ck-muted) !important; font-weight: 600 !important; }
#orderModal .order-ref-line::before { content: "Order "; }
#orderModal .order-ref-line strong { color: var(--ck-ink) !important; font-weight: 800 !important; letter-spacing: .02em !important; }
#orderModal .order-amount-line { font-size: 13px !important; color: var(--ck-muted) !important; }
#orderModal .order-amount-line strong { display: block !important; font-family: var(--ck-font-display) !important; font-size: 30px !important; line-height: 1.1 !important; font-weight: 800 !important; color: var(--ck-ink) !important; }
/* summary: only "For: <link>", the header already says the service, quantity and price */
#orderModal .ig-pay-summary { width: 100% !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius-sm) !important; background: var(--ck-panel) !important; text-align: left !important; }
#orderModal .ig-pay-summary-title { display: none !important; }
#orderModal .ig-pay-summary-grid { display: block !important; margin: 0 !important; }
#orderModal .ig-pay-summary-grid > div { display: none !important; }
#orderModal .ig-pay-summary-grid > div:has(.ig-pay-summary-target) { display: flex !important; gap: 8px !important; align-items: baseline !important; margin: 0 !important; }
#orderModal .ig-pay-summary-grid dt { font-size: 12px !important; color: var(--ck-muted) !important; font-weight: 600 !important; margin: 0 !important; }
#orderModal .ig-pay-summary-grid dt::after { content: ":"; }
#orderModal .ig-pay-summary-grid dd { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: var(--ck-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; }
#orderModal .upi-desktop-view, #orderModal .upi-mobile-view, #orderModal .upi-backup, #orderModal #orderEvidenceStep { width: 100% !important; }
#orderModal .upi-heading { margin: 4px 0 6px !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--ck-muted) !important; font-weight: 700 !important; }
#orderModal .upi-qr-frame { display: inline-flex !important; padding: 8px !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius) !important; background: #fff !important; }
#orderModal #upiQrImg { width: 184px !important; height: 184px !important; display: block !important; }
#orderModal .upi-app-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; }
#orderModal .btn-upi-app { min-height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--ck-radius-sm) !important; font-weight: 800 !important; }
#orderModal #orderWaitNote { margin: 2px 0 0 !important; font-size: 12px !important; color: var(--ck-muted) !important; }
#orderModal #btnPaidEarly:not([hidden]), #orderModal #btnShowBackup:not([hidden]), #orderModal #btnCompletePayment, #orderModal #btnProceedPay, #orderModal #btnSuccessClose { width: 100% !important; min-height: 46px !important; margin: 0 !important; }
#orderModal .upi-backup:not([hidden]) { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
#orderModal [hidden], #orderModal #orderEvidenceStep[hidden], #orderModal .upi-backup[hidden], #orderModal .upi-desktop-view[hidden], #orderModal .upi-mobile-view[hidden] { display: none !important; }
#orderModal #orderEvidenceStep:not([hidden]) { display: flex !important; flex-direction: column !important; gap: 10px !important; text-align: left !important; margin-top: 10px !important; }
#orderModal #orderEvidenceStep .field { margin: 0 !important; }
#orderModal .field input { min-height: 44px !important; }
#orderModal .form-hint { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
#orderModal .btn-upi-app, #orderModal .btn-upi-app.is-others { font-family: var(--ck-font-body) !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0 !important; }
#orderModal #orderEvidenceStep .field:has(#orderUtr) { order: -1 !important; }
#orderModal #orderEvidenceStep > .form-hint:first-child { order: -2 !important; }