/* =========================================================
   Web Pixel Service - tema WHMCS (basato su twenty-one)
   1) Variabili brand
   2) Homepage (classi wp-*)
   3) Restyle area clienti
   ========================================================= */

:root{
  --wp-navy:#0d2c6b;
  --wp-navy2:#103a85;
  --wp-blue:#1b72d0;
  --wp-blue-l:#29a9e0;
  --wp-green:#5fbf3f;
  --wp-green-d:#4aa32e;
  --wp-txt:#12203a;
  --wp-mut:#5b6b88;
  --wp-line:#e2e8f2;
  --wp-bg-s:#f5f8fd;
  --wp-shadow:0 10px 40px -12px rgba(13,44,107,.18);
}

/* =========================================================
   2) HOMEPAGE
   ========================================================= */

.wp-home{color:var(--wp-txt);line-height:1.6}
.wp-home *{box-sizing:border-box}
.wp-wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.wp-center{text-align:center}
.wp-muted{color:var(--wp-mut)}

.wp-btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:600;
  cursor:pointer;border:none;transition:.2s;font-size:15px;text-align:center;
  text-decoration:none}
.wp-btn:hover{text-decoration:none;transform:translateY(-2px)}
.wp-btn-pri{background:linear-gradient(135deg,var(--wp-blue),var(--wp-blue-l));color:#fff;
  box-shadow:0 8px 22px -8px rgba(27,114,208,.7)}
.wp-btn-pri:hover{color:#fff;filter:brightness(1.08)}
.wp-btn-green{background:linear-gradient(135deg,var(--wp-green),var(--wp-green-d));color:#fff;
  box-shadow:0 8px 22px -8px rgba(95,191,63,.7)}
.wp-btn-green:hover{color:#fff;filter:brightness(1.08)}
.wp-btn-ghost{background:#fff;border:1.5px solid var(--wp-line);color:var(--wp-navy)}
.wp-btn-ghost:hover{border-color:var(--wp-blue);color:var(--wp-blue)}
.wp-btn-outw{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.wp-btn-outw:hover{background:rgba(255,255,255,.12);color:#fff}
.wp-link{color:var(--wp-blue);font-weight:600}

/* HERO */
.wp-hero{position:relative;padding:88px 0 76px;color:#fff;text-align:center;overflow:hidden;
  margin-bottom:0}
.wp-hero-bg{position:absolute;inset:0;
  background:
    url('../assets/img/hero.jpg') center/cover no-repeat,
    radial-gradient(900px 430px at 50% 0%,rgba(41,169,224,.38),transparent 66%),
    linear-gradient(160deg,#0b2455,#123a86 55%,#0a1f4d)}
.wp-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,64,.74),rgba(10,34,88,.88))}
.wp-hero .wp-wrap{position:relative;z-index:2}
.wp-hero h1{font-size:clamp(30px,5vw,52px);line-height:1.14;font-weight:800;
  letter-spacing:-1.2px;color:#fff;margin:0}
.wp-hero h1 span{background:linear-gradient(135deg,var(--wp-blue-l),var(--wp-green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wp-sub{font-size:18px;color:#c7d6ee;max-width:640px;margin:18px auto 0}

.wp-search{max-width:660px;margin:34px auto 0}
.wp-search form{display:flex;gap:10px;background:#fff;padding:9px;border-radius:14px;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.55);margin:0}
.wp-search input[type=text],.wp-search textarea{flex:1;background:transparent;border:none;
  outline:none;color:var(--wp-txt);font-size:16px;padding:12px 14px;box-shadow:none;
  height:auto;font-family:inherit;line-height:1.4}
.wp-search textarea{resize:none;overflow:hidden;min-height:46px;align-self:center}
.wp-search input[type=text]::placeholder,.wp-search textarea::placeholder{color:#8fa0bd}
.wp-tlds{display:flex;gap:20px;justify-content:center;margin-top:18px;flex-wrap:wrap;
  color:#c7d6ee;font-size:14px}
.wp-tlds b{color:var(--wp-green);font-weight:700}
.wp-trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:28px;
  color:#adc2e2;font-size:14px}

/* SEZIONI */
.wp-block{padding:74px 0}
.wp-alt{background:var(--wp-bg-s)}
.wp-head{text-align:center;max-width:640px;margin:0 auto 44px}
.wp-head h2{font-size:clamp(25px,3.4vw,36px);font-weight:800;letter-spacing:-.7px;
  color:var(--wp-navy);margin:0}
.wp-head p{color:var(--wp-mut);margin-top:12px;font-size:17px}
.wp-eyebrow{color:var(--wp-blue);font-weight:800;letter-spacing:1.6px;font-size:12.5px;
  text-transform:uppercase;margin-bottom:10px;display:block}

/* PIANI */
.wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.wp-grid.wp-grid-4{grid-template-columns:repeat(4,1fr);gap:20px}
.wp-plan{background:#fff;border:1.5px solid var(--wp-line);border-radius:16px;
  padding:32px 28px;position:relative;transition:.25s}
.wp-plan:hover{transform:translateY(-6px);border-color:var(--wp-blue);box-shadow:var(--wp-shadow)}
.wp-plan.wp-pop{border-color:var(--wp-blue);box-shadow:var(--wp-shadow)}
.wp-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--wp-green),var(--wp-green-d));color:#fff;
  font-size:12px;font-weight:700;padding:6px 16px;border-radius:20px;white-space:nowrap}
.wp-plan h3{font-size:21px;color:var(--wp-navy);margin:0 0 4px}
.wp-price{font-size:40px;font-weight:800;color:var(--wp-navy);margin:16px 0 2px;
  letter-spacing:-1.5px}
.wp-price small{font-size:15px;color:var(--wp-mut);font-weight:500;letter-spacing:0}
.wp-plan ul{list-style:none;margin:22px 0 28px;padding:0}
.wp-plan li{padding:9px 0;color:var(--wp-mut);display:flex;gap:10px;align-items:center;
  border-bottom:1px solid var(--wp-line);font-size:15px}
.wp-plan li:last-child{border-bottom:none}
.wp-plan li::before{content:"✓";color:var(--wp-green);font-weight:800;flex-shrink:0}
.wp-plan .wp-btn{width:100%}

/* FEATURES */
.wp-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wp-card{background:#fff;border:1.5px solid var(--wp-line);border-radius:16px;
  padding:28px;transition:.2s}
.wp-card:hover{border-color:var(--wp-blue);box-shadow:var(--wp-shadow);transform:translateY(-4px)}
.wp-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  font-size:25px;background:linear-gradient(135deg,rgba(27,114,208,.12),rgba(95,191,63,.14));
  margin-bottom:16px}
.wp-card h4{font-size:17px;color:var(--wp-navy);margin:0 0 7px}
.wp-card p{color:var(--wp-mut);font-size:14.5px;margin:0}

/* AREA CLIENTI */
.wp-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.wp-split h2{font-size:clamp(24px,3.2vw,34px);color:var(--wp-navy);font-weight:800;
  letter-spacing:-.6px;margin:0}
.wp-lead{color:var(--wp-mut);margin:14px 0 22px;font-size:17px}
.wp-clist{list-style:none;display:grid;gap:13px;margin:0 0 28px;padding:0}
.wp-clist li{display:flex;gap:12px;align-items:flex-start;color:var(--wp-txt);font-size:15.5px}
.wp-clist li::before{content:"✓";color:#fff;background:var(--wp-green);width:22px;height:22px;
  border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;
  flex-shrink:0;margin-top:2px}
.wp-panel{background:linear-gradient(145deg,var(--wp-navy),var(--wp-navy2));border-radius:20px;
  padding:26px;box-shadow:var(--wp-shadow)}
.wp-panel-bar{display:flex;gap:7px;margin-bottom:18px}
.wp-panel-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.3)}
.wp-prow{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  background:rgba(255,255,255,.07);border-radius:10px;margin-bottom:10px;color:#dbe6f8;
  font-size:14.5px}
.wp-prow b{color:#fff;font-weight:600}
.wp-pill{font-size:12px;padding:4px 11px;border-radius:20px;font-weight:700;white-space:nowrap}
.wp-pill.wp-on{background:rgba(95,191,63,.2);color:#8ce06a}
.wp-pill.wp-wait{background:rgba(255,176,32,.2);color:#ffc85c}

/* CTA */
.wp-cta{background:linear-gradient(135deg,var(--wp-navy),var(--wp-blue));border-radius:24px;
  padding:58px 32px;text-align:center;color:#fff;box-shadow:var(--wp-shadow)}
.wp-cta h2{font-size:clamp(25px,3.2vw,33px);font-weight:800;letter-spacing:-.6px;
  color:#fff;margin:0}
.wp-cta p{color:#c7d6ee;margin:14px auto 26px;max-width:540px;font-size:17px}
.wp-cta .wp-btn+.wp-btn{margin-left:10px}

/* RESPONSIVE HOMEPAGE */
@media(max-width:1100px){
  .wp-grid.wp-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .wp-grid,.wp-split,.wp-grid.wp-grid-4{grid-template-columns:1fr}
  .wp-feat{grid-template-columns:1fr 1fr}
  .wp-split{gap:36px}
}
@media(max-width:560px){
  .wp-feat{grid-template-columns:1fr}
  .wp-search form{flex-direction:column}
  .wp-cta .wp-btn+.wp-btn{margin-left:0;margin-top:10px}
}

/* =========================================================
   3) AREA CLIENTI - colori brand su twenty-one
   ========================================================= */

/* La home deve uscire dal .container di Bootstrap, altrimenti l'hero resta
   incolonnato e stretto. :has() applica la regola solo alle pagine con la home. */
#main-body:has(.wp-home){padding:0}
#main-body:has(.wp-home) > .container{max-width:100%;width:100%;padding-left:0;padding-right:0}
#main-body:has(.wp-home) .primary-content{padding-left:0;padding-right:0}

/* Pulsanti primari.
   ATTENZIONE: .primary-bg-color sta sul <body> di WHMCS, non va mai colorata
   qui o si tinge l'intera pagina. */
.btn-primary{background-color:var(--wp-blue) !important;border-color:var(--wp-blue) !important}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background-color:var(--wp-navy2) !important;border-color:var(--wp-navy2) !important}
.btn-success{background-color:var(--wp-green) !important;border-color:var(--wp-green) !important}
.btn-success:hover{background-color:var(--wp-green-d) !important;border-color:var(--wp-green-d) !important}

/* Link */
a{color:var(--wp-blue)}
a:hover{color:var(--wp-navy2)}

/* Header e navbar */
#header,#header .header,#main-menu{background:#fff}
#header .navbar,#top-nav{background:#fff;border-bottom:1px solid var(--wp-line)}
/* Sostituisce il logo caricato in WHMCS con quello del tema */
#header .navbar-brand .logo-img{content:url('../assets/img/logo.png')}
#header .navbar-brand img,#header .logo img{max-height:46px;width:auto}

/* Titoli di sezione */
h1,h2,h3,h4,h5{color:var(--wp-navy)}

/* Card e pannelli */
.card,.panel{border-color:var(--wp-line);border-radius:12px}
.card-header,.panel-heading{background:var(--wp-bg-s);border-color:var(--wp-line);
  color:var(--wp-navy);font-weight:600}

/* Tabelle */
.table thead th{color:var(--wp-navy);border-bottom-color:var(--wp-line)}

/* Footer */
#footer{background:var(--wp-bg-s);border-top:1px solid var(--wp-line);color:var(--wp-mut)}
#footer a{color:var(--wp-mut)}
#footer a:hover{color:var(--wp-blue)}

/* Badge di stato */
.label-success,.badge-success{background-color:var(--wp-green) !important}

/* =========================================================
   4) PAGINE INTERNE - carrello, domini, login, area clienti
   ========================================================= */

/* La barra "Proteggi il tuo nome di dominio" di twenty-one esiste solo in home
   (header.tpl la include con {if $templatefile == 'homepage'}). La nostra hero
   ha già la ricerca dominio, quindi la togliamo per non averne due. */
#frmDomainHomepage{display:none}

/* Risultati ricerca dominio */
.domain-checker-bg{background:linear-gradient(135deg,var(--wp-navy),var(--wp-blue));
  padding:34px 0 26px}
.domain-checker-bg h1,.domain-checker-bg h2,.domain-checker-bg p,
.domain-checker-result-headline{color:#fff}
.domain-checker-container .btn-primary{border-radius:10px}
.spotlight-tld{background:#fff;border:1.5px solid var(--wp-line);border-radius:14px;
  transition:.2s}
.spotlight-tld:hover{border-color:var(--wp-blue);box-shadow:var(--wp-shadow)}
.tld-filters .btn{border-radius:20px}

/* Order form / carrello */
#order-standard_cart .products .product{border:1.5px solid var(--wp-line);
  border-radius:16px;transition:.2s;background:#fff}
#order-standard_cart .products .product:hover{border-color:var(--wp-blue);
  box-shadow:var(--wp-shadow);transform:translateY(-4px)}
#order-standard_cart .cart-sidebar .panel,#order-standard_cart .cart-sidebar .card{
  border-radius:14px}
.cart-body .list-group-item{border-color:var(--wp-line)}
.cart-body .list-group-item-action:hover{background:var(--wp-bg-s);color:var(--wp-blue)}

/* Login e registrazione */
.card.mw-540{border-radius:18px;box-shadow:var(--wp-shadow);border-color:var(--wp-line)}
.card.mw-540 .card-footer{background:var(--wp-bg-s);border-top-color:var(--wp-line)}

/* Form generici */
.form-control{border-radius:10px;border-color:var(--wp-line)}
.form-control:focus{border-color:var(--wp-blue);box-shadow:0 0 0 3px rgba(27,114,208,.15)}
.btn{border-radius:10px}
.input-group .form-control,.input-group .btn{border-radius:10px}

/* Area clienti */
#main-body .card,#main-body .panel{box-shadow:0 2px 10px rgba(13,44,107,.06)}
.nav-tabs .nav-link.active{color:var(--wp-blue);border-bottom-color:var(--wp-blue)}
.breadcrumb{background:transparent;padding-left:0}