/* ═══════════════════════════════════════════════════════════════
   SinoSoft Hosting Plans — sn-hosting.css
   Linked from homepage.tpl and products.tpl
   Load this AFTER custom_mini.css to ensure correct cascade.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SINOSOFT HOSTING — White theme  |  Accent: #e92d0c / #f27505
═══════════════════════════════════════════════════════════════ */
:root {
  --red:   #e92d0c;
  --org:   #f27505;
  --grad:  linear-gradient(135deg,#e92d0c 0%,#f27505 100%);
  --grads: linear-gradient(135deg,rgba(233,45,12,.08) 0%,rgba(242,117,5,.08) 100%);
  --w:     #ffffff;
  --g0:    #fafafa;
  --g1:    #f4f5f7;
  --g2:    #e8eaed;
  --g3:    #d1d5db;
  --g4:    #9ca3af;
  --g5:    #6b7280;
  --g6:    #374151;
  --g7:    #111827;
  --bd:    1px solid #e8eaed;
  --sh:    0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  --sh-h:  0 8px 40px rgba(233,45,12,.14),0 2px 8px rgba(0,0,0,.06);
  --rr:    16px;
}

.sn-root,
.sn-root * { box-sizing: border-box; margin: 0; padding: 0; }

.sn-root {
  font-family: 'Sora','Segoe UI',sans-serif;
  background: var(--w);
  color: var(--g7);
  -webkit-font-smoothing: antialiased;
}

/* Standard WHMCS sidebar hidden — replaced with compact inline nav bar */
.cart-sidebar { display: none !important; }
.cart-body    { width: 100% !important; padding: 0 !important; }

/* ── INLINE NAV BAR (replaces sidebar) ───────────────────── */
.sn-nav-bar {
  background: var(--w); border-bottom: var(--bd);
  padding: 0 48px; min-height: 50px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sn-nav-panel { position: relative; }
.sn-nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border: var(--bd); border-radius: 8px;
  background: var(--g0); font-family: 'Sora',inherit;
  font-size: .75rem; font-weight: 600; color: var(--g6);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.sn-nav-trigger:hover { border-color: rgba(233,45,12,.3); color: var(--red); background: var(--w); }
.sn-nav-trigger .sn-arr { font-size: .5rem; opacity: .45; transition: transform .18s; }
.sn-nav-panel.open .sn-arr { transform: rotate(180deg); }
.sn-nav-drop {
  display: none; position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 210px; background: var(--w); border: var(--bd);
  border-radius: 10px; box-shadow: var(--sh-h); z-index: 400; overflow: hidden;
}
.sn-nav-panel.open .sn-nav-drop { display: block; }
.sn-nav-drop a, .sn-nav-drop-item {
  display: block; padding: 10px 16px; font-size: .8rem; color: var(--g6);
  text-decoration: none; border-bottom: var(--bd); transition: background .1s, color .1s;
  font-family: 'Sora',inherit;
}
.sn-nav-drop a:last-child, .sn-nav-drop-item:last-child { border-bottom: none; }
.sn-nav-drop a:hover { background: var(--g0); color: var(--red); }
.sn-nav-drop a.active { background: var(--grads); color: var(--red); font-weight: 700; }
.sn-nav-drop select {
  width: 100%; border: none; background: transparent; outline: none;
  padding: 10px 16px; font-family: 'Sora',inherit; font-size: .8rem; color: var(--g6); cursor: pointer;
}
/* Overlay to close dropdown on outside click */
.sn-nav-overlay { display: none; position: fixed; inset: 0; z-index: 399; }
.sn-nav-overlay.active { display: block; }
@media(max-width:600px) { .sn-nav-bar { padding: 0 16px; } }


.sn-hero {
  background: var(--w);
  border-bottom: var(--bd);
  padding: 64px 48px 56px;
  text-align: center;
}
.sn-hero-inner { max-width:720px; margin:0 auto; }
.sn-label {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--grads); border:1px solid rgba(233,45,12,.15);
  color:var(--red); font-size:.68rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:5px 14px; border-radius:100px; margin-bottom:20px;
}
.sn-hero h1 {
  font-size:clamp(2rem,5vw,3.2rem); font-weight:800; color:var(--g7);
  line-height:1.12; margin-bottom:14px; letter-spacing:-.03em;
}
.sn-hero h1 span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sn-hero-sub { font-size:1rem; color:var(--g5); line-height:1.7; margin-bottom:22px; }
.sn-vat {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.73rem; color:var(--g4);
  background:var(--w); border:var(--bd);
  padding:5px 14px; border-radius:8px;
}

/* ── INCLUDED STRIP ───────────────────────────────────────── */
.sn-inc {
  background:var(--w); border-bottom:var(--bd);
  padding:18px 48px;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px; justify-content:center;
}
.sn-inc-lbl {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:var(--g4); margin-right:4px; white-space:nowrap;
}
.sn-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--w); border:var(--bd);
  font-size:.73rem; color:var(--g6);
  padding:4px 11px; border-radius:100px;
  white-space:nowrap; font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.sn-chip-dot { width:6px; height:6px; border-radius:50%; background:var(--grad); flex-shrink:0; }
/* "View more" inline link inside the strip */
.sn-inc-more {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.72rem; font-weight:700; color:var(--red);
  background:none; border:none; cursor:pointer;
  padding:4px 8px; border-radius:100px;
  font-family:'Sora',inherit;
  transition:opacity .15s;
  white-space:nowrap;
}
.sn-inc-more:hover { opacity:.7; }
/* Hidden extra chips revealed on click */
.sn-inc-hidden { display:none; }
.sn-inc-hidden.open { display:inline-flex; }
/* Domain highlight feature — stands out as first item in card */
.sn-domain-feat {
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; margin-bottom:10px;
  background:linear-gradient(135deg,rgba(233,45,12,.06) 0%,rgba(242,117,5,.06) 100%);
  border:1px solid rgba(233,45,12,.18);
  border-radius:9px; font-size:.78rem; color:var(--g6); line-height:1.5;
}
.sn-domain-icon {
  font-size:.9rem; flex-shrink:0; margin-top:1px;
}

/* ── BILLING TABS ─────────────────────────────────────────── */
.sn-billing {
  background:var(--w); border-bottom:var(--bd); padding:24px 48px;
}
.sn-billing-inner { max-width:600px; margin:0 auto; }
.sn-billing-lbl {
  text-align:center; font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px; color:var(--g4); margin-bottom:10px;
}
.sn-tabs {
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center;
  background:var(--g1); border:var(--bd);
  border-radius:12px; padding:4px;
}
.sn-tab {
  flex:1; min-width:80px;
  padding:10px 8px 8px; border-radius:9px; border:none;
  background:transparent; color:var(--g5);
  font-family:'Sora',inherit; font-size:.76rem; font-weight:600;
  cursor:pointer; text-align:center;
  transition:all .2s; line-height:1.3; white-space:nowrap;
}
.sn-tab:hover { color:var(--g7); background:var(--w); }
.sn-tab.active { background:var(--w); color:var(--red); font-weight:700; box-shadow:var(--sh); }
.sn-tab-bv {
  display:inline-block; background:var(--grad); color:#fff;
  font-size:.54rem; font-weight:800; padding:2px 6px;
  border-radius:4px; margin-top:3px; letter-spacing:.5px;
}
.sn-tab-bv--flex { background:linear-gradient(135deg,#6b7280,#9ca3af); }
.sn-tab-bv--save { background:linear-gradient(135deg,#0ea5e9,#38bdf8); }
.sn-tab-bv--pop  { background:linear-gradient(135deg,#8b5cf6,#a78bfa); }
.sn-tab-bv--max  { background:linear-gradient(135deg,#16a34a,#22c55e); }

/* ── PLANS SECTION ────────────────────────────────────────── */
.sn-plans { max-width:1520px; margin:0 auto; padding:40px 40px 24px; }

.sn-grid {

  display:flex; gap:22px; width:max-content; padding:4px 2px 8px;

}

/* ── SLIDE TRACK — always-on, horizontal scroll, never wraps ── */
.sn-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}
.sn-grid-wrap::-webkit-scrollbar { height:5px; }
.sn-grid-wrap::-webkit-scrollbar-track { background:rgba(233,45,12,.06); border-radius:4px; }
.sn-grid-wrap::-webkit-scrollbar-thumb { background:rgba(233,45,12,.35); border-radius:4px; }
.sn-card { width:295px; flex-shrink:0; }
@media(max-width:600px) {
  .sn-card  { width:260px; }
  .sn-plans { padding:24px 16px 16px; }
}

/* ── CARD ─────────────────────────────────────────────────── */
.sn-card {
  background:var(--w); border:var(--bd); border-radius:var(--rr);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:box-shadow .25s,transform .25s,border-color .25s;
  box-shadow:var(--sh);
  animation:cardIn .5s ease both;
}
.sn-card:nth-child(1){animation-delay:.05s}
.sn-card:nth-child(2){animation-delay:.12s}
.sn-card:nth-child(3){animation-delay:.19s}
.sn-card:nth-child(4){animation-delay:.26s}
.sn-card:nth-child(5){animation-delay:.33s}
.sn-card:nth-child(6){animation-delay:.40s}
@keyframes cardIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.sn-card:hover { box-shadow:var(--sh-h); transform:translateY(-4px); border-color:rgba(233,45,12,.2); }
.sn-card.is-pop { border-color:var(--red); border-width:2px; }
.sn-card.is-pop:hover { border-color:var(--red); }

.sn-pop-badge {
  display:none; background:var(--grad); color:#fff;
  font-size:.62rem; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; text-align:center; padding:6px 0;
}
.sn-card.is-pop .sn-pop-badge { display:block; }

/* Accent line */
.sn-accent { height:3px; width:100%; }
.sn-accent-0 { background:linear-gradient(90deg,#16a34a,#4ade80); }
.sn-accent-1 { background:var(--grad); }
.sn-accent-2 { background:linear-gradient(90deg,#4f46e5,#7c3aed); }
.sn-accent-3 { background:linear-gradient(90deg,#e92d0c,#7c3aed); }
.sn-accent-4 { background:linear-gradient(90deg,#0ea5e9,#38bdf8); }
.sn-accent-5 { background:linear-gradient(90deg,#f59e0b,#fbbf24); }

/* Card body */
.sn-cbody { padding:20px 8px 10px; flex:1; }

.sn-tier-dot {
  display:inline-block; width:10px; height:10px;
  border-radius:50%; margin-bottom:12px;
  background:var(--grad);
}

.sn-pname { font-size:1.1rem; font-weight:700; color:var(--g7); line-height:1.2; margin-bottom:4px; }
.sn-ptag  { font-size:.77rem; color:var(--g4); line-height:1.5; margin-bottom:18px; min-height:2.3em; }

/* Price box */
.sn-pbox {
  background:var(--g0); border:var(--bd); border-radius:12px;
  padding:8px 7px; text-align:center; margin-bottom:16px;
}
.sn-card.is-pop .sn-pbox { background:var(--grads); border-color:rgba(233,45,12,.15); }
.sn-price-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--g4); margin-bottom:4px; }
.sn-price-amt { font-family:'DM Mono',monospace; font-size:2rem; font-weight:500; color:var(--g7); letter-spacing:-.03em; line-height:1; }
.sn-card.is-pop .sn-price-amt { color:var(--red); }
.sn-price-cycle { font-size:.72rem; color:var(--g4); margin-top:4px; }
.sn-price-setup { font-size:.68rem; color:#ef4444; margin-top:5px; }
/* Discount badge — shown inside price box when saving vs monthly baseline */
.sn-discount-badge {
  display:inline-block;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff; font-size:.52rem; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase;
  padding:2px 8px; border-radius:4px; margin-top:5px;
}
/* Badge row: % Off + Save amount side by side */
.sn-badge-row { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:5px; flex-wrap:wrap; }
.sn-badge-row .sn-discount-badge { margin-top:0; }
.sn-save-badge {
  display:inline-block;
  background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3);
  color:#15803d; font-size:.52rem; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase;
  padding:2px 8px; border-radius:4px;
}

/* Feature description */
.sn-fdesc {
  font-size:.77rem; color:var(--g5);
  background:var(--g1); border-left:3px solid var(--red);
  border-radius:0 8px 8px 0; padding:8px 12px; margin-bottom:12px; line-height:1.6;
}

/* Feature list */
.sn-feats { list-style:none; }
.sn-feats li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:.8rem; color:var(--g6);
  padding:6px 0; border-bottom:1px solid var(--g2); line-height:1.45;
}
.sn-feats li:last-child { border-bottom:none; }
.sn-fi {
  width:16px; height:16px; border-radius:50%;
  background:var(--grads); border:1px solid rgba(233,45,12,.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; font-size:.6rem; color:var(--red);
}
.sn-fval { font-weight:700; color:var(--g7); margin-right:2px; }

/* Spec expand */
.sn-expand { text-align:center; padding:10px 0 4px; }
.sn-expand-btn {
  background:none; border:none; color:var(--red);
  font-family:'Sora',inherit; font-size:.73rem; font-weight:600;
  cursor:pointer; padding:0;
  text-decoration:underline; text-decoration-color:rgba(233,45,12,.3);
  transition:opacity .15s;
}
.sn-expand-btn:hover { opacity:.7; }
.sn-spec-panel { display:none; border-top:var(--bd); padding:14px 22px; background:var(--g0); }
.sn-spec-panel.open { display:block; }
.sn-spec-row {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--g2); font-size:.77rem;
}
.sn-spec-row:last-child { border-bottom:none; }
.sn-spec-label { color:var(--g4); }
.sn-spec-val   { font-weight:700; color:var(--g7); text-align:right; }
.ok  { color:#16a34a; }
.nok { color:var(--g3); }

/* CTA button — no flex/gap so hidden buttons take zero space */
.sn-footer { padding:18px 26px 22px; border-top:var(--bd); background:var(--w); }
/* .sn-btn-hidden beats btn-order-now's display:block !important by being more specific */
.sn-footer .sn-cta-cycle { display:none !important; }
.sn-footer .sn-cta-cycle.sn-btn-active { display:block !important; }
.sn-footer .btn-upgrade-now { margin-top:10px; }
.btn-order-now {
  display:block !important; width:100% !important;
  padding:13px 18px !important;
  background:var(--grad) !important; color:#fff !important;
  font-family:'Sora',inherit !important; font-size:.88rem !important; font-weight:700 !important;
  border:none !important; border-radius:10px !important;
  text-align:center !important; text-decoration:none !important;
  cursor:pointer;
  transition:opacity .2s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 16px rgba(233,45,12,.28) !important;
}
.btn-order-now:hover {
  opacity:.88 !important; transform:translateY(-1px) !important;
  box-shadow:0 8px 28px rgba(233,45,12,.38) !important;
  color:#fff !important; text-decoration:none !important;
}

/* Upgrade button */
.btn-upgrade-now {
  display:block !important; width:100% !important;
  padding:10px 18px !important;
  background:transparent !important;
  color:var(--red) !important;
  font-family:'Sora',inherit !important; font-size:.82rem !important; font-weight:700 !important;
  border:1.5px solid rgba(233,45,12,.35) !important; border-radius:10px !important;
  text-align:center !important; text-decoration:none !important;
  cursor:pointer;
  transition:all .2s;
}
.btn-upgrade-now:hover {
  background:var(--grads) !important;
  border-color:var(--red) !important;
  color:var(--red) !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
}
.btn-upgrade-now .sn-upg-icon { margin-right:5px; font-style:normal; }

/* Current plan badge */
.sn-current-badge {
  display:block; text-align:center; padding:6px 14px;
  background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.2);
  border-radius:8px; font-size:.72rem; font-weight:700;
  color:#15803d; letter-spacing:.5px;
}

/* ── COMPARE TABLE ────────────────────────────────────────── */
.sn-compare-wrap {
  max-width:1520px; margin:8px auto 28px;
  padding:0 40px; text-align:center;
}
.sn-compare-btn {
  background:var(--w); border:var(--bd); color:var(--g5);
  font-family:'Sora',inherit; font-size:.8rem; font-weight:600;
  padding:10px 24px; border-radius:9px; cursor:pointer; margin-bottom:14px;
  transition:border-color .2s,color .2s;
}
.sn-compare-btn:hover { border-color:var(--red); color:var(--red); }
.sn-compare-table { display:none; overflow-x:auto; border-radius:12px; border:var(--bd); }
.sn-compare-table.open { display:block; }

/* Compare table matches card grid width */
.fct { width:100%; border-collapse:collapse; font-size:.81rem; background:var(--w); }
.fct th,.fct td { padding:12px 18px; border-bottom:1px solid var(--g2); text-align:center; vertical-align:middle; }
.fct thead tr:first-child th { border-bottom:2px solid var(--g2); }
.fct thead th { background:var(--g1); color:var(--g7); font-size:.75rem; font-weight:700; white-space:nowrap; }
.fct thead th:first-child { text-align:left; color:var(--g4); font-weight:600; font-size:.65rem; text-transform:uppercase; letter-spacing:1px; }
.fct td:first-child { text-align:left; color:var(--g5); font-size:.78rem; }
.fct .pop-col { background:rgba(233,45,12,.03); }
.fct thead th.pop-col { background:rgba(233,45,12,.06); border-top:2px solid var(--red); }
.fct tr:last-child td { border-bottom:none; }
.fct tbody tr:hover td { background:var(--g0); }
.fy  { color:#16a34a; font-weight:700; }
.fn  { color:var(--g3); }
.fv  { font-weight:700; color:var(--g7); }

/* ── TRUST BAR ────────────────────────────────────────────── */
.sn-trust {
  background:var(--w); border-top:var(--bd);
  display:flex; flex-wrap:wrap; justify-content:center;
  padding:0;
}
.sn-trust-item {
  display:flex; align-items:center; gap:7px;
  font-size:.75rem; color:var(--g5); font-weight:500;
  padding:14px 24px; border-right:var(--bd);
}
.sn-trust-item:last-child { border-right:none; }
.sn-trust-icon {
  width:28px; height:28px; border-radius:50%;
  background:var(--grads); border:1px solid rgba(233,45,12,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; flex-shrink:0;
}

/* ── ALERT ────────────────────────────────────────────────── */
.alert.alert-danger {
  background:#fef2f2 !important; border:1px solid #fecaca !important;
  color:#b91c1c !important; border-radius:10px !important;
  padding:12px 20px !important; margin:12px 32px !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:880px) { .sn-tabs { flex-wrap:wrap; } .sn-tab { flex:1 1 40%; } }
@media(max-width:600px) {
  .sn-hero  { padding:40px 20px 36px; }
  .sn-inc   { padding:14px 20px; }
  .sn-billing { padding:18px 20px; }
  .sn-compare-wrap { padding:0 20px; }
  .sn-trust-item { padding:10px 16px; font-size:.7rem; }
}