/* =========================================================
   Bareeq Tawasul — Checkout Mint Light Theme
   Scope: checkout.html only
   Visual overrides only
   ========================================================= */

html{
  color-scheme:light !important;
}

body[data-page="checkout"]{
  --co-bg:#f4fffc;
  --co-bg-soft:#ecfaf6;
  --co-surface:#ffffff;
  --co-surface-soft:#f7fffd;

  --co-text:#143f3a;
  --co-heading:#073f39;
  --co-muted:#5d7b76;

  --co-primary:#087f71;
  --co-primary-dark:#05685e;
  --co-primary-light:#1aa38f;

  --co-border:rgba(8,127,113,.16);
  --co-border-strong:rgba(8,127,113,.30);

  --co-shadow:
    0 16px 44px rgba(18,83,73,.11),
    0 3px 12px rgba(18,83,73,.05);

  --co-shadow-soft:
    0 9px 26px rgba(18,83,73,.08);

  margin:0 !important;

  background:
    radial-gradient(
      920px 560px at 8% 10%,
      rgba(33,178,154,.13),
      transparent 68%
    ),
    radial-gradient(
      850px 520px at 94% 18%,
      rgba(91,213,191,.12),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #f8fffd 0%,
      #effaf7 48%,
      #f8fffd 100%
    ) !important;

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

/* إزالة الخلفية الداكنة القديمة */
body[data-page="checkout"]::before{
  background:
    radial-gradient(
      950px 600px at 12% 18%,
      rgba(8,127,113,.10),
      transparent 70%
    ),
    radial-gradient(
      850px 560px at 88% 22%,
      rgba(72,198,176,.11),
      transparent 72%
    ) !important;
}

/* الروابط */
body[data-page="checkout"] a{
  color:var(--co-primary-dark);
}

/* التركيز */
body[data-page="checkout"] :focus-visible{
  outline:3px solid rgba(8,127,113,.25) !important;
  outline-offset:3px !important;
}

/* تخطي المحتوى */
body[data-page="checkout"] .skip-link{
  background:#ffffff !important;
  color:var(--co-heading) !important;
  border:1px solid var(--co-border-strong) !important;
  box-shadow:var(--co-shadow-soft);
}

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

body[data-page="checkout"] .co-header{
  background:rgba(255,255,255,.90) !important;
  border-bottom:1px solid var(--co-border) !important;
  box-shadow:0 8px 28px rgba(18,83,73,.08);
  backdrop-filter:blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(145%) !important;
}

body[data-page="checkout"] .co-brand{
  background:#ffffff !important;
  box-shadow:
    0 0 0 1px var(--co-border-strong),
    0 10px 28px rgba(8,127,113,.14) !important;
}

body[data-page="checkout"] .co-title{
  color:var(--co-heading) !important;
}

body[data-page="checkout"] .co-sub{
  color:var(--co-muted) !important;
}

body[data-page="checkout"] .co-breadcrumbs ol{
  color:var(--co-muted) !important;
}

body[data-page="checkout"] .co-breadcrumbs a{
  color:var(--co-primary) !important;
}

body[data-page="checkout"] .co-breadcrumbs a:hover{
  color:var(--co-primary-dark) !important;
}

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

body[data-page="checkout"] .co-main{
  background:
    radial-gradient(
      800px 440px at 18% 18%,
      rgba(8,127,113,.10),
      transparent 62%
    ),
    radial-gradient(
      760px 440px at 82% 28%,
      rgba(80,204,181,.11),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(247,255,253,.98),
      rgba(238,250,247,.98)
    ) !important;

  border:1px solid var(--co-border) !important;
  box-shadow:var(--co-shadow) !important;
}

body[data-page="checkout"] .co-main::before{
  background:
    radial-gradient(
      680px 360px at 12% 18%,
      rgba(8,127,113,.07),
      transparent 64%
    ),
    radial-gradient(
      680px 360px at 88% 30%,
      rgba(70,195,173,.08),
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(8,127,113,.02),
      transparent 48%
    ) !important;

  opacity:1 !important;
}

/* =========================
   Cards
   ========================= */

body[data-page="checkout"] .co-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(247,255,253,.96)
    ) !important;

  border:1px solid var(--co-border) !important;
  box-shadow:var(--co-shadow) !important;
  color:var(--co-text) !important;
}

body[data-page="checkout"] .co-card::before,
body[data-page="checkout"] .co-panel::before{
  background:
    radial-gradient(
      620px 320px at 14% 20%,
      rgba(8,127,113,.055),
      transparent 65%
    ),
    radial-gradient(
      620px 320px at 86% 72%,
      rgba(68,195,172,.06),
      transparent 67%
    ) !important;

  opacity:1 !important;
}

body[data-page="checkout"] .co-h2{
  color:var(--co-heading) !important;
}

/* =========================
   Summary values
   ========================= */

body[data-page="checkout"] .co-kv{
  background:rgba(247,255,253,.92) !important;
  border:1px solid var(--co-border) !important;
  box-shadow:0 5px 16px rgba(18,83,73,.045);
}

body[data-page="checkout"] .co-key{
  color:var(--co-muted) !important;
}

body[data-page="checkout"] .co-val{
  color:var(--co-primary-dark) !important;
}

body[data-page="checkout"] .co-note{
  background:
    linear-gradient(
      135deg,
      rgba(235,250,246,.96),
      rgba(250,255,254,.98)
    ) !important;

  border:1px solid var(--co-border) !important;
  color:var(--co-muted) !important;
}

/* =========================
   Methods
   ========================= */

body[data-page="checkout"] .co-radio{
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--co-border) !important;
  color:var(--co-heading) !important;
  box-shadow:0 5px 16px rgba(18,83,73,.045);
}

body[data-page="checkout"] .co-radio:hover{
  border-color:var(--co-border-strong) !important;
  background:#ffffff !important;
  box-shadow:var(--co-shadow-soft) !important;
}

body[data-page="checkout"] .co-radio:has(input:checked){
  background:
    linear-gradient(
      135deg,
      rgba(220,248,241,.98),
      rgba(248,255,253,.98)
    ) !important;

  border-color:rgba(8,127,113,.42) !important;

  box-shadow:
    0 0 0 3px rgba(8,127,113,.08),
    0 10px 26px rgba(18,83,73,.10) !important;
}

body[data-page="checkout"] .co-radio input{
  accent-color:var(--co-primary);
}

/* =========================
   Labels and inputs
   ========================= */

body[data-page="checkout"] .co-label{
  color:var(--co-heading) !important;
}

body[data-page="checkout"] .co-input{
  background:#ffffff !important;
  color:var(--co-text) !important;
  border:1px solid var(--co-border-strong) !important;
  box-shadow:0 3px 10px rgba(18,83,73,.035);
}

body[data-page="checkout"] .co-input:focus{
  border-color:var(--co-primary) !important;
  box-shadow:
    0 0 0 4px rgba(8,127,113,.10),
    0 7px 18px rgba(18,83,73,.07) !important;
}

body[data-page="checkout"] .co-input::placeholder{
  color:#78928e !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:var(--co-text) !important;
  box-shadow:0 0 0 1000px #ffffff inset !important;
  caret-color:var(--co-text) !important;
}

body[data-page="checkout"] .co-hint{
  color:var(--co-muted) !important;
}

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

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

body[data-page="checkout"] .co-btn--primary{
  background:
    linear-gradient(
      135deg,
      var(--co-primary),
      var(--co-primary-light)
    ) !important;

  color:#ffffff !important;
  border-color:transparent !important;

  box-shadow:
    0 12px 28px rgba(8,127,113,.22),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body[data-page="checkout"] .co-btn--primary:hover{
  box-shadow:
    0 16px 34px rgba(8,127,113,.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

body[data-page="checkout"] .co-btn--muted{
  background:#eef8f5 !important;
  color:var(--co-heading) !important;
  border-color:var(--co-border) !important;
}

body[data-page="checkout"] .co-btn--ghost{
  background:#ffffff !important;
  color:var(--co-primary-dark) !important;
  border:1px dashed var(--co-border-strong) !important;
}

body[data-page="checkout"] .co-btn--muted:hover,
body[data-page="checkout"] .co-btn--ghost:hover{
  background:#f7fffd !important;
  border-color:var(--co-primary) !important;
}

/* =========================
   Payment hero
   ========================= */

body[data-page="checkout"] .co-pay-hero__eyebrow{
  background:rgba(224,248,242,.96) !important;
  border:1px solid var(--co-border-strong) !important;
  color:var(--co-primary-dark) !important;
  box-shadow:0 6px 18px rgba(8,127,113,.08) !important;
}

body[data-page="checkout"] .co-pay-hero__title{
  color:var(--co-heading) !important;
}

body[data-page="checkout"] .co-pay-hero__desc{
  color:var(--co-muted) !important;
}

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

/* بطاقات طرق الدفع */
body[data-page="checkout"] .co-pay-method-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(246,253,251,.96)
    ) !important;

  border:1px solid var(--co-border) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    0 10px 24px rgba(18,83,73,.08) !important;
}

body[data-page="checkout"] .co-pay-method-card:hover{
  border-color:var(--co-border-strong) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.80),
    0 15px 30px rgba(18,83,73,.12) !important;
}

body[data-page="checkout"] .co-pay-method-card__label{
  color:var(--co-heading) !important;
}

body[data-page="checkout"] .co-pay-method-card__icon{
  border-color:rgba(8,127,113,.14) !important;
  box-shadow:inset 0 0 12px rgba(255,255,255,.50) !important;
}

/* الحفاظ على هوية ألوان الشركات لكن بخلفية فاتحة */
body[data-page="checkout"] .co-pay-method-card--vodafone .co-pay-method-card__icon{
  background:rgba(230,0,0,.10) !important;
  color:#b00020 !important;
}

body[data-page="checkout"] .co-pay-method-card--etisalat .co-pay-method-card__icon{
  background:rgba(75,165,35,.12) !important;
  color:#34761c !important;
}

body[data-page="checkout"] .co-pay-method-card--orange .co-pay-method-card__icon{
  background:rgba(255,121,0,.12) !important;
  color:#bd5b00 !important;
}

body[data-page="checkout"] .co-pay-method-card--we .co-pay-method-card__icon{
  background:rgba(118,45,159,.11) !important;
  color:#6a268e !important;
}

body[data-page="checkout"] .co-pay-method-card--instapay .co-pay-method-card__icon{
  background:rgba(111,45,148,.10) !important;
  color:#68298a !important;
}

body[data-page="checkout"] .co-pay-method-card--usdt .co-pay-method-card__icon{
  background:rgba(38,161,123,.11) !important;
  color:#17785b !important;
}

/* =========================
   WhatsApp
   ========================= */

body[data-page="checkout"] .co-whatsapp-link{
  background:rgba(34,197,94,.10) !important;
  border:1px solid rgba(34,197,94,.26) !important;
  color:#147a3f !important;
}

body[data-page="checkout"] .co-whatsapp-link__icon{
  background:rgba(34,197,94,.16) !important;
  color:#147a3f !important;
}

/* =========================
   Intent box
   ========================= */

body[data-page="checkout"] .co-intent-box{
  border:1px solid var(--co-border) !important;

  background:
    radial-gradient(
      circle at top right,
      rgba(8,127,113,.08),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(245,253,251,.98)
    ) !important;

  box-shadow:var(--co-shadow) !important;
}

body[data-page="checkout"] .co-intent-box::before{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(8,127,113,.04),
      transparent
    ) !important;
}

body[data-page="checkout"] .co-intent-box .co-kv{
  background:rgba(249,255,253,.96) !important;
  border:1px solid var(--co-border) !important;
}

body[data-page="checkout"] .co-intent-box .co-kv:hover{
  background:#ffffff !important;
  border-color:var(--co-border-strong) !important;
}

body[data-page="checkout"] .co-intent-box .co-key{
  color:var(--co-muted) !important;
}

body[data-page="checkout"] #intentReference{
  color:var(--co-primary-dark) !important;
}

body[data-page="checkout"] #intentExpiry{
  color:var(--co-heading) !important;
}

body[data-page="checkout"] #intentStatus{
  background:#f7fffd !important;
  color:var(--co-text) !important;
  border-color:var(--co-border) !important;
}

body[data-page="checkout"] #intentStatus.is-loading{
  background:#eef6ff !important;
  border-color:#b7d7f4 !important;
  color:#245a86 !important;
}

body[data-page="checkout"] #intentStatus.is-ready{
  background:#e8f8f3 !important;
  border-color:rgba(8,127,113,.25) !important;
  color:var(--co-primary-dark) !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:#eff6ff !important;
  border-color:#bdd5f5 !important;
  color:#245a86 !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;
}

/* =========================
   Fawry card
   ========================= */

body[data-page="checkout"] .co-fawry-card{
  background:
    linear-gradient(
      145deg,
      #fffdf4,
      #fff9e7
    ) !important;

  border:1px solid rgba(213,155,16,.28) !important;
  color:var(--co-heading) !important;
  box-shadow:0 14px 34px rgba(151,104,0,.10);
}

body[data-page="checkout"] .co-fawry-card__badge{
  background:rgba(34,197,94,.10) !important;
  border-color:rgba(34,197,94,.24) !important;
  color:#17723a !important;
}

body[data-page="checkout"] .co-fawry-card__title{
  color:#9d6800 !important;
}

body[data-page="checkout"] .co-fawry-card__code{
  background:#ffffff !important;
  border-color:rgba(191,137,0,.45) !important;
  color:#815700 !important;
  box-shadow:0 8px 20px rgba(160,113,0,.08);
}

body[data-page="checkout"] .co-fawry-card__copy{
  background:
    linear-gradient(
      135deg,
      #f5b800,
      #ffd86b
    ) !important;

  color:#493000 !important;
}

body[data-page="checkout"] .co-fawry-card__text{
  color:#6d6451 !important;
}

body[data-page="checkout"] .co-fawry-card__channels span{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(191,137,0,.18) !important;
  color:#6d5530 !important;
}

/* =========================
   Footer
   ========================= */

body[data-page="checkout"] .co-footer{
  background:
    linear-gradient(
      180deg,
      rgba(230,248,243,.86),
      rgba(216,241,234,.96)
    ) !important;

  border-top:1px solid var(--co-border) !important;
}

body[data-page="checkout"] .co-footer .co-legal{
  color:var(--co-muted) !important;
}

body[data-page="checkout"] .co-footer-nav a{
  color:var(--co-primary-dark) !important;
  background:rgba(255,255,255,.68) !important;
  border:1px solid var(--co-border) !important;
}

body[data-page="checkout"] .co-footer-nav a:hover{
  background:#ffffff !important;
  border-color:var(--co-border-strong) !important;
}

/* =========================
   Mobile
   ========================= */

@media (max-width:768px){

  body[data-page="checkout"] .co-main{
    border-radius:18px;
    margin-inline:8px;
  }

  body[data-page="checkout"] .co-header__wrap{
    padding:.85rem 1rem;
  }

  body[data-page="checkout"] .co-card{
    box-shadow:
      0 10px 28px rgba(18,83,73,.08) !important;
  }
}

@media (max-width:560px){

  body[data-page="checkout"] .co-methods{
    gap:.75rem;
  }

  body[data-page="checkout"] .co-radio{
    min-height:58px;
  }

  body[data-page="checkout"] .co-pay-method-card{
    min-height:78px;
  }
}

/* =========================
   Reduced motion
   ========================= */

@media (prefers-reduced-motion:reduce){

  body[data-page="checkout"] *,
  body[data-page="checkout"] *::before,
  body[data-page="checkout"] *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   Checkout support badges visibility fix
========================================================= */

body[data-page="checkout"] .co-support .co-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
}

body[data-page="checkout"] .co-support .co-badge{
  opacity:1 !important;
  visibility:visible !important;
  color:#075f57 !important;
  background:#e7f8f4 !important;
  border:1px solid rgba(8,127,113,.28) !important;
  font-weight:900 !important;
  text-shadow:none !important;
  box-shadow:0 5px 14px rgba(8,127,113,.08) !important;
}

body[data-page="checkout"] .co-support .co-badge--platform{
  color:#7a5600 !important;
  background:#fff7dc !important;
  border-color:rgba(210,160,26,.38) !important;
}

body[data-page="checkout"] .co-support .co-badge--method{
  color:#075f57 !important;
  background:#e7f8f4 !important;
  border-color:rgba(8,127,113,.28) !important;
}

body[data-page="checkout"] .co-support #portalLink{
  color:#076b62 !important;
  background:#ffffff !important;
  border-color:rgba(8,127,113,.26) !important;
}

body[data-page="checkout"] .co-support #portalLink:hover{
  color:#054f49 !important;
  background:#f2fffc !important;
  border-color:rgba(8,127,113,.45) !important;
}