/* CerberHost 72.1.464 R5 — Offer + Configurator Premium Polish
   UI-only overlay: no price calculations, cart, checkout or API changes. */
:root{
  --ch5-purple:#c84cff;
  --ch5-purple-2:#8b22d6;
  --ch5-line:rgba(202,77,255,.22);
  --ch5-line-hi:rgba(223,111,255,.52);
  --ch5-panel:rgba(14,4,19,.96);
  --ch5-panel-2:rgba(21,6,29,.98);
  --ch5-muted:#9682a1;
  --ch5-green:#3be48d;
}
#offer .section-head,
#config .section-head{max-width:760px}
#offer .section-head p,
#config .section-head p{line-height:1.65;color:#9c88a6!important}

/* ---------- OFFER TOOLBAR ---------- */
.ch5-offer-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 16px;padding:10px 12px;border:1px solid rgba(197,73,249,.16);
  border-radius:14px;background:linear-gradient(180deg,rgba(17,5,23,.80),rgba(8,2,11,.84));
}
.ch5-offer-toolbar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch5-offer-filter{
  display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(192,67,245,.17);
  border-radius:9px;background:#0b030f;color:#a991b4;font-size:9px;font-weight:850;cursor:pointer;
  transition:.18s ease;
}
.ch5-offer-filter:hover,.ch5-offer-filter.active{
  color:#fff;border-color:rgba(220,94,255,.44);background:#1a0724;box-shadow:0 0 18px rgba(170,42,228,.10)
}
.ch5-offer-filter i{width:6px;height:6px;border-radius:50%;background:#8a2ab5;box-shadow:0 0 10px rgba(184,66,237,.22)}
.ch5-offer-filter.active i{background:#d267ff;box-shadow:0 0 12px rgba(216,94,255,.38)}
.ch5-offer-count{color:#806d89;font-size:8px;white-space:nowrap}

/* ---------- SERVICE CARDS ---------- */
#offer .service-grid{align-items:stretch}
#offer .service-card{
  min-height:220px!important;padding:18px!important;text-align:left!important;
  display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;gap:12px 13px!important;
  border-radius:16px!important;
}
#offer .service-card[hidden]{display:none!important}
#offer .service-card::before{
  content:"";position:absolute;left:var(--ch5-x,50%);top:var(--ch5-y,50%);width:220px;height:220px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(198,76,255,.14),rgba(198,76,255,.04) 42%,transparent 70%);
  transition:opacity .18s ease;
}
#offer .service-card:hover::before{opacity:1}
#offer .service-card .service-icon{grid-row:1/3;width:58px!important;height:58px!important;border-radius:14px!important}
#offer .service-card>div:not(.service-icon){min-width:0}
#offer .service-card h3{font-size:15px!important;margin:2px 0 6px!important;color:#fff!important}
#offer .service-card p{
  min-height:46px;margin:0!important;color:#8f7b99!important;font-size:10px!important;line-height:1.48!important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
#offer .service-card .service-link{
  grid-column:1/-1;display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin-top:2px;padding-top:12px;border-top:1px solid rgba(187,66,237,.11);font-size:9px!important;font-weight:950!important;
  letter-spacing:.07em!important
}
#offer .service-card .service-link::after{content:"→";font-size:15px;transition:transform .18s ease}
#offer .service-card:hover .service-link::after{transform:translateX(3px)}
.ch5-service-topline{
  position:absolute;top:10px;right:10px;display:flex;gap:5px;z-index:4;pointer-events:none
}
.ch5-badge{
  display:inline-flex;align-items:center;min-height:21px;padding:4px 7px;border-radius:999px;
  border:1px solid rgba(201,77,255,.24);background:rgba(24,7,32,.90);color:#cb8cde;font-size:6.5px;
  font-weight:950;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(7px)
}
.ch5-badge.hot{border-color:rgba(228,103,255,.48);background:linear-gradient(135deg,#5e137d,#341044);color:#f7d9ff;box-shadow:0 0 15px rgba(190,66,242,.14)}
.ch5-badge.new{border-color:rgba(61,222,140,.28);background:#082217;color:#78efad}
.ch5-card-price{
  position:absolute;left:84px;bottom:17px;display:flex;align-items:baseline;gap:4px;z-index:2;pointer-events:none
}
.ch5-card-price small{font-size:7px;color:#796783;text-transform:uppercase;letter-spacing:.08em}
.ch5-card-price strong{font-size:14px;color:#fff}
.ch5-card-price em{font-style:normal;font-size:7px;color:#8e7999}
#offer .service-card.selected .ch5-card-price strong{color:#ecb1ff;text-shadow:0 0 13px rgba(214,89,255,.18)}
#offer .service-card.selected::after{box-shadow:inset 0 0 0 1px rgba(223,106,255,.16)}

/* ---------- CONFIG STEPS ---------- */
.ch5-config-progress{
  width:min(1260px,calc(100% - 30px));margin:-3px auto 15px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px
}
.ch5-step{
  position:relative;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(187,66,239,.15);
  border-radius:11px;background:rgba(10,3,14,.75);color:#76657f;font-size:8px;font-weight:850
}
.ch5-step b{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#16061e;color:#aa5bc3;font-size:8px}
.ch5-step.active{color:#e8d8ed;border-color:rgba(212,83,255,.33);background:linear-gradient(90deg,rgba(67,13,91,.30),rgba(13,4,18,.75))}
.ch5-step.active b{background:#4e1168;color:#f0b2ff;box-shadow:0 0 13px rgba(190,67,242,.14)}

/* ---------- CONFIG SHELL ---------- */
#config .config-shell{
  border-radius:18px!important;overflow:visible!important;gap:15px!important
}
#config .product-preview,
#config .config-main,
#config .summary-card{border-radius:16px!important}
#config .product-preview{
  position:relative!important;overflow:hidden!important;
  background:radial-gradient(circle at 50% 22%,rgba(141,36,200,.18),transparent 37%),linear-gradient(180deg,#130619,#09030c)!important
}
#config .product-preview::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;left:50%;top:90px;transform:translate(-50%,-50%);
  border:1px solid rgba(193,85,242,.12);box-shadow:0 0 30px rgba(150,38,211,.08);pointer-events:none
}
#config .preview-orb{position:relative;z-index:2;transition:transform .2s ease,filter .2s ease}
#config .product-preview:hover .preview-orb{transform:scale(1.05) translateY(-2px);filter:drop-shadow(0 0 11px rgba(210,83,255,.27))}
#config .preview-meta span{border-color:rgba(189,69,240,.17)!important;background:#0c0311!important}
#config .config-main{padding:17px!important;border:1px solid rgba(190,68,242,.16);background:linear-gradient(180deg,rgba(14,4,19,.91),rgba(7,2,10,.96))}
#config .config-block{
  position:relative;padding:15px!important;margin:0 0 11px!important;border:1px solid rgba(184,65,235,.12)!important;
  border-radius:13px!important;background:rgba(7,2,10,.46)!important;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease
}
#config .config-block:hover{border-color:rgba(206,82,255,.24)!important;background:rgba(13,4,18,.62)!important;box-shadow:0 0 20px rgba(150,34,205,.055)}
#config .block-title label{font-size:9px!important;letter-spacing:.09em!important}
#config .block-title small{color:#7f6c88!important}
#config .choice-grid button{
  min-height:42px!important;border-radius:9px!important;background:#0c0310!important;color:#ad9ab6!important;font-weight:850!important
}
#config .choice-grid button:hover{color:#fff!important}
#config .choice-grid button.selected{
  color:#fff!important;background:linear-gradient(135deg,#5c117d,#311041)!important;
  box-shadow:0 0 0 1px rgba(220,92,255,.13),0 0 18px rgba(178,45,234,.12)!important
}
#config .addon-grid label{border-radius:10px!important;background:#0b030f!important}
#config .addon-grid label:has(input:checked){border-color:rgba(215,91,255,.46)!important;background:linear-gradient(135deg,rgba(80,18,108,.44),rgba(18,5,24,.9))!important;box-shadow:0 0 18px rgba(166,41,221,.09)}
#config .premium-select,
#config input[type="url"],
#config input[type="text"],
#config input[type="number"]{border-radius:9px!important;border-color:rgba(190,68,242,.20)!important;background:#08020c!important}

/* ---------- SUMMARY ---------- */
#config .summary-card{
  position:sticky!important;top:88px!important;align-self:start!important;padding:17px!important;
  border-color:rgba(214,84,255,.30)!important;
  background:radial-gradient(circle at 50% 0%,rgba(125,26,174,.16),transparent 27%),linear-gradient(180deg,#120519,#08020b)!important;
}
#config .summary-head{padding-bottom:12px!important;border-bottom:1px solid rgba(188,66,239,.13)}
#config .summary-card dl>div{padding:8px 0!important;border-bottom:1px solid rgba(174,62,222,.08)!important}
#config .summary-card dd{color:#f3e8f7!important;font-weight:800!important}
#config .summary-price{
  margin-top:14px!important;padding:14px!important;border:1px solid rgba(207,79,255,.20);border-radius:12px;
  background:linear-gradient(135deg,rgba(67,14,91,.33),rgba(11,3,15,.72))
}
#config .summary-price strong{font-size:27px!important;letter-spacing:-.035em;color:#f4ceff!important;text-shadow:0 0 18px rgba(209,84,255,.15)}
#config .summary-card .button-primary.full{
  min-height:48px!important;border-radius:11px!important;box-shadow:0 12px 28px rgba(134,25,188,.22),0 0 20px rgba(193,57,247,.09)!important;
  transition:transform .18s ease,box-shadow .18s ease!important
}
#config .summary-card .button-primary.full:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(134,25,188,.30),0 0 25px rgba(205,74,255,.15)!important}
.ch5-trust-list{display:grid;gap:6px;margin:11px 0 0;padding:0;list-style:none}
.ch5-trust-list li{display:flex;gap:7px;align-items:center;color:#877490;font-size:7.5px}
.ch5-trust-list i{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#082116;color:#5bea9a;font-style:normal;font-size:8px}
.ch5-live-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:#071c12;color:#5ee99b;font-size:6.5px;font-weight:950}
.ch5-live-pill i{width:5px;height:5px;border-radius:50%;background:#3ce888;box-shadow:0 0 9px rgba(60,232,136,.55);animation:ch5pulse 2.1s ease infinite}
@keyframes ch5pulse{50%{opacity:.45;transform:scale(.8)}}

/* mobile compact selected-price rail */
.ch5-mobile-price{display:none}
@media(max-width:1100px){
  #config .summary-card{position:relative!important;top:auto!important}
}
@media(max-width:760px){
  .ch5-offer-toolbar{align-items:flex-start;flex-direction:column}
  #offer .service-card{min-height:190px!important}
  .ch5-config-progress{grid-template-columns:1fr;gap:6px}
  .ch5-step{padding:8px 10px}
  .ch5-mobile-price{
    position:fixed;display:flex;left:10px;right:10px;bottom:10px;z-index:80;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;border:1px solid rgba(210,83,255,.40);border-radius:13px;background:rgba(10,3,14,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 38px rgba(0,0,0,.40),0 0 24px rgba(150,35,210,.11)
  }
  .ch5-mobile-price div{display:grid}.ch5-mobile-price small{font-size:6px;color:#826d8d}.ch5-mobile-price strong{font-size:15px;color:#fff}
  .ch5-mobile-price button{border:0;border-radius:9px;padding:9px 11px;background:linear-gradient(135deg,#971edb,#bd32ee);color:#fff;font-size:8px;font-weight:950;cursor:pointer}
}
@media(prefers-reduced-motion:reduce){.ch5-live-pill i{animation:none!important}}