/* ===== PLANS — COMPACT SCOPE (same visuals) =================== */
#plans{
  --brand:#1a237e;
  --_card:var(--card,#fff);
  --_surface:var(--surface,#f8f9ff);
  --_border:var(--border,#e5e7eb);
  --_text:var(--text,#111827);
  --_muted:var(--muted,#6b7280);
  --_shadow:0 6px 24px rgba(0,0,0,.07);
}

/* SLIDER */
#plans .slider-wrapper{ position:relative; margin:1rem auto 0; max-width:1100px; padding:0; overflow:visible; }
#plans .slider-arrow{ display:none !important; }
#plans .plan-scroll-container{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  overscroll-behavior-x:contain; touch-action:pan-x; cursor:grab; padding:6px 8px 10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
#plans .plan-scroll-container:active{ cursor:grabbing; }
#plans .plan-scroll-container::-webkit-scrollbar{ display:none; }
#plans .plan-scroll-inner{ display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:8px; min-height:310px; }

/* CARDURI */
#plans .plan-card-wrapper{ position:relative; flex:0 0 208px; width:208px; min-width:208px; max-width:208px; scroll-snap-align:start; contain:layout paint; z-index:0; }
#plans .plan-card{
  all:unset; position:relative; box-sizing:border-box; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; width:100%; min-height:310px;
  background:var(--_card); color:var(--_text);
  border:1px solid var(--_border); border-radius:12px; box-shadow:var(--_shadow);
  padding:12px;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .25s ease, background .25s ease;
}
#plans .plan-card:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:0 14px 30px -6px rgba(2,6,23,.20), 0 -8px 18px -10px rgba(2,6,23,.10);
  border-color:color-mix(in oklab, var(--brand) 35%, var(--_border));
  background:color-mix(in oklab, var(--_card) 94%, var(--brand) 6%);
}
#plans .plan-card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:1;
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 58%),
    radial-gradient(85% 45% at 50% -10%, color-mix(in oklab, var(--brand) 20%, transparent) 0%, transparent 70%);
  mix-blend-mode:screen; filter:blur(6px); transform:translateX(-120%); opacity:0;
  transition:transform .7s cubic-bezier(.2,.6,.2,1), opacity .35s ease;
}
#plans .plan-card:hover::after{ opacity:.7; transform:translateX(120%); }

/* neutralizează card-uri globale */
#plans .plan-scroll-container .card, #plans .plan-scroll-container .card:hover{ transform:none !important; box-shadow:none !important; }

/* BADGE + TEXT + PRICE TAG */
#plans .bestseller{
  position:absolute; top:8px; right:8px; z-index:2; pointer-events:none; transform:translateZ(0);
  background:#f4a300; color:#fff; padding:4px 10px; font:700 .75rem/1 system-ui; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
#plans .plan-card h3{ margin:.4rem 0 .2rem; color:var(--brand); font-size:1.08rem; }
#plans .price-tag{
  margin:.36rem 0 .7rem; background:#ffb300; color:#fff; border-radius:999px; min-width:120px;
  padding:.32rem .56rem; text-align:center; font-weight:700; border:none;
}
#plans .price-tag .pi-original{ text-decoration:line-through; font-size:13px; opacity:.8; }
#plans .price-tag .pi-discount{ font-size:17px; color:var(--brand); }

/* BUTOANE (Configure) */
#plans .plan-card a{ width:100%; text-decoration:none; }
#plans .plan-card a button{
  display:block; width:100%; padding:.56rem .72rem; border:0; border-radius:9px; font-weight:700;
  background:var(--brand); color:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
#plans .plan-card a button:hover{ background:#18206f; filter:brightness(1); box-shadow:0 6px 14px rgba(0,0,0,.12); }
#plans .plan-card a button:active{ background:#131a5c; transform:translateY(1px); }

/* VPS FEATURES (chips cu icon) */
.vps-features.container{ --_chip-bg:#f7f8ff; max-width:980px; margin:8px auto 10px; padding:6px 8px 0; background:transparent; border:0; box-shadow:none; color:var(--_text); }
.vps-features-title{ margin:0 0 8px; text-align:center; font-weight:700; font-size:1.02rem; }
.vps-features-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin-top:0; }
.vps-feature-item{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:var(--_chip-bg); border:1px solid var(--_border); border-radius:999px; box-shadow:none; }
.vps-feature-item i{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#eaecf4; color:var(--brand); font-size:12px; flex:none; }
.vps-feature-item span{ font-size:.92rem; font-weight:600; color:var(--_text); line-height:1; white-space:nowrap; }

/* CONFIG BOX (selected product) */
#plans > div[style*="max-width:700px"]{
  max-width:760px !important; margin:12px auto !important; padding:14px 16px !important;
  background:var(--_card) !important; color:var(--_text) !important;
  border:1px solid var(--_border) !important; border-radius:6px !important; box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
}
#plans > div[style*="max-width:700px"] > h3{ margin:0 0 8px !important; font-size:1.05rem !important; font-weight:750 !important; }

/* PRICE ROWS */
#plans #basePrice, #plans #yourPrice, #plans #totalPrice{
  display:flex !important; align-items:center !important; margin:6px 0 !important; padding:8px 10px !important;
  gap:12px !important; border:1px solid var(--_border) !important; border-radius:6px !important; font-size:.94rem !important;
}
#plans #basePrice{ justify-content:flex-start !important; gap:8px !important; background:#f8fafc !important; color:#475569 !important; }
#plans #yourPrice{ justify-content:space-between !important; background:#fff !important; color:var(--brand) !important; border-color:var(--brand) !important; padding-left:14px !important; }
#plans #yourPrice strong span{ color:var(--brand) !important; }
#plans #totalPrice{ justify-content:space-between !important; background:var(--brand) !important; border-color:transparent !important; color:#fff !important; }
#plans #totalPrice strong, #plans #totalPrice span{ color:#fff !important; }

/* FORM + CONTROALE */
#plans form[action="checkout.php"]{ display:grid !important; grid-template-columns:1fr !important; row-gap:10px !important; margin-top:6px !important; }
#plans form[action="checkout.php"] > label{ font-size:.86rem !important; font-weight:650 !important; color:var(--_text) !important; margin:0 0 2px !important; }
#plans select{
  height:36px !important; padding:0 .65rem !important; background:var(--_card) !important; color:var(--_text) !important;
  border:1px solid var(--_border) !important; border-radius:6px !important; outline:none !important;
}
#plans select:focus{ border-color:color-mix(in oklab, var(--brand) 55%, var(--_border)) !important; box-shadow:0 0 0 3px rgba(26,35,126,.18) !important; }

/* cPanel / Plesk groups */
#plans form[action="checkout.php"] > label + div:has(#cpanelLicense),
#plans form[action="checkout.php"] > label + div:has(#pleskLicense){
  display:grid !important; grid-template-columns:auto 1fr !important; gap:6px 10px !important; align-items:center !important;
  padding:8px 10px !important; background:var(--_card) !important; border:1px solid var(--_border) !important; border-radius:6px !important;
}
#plans form[action="checkout.php"] > label + div:has(#cpanelLicense) > div,
#plans form[action="checkout.php"] > label + div:has(#pleskLicense) > div{ grid-column:1 / -1 !important; display:flex !important; align-items:center !important; gap:8px !important; }
#plans form[action="checkout.php"] > label + div:has(#cpanelLicense) img,
#plans form[action="checkout.php"] > label + div:has(#pleskLicense) img{ height:22px !important; width:auto !important; }
#plans form[action="checkout.php"] > label + div:has(#cpanelLicense) p,
#plans form[action="checkout.php"] > label + div:has(#pleskLicense) p{ margin:0 !important; font-size:.88rem !important; color:var(--_muted) !important; }
#plans #cpanelLicense, #plans #pleskLicense{ grid-column:1 / -1 !important; height:36px !important; background:var(--_card) !important; }

/* SUBMIT BUTTON (Continue) */
#plans form[action="checkout.php"] button[type="submit"]{
  width:100% !important; height:38px !important; padding:0 .9rem !important; border:0 !important; border-radius:8px !important;
  font-weight:750 !important; background:var(--brand) !important; color:#fff !important; box-shadow:0 4px 10px rgba(0,0,0,.10) !important; cursor:pointer !important;
}
#plans form[action="checkout.php"] button[type="submit"]:hover{ background:#18206f !important; }
#plans form[action="checkout.php"] button[type="submit"]:active{ background:#131a5c !important; }
#plans form[action="checkout.php"] button[type="submit"]:focus-visible{ outline:none !important; box-shadow:0 0 0 3px rgba(26,35,126,.18) !important; }

/* MOBILE */
@media (max-width:768px){
  #plans .plan-scroll-inner{ gap:6px; }
  #plans .plan-card-wrapper{ flex:0 0 192px; width:192px; min-width:192px; max-width:192px; }
  #plans .plan-card{ min-height:300px; padding:10px; }
  #plans .plan-card h3{ font-size:1.04rem; }
  #plans .plan-card p{ font-size:.9rem; }
  #plans > div[style*="max-width:700px"]{ padding:12px 12px !important; }
  #plans #basePrice, #plans #yourPrice, #plans #totalPrice{ padding:7px 9px !important; }
  #plans select{ height:34px !important; }
  #plans form[action="checkout.php"] button[type="submit"]{ height:36px !important; border-radius:7px !important; }
}

/* DARK MODE */
[data-theme="dark"] #plans .slider-wrapper{ background:#0b1220; border-color:#1e293b; }
[data-theme="dark"] #plans .plan-card{
  background:#0b1220; color:#e5e7eb; border-color:#243047; box-shadow:0 12px 28px rgba(0,0,0,.45);
}
[data-theme="dark"] #plans .plan-card::after{
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.22) 38%, rgba(255,255,255,0) 58%),
    radial-gradient(85% 45% at 50% -10%, color-mix(in oklab, var(--brand) 55%, transparent) 0%, transparent 70%);
  filter:blur(8px);
}
[data-theme="dark"] #plans .plan-card:hover{ border-color:color-mix(in oklab, var(--brand) 45%, #243047); }
[data-theme="dark"] #plans .price-tag{ background:#0f172a; border:1px solid #243047; }
[data-theme="dark"] #plans .price-tag .pi-discount{ color:var(--brand); }

[data-theme="dark"] #plans > div[style*="max-width:700px"]{ background:#0b1220 !important; border-color:#1e293b !important; box-shadow:0 6px 18px rgba(0,0,0,.35) !important; }
[data-theme="dark"] #plans #basePrice{ background:#0f172a !important; border-color:#1f2a3a !important; color:#cbd5e1 !important; }
[data-theme="dark"] #plans #yourPrice{ background:#0b1220 !important; color:var(--brand) !important; border-color:#334155 !important; }
[data-theme="dark"] #plans #totalPrice{ background:var(--brand) !important; color:#fff !important; }

/* REDUCE MOTION */
@media (prefers-reduced-motion:reduce){
  #plans .plan-card{ transition:box-shadow .18s ease, border-color .18s ease, background .18s ease; }
  #plans .plan-card:hover{ transform:none; }
  #plans .plan-card::after{ transition:opacity .18s ease; transform:none !important; }
}
/* === PATCH SELECT CARDS — PRO EFFECT (no lift) ================= */
/* 1) hairline-uri pe muchii (sus + laterale) ca în varianta „pro” */
#plans .plan-card{
  --edge-top: rgba(255,255,255,.60);
  --edge-side: rgba(255,255,255,.38);
}
#plans .plan-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  /* highlight fin pe muchii, păstrează borderul vizibil */
  box-shadow:
    inset 0 1px 0 0 var(--edge-top),
    inset 1px 0 0 0 var(--edge-side),
    inset -1px 0 0 0 var(--edge-side);
  opacity:.95;
}

/* 2) hover = glow + sheen, fără translate (fără „se ridică”) */
#plans .plan-card:hover{
  transform:none !important;                    /* anulează lift-ul */
  /* umbre simetrice, ușor mai puternice dar fără deplasare vizuală */
  box-shadow:
    0 18px 36px -10px rgba(2,6,23,.22),
    0 -10px 24px -14px rgba(2,6,23,.12);
  border-color: color-mix(in oklab, var(--brand) 32%, var(--_border));
  background: color-mix(in oklab, var(--_card) 94%, var(--brand) 6%);
}
/* sheen rămâne, doar îl facem un strop mai prezent */
#plans .plan-card:hover::after{ opacity:.8; }

/* 3) Dark mode: hairline-uri mai discrete, dar vizibile */
@media (prefers-color-scheme: dark){
  [data-theme="dark"] #plans .plan-card{
    --edge-top: rgba(255,255,255,.10);
    --edge-side: rgba(255,255,255,.08);
  }
  [data-theme="dark"] #plans .plan-card:hover{
    box-shadow:
      0 20px 40px -12px rgba(0,0,0,.50),
      0 -10px 26px -16px rgba(0,0,0,.38);
    background: color-mix(in oklab, #0b1220 92%, var(--brand) 8%);
  }
}
<script>
(function(){
  const sc = document.querySelector('#plans .plan-scroll-container');
  if(!sc) return;
  let down = false, startX = 0, startLeft = 0;
  sc.addEventListener('mousedown', e => {
    down = true; sc.classList.add('dragging');
    startX = e.pageX; startLeft = sc.scrollLeft;
    e.preventDefault();
  });
  window.addEventListener('mouseup', () => { down = false; sc.classList.remove('dragging'); });
  sc.addEventListener('mouseleave', () => { down = false; sc.classList.remove('dragging'); });
  sc.addEventListener('mousemove', e => {
    if(!down) return;
    const dx = e.pageX - startX;
    sc.scrollLeft = startLeft - dx;
  });
})();
</script>
/* === SELECT: micro-spacing in card (append at end) ==================== */

/* reset fin al “vertical rhythm” doar pentru textele din card */
#plans .plan-card :is(h1,h2,h3,h4,h5,h6,p,ul,ol){ 
  margin: 2px 0 !important;
}
#plans .plan-card :is(p, li, small){ 
  line-height: 1.24 !important;   /* mai strâns, dar lizibil */
}

/* liste compacte */
#plans .plan-card ul{ 
  margin: 2px 0 !important; 
  padding-left: 16px !important; 
}
#plans .plan-card li{ 
  margin: 0 !important; 
}

/* preț + titlu + buton: spații controlate */
#plans .plan-card h3{ 
  margin: 4px 0 4px !important; 
}
#plans .plan-card .price-tag{ 
  margin: 6px 0 8px !important; 
  padding: .26rem .5rem !important;
}
#plans .plan-card a button{ 
  margin-top: 8px !important; 
  padding: .5rem .68rem !important; 
}

/* elimină golurile la început/sfârșit de card */
#plans .plan-card > :first-child{ margin-top: 0 !important; }
#plans .plan-card > :last-child{  margin-bottom: 0 !important; }

/* mobil: încă un pas mai strâns */
@media (max-width:768px){
  #plans .plan-card :is(p, li, small){ line-height: 1.22 !important; }
  #plans .plan-card .price-tag{ margin: 4px 0 6px !important; }
  #plans .plan-card a button{ margin-top: 6px !important; }
}
/* === PATCH: shared-config (form domeniu) =============================== */
#plans .config-box form{
  display:grid !important;
  grid-template-columns:1fr !important;
  row-gap:10px !important;
  margin-top:6px !important;
}

#plans .config-box form > label{
  font-size:.86rem !important;
  font-weight:650 !important;
  color:var(--_text) !important;
  margin:0 0 2px !important;
}

#plans .config-box form input,
#plans .config-box form select{
  height:36px !important;
  padding:0 .65rem !important;
  background:var(--_card) !important;
  color:var(--_text) !important;
  border:1px solid var(--_border) !important;
  border-radius:6px !important;
  outline:none !important;
}
#plans .config-box form input:focus,
#plans .config-box form select:focus{
  border-color:color-mix(in oklab, var(--brand) 55%, var(--_border)) !important;
  box-shadow:0 0 0 3px rgba(26,35,126,.18) !important;
}

#plans .config-box .subrow{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
}
#plans .config-box .subrow > input{ flex:1 !important; }

#plans .config-box .suffix{
  padding:0 .55rem;
  height:36px;
  display:inline-flex; align-items:center;
  background:var(--_card);
  border:1px solid var(--_border);
  border-radius:6px;
  color:var(--_muted);
}

#plans .config-box form button[type="submit"]{
  width:100% !important; height:38px !important;
  padding:0 .9rem !important; border:0 !important; border-radius:8px !important;
  font-weight:750 !important; background:var(--brand) !important; color:#fff !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important; cursor:pointer !important;
}
#plans .config-box form button[type="submit"]:hover{ background:#18206f !important; }
#plans .config-box form button[type="submit"]:active{ background:#131a5c !important; }
/* === FIX: shared config (mobile overflow: input + suffix + button) ======= */
#plans, #plans * { box-sizing: border-box; }

#plans .config-box{
  width:100%;
  max-width:700px;
  margin:2rem auto;
  padding:12px;               /* mai strâns pe mobil */
  background:var(--_card,#fff);
  color:var(--_text,#111827);
  border:1px solid var(--_border,#e5e7eb);
  border-radius:10px;
  box-shadow:var(--_shadow,0 2px 10px rgba(0,0,0,.1));
  overflow:hidden;            /* taie orice „ieșire” */
}

#plans .config-box form{
  display:grid;
  grid-template-columns:1fr;
  row-gap:10px;
  margin-top:6px;
  width:100%;
}

#plans .config-box .subrow{
  display:grid;
  grid-template-columns:1fr auto; /* input se întinde, suffix compact */
  align-items:center;
  gap:6px;
  min-width:0;
}

#plans .config-box .subrow > input{
  min-width:0;        /* permite micșorarea în grid */
  width:100%;
  height:40px;
  padding:0 .65rem;
  border:1px solid var(--_border,#e5e7eb);
  border-radius:6px;
  background:var(--_card,#fff);
  font-size:16px;     /* evită zoom iOS */
}

#plans .config-box .suffix{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 .55rem;
  border:1px solid var(--_border,#e5e7eb);
  border-radius:6px;
  background:var(--_card,#fff);
  color:var(--_muted,#6b7280);
  white-space:nowrap;
  max-width:56vw;           /* împiedică overflow-ul pe ecrane înguste */
  overflow:hidden;
  text-overflow:ellipsis;
}

#plans .config-box select{
  height:40px;
  padding:0 .65rem;
  border:1px solid var(--_border,#e5e7eb);
  border-radius:6px;
  background:var(--_card,#fff);
  font-size:16px;
  width:100%;
}

#plans .config-box button[type="submit"]{
  display:block;
  width:100%;
  height:42px;
  border:0;
  border-radius:8px;
  font-weight:750;
  background:var(--brand,#1a237e);
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.10);
}

/* super-îngust: stivuim sufixul sub input ca să nu iasă din box */
@media (max-width: 380px){
  #plans .config-box .subrow{
    grid-template-columns:1fr;
  }
  #plans .config-box .suffix{
    max-width:100%;
  }
}

/* belt & suspenders: evită oricare orizontal scroll */
.container, #plans { overflow-x:hidden; }
/* ==== DARK THEME – color-only fixes for benefits + cards ==== */
[data-theme="dark"] #plans{
  --brand:#8aa2ff;           /* accent mai vizibil pe dark */
  --_card:#0b1220;
  --_surface:#0b1220;
  --_border:#1e293b;
  --_text:#e5e7eb;
  --_muted:#94a3b8;
}

/* benefits/chips */
[data-theme="dark"] .vps-features.container{ color:var(--_text); }
[data-theme="dark"] .vps-feature-item{
  background:#0f172a;                 /* chip bg */
  border-color:#243047;               /* chip border */
}
[data-theme="dark"] .vps-feature-item i{
  background:#111a2e;                 /* icon bg */
  color:var(--brand);                  /* icon fg */
}
[data-theme="dark"] .vps-feature-item span{ color:var(--_text); }

/* card accents */
[data-theme="dark"] #plans .plan-card{
  background:#0b1220;
  color:var(--_text);
  border-color:#243047;
}
[data-theme="dark"] #plans .plan-card h3{ color:var(--_text); }

/* badge + price tag */
[data-theme="dark"] #plans .bestseller{
  background:#efb25b;                 /* warmer on dark */
  color:#0b1220;
}
[data-theme="dark"] #plans .price-tag{
  background:#0f172a;
  border:1px solid #243047;
  color:#cbd5e1;                       /* text on pill */
}
[data-theme="dark"] #plans .price-tag .pi-original{ color:#94a3b8; }
[data-theme="dark"] #plans .price-tag .pi-discount{ color:var(--brand); }

/* price rows */
[data-theme="dark"] #plans #basePrice{
  background:#0f172a !important;
  border-color:#1f2a3a !important;
  color:#cbd5e1 !important;
}
[data-theme="dark"] #plans #yourPrice{
  background:#0b1220 !important;
  border-color:#334155 !important;
  color:var(--brand) !important;
}
[data-theme="dark"] #plans #totalPrice{
  background:var(--brand) !important;
  border-color:transparent !important;
  color:#0b1220 !important;            /* better contrast on brand */
}
[data-theme="dark"] #plans #totalPrice strong,
[data-theme="dark"] #plans #totalPrice span{ color:#0b1220 !important; }

/* buttons */
[data-theme="dark"] #plans .plan-card a button,
[data-theme="dark"] #plans .config-box button[type="submit"]{
  background:var(--brand) !important;
  color:#0b1220 !important;
}
[data-theme="dark"] #plans .plan-card a button:hover,
[data-theme="dark"] #plans .config-box button[type="submit"]:hover{
  background:#7894ff !important;
}

/* shared config box */
[data-theme="dark"] #plans .config-box{
  background:#0b1220 !important;
  border-color:#1e293b !important;
  color:var(--_text) !important;
}
[data-theme="dark"] #plans .config-box input,
[data-theme="dark"] #plans .config-box select{
  background:#0b1220 !important;
  color:#e5e7eb !important;
  border-color:#243047 !important;
}
[data-theme="dark"] #plans .config-box .suffix{
  background:#0b1220 !important;
  border-color:#243047 !important;
  color:#94a3b8 !important;
}