/* =========================================================
   Bareeq Tawasul — Checkout Premium Visual Theme
   VISUAL OVERRIDE ONLY
   No payment logic / visibility / layout changes
   ========================================================= */

body[data-page="checkout"],
body.checkout-page,
body{
  --co-premium-navy:#07152f;
  --co-premium-navy-2:#0b1f46;
  --co-premium-blue:#2563eb;
  --co-premium-cyan:#06b6d4;
  --co-premium-violet:#7c3aed;
  --co-premium-text:#0f172a;
  --co-premium-muted:#64748b;
  --co-premium-border:rgba(37,99,235,.16);
  --co-premium-soft:#f5f8ff;

  background:
    radial-gradient(circle at 8% 8%,rgba(37,99,235,.09),transparent 25%),
    radial-gradient(circle at 92% 10%,rgba(124,58,237,.08),transparent 25%),
    linear-gradient(135deg,#ffffff 0%,#f5f8ff 52%,#faf8ff 100%) !important;

  color:var(--co-premium-text);
}


/* ===== Header ===== */

.co-header{
  background:rgba(255,255,255,.96) !important;

  border-color:rgba(37,99,235,.11) !important;

  box-shadow:
    0 12px 32px rgba(15,23,42,.07) !important;
}

.co-header a,
.co-header strong,
.co-header span{
  color:var(--co-premium-navy) !important;
}


/* ===== Main cards ===== */

.co-card,
.co-pay-hero,
.co-transfer-confirm,
.co-payment-reminder,
.co-support{
  background:
    linear-gradient(145deg,#ffffff,#f8faff) !important;

  border-color:var(--co-premium-border) !important;

  box-shadow:
    0 18px 44px rgba(15,23,42,.08) !important;
}


/* ===== Headings ===== */

.co-card h1,
.co-card h2,
.co-card h3,
.co-pay-hero h1,
.co-pay-hero h2,
.co-pay-hero h3,
.co-transfer-confirm h2,
.co-transfer-confirm h3,
.co-support h2,
.co-support h3{
  color:var(--co-premium-navy) !important;
}


/* ===== General text ===== */

.co-card p,
.co-card small,
.co-card label,
.co-pay-hero p,
.co-note,
.co-kv,
.co-support p,
.co-payment-reminder{
  color:#526174 !important;
}


/* ===== Accent / highlighted text ===== */

.co-card strong,
.co-pay-hero strong,
.co-kv strong{
  color:var(--co-premium-navy) !important;
}


/* ===== Inputs ===== */

.co-card input,
.co-card select,
.co-card textarea,
.co-transfer-confirm input,
.co-transfer-confirm select,
.co-transfer-confirm textarea{
  background:#ffffff !important;

  color:var(--co-premium-text) !important;

  border-color:rgba(37,99,235,.18) !important;

  box-shadow:
    inset 0 0 0 1px rgba(37,99,235,.02) !important;
}

.co-card input:focus,
.co-card select:focus,
.co-card textarea:focus,
.co-transfer-confirm input:focus,
.co-transfer-confirm select:focus,
.co-transfer-confirm textarea:focus{
  border-color:var(--co-premium-blue) !important;

  box-shadow:
    0 0 0 4px rgba(37,99,235,.10) !important;

  outline:none !important;
}


/* ===== Payment methods ===== */

.co-methods{
  border-color:rgba(37,99,235,.12) !important;
}

.co-radio{
  background:
    linear-gradient(145deg,#fff,#f7f9ff) !important;

  border-color:rgba(37,99,235,.16) !important;

  color:var(--co-premium-text) !important;
}

.co-radio:hover{
  border-color:rgba(37,99,235,.32) !important;

  box-shadow:
    0 10px 24px rgba(37,99,235,.08) !important;
}

.co-radio:has(input:checked){
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.08),
      rgba(6,182,212,.06),
      rgba(124,58,237,.07)
    ) !important;

  border-color:var(--co-premium-blue) !important;

  box-shadow:
    0 12px 28px rgba(37,99,235,.12) !important;
}


/* ===== Key / value areas ===== */

.co-kv{
  background:#f8faff !important;

  border-color:rgba(37,99,235,.12) !important;
}


/* ===== Notes ===== */

.co-note{
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.065),
      rgba(6,182,212,.045)
    ) !important;

  border-color:rgba(37,99,235,.14) !important;
}


/* ===== Buttons ===== */

.co-btn{
  border-color:rgba(37,99,235,.16) !important;
}

.co-btn--primary,
.co-btn.primary,
button.co-btn:not(.co-btn--ghost):not(.co-btn--secondary){
  background:
    linear-gradient(
      135deg,
      #1d4ed8 0%,
      #2563eb 48%,
      #7c3aed 100%
    ) !important;

  color:#ffffff !important;

  border-color:transparent !important;

  box-shadow:
    0 14px 32px rgba(37,99,235,.23) !important;
}

.co-btn--primary:hover,
.co-btn.primary:hover{
  box-shadow:
    0 18px 38px rgba(37,99,235,.29) !important;
}

.co-btn--ghost,
.co-btn--secondary{
  background:#ffffff !important;

  color:#1d4ed8 !important;

  border-color:rgba(37,99,235,.18) !important;
}


/* ===== Bank progress ===== */

.co-bank-progress{
  border-color:rgba(37,99,235,.12) !important;
}

.co-bank-step{
  background:#ffffff !important;

  border-color:rgba(37,99,235,.14) !important;

  color:#526174 !important;
}

.co-bank-step.is-active,
.co-bank-step.active,
.co-bank-step.is-done,
.co-bank-step.done{
  border-color:rgba(37,99,235,.30) !important;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.09),
      rgba(6,182,212,.07),
      rgba(124,58,237,.06)
    ) !important;

  color:var(--co-premium-navy) !important;
}


/* ===== Reminder ===== */

.co-payment-reminder{
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.07),
      rgba(124,58,237,.055)
    ) !important;

  border-color:rgba(37,99,235,.14) !important;
}


/* ===== Support ===== */

.co-support{
  border-color:rgba(37,99,235,.13) !important;
}

.co-support a{
  color:var(--co-premium-blue) !important;
}


/* ===== Links ===== */

.co-main a{
  color:var(--co-premium-blue);
}

.co-main a:hover{
  color:var(--co-premium-violet);
}


/* =========================================================
   Bareeq Tawasul Checkout Premium V2
   HIGH-SPECIFICITY VISUAL OVERRIDES ONLY
   ========================================================= */

body[data-page="checkout"]{
  --co-bg:#f6f8ff !important;
  --co-bg-soft:#eef3ff !important;
  --co-surface:#ffffff !important;
  --co-surface-soft:#f8faff !important;

  --co-text:#0f172a !important;
  --co-heading:#07152f !important;
  --co-muted:#64748b !important;

  --co-primary:#2563eb !important;
  --co-primary-dark:#1d4ed8 !important;
  --co-primary-light:#06b6d4 !important;

  --co-border:rgba(37,99,235,.16) !important;
  --co-border-strong:rgba(37,99,235,.30) !important;

  background:
    radial-gradient(circle at 12% 8%,rgba(37,99,235,.10),transparent 27%),
    radial-gradient(circle at 88% 12%,rgba(124,58,237,.09),transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f4f7ff 50%,#faf8ff 100%) !important;

  color:#0f172a !important;
}

body[data-page="checkout"]::before{
  background:
    linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px) !important;
}


/* HEADER */

body[data-page="checkout"] .co-header{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(37,99,235,.12) !important;
  box-shadow:0 12px 34px rgba(15,23,42,.08) !important;
}

body[data-page="checkout"] .co-brand,
body[data-page="checkout"] .co-title{
  color:#07152f !important;
}

body[data-page="checkout"] .co-sub{
  color:#64748b !important;
}

body[data-page="checkout"] .co-breadcrumbs a{
  color:#2563eb !important;
}

body[data-page="checkout"] .co-breadcrumbs a:hover{
  color:#7c3aed !important;
}


/* MAIN BACKGROUND */

body[data-page="checkout"] .co-main{
  background:
    radial-gradient(circle at 8% 15%,rgba(6,182,212,.065),transparent 25%),
    radial-gradient(circle at 92% 12%,rgba(124,58,237,.07),transparent 28%),
    linear-gradient(145deg,rgba(248,250,255,.98),rgba(244,247,255,.98)) !important;
}

body[data-page="checkout"] .co-main::before{
  background:
    linear-gradient(rgba(37,99,235,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.028) 1px,transparent 1px) !important;
}


/* MAIN CARDS */

body[data-page="checkout"] .co-card{
  background:
    linear-gradient(145deg,#ffffff 0%,#f8faff 100%) !important;

  border-color:rgba(37,99,235,.16) !important;

  box-shadow:
    0 22px 55px rgba(15,23,42,.09),
    0 3px 12px rgba(37,99,235,.04) !important;
}

body[data-page="checkout"] .co-card::before,
body[data-page="checkout"] .co-panel::before{
  background:
    linear-gradient(
      90deg,
      #2563eb,
      #06b6d4,
      #7c3aed
    ) !important;
}

body[data-page="checkout"] .co-h2{
  color:#07152f !important;
}


/* KEY / VALUE */

body[data-page="checkout"] .co-kv{
  background:
    linear-gradient(145deg,#ffffff,#f7f9ff) !important;

  border-color:rgba(37,99,235,.15) !important;

  box-shadow:0 5px 16px rgba(15,23,42,.045) !important;
}

body[data-page="checkout"] .co-key{
  color:#64748b !important;
}

body[data-page="checkout"] .co-val{
  color:#0f2b63 !important;
}


/* PAYMENT NOTES */

body[data-page="checkout"] .co-note{
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.065),
      rgba(6,182,212,.045),
      rgba(124,58,237,.045)
    ) !important;

  border-color:rgba(37,99,235,.16) !important;

  color:#334155 !important;
}


/* PAYMENT METHOD RADIO */

body[data-page="checkout"] .co-radio{
  background:
    linear-gradient(145deg,#ffffff,#f8faff) !important;

  border-color:rgba(37,99,235,.17) !important;

  color:#0f172a !important;

  box-shadow:0 5px 16px rgba(15,23,42,.045) !important;
}

body[data-page="checkout"] .co-radio:hover{
  border-color:rgba(37,99,235,.34) !important;

  box-shadow:0 10px 26px rgba(37,99,235,.10) !important;
}

body[data-page="checkout"] .co-radio:has(input:checked){
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.11),
      rgba(6,182,212,.07),
      rgba(124,58,237,.08)
    ) !important;

  border-color:#2563eb !important;

  box-shadow:
    0 0 0 3px rgba(37,99,235,.08),
    0 12px 28px rgba(37,99,235,.13) !important;
}

body[data-page="checkout"] .co-radio input{
  accent-color:#2563eb !important;
}


/* LABELS / INPUTS */

body[data-page="checkout"] .co-label{
  color:#334155 !important;
}

body[data-page="checkout"] .co-input{
  background:#ffffff !important;

  border-color:rgba(37,99,235,.18) !important;

  color:#0f172a !important;

  box-shadow:0 3px 10px rgba(15,23,42,.035) !important;
}

body[data-page="checkout"] .co-input:focus{
  border-color:#2563eb !important;

  box-shadow:
    0 0 0 4px rgba(37,99,235,.10),
    0 7px 18px rgba(15,23,42,.06) !important;
}

body[data-page="checkout"] .co-input::placeholder{
  color:#94a3b8 !important;
}

body[data-page="checkout"] input:-webkit-autofill,
body[data-page="checkout"] input:-webkit-autofill:focus,
body[data-page="checkout"] input:-webkit-autofill:hover{
  -webkit-text-fill-color:#0f172a !important;
  box-shadow:0 0 0 1000px #ffffff inset !important;
}


/* PRIMARY BUTTON */

body[data-page="checkout"] .co-btn--primary{
  background:
    linear-gradient(
      135deg,
      #1d4ed8 0%,
      #2563eb 42%,
      #4f46e5 68%,
      #7c3aed 100%
    ) !important;

  color:#ffffff !important;

  border-color:transparent !important;

  box-shadow:
    0 14px 32px rgba(37,99,235,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body[data-page="checkout"] .co-btn--primary:hover{
  box-shadow:
    0 18px 38px rgba(37,99,235,.30),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

body[data-page="checkout"] .co-btn--muted{
  background:#eef3ff !important;
  color:#475569 !important;
  border-color:rgba(37,99,235,.12) !important;
}

body[data-page="checkout"] .co-btn--ghost{
  background:#ffffff !important;
  color:#2563eb !important;
  border-color:rgba(37,99,235,.18) !important;
}


/* HERO PAYMENT */

body[data-page="checkout"] .co-pay-hero__eyebrow{
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.09),
      rgba(6,182,212,.07)
    ) !important;

  color:#1d4ed8 !important;

  border-color:rgba(37,99,235,.18) !important;
}

body[data-page="checkout"] .co-pay-hero__title{
  color:#07152f !important;
}

body[data-page="checkout"] .co-pay-hero__desc{
  color:#64748b !important;
}

body[data-page="checkout"] .co-pay-hero__pixel{
  background:
    linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px) !important;
}


/* PAYMENT METHOD CARDS */

body[data-page="checkout"] .co-pay-method-card{
  background:
    linear-gradient(145deg,#ffffff,#f7f9ff) !important;

  border-color:rgba(37,99,235,.15) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 10px 24px rgba(15,23,42,.07) !important;
}

body[data-page="checkout"] .co-pay-method-card:hover{
  border-color:rgba(37,99,235,.30) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    0 15px 30px rgba(37,99,235,.11) !important;
}

body[data-page="checkout"] .co-pay-method-card__label{
  color:#0f172a !important;
}


/* INSTAPAY */

body[data-page="checkout"] .co-pay-method-card--instapay .co-pay-method-card__icon{
  background:rgba(37,99,235,.10) !important;
  color:#2563eb !important;
}


/* INTENT / PAYMENT STATUS BOX */

body[data-page="checkout"] .co-intent-box{
  background:
    radial-gradient(circle at 10% 10%,rgba(6,182,212,.07),transparent 30%),
    linear-gradient(145deg,#ffffff,#f6f8ff) !important;

  border-color:rgba(37,99,235,.16) !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.08) !important;
}

body[data-page="checkout"] .co-intent-box::before{
  background:
    linear-gradient(
      90deg,
      #2563eb,
      #06b6d4,
      #7c3aed
    ) !important;
}

body[data-page="checkout"] .co-intent-box .co-kv{
  background:rgba(248,250,255,.96) !important;
}

body[data-page="checkout"] #intentReference{
  color:#1d4ed8 !important;
}


/* STATUS COLORS */

body[data-page="checkout"] #intentStatus.is-loading{
  background:#eef3ff !important;
  border-color:#bfd0ff !important;
  color:#315b9d !important;
}

body[data-page="checkout"] #intentStatus.is-ready{
  background:#ecfeff !important;
  border-color:#a5e7ef !important;
  color:#0e7490 !important;
}

body[data-page="checkout"] #intentStatus.is-approved{
  background:#edf9f0 !important;
  border-color:#b5dfbf !important;
  color:#176b30 !important;
}

body[data-page="checkout"] #intentStatus.is-review{
  background:#f5f3ff !important;
  border-color:#d8ccff !important;
  color:#6d3bd1 !important;
}

body[data-page="checkout"] #intentStatus.is-rejected{
  background:#fff1f1 !important;
  border-color:#efc3c3 !important;
  color:#a22b2b !important;
}

body[data-page="checkout"] #intentStatus.is-expired{
  background:#fff7ed !important;
  border-color:#f3d3aa !important;
  color:#9a4d0c !important;
}


/* SUPPORT */

body[data-page="checkout"] .co-support .co-badges{
  border-color:rgba(37,99,235,.12) !important;
}

body[data-page="checkout"] .co-support .co-badge{
  background:#f7f9ff !important;
  border-color:rgba(37,99,235,.16) !important;
  color:#334155 !important;
}

body[data-page="checkout"] .co-support .co-badge--platform{
  background:#eef3ff !important;
  color:#1d4ed8 !important;
  border-color:rgba(37,99,235,.22) !important;
}

body[data-page="checkout"] .co-support .co-badge--method{
  background:#f5f3ff !important;
  color:#6d3bd1 !important;
  border-color:rgba(124,58,237,.20) !important;
}

body[data-page="checkout"] .co-support #portalLink{
  background:#ffffff !important;
  color:#2563eb !important;
  border-color:rgba(37,99,235,.22) !important;
}

body[data-page="checkout"] .co-support #portalLink:hover{
  background:#f4f7ff !important;
  color:#7c3aed !important;
  border-color:rgba(124,58,237,.30) !important;
}


/* FOOTER */

body[data-page="checkout"] .co-footer{
  background:#07152f !important;
  border-color:rgba(37,99,235,.12) !important;
  color:#cbd5e1 !important;
}

body[data-page="checkout"] .co-footer .co-legal{
  color:#94a3b8 !important;
}

body[data-page="checkout"] .co-footer-nav a{
  color:#dbeafe !important;
}

body[data-page="checkout"] .co-footer-nav a:hover{
  color:#67e8f9 !important;
}


/* GENERIC CHECKOUT LINKS */

body[data-page="checkout"] a{
  color:#2563eb;
}