/* ==========================================================================
   IT Soft BD — brand layer.
   Palette is ONLY three colours:
     Deep Blue #1E3A8A · Dark Gray #374151 · Bright Cyan #06B6D4
   Every other value below is a tint or shade OF THOSE THREE (same hue,
   varied lightness), which is how a three-colour system stays usable while
   remaining strictly on-brand. Loaded after style.css so it wins.
   ========================================================================== */

:root{
  /* ---- THE THREE BRAND COLOURS — overridden at runtime by the admin
         Appearance screen (settings: brand_primary / brand_ink / brand_accent).
         Everything below is derived from these three, so changing them here
         re-themes the entire site. ---- */
  --brand:#1E3A8A;          /* Deep Blue   — primary   */
  --gray:#374151;           /* Dark Gray   — ink       */
  --cyan:#06B6D4;           /* Bright Cyan — accent    */

  /* ---- deep-blue tints/shades (static fallbacks first, then live mixes) ---- */
  --blue-950:#16296B;
  --blue-100:#DCE5F5;
  --blue-50:#EEF2FB;
  --blue-950:color-mix(in srgb, var(--brand) 72%, #000);
  --blue-100:color-mix(in srgb, var(--brand) 16%, #fff);
  --blue-50:color-mix(in srgb, var(--brand) 7%, #fff);

  /* ---- dark-gray tints/shades ---- */
  --gray-900:#1F2937;
  --gray-500:#6B7280;
  --gray-400:#9CA3AF;
  --gray-200:#E5E7EB;
  --gray-100:#F5F6F8;
  --gray-900:color-mix(in srgb, var(--gray) 78%, #000);
  --gray-500:color-mix(in srgb, var(--gray) 62%, #fff);
  --gray-400:color-mix(in srgb, var(--gray) 48%, #fff);
  --gray-200:color-mix(in srgb, var(--gray) 16%, #fff);
  --gray-100:color-mix(in srgb, var(--gray) 5%, #fff);

  /* ---- cyan tints/shades ---- */
  --cyan-700:#0891B2;
  --cyan-200:#CFFAFE;
  --cyan-50:#ECFEFF;
  --cyan-700:color-mix(in srgb, var(--cyan) 82%, #000);
  --cyan-200:color-mix(in srgb, var(--cyan) 40%, #fff);
  --cyan-50:color-mix(in srgb, var(--cyan) 8%, #fff);

  /* ---- map the original tokens onto the palette ---- */
  --brand-2:var(--cyan);
  --brand-ink:var(--blue-950);
  --ink:var(--gray);
  --body:color-mix(in srgb, var(--gray) 88%, #fff);
  --muted:var(--gray-500);
  --line:var(--gray-200);
  --bg:#fff;
  --soft:var(--gray-100);
  --soft2:var(--blue-50);

  /* states — hue carries no "off-brand" meaning; icons and weight carry it */
  --ok:var(--cyan);
  --warn:var(--gray);
  --err:var(--brand);
  --star:var(--cyan);

  --shadow:0 1px 2px rgba(55,65,81,.06), 0 10px 30px -14px rgba(30,58,138,.22);
  --grad:linear-gradient(120deg,var(--brand),var(--cyan));
}

/* ---------------------------------------------------------------- accents */
.site-header{position:sticky}
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.brand-mark{background:var(--grad)}
.promo{background:var(--grad)}

/* headings + links stay inside the palette */
h1,h2,h3,h4{color:var(--gray-900)}
a{color:var(--brand)}
.link{color:var(--brand-ink)}
.eyebrow{color:var(--cyan-700)}
.eyebrow::after{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--grad);margin-top:8px}
.center-head .eyebrow::after{margin-inline:auto}

/* --------------------------------------------------------------- buttons */
.btn{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover{background:var(--blue-950);border-color:var(--blue-950)}
.btn.ghost{background:#fff;color:var(--gray);border-color:var(--gray-200)}
.btn.ghost:hover{background:var(--gray-100);border-color:var(--gray-400);color:var(--brand)}
.btn.cyan{background:var(--cyan);border-color:var(--cyan);color:#083344}
.btn.cyan:hover{background:var(--cyan-700);border-color:var(--cyan-700);color:#fff}
.btn.danger{background:#fff;color:var(--brand);border-color:var(--blue-100)}
.btn.danger:hover{background:var(--blue-50);border-color:var(--brand);color:var(--blue-950)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------------------------------------------------------------- inputs */
.form input:focus,.form textarea:focus,.form select:focus,
.fld input:focus,.fld textarea:focus,.fld select:focus,
.filters input:focus,.filters select:focus,
.head-search input:focus{
  outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan);
}
.head-search button:hover{color:var(--brand)}
.radio input,input[type=range],.pm-item input,.pay input{accent-color:var(--cyan)}

/* ------------------------------------------------------------------ chips */
.tag{background:var(--blue-50);color:var(--brand-ink)}
.tag.ok{background:var(--cyan-50);color:var(--cyan-700)}
.tag.warn{background:var(--gray-100);color:var(--gray)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip:hover{border-color:var(--cyan);color:var(--brand)}

/* --------------------------------------------------------------- feedback */
.flash{background:var(--cyan-50);color:var(--cyan-700);border-bottom:1px solid var(--cyan-200)}
.flash-err{background:var(--blue-50);color:var(--brand);border-bottom:1px solid var(--blue-100);border-left:4px solid var(--brand)}
.flash::before{content:"i";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--cyan);color:#083344;font-size:.68rem;font-weight:800;margin-right:8px;vertical-align:1px}
.flash-err::before{content:"!";background:var(--brand);color:#fff}

/* ratings + saves */
.stars{color:var(--star)}
.buy-price .save{background:var(--cyan-50);color:var(--cyan-700)}
.pc-sale{background:var(--cyan);color:#083344}
.pc-top{background:rgba(30,58,138,.9);color:#fff}
.guarantee{background:var(--cyan-50);border-color:var(--cyan-200)}
.guarantee .ic{color:var(--cyan-700)}

/* --------------------------------------------------------------- surfaces */
.hero{background:linear-gradient(180deg,var(--blue-50) 0%,#fff 100%)}
.hero::after{background:radial-gradient(closest-side,rgba(6,182,212,.18),transparent)}
.blk.alt{background:var(--gray-100)}
.statsband{background:linear-gradient(120deg,var(--brand),var(--cyan));color:#fff}
.statsband b{color:#fff}
.statsband span{color:rgba(255,255,255,.75)}
.logo-item{color:var(--gray-400)}
.logo-item:hover{color:var(--brand)}
.logos{background:#fff}
.strip-grid .ic{color:var(--cyan-700)}
.card-ic{background:var(--blue-50);color:var(--brand)}
.step-num{background:var(--blue-50);color:var(--brand)}
.plan.is-best{border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,58,138,.10)}
.ribbon{background:var(--brand)}
.qmark{color:var(--blue-50)}
.quote-card figcaption{border-top-color:var(--gray-200)}
.acc summary::after{color:var(--cyan-700)}
.acc summary:hover{background:var(--gray-100)}
.acc details[open] summary{color:var(--brand)}
.table th{background:var(--gray-100);color:var(--gray-500)}
.table tbody tr:hover{background:var(--blue-50)}
.pager a:hover{background:var(--gray-100);border-color:var(--gray-400)}
.pager a.is-on{background:var(--brand);border-color:var(--brand)}
.pc-badge{color:var(--gray-500)}
.pc-media{background:linear-gradient(135deg,var(--blue-50),#fff)}
.pc-price .now,.plan-price,.buy-price .now,.stat b,.hero-stats b{color:var(--gray-900)}
.mini-p,.card-foot,.link,.page-head a,.prose a{color:var(--brand)}
.trust .ic,.specs .ic,.ticks .ic{color:var(--cyan-700)}
.portal-nav nav a.is-active,.a-tabs a.on{background:var(--blue-50);color:var(--brand)}
.portal-nav nav a:hover{background:var(--gray-100)}
.avatar{background:var(--grad)}
.auth{background:var(--gray-100)}
.video,.table,.acc,.filters,.buy-card,.panel,.card,.a-card,.hero-card{border-color:var(--gray-200)}
.btn.ghost.on-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}

/* dark bands use deep blue, never near-black */
.cta-band{background:linear-gradient(120deg,var(--brand),var(--blue-950))}
.cta-band.soft{background:var(--gray-100)}
.cta-small{color:rgba(255,255,255,.78)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--gray);border-top:3px solid var(--cyan)}
.site-footer h4{color:#fff}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--cyan)}
.foot-contact{color:rgba(255,255,255,.68)}
.socials a{background:rgba(255,255,255,.10);color:#fff}
.socials a:hover{background:var(--cyan);color:#083344}
.pays span{color:rgba(255,255,255,.78);background:rgba(255,255,255,.10)}
.sub-form button{background:var(--cyan);color:#083344;font-weight:700}
.sub-form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.foot-bar{border-top-color:rgba(255,255,255,.14)}

/* ------------------------------------------------------- pre-footer + misc */
.pre-footer{background:#fff;border-top:1px solid var(--gray-200)}
.pf-grid .ic{color:var(--cyan-700)}
.to-top{background:#fff;color:var(--brand);border-color:var(--gray-200)}
.to-top:hover{background:var(--blue-50);border-color:var(--brand)}
.chat-toggle{background:var(--brand)}
.chat-toggle:hover{background:var(--blue-950)}
.chat-head{background:var(--grad)}
.chat-head .dot{background:var(--cyan-200)}
.chat-body{background:var(--gray-100)}
.chat-body .msg.bot{background:#fff;border:1px solid var(--gray-200)}
.chat-body .msg.me{background:var(--brand);color:#fff}
.chat-form button{color:var(--brand)}
.msg.staff{background:var(--blue-50);border-color:var(--blue-100)}
.msg.mine{background:var(--gray-100)}
.notes li{border-left-color:var(--cyan)}
.empty{border-color:var(--gray-200);background:#fff}
.product-hero{background:var(--blue-50);border-color:var(--gray-200)}
.cover-fallback{background:linear-gradient(135deg,var(--blue-50),#fff);color:var(--blue-100)}
.skip{background:var(--brand)}
.pays,.foot-legal span{color:rgba(255,255,255,.6)}