/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — PAYMENT-DONE POPUP (account details after payment)
   Slim offer plate · slim "Payment complete" banner · account-type
   heading · shorter Miniclip/Gmail/Facebook tiles · smaller fields.
   No under-shadows anywhere in this popup. Loaded last.
   ═══════════════════════════════════════════════════════════════════ */

/* ── offer name + amount plate: thinner, flat, no shadow ── */
html body #orderModal#orderModal:not(#zz) .order-summary {
  gap: 8px !important;
  margin: 0 0 8px !important;
  padding: 7px 7px 7px 14px !important;
  border-radius: 13px !important;
  background: #f4f7fd !important;
  box-shadow: none !important;
}
html body #orderModal#orderModal:not(#zz) .order-summary strong {
  font: 800 14px/1.25 Inter, system-ui, sans-serif !important;
  letter-spacing: -.005em !important;
}
html body #orderModal#orderModal:not(#zz) .order-summary b {
  padding: 6px 13px !important;
  border-radius: 10px !important;
  font: 800 16px/1 Inter, system-ui, sans-serif !important;
  box-shadow: none !important;
}

/* ── Payment complete banner: slimmer, clean, flat ── */
html body #orderModal#orderModal:not(#zz) .account-payment-success {
  align-items: center !important;
  gap: 11px !important;
  margin: 0 0 10px !important;
  padding: 9px 13px !important;
  border: 1px solid rgba(126, 240, 188, .3) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #1a7553 0%, #135a45 100%) !important;
  box-shadow: none !important;
}
html body #orderModal#orderModal:not(#zz) .account-payment-success::after { display: none !important; }
html body #orderModal#orderModal:not(#zz) .account-payment-success-mark {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(180deg, #7bf0a8 0%, #2fcf68 100%) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22) !important;
}
html body #orderModal#orderModal:not(#zz) .account-payment-success-mark svg { width: 17px !important; height: 17px !important; }
html body #orderModal#orderModal:not(#zz) .account-payment-success strong {
  margin: 0 !important;
  font: 800 14.5px/1.2 Inter, system-ui, sans-serif !important;
  letter-spacing: .01em;
}
html body #orderModal#orderModal:not(#zz) .account-payment-success small {
  margin-top: 2px !important;
  font: 500 11.5px/1.4 Inter, system-ui, sans-serif !important;
  color: #cfeee0 !important;
}

/* ── heading above Miniclip / Gmail / Facebook ── */
html body #orderModal#orderModal:not(#zz) .credential-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 2px 8px;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #c9d5f5;
}
html body #orderModal#orderModal:not(#zz) .credential-heading::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: #f7bd16;
}
html body #orderModal#orderModal:not(#zz) .credential-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(180, 196, 240, .35), rgba(180, 196, 240, 0));
}

/* ── Miniclip / Gmail / Facebook tiles: same width, less height ── */
html body #orderModal#orderModal:not(#zz) .credential-panel { margin-top: 4px !important; }
html body #orderModal#orderModal:not(#zz) .credential-grid { gap: 8px !important; margin-bottom: 0 !important; }
html body #orderModal#orderModal:not(#zz) .credential-option {
  min-height: 0 !important;
  padding: 7px 4px 6px !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #34427a 0%, #283263 100%) !important;
  color: #eef2ff !important;
  -webkit-text-fill-color: #eef2ff !important;
  box-shadow: none !important;
  font: 700 11px/1.15 Inter, system-ui, sans-serif !important;
}
html body #orderModal#orderModal:not(#zz) .credential-option .co-ico {
  width: 32px !important;
  height: 32px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}
html body #orderModal#orderModal:not(#zz) .credential-option .co-miniclip { padding: 2px !important; }
html body #orderModal#orderModal:not(#zz) .credential-option.active,
html body #orderModal#orderModal:not(#zz) .credential-option.selected,
html body #orderModal#orderModal:not(#zz) .credential-option.is-active,
html body #orderModal#orderModal:not(#zz) .credential-option[aria-pressed="true"] {
  background: linear-gradient(180deg, #3d4d8e 0%, #2e3a73 100%) !important;
  box-shadow: 0 0 0 2px #f7bd16 !important;
}
html body #orderModal#orderModal:not(#zz) .credential-option.active::after {
  top: 4px !important;
  right: 4px !important;
  width: 13px !important;
  height: 13px !important;
  background-size: 8px, auto !important;
}

/* ── labels + fields: smaller, tidier ── */
html body #orderModal#orderModal:not(#zz) #accountStep .field { margin: 8px 0 0 !important; }
html body #orderModal#orderModal:not(#zz) #accountStep .field label {
  margin: 0 0 4px 2px !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
}
html body #orderModal#orderModal:not(#zz) #accountStep .field input:not([type="hidden"]):not([type="file"]) {
  height: 44px !important;
  padding-left: 46px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  background-position: 7px center, 0 0 !important;
  background-size: 28px 28px, 100% 100% !important;
}

/* ── safety list + submit button: compact, flat ── */
html body #orderModal#orderModal:not(#zz) .order-trust-list {
  gap: 6px !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px 11px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
html body #orderModal#orderModal:not(#zz) .order-nav.order-nav-single { margin: 14px 0 2px !important; }
html body #orderModal#orderModal:not(#zz) .order-nav.order-nav-single .op-btn.op-submit {
  height: 48px !important;
  box-shadow: none !important;
}