/* =====================================================================
   WDH site-wide polish (Oct 2026)
   One consistent look for every public page: readable text, one button
   style, calm cards, clean forms. Loaded from includes/header.php, after
   the older stylesheets. The homepage keeps its own home-v2.css on top.
   ===================================================================== */
:root{--p-brand:#5b2fe8;--p-brand-d:#4a22d6;--p-green:#16a34a;--p-green-d:#15803d;--p-ink:#0f2a4d;--p-text:#334155;--p-muted:#5b6b82;--p-line:#e3e9f3;--p-soft:#f6f8fc;--p-radius:16px;--p-shadow:0 8px 24px rgba(15,42,77,.06);--p-shadow-h:0 16px 34px rgba(15,42,77,.12)}

/* ---------- 1. Readable text (many parts were 8–11px) ---------- */
body main{font-size:15px;line-height:1.6;color:var(--p-text)}
main .breadcrumbs{font-size:13px}
main .eyebrow,main .section-head .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:5px 12px}
main .section-head p{font-size:15.5px;line-height:1.6;color:var(--p-muted)}
main .section-head h2{line-height:1.25}
main .hero-points,main .hosting-trust,main .trust{font-size:13.5px}
main .hero-points span,main .hosting-trust span{font-size:13.5px}
main .feature p,main .service p{font-size:13.5px;line-height:1.55}
main .feature a,main .service a{font-size:13.5px}
main .plan-card>p,main .hosting-plan-card>p,main .hosting-plan-card p{font-size:13.5px;line-height:1.5}
main .plan-card li,main .hosting-plan-card li{font-size:14px;line-height:1.5}
main .plan-price small,main .price-line small{font-size:13px}
main .billed,main .price-note{font-size:13px;color:var(--p-muted)}
main .popular-badge,main .plan-badge{font-size:11px;font-weight:800;letter-spacing:.04em}
main .why-strip strong,main .hosting-benefits strong{font-size:14.5px}
main .why-strip small,main .hosting-benefits small{font-size:13px;line-height:1.45}
main .domain-title p,main .hosting-domain-mini .domain-title p{font-size:13px}
main .hosting-category small{font-size:13px}
main .custom-callout p,main .custom-rule span,main .custom-callout span{font-size:13.5px}
main .filter-card label,main .filter-card h4{font-size:13.5px}
main .cart-row small,main .domain-info small{font-size:13px}
main .domain-results-page .domain-result-price small,main .domain-result-price small{font-size:12px}
main .auth-card label{font-size:14px}
main .alert{font-size:14.5px}
.footer a,.footer p{font-size:13.5px}
.footer-bottom{font-size:12.5px}

/* ---------- 2. One button style everywhere ---------- */
main .btn{min-height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}
main .btn:hover{transform:translateY(-1px)}
main .btn:focus-visible{outline:3px solid #c7b8ff;outline-offset:2px}
main .btn.primary{background:var(--p-brand);border:1.5px solid var(--p-brand);color:#fff;box-shadow:0 8px 20px rgba(91,47,232,.22)}
main .btn.primary:hover{background:var(--p-brand-d);border-color:var(--p-brand-d);color:#fff}
main .btn.secondary{background:#fff;border:1.5px solid var(--p-brand);color:var(--p-brand);box-shadow:none}
main .btn.secondary:hover{background:#f4f0ff;color:var(--p-brand-d)}
main .btn.small{min-height:38px;padding:0 16px;font-size:13.5px}
main .btn[disabled],main .btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
main .btn.is-in-cart,main .btn.is-in-cart:disabled{background:var(--p-green);border-color:var(--p-green);color:#fff;opacity:1}
main .btn .icon{width:18px;height:18px;flex:none}

/* ---------- 3. Forms (account / contact forms only — search boxes keep their own look) ---------- */
main .auth-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.ct-fields input,.ct-fields select,.ct-fields textarea{font-size:15px;border-radius:10px;border:1.5px solid #d6deeb;background:#fff;color:var(--p-ink);transition:border-color .15s,box-shadow .15s}
main .auth-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.ct-fields input,.ct-fields select{min-height:46px}
main .auth-card input:focus,.ct-fields input:focus,.ct-fields select:focus,.ct-fields textarea:focus{outline:none;border-color:var(--p-brand);box-shadow:0 0 0 3px rgba(91,47,232,.14)}

/* ---------- 4. Cards ---------- */
main .feature,main .service,main .plan-card,main .hosting-plan-card,main .cart-card,main .summary-card,main .auth-card,main .filter-card,main .side-card{border-radius:var(--p-radius);border:1px solid var(--p-line);box-shadow:var(--p-shadow)}
main .plan-card,main .hosting-plan-card,main .feature{transition:transform .15s,box-shadow .15s,border-color .15s}
main .plan-card:hover,main .hosting-plan-card:hover,main .feature:hover{transform:translateY(-3px);box-shadow:var(--p-shadow-h);border-color:#c9d8f2}
main .plan-card{padding:22px 20px}
main .plan-card h3,main .hosting-plan-card h3{font-size:18px;color:var(--p-ink);margin-bottom:4px}
main .plan-price,main .price-line{color:var(--p-ink)}
main .plan-card ul li,main .hosting-plan-card ul li{padding:2px 0}

/* Server plans: location · management · setup time as tidy chips (were run together) */
main .server-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
main .server-meta span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1.3;color:#334155;background:#f1f5fb;border:1px solid #e1e8f3;border-radius:999px;padding:4px 10px}
main .server-meta span:empty{display:none}

/* Card grids that left an empty column (e.g. AI Solutions has 4 cards in a 5-column grid) */
main.product-page .features{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Section rhythm on inner pages */
main.product-page .plans,main.hosting-page .hosting-section{padding-top:56px}
main .why-strip{border-radius:var(--p-radius);box-shadow:var(--p-shadow);border:1px solid var(--p-line)}

/* Hosting category tabs: icon chips instead of emoji */
main .hosting-category .hc-ic{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#eef3ff;color:#1261ff;margin-bottom:6px}
main .hosting-category.active .hc-ic{background:rgba(255,255,255,.18);color:#fff}
main .hosting-category .hc-ic .icon{width:20px;height:20px}
main .hosting-benefits .hb-ic{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#eef3ff;color:#1261ff;margin-bottom:6px}
main .hosting-benefits .hb-ic .icon{width:20px;height:20px}

/* ---------- 5. Contact page ---------- */
.ct-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:18px}
.ct-card{background:#fff;border:1px solid var(--p-line);border-radius:var(--p-radius);box-shadow:var(--p-shadow);padding:24px}
.ct-card h2{margin:0 0 4px;font-size:20px;color:var(--p-ink)}
.ct-card .ct-sub{margin:0 0 16px;color:var(--p-muted);font-size:14.5px}
.ct-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct-fields label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#334155;margin:0}
.ct-fields .ct-span{grid-column:1/-1}
.ct-fields input,.ct-fields select,.ct-fields textarea{width:100%;padding:0 14px}
.ct-fields textarea{padding:12px 14px}
.ct-card .btn{margin-top:16px}
.ct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ct-list li{display:flex;gap:12px;align-items:flex-start}
.ct-list .ct-ic{width:42px;height:42px;flex:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#eef3ff;color:#1261ff}
.ct-list .ct-ic.green{background:#e3f7ec;color:var(--p-green)}
.ct-list .ct-ic.purple{background:#efe9ff;color:var(--p-brand)}
.ct-list .ct-ic .icon{width:20px;height:20px}
.ct-list b{display:block;color:var(--p-ink);font-size:15px}
.ct-list span,.ct-list a{font-size:14px;color:var(--p-muted);overflow-wrap:anywhere}
.ct-list a{color:#1261ff;font-weight:600}
.ct-note{margin-top:16px;padding:12px 14px;border-radius:12px;background:#f1f7ff;color:#1e3a5f;font-size:13.5px}
.ct-ok{display:flex;gap:10px;align-items:flex-start;background:#ecfdf3;border:1px solid #bbf0cf;color:#14532d;border-radius:12px;padding:14px 16px;margin-top:14px;font-size:15px}

/* ---------- 6. Mobile ---------- */
@media (max-width:900px){
  .ct-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  main .btn{min-height:46px;font-size:15px}
  main .hosting-category-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main .hosting-category{padding:12px;min-height:0}
  main .hosting-category small{font-size:12px}
  main .hosting-hero-art,main .server-art{max-height:200px;overflow:hidden}
  .ct-fields{grid-template-columns:minmax(0,1fr)}
  .ct-card{padding:18px}
}
.ct-fields input::placeholder,.ct-fields textarea::placeholder{color:#94a3b8;font-weight:400}
main .breadcrumbs,main nav.breadcrumbs{font-size:13.5px}

/* Compact domain search strip on servers / AI pages */
main .domain-inline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:var(--p-radius);border:1px solid var(--p-line);box-shadow:var(--p-shadow);background:#fff}
main .domain-inline strong{font-size:15.5px;color:var(--p-ink);white-space:nowrap}
main .domain-inline form{flex:1;display:flex;gap:10px;min-width:260px;flex-wrap:wrap}
main .domain-inline input{flex:1 1 220px;min-height:46px;font-size:15px;border-radius:10px;border:1.5px solid #d6deeb;padding:0 14px}
main .domain-inline select{min-height:46px;font-size:15px;border-radius:10px;border:1.5px solid #d6deeb;padding:0 10px}
main .domain-inline .btn{white-space:nowrap}
/* Plan cards: Monthly / Yearly buttons full width and the same size, sitting at the bottom */
main .plan-card{display:flex;flex-direction:column}
main .plan-card>.actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px}
main .plan-card>.actions form,main .plan-card>.actions .btn{width:100%}
@media (max-width:620px){main .domain-inline strong{white-space:normal}}