/* =========================================================================
   ITHAR DIGITAL — PLANS, CASES, CONSENT, WHATSAPP
   Loaded after styles.css and code.css.
   ========================================================================= */

/* The hidden attribute only carries the UA sheet's display:none, which any
   class rule outranks — .plans{display:grid} silently defeated it and both
   pricing panes rendered at once. Make hidden actually mean hidden. */
[hidden]{display:none !important}

/* ============================== tabs ============================== */
.tabs{
  display:inline-flex; gap:4px; padding:5px; margin-bottom:34px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
}
.tab{
  font-family:var(--font-display); font-weight:600; font-size:.93rem;
  padding:10px 22px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:transparent; color:var(--ink-500);
  transition:background .25s, color .25s;
}
.tab:hover{color:var(--ink-900)}
.tab.is-active{background:var(--grad); color:#fff}

/* ============================== plans ============================== */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; align-items:start}

.plan{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 28px 28px;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}

.plan--featured{
  border-color:transparent;
  box-shadow:0 4px 12px rgba(6,10,20,.06), 0 26px 54px -26px rgba(21,84,240,.42);
  background:linear-gradient(180deg,#fff,#FBFCFF);
}
.plan--featured::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:var(--grad);
}

.plan__flag{
  position:absolute; top:-11px; left:28px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--grad); color:#fff; padding:4px 12px; border-radius:var(--r-pill);
}
.plan__bin{
  position:absolute; top:20px; right:22px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-200);
}
.plan:hover .plan__bin{color:var(--one)}

.plan h3{font-size:1.3rem; margin-bottom:.3em}
.plan__for{color:var(--ink-400); font-size:.92rem; margin-bottom:20px; min-height:2.6em}

.plan__price{
  font-family:var(--font-display); font-weight:700; font-size:2.7rem;
  color:var(--ink-900); line-height:1; letter-spacing:-.03em; margin:0 0 6px;
  display:flex; align-items:baseline; gap:2px; flex-wrap:wrap;
}
.plan__cur{font-size:1.4rem; font-weight:600; color:var(--ink-500); margin-right:1px}
.plan__from{
  font-family:var(--font-body); font-size:.85rem; font-weight:500;
  color:var(--ink-400); margin-right:7px;
}
.plan__per{font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--ink-400)}
.plan__note{font-family:var(--font-mono); font-size:.75rem; color:var(--ink-300); margin-bottom:22px}

.plan .btn{margin-bottom:24px}

.plan__list{display:grid; gap:11px; border-top:1px dashed var(--line); padding-top:22px}
.plan__list li{
  position:relative; padding-left:26px; font-size:.92rem; color:var(--ink-500); line-height:1.55;
}
.plan__list li::before{
  content:""; position:absolute; left:2px; top:.5em; width:11px; height:6px;
  border-left:2px solid var(--zero); border-bottom:2px solid var(--zero);
  transform:rotate(-45deg);
}
.plan__list strong{color:var(--ink-800)}

.plans-note{
  margin-top:32px; padding:24px 26px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.plans-note p{color:var(--ink-500); font-size:.93rem; margin:0}
.plans-note p + p{margin-top:12px}
.plans-note strong{color:var(--ink-800)}

/* ============================ case studies ============================ */
.cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px}
.case{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; transition:transform .3s var(--ease), box-shadow .3s;
}
.case:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.case__tag{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--one); background:var(--one-100); padding:4px 10px; border-radius:6px; margin-bottom:16px;
}
.case h3{font-size:1.18rem; margin-bottom:.5em}
.case__body{color:var(--ink-500); font-size:.94rem; margin-bottom:18px}

/* An unpublished case study is visibly a placeholder rather than a claim.
   Inventing a client to fill this space would be the fastest way to lose a
   serious buyer, and in the UK it also breaches the CAP advertising code. */
.case--empty{
  background:repeating-linear-gradient(
    135deg, var(--bg-soft) 0 12px, #fff 12px 24px);
  border-style:dashed;
}
.case--empty h3,.case--empty .case__body{opacity:.66}
.case__soon{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-400); border:1px dashed var(--ink-200);
  padding:5px 12px; border-radius:var(--r-pill);
}

.cases-cta{
  margin-top:32px; padding:28px 30px; border-radius:var(--r-lg);
  background:var(--grad-soft); border:1px solid var(--one-100);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cases-cta p{margin:0; color:var(--ink-500); font-size:.96rem; max-width:60ch}
.cases-cta strong{color:var(--ink-900)}

/* =========================== WhatsApp button =========================== */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7), 0 2px 6px rgba(6,10,20,.16);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.wa-fab svg{width:30px; height:30px}
.wa-fab:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 16px 34px -10px rgba(37,211,102,.8)}
.wa-fab:active{transform:translateY(0) scale(1)}

/* ========================== consent banner ========================== */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -14px 40px -22px rgba(6,10,20,.4);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.consent.is-in{transform:none}
.consent__inner{
  max-width:var(--wrap); margin-inline:auto; padding:18px 24px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.consent__text{margin:0; font-size:.9rem; color:var(--ink-500); flex:1 1 380px; line-height:1.6}
.consent__text strong{color:var(--ink-900)}
.consent__text a{text-decoration:underline; text-underline-offset:3px}
.consent__actions{display:flex; gap:10px; flex:none}

/* ============================ responsive ============================ */
@media (max-width:640px){
  .plan__for{min-height:0}
  .plan__price{font-size:2.3rem}
  .tabs{width:100%; justify-content:stretch}
  .tab{flex:1; padding:11px 10px; font-size:.88rem}
  .cases-cta{flex-direction:column; align-items:flex-start}
  .cases-cta .btn{width:100%}
  .wa-fab{right:16px; bottom:16px; width:52px; height:52px}
  .wa-fab svg{width:27px; height:27px}
  .consent__inner{padding:16px 18px; gap:14px}
  .consent__actions{width:100%}
  .consent__actions .btn{flex:1}
}