/* ============================================================================
   geny-theme.css — Digital Oriented brand-alignment override layer
   ----------------------------------------------------------------------------
   Loaded LAST in the layout (after style.min.css + custom.css), so rules here
   win. This is the safe place for restyle/brand work: the live stylesheet
   (public/dist/css/style.min.css) is a hand-committed Bootstrap+SCSS bundle
   with no source build in the repo, so we layer corrections here instead of
   editing that file. Cache-busted via filemtime in the layout.

   Brand source of truth (from the website + _variables.scss):
     navy   #012C60   ·   orange #FF7F15
============================================================================ */

:root {
  --geny-navy: #012C60;
  --geny-orange: #FF7F15;
}

/* ---------------------------------------------------------------------------
   1. Checkout progress bar — use the real brand orange.
   custom.css hardcodes #ff8c00 (a different orange) on the active line, the
   completed/active circles and labels, so the stepper clashed with the orange
   buttons (#FF7F15). Align every progress accent to the brand token.
--------------------------------------------------------------------------- */
.progress-active-line { background: var(--geny-orange); }

.step-progress-wrapper.completed .step-circle,
.step-progress-wrapper.active .step-circle {
  background-color: var(--geny-orange);
  border-color: var(--geny-orange);
}
.step-progress-wrapper.completed .step-label,
.step-progress-wrapper.active .step-label {
  color: var(--geny-orange);
}

/* ---------------------------------------------------------------------------
   2. Progress-bar step labels on mobile.
   The 5 step-labels are 14px in ~70px columns at 375px, so long labels
   ("Modalità di attivazione") wrapped to 2-3 cramped lines. Tighten the type
   as the viewport narrows so they read cleanly without overflowing.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .step-label { font-size: 12px; line-height: 1.2; }
}
@media (max-width: 480px) {
  .progress-bar-steps { padding: 16px 0; }
  .step-circle { width: 34px; height: 34px; font-size: 14px; }
  .step-label { font-size: 10px; line-height: 1.15; }
}

/* ---------------------------------------------------------------------------
   3. Loading spinners — brand orange instead of the stock #3498db blue.
   custom.css spins a generic blue segment (its own comment says "change to
   match your theme"); align to the brand accent.
--------------------------------------------------------------------------- */
.spinner,
.autocomplete-loader { border-top-color: var(--geny-orange); }

/* ---------------------------------------------------------------------------
   4. Bootstrap default blue (#0d6efd) → brand (PHASE 2).
   Un-overridden Bootstrap surfaces fall back to stock blue: links, checked
   radios/checkboxes, .text-primary/.btn-primary/.bg-primary. Rebrand the
   Bootstrap CSS variables to navy/orange, and the checked/focus accent — the
   most visible bleed is blue checkmarks on the checkout radios & checkboxes.
--------------------------------------------------------------------------- */
:root {
  --bs-primary: #012C60;
  --bs-primary-rgb: 1, 44, 96;
  --bs-primary-text-emphasis: #012C60;
  --bs-link-color: #012C60;
  --bs-link-color-rgb: 1, 44, 96;
  --bs-link-hover-color: #FF7F15;
  --bs-link-hover-color-rgb: 255, 127, 21;
}
.form-check-input:checked {
  background-color: var(--geny-orange);
  border-color: var(--geny-orange);
}
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--geny-orange) 55%, #fff);
  box-shadow: 0 0 0 .2rem rgba(255, 127, 21, .25);
}
/* Bootstrap primary/link utility classes → brand (in case any markup uses them) */
.text-primary { color: var(--geny-navy) !important; }
.btn-primary { --bs-btn-bg: #012C60; --bs-btn-border-color: #012C60; --bs-btn-hover-bg: #17406f; --bs-btn-hover-border-color: #17406f; }

/* ---------------------------------------------------------------------------
   5. Shapes + the site's motion language (PHASE 3).
   Align the one divergent card to the brand navy shadow, and give buttons and
   product cards the website's tasteful hover lift with its signature easings.
   Deliberately NOT ported: the marketing-page theater (hero mascot orbits,
   word-by-word title reveals, 3D card tilt) — a checkout should feel calm
   and quick, not busy. I lava-lamp dots invece SONO stati portati (sezione 6,
   richiesta Stephanie 30/09).
   Site easings: 0.22,1,0.36,1 (reveals/lifts) · 0.34,1.56,0.64,1 (springy pop).
--------------------------------------------------------------------------- */
:root {
  --geny-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --geny-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --geny-shadow: 0 8px 30px rgba(1, 44, 96, .07);
}

/* checkout "Il tuo servizio" sidebar card: generic 8px/grey shadow → brand */
.card-right {
  border-radius: 16px;
  box-shadow: var(--geny-shadow);
  border: 1px solid #E7E7E7;
}

/* Buttons keep their color-invert; add a gentle springy lift + brand shadow. */
.primary-btn,
.secondary-btn,
.white-btn { transition: all .3s var(--geny-ease-out); }
.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 127, 21, .28);
}
.primary-btn:active,
.secondary-btn:active { transform: translateY(0); transition-duration: .1s; }

/* Product cards keep the navy-flip hover; add a subtle lift on the site easing.
   `all` so the existing background/color flip stays smooth. */
.fiber-card { transition: all .4s var(--geny-ease-out); }
.fiber-card:hover { transform: translateY(-6px); }

/* ---------------------------------------------------------------------------
   6. Product illustration on the coverage-result cards (LOOK-images).
   The offshore build shipped text-only cards; the website presents each
   product with its flat illustration in a white rounded chip (.w-service-card).
   Mirror that: a centred white chip holding the site's own product artwork,
   mapped by technology (Fibra→FTTH, FTTC→UltraADSL, FWA, UltraWadsl). The chip
   floats up with the card on hover (inherits .fiber-card's lift).
--------------------------------------------------------------------------- */
.fiber-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(1, 44, 96, .08);
  transition: transform .4s var(--geny-ease-spring);
}
.fiber-illustration img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.fiber-card:hover .fiber-illustration { transform: scale(1.06); }
/* On the navy hover-flip cards the white chip already contrasts — keep it white. */
@media (max-width: 480px) {
  .fiber-illustration { width: 80px; height: 80px; border-radius: 16px; }
  .fiber-illustration img { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------------------
   7. Product-card layout polish (LOOK-images, phase 2).
   The offshore card left-aligns the tag + price under the now-centred chip,
   which reads unbalanced. Centre the header block (chip · name · price) like
   the approved design preview, keep the feature list left-aligned so specs
   stay scannable, and make the CTA full-width. Scoped with :has() so ONLY the
   product cards that carry an illustration get this — other .fiber-card uses
   (additional-services tiles) are untouched.
--------------------------------------------------------------------------- */
.fiber-card:has(.fiber-illustration) > div { text-align: center; }
.fiber-card:has(.fiber-illustration) .fiber-tag { display: flex; justify-content: center; }
.fiber-card:has(.fiber-illustration) ul { text-align: left; }
.fiber-card:has(.fiber-illustration) ul li { justify-content: flex-start; }
.fiber-card:has(.fiber-illustration) .btn { width: 100%; }

/* ---------------------------------------------------------------------------
   8. "Tutti gli altri servizi" grid — bring onto the same card system.
   custom.css lays these out as a ROW (icon beside text) via
   `flex-direction: row !important` and forces every direct child to
   width:100%, which flattens the illustration chip to full width. Those rules
   are more specific than §6/§7, so they're re-stated here with matching weight
   to put the grid on the same centred column layout as the product cards.
--------------------------------------------------------------------------- */
.home-service-block.other-services .fiber-card {
  flex-direction: column !important;
  text-align: center;
}
.home-service-block.other-services .fiber-card > .fiber-illustration {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  flex: none;
}

/* ---------------------------------------------------------------------------
   9. Italian sentence case.
   The offshore bundle applies `text-transform: capitalize` to buttons, banner
   headings, tabs and the profile chip. That's an English habit: in Italian it
   turns correct copy into "Verifica Copertura" and "Seleziona I Migliori
   Servizi Internet Nella Tua Regione". The lang strings are ALREADY correct
   sentence case, so the fix is to stop transforming them — not to edit copy.
   `.text-capitalize` (the deliberate utility class) is intentionally untouched.
--------------------------------------------------------------------------- */
.btn,
.main-banner h1,
.main-banner.banner-grid h1,
.global-tablink .nav-link,
.user-profile,
.voice-services .fiber-card h5,
.pdf-block h5,
.order-details-table ul li p:first-child,
.modal-dialog .connection-rates .accordion-item .fiber-card .fiber-tag span {
  text-transform: none;
}
@media (max-width: 480px) {
  .home-service-block.other-services .fiber-card > .fiber-illustration {
    width: 80px;
    height: 80px;
  }
}

/* §8 — M10 v2: hero PORTATO dal sito (stesse classi/regole di geny.it, compilate
   da _website.scss) + adattamenti per l'header fisso del portale e il box copertura
   sovrapposto (.top-overlapped). Icone in orbita e Genyo fluttuante = pura CSS. */
.w-hero{overflow:hidden;position:relative}
.w-hero .w-hero-bg{align-items:center;background:#012c60;display:flex;min-height:540px;padding:150px 0 80px;position:relative}
.w-hero .w-hero-bg:after{background:radial-gradient(circle,rgba(255,127,21,.06) 0,transparent 70%);border-radius:50%;content:"";height:500px;pointer-events:none;position:absolute;right:10%;top:50%;transform:translateY(-50%);width:500px}
@media(max-width:991px){.w-hero .w-hero-bg:after{display:none}.w-hero .w-hero-bg{min-height:auto;padding:120px 0 64px}}
@media(max-width:575px){.w-hero .w-hero-bg{padding:110px 0 56px}}
.w-hero .w-hero-grid{align-items:center;display:grid;gap:50px;grid-template-columns:1fr 1fr}
@media(max-width:991px){.w-hero .w-hero-grid{gap:30px;grid-template-columns:1fr}}
.w-hero .w-hero-text{min-width:0;overflow:hidden;text-align:left}
@media(max-width:991px){.w-hero .w-hero-text{order:2;text-align:left}}
.w-hero .w-hero-title{color:#fff;font-size:clamp(28px,5vw,54px);font-weight:800;line-height:1.1;margin-bottom:18px;text-align:left;text-transform:none}
.w-hero .w-hero-subtitle{color:hsla(0,0%,100%,.8);font-size:clamp(16px,2.2vw,22px);font-weight:500;line-height:1.5;margin-bottom:32px}
@media(max-width:575px){.w-hero .w-hero-subtitle{margin-bottom:24px}}
.w-hero .w-hero-actions{align-items:center;display:flex;gap:24px}
@media(max-width:575px){.w-hero .w-hero-actions{flex-direction:column;gap:14px}.w-hero .w-hero-actions .btn{justify-content:center;width:100%}}
.w-hero .w-hero-link{align-items:center;color:hsla(0,0%,100%,.85);display:inline-flex;font-size:15px;font-weight:600;gap:6px;text-decoration:none;transition:color .3s ease,gap .3s ease}
.w-hero .w-hero-link svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.w-hero .w-hero-link:hover{color:#ff7f15;gap:10px}
.w-hero .w-hero-link:hover svg{transform:translateX(4px)}
.w-hero .w-hero-visual{align-items:center;display:flex;justify-content:center}
@media(max-width:991px){.w-hero .w-hero-visual{order:1}}
.w-hero .w-hero-img-wrap{display:flex;justify-content:center;position:relative;width:100%}
.w-hero .w-hero-img{display:block;height:auto;max-height:440px;max-width:480px;object-fit:contain;width:100%}
@media(max-width:991px){.w-hero .w-hero-img{max-height:280px;max-width:320px}}
@media(max-width:575px){.w-hero .w-hero-img{max-height:200px;max-width:240px}}
@keyframes w-genyo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes w-genyo-orbit-1{0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-r)) rotate(0deg) scale(0)}8%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-r)) rotate(0deg) scale(1.2)}13%{transform:translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-r)) rotate(0deg) scale(.92)}18%{transform:translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-r)) rotate(0deg) scale(1)}to{opacity:1;transform:translate(-50%,-50%) rotate(1turn) translateX(var(--orbit-r)) rotate(-1turn) scale(1)}}
@keyframes w-genyo-orbit-2{0%{opacity:0;transform:translate(-50%,-50%) rotate(90deg) translateX(var(--orbit-r)) rotate(-90deg) scale(0)}8%{opacity:1;transform:translate(-50%,-50%) rotate(90deg) translateX(var(--orbit-r)) rotate(-90deg) scale(1.2)}13%{transform:translate(-50%,-50%) rotate(90deg) translateX(var(--orbit-r)) rotate(-90deg) scale(.92)}18%{transform:translate(-50%,-50%) rotate(90deg) translateX(var(--orbit-r)) rotate(-90deg) scale(1)}to{opacity:1;transform:translate(-50%,-50%) rotate(450deg) translateX(var(--orbit-r)) rotate(-450deg) scale(1)}}
@keyframes w-genyo-orbit-3{0%{opacity:0;transform:translate(-50%,-50%) rotate(180deg) translateX(var(--orbit-r)) rotate(-180deg) scale(0)}8%{opacity:1;transform:translate(-50%,-50%) rotate(180deg) translateX(var(--orbit-r)) rotate(-180deg) scale(1.2)}13%{transform:translate(-50%,-50%) rotate(180deg) translateX(var(--orbit-r)) rotate(-180deg) scale(.92)}18%{transform:translate(-50%,-50%) rotate(180deg) translateX(var(--orbit-r)) rotate(-180deg) scale(1)}to{opacity:1;transform:translate(-50%,-50%) rotate(540deg) translateX(var(--orbit-r)) rotate(-540deg) scale(1)}}
@keyframes w-genyo-orbit-4{0%{opacity:0;transform:translate(-50%,-50%) rotate(270deg) translateX(var(--orbit-r)) rotate(-270deg) scale(0)}8%{opacity:1;transform:translate(-50%,-50%) rotate(270deg) translateX(var(--orbit-r)) rotate(-270deg) scale(1.2)}13%{transform:translate(-50%,-50%) rotate(270deg) translateX(var(--orbit-r)) rotate(-270deg) scale(.92)}18%{transform:translate(-50%,-50%) rotate(270deg) translateX(var(--orbit-r)) rotate(-270deg) scale(1)}to{opacity:1;transform:translate(-50%,-50%) rotate(630deg) translateX(var(--orbit-r)) rotate(-630deg) scale(1)}}
.w-hero .w-hero-genyo{--orbit-r:200px;align-items:center;display:flex;height:520px;justify-content:center;overflow:hidden;position:relative;width:520px}
@media(max-width:991px){.w-hero .w-hero-genyo{--orbit-r:125px;height:340px;width:340px}}
@media(max-width:575px){.w-hero .w-hero-genyo{--orbit-r:90px;height:250px;width:250px}}
.w-hero .w-hero-genyo__base{animation:w-genyo-float 4s ease-in-out infinite;height:78%;position:relative;width:78%;z-index:1}
.w-hero .w-hero-genyo__base,.w-hero .w-hero-genyo__icon{object-fit:contain;will-change:transform}
.w-hero .w-hero-genyo__icon{animation-duration:12s;animation-fill-mode:both;animation-iteration-count:infinite;animation-timing-function:linear;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));height:96px;left:50%;position:absolute;top:50%;width:96px;z-index:2}
@media(max-width:991px){.w-hero .w-hero-genyo__icon{height:68px;width:68px}}
@media(max-width:575px){.w-hero .w-hero-genyo__icon{height:50px;width:50px}}
.w-hero .w-hero-genyo__icon--1{animation-delay:.2s;animation-name:w-genyo-orbit-1}
.w-hero .w-hero-genyo__icon--2{animation-delay:.5s;animation-name:w-genyo-orbit-2}
.w-hero .w-hero-genyo__icon--3{animation-delay:.8s;animation-name:w-genyo-orbit-3}
.w-hero .w-hero-genyo__icon--4{animation-delay:1.1s;animation-name:w-genyo-orbit-4}
.w-btn-accent{align-items:center;background:#ff7f15;border:2px solid #ff7f15;border-radius:30px;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:700;gap:8px;justify-content:center;letter-spacing:.5px;overflow:hidden;padding:12px 32px;position:relative;text-decoration:none;text-transform:uppercase;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s cubic-bezier(.22,1,.36,1),color .25s ease,background .25s ease}
.w-btn-accent:hover{background:#ff7401;box-shadow:0 8px 25px rgba(255,127,21,.35);color:#fff;transform:translateY(-3px) scale(1.02)}
/* Entrata del testo hero (versione CSS-only dell'AOS del sito) */
@keyframes w-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.w-hero-enter{animation:w-fade-up .7s cubic-bezier(.22,1,.36,1) both}
.w-hero-title.w-hero-enter{animation-delay:.05s}
.w-hero-subtitle.w-hero-enter{animation-delay:.22s}
.w-hero-actions.w-hero-enter{animation-delay:.38s}

/* §8-header — header bianco stile sito (logo tagline navy: geny-logo-dark.png) */
header nav.navbar{background:#fff !important;border-bottom:1px solid #e7e7e7;box-shadow:0 2px 12px rgba(1,44,96,.05)}
header .navbar .nav-link{color:#012C60 !important;font-weight:600}
header .navbar .nav-link:hover,header .navbar .nav-link.active{color:#FF7F15 !important}
header .navbar .navbar-toggler{border-color:#012C60}
header .navbar .navbar-toggler-icon{filter:invert(12%) sepia(38%) saturate(4229%) hue-rotate(199deg) brightness(60%)}

/* §8b v2 — "Geny è" PORTATA dal sito: sezione navy, cerchi fluttuanti con anello
   conico rotante e glow al hover (stesse regole compilate di geny.it) */
@keyframes congenyFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ringRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.w-section-title{font-weight:800;margin-bottom:50px;text-align:center}
.w-section-title--accent{color:#ff7f15;font-size:clamp(24px,4vw,42px)}
@media(max-width:575px){.w-section-title--accent{margin-bottom:30px}}
.w-congeny{background:#012c60;padding:80px 0 50px}
.w-congeny .w-congeny-grid{display:grid;gap:30px;grid-template-columns:repeat(3,1fr);margin-bottom:40px}
@media(max-width:767px){.w-congeny .w-congeny-grid{gap:40px;grid-template-columns:1fr}}
.w-congeny .w-congeny-card{align-items:center;display:flex;flex-direction:column;text-align:center;text-decoration:none}
.w-congeny .w-congeny-card--circle .w-congeny-img-wrap{margin-bottom:16px}
.w-congeny .w-congeny-card--circle .w-congeny-label{margin-bottom:0;min-height:auto}
.w-congeny .w-congeny-card:first-child .w-congeny-img-wrap{animation:congenyFloat 4s ease-in-out infinite}
.w-congeny .w-congeny-card:nth-child(2) .w-congeny-img-wrap{animation:congenyFloat 4.5s ease-in-out .8s infinite}
.w-congeny .w-congeny-card:nth-child(3) .w-congeny-img-wrap{animation:congenyFloat 5s ease-in-out 1.6s infinite}
.w-congeny .w-congeny-label{align-items:flex-end;color:#fff;display:flex;font-size:16px;font-weight:800;justify-content:center;letter-spacing:.5px;line-height:1.3;margin-bottom:24px;min-height:52px;text-transform:uppercase;transition:color .3s ease}
@media(max-width:575px){.w-congeny .w-congeny-label{font-size:14px;margin-bottom:16px;min-height:auto}}
.w-congeny .w-congeny-img-wrap{align-items:center;background:rgba(173,216,230,.15);border-radius:50%;display:flex;height:200px;justify-content:center;overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .4s ease,box-shadow .4s ease;width:200px}
.w-congeny .w-congeny-img-wrap:before{animation:ringRotate 6s linear infinite;background:conic-gradient(from 0deg,transparent 0,rgba(255,127,21,.5) 25%,transparent 50%,rgba(173,216,230,.4) 75%,transparent 100%);border-radius:50%;content:"";inset:-3px;position:absolute;z-index:-1}
.w-congeny .w-congeny-img-wrap:after{background:rgba(173,216,230,.15);border-radius:50%;content:"";inset:0;position:absolute;z-index:0}
.w-congeny .w-congeny-img-wrap img{height:80%;object-fit:contain;position:relative;transition:transform .5s cubic-bezier(.34,1.56,.64,1);width:80%;z-index:1}
.w-congeny .w-congeny-img-wrap:hover{background:rgba(173,216,230,.3);box-shadow:0 0 40px rgba(255,127,21,.2),0 12px 40px rgba(0,0,0,.15);transform:scale(1.1)}
.w-congeny .w-congeny-img-wrap:hover:before{animation-duration:2s;background:conic-gradient(from 0deg,transparent 0,rgba(255,127,21,.8) 25%,transparent 50%,rgba(173,216,230,.7) 75%,transparent 100%)}
.w-congeny .w-congeny-img-wrap:hover:after{background:rgba(173,216,230,.25)}
.w-congeny .w-congeny-img-wrap:hover img{transform:scale(1.12) rotate(3deg)}
@media(max-width:991px){.w-congeny .w-congeny-img-wrap{height:170px;width:170px}}
@media(max-width:575px){.w-congeny .w-congeny-img-wrap{height:150px;width:150px}}
@media(prefers-reduced-motion:reduce){.w-congeny .w-congeny-img-wrap:before{animation:none}.w-congeny .w-congeny-img-wrap{animation:none!important}}
.w-congeny .w-congeny-card:hover .w-congeny-label{color:#ff7f15}

/* §9 — header piatto stile sito: niente fascia arrotondata, tutto bianco con bordo */
header{background:#fff !important;width:100% !important;margin:0 !important}
/* Agent: .bg-header ha una foto navy come background-image + angoli arrotondati
   che spuntavano dietro la barra bianca — l'immagine va spenta esplicitamente */
header .bg-header{background-image:none !important;background-color:#fff !important;border-radius:0 !important}
header .bg-header .left-side p{color:#012C60 !important}
header .top-header{border-radius:0 !important;margin:0 !important;border-bottom:1px solid #ececec;padding-top:8px;padding-bottom:8px}
/* Niente transition qui: animare un colore !important produce interpolazioni
   sballate (flash fucsia segnalato 07/09) — meglio uno switch netto. */
header .top-header .global-link{color:#012C60 !important;font-weight:600}
header .top-header .global-link:hover{color:#FF7F15 !important}
/* Agent: "Gestione contratti" era bianco su bianco — outline navy */
header .navbar .btn.primary-btn{background:#fff !important;border:2px solid #012C60 !important;color:#012C60 !important}
header .navbar .btn.primary-btn:hover{background:#012C60 !important;color:#fff !important}

/* §10 — scrollbar brand come sul sito (navy su bianco) */
html{scrollbar-color:#012c60 #fff;scrollbar-width:thin}
::-webkit-scrollbar{background:#fff;height:8px;width:8px}
::-webkit-scrollbar-track{background:#fff;border-radius:10px}
::-webkit-scrollbar-thumb{background:#012c60;border-radius:10px}

/* §11 — loader brand: logo con pulse morbido */
@keyframes genyLoaderPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.geny-loader .loader-logo img{animation:genyLoaderPulse 1.6s ease-in-out infinite}

/* §12 — pagine interne: TUTTI i banner fotografici (.main-banner con banner-service.png:
   checkout, risultati copertura, esiti firma, resume, login/reset agent) diventano la
   fascia navy del brand. background-image:none!important vince sull'inline style. */
section.main-banner{background-color:#012C60 !important;background-image:linear-gradient(135deg,#012C60 0%,#013a7d 60%,#012C60 100%) !important;overflow:hidden;position:relative}
section.main-banner:after{background:radial-gradient(circle,rgba(255,127,21,.08) 0,transparent 70%);border-radius:50%;content:"";height:420px;pointer-events:none;position:absolute;right:6%;top:50%;transform:translateY(-50%);width:420px}
section.main-banner .banner-title{position:relative;z-index:1}
section.main-banner h1{color:#fff !important;font-weight:800;text-shadow:none !important;animation:w-fade-up .6s cubic-bezier(.22,1,.36,1) both}
section.main-banner .banner-icon img{filter:drop-shadow(0 6px 20px rgba(0,0,0,.25))}

/* §13 — micro-transizioni: gli step del checkout entrano con fade-up a ogni cambio
   (l'animazione riparte quando display passa da none a block) */
.personal-detail-steps .form-step{animation:w-fade-up .45s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.personal-detail-steps .form-step{animation:none}}

/* §14 — risultati copertura: card con entrata scaglionata */
.coverage-services .fiber-card{animation:w-fade-up .55s cubic-bezier(.22,1,.36,1) both}
.coverage-services .col-lg-4:nth-child(1) .fiber-card{animation-delay:.05s}
.coverage-services .col-lg-4:nth-child(2) .fiber-card{animation-delay:.13s}
.coverage-services .col-lg-4:nth-child(3) .fiber-card{animation-delay:.21s}
.coverage-services .col-lg-4:nth-child(4) .fiber-card{animation-delay:.29s}
.coverage-services .col-lg-4:nth-child(5) .fiber-card{animation-delay:.37s}
.coverage-services .col-lg-4:nth-child(6) .fiber-card{animation-delay:.45s}
@media(prefers-reduced-motion:reduce){.coverage-services .fiber-card{animation:none}}

/* §15 — riepilogo checkout: transizioni morbide su promo/portabilità/modem che appaiono */
.card-right .final-price,.card-right #promo-section,.card-right #portability-section,.card-right #modem-section,.card-right #accessory-interest-section{transition:opacity .3s ease}

/* §16 — loader: colonna, blur, messaggio navy e tre puntini arancio che rimbalzano */
.geny-loader{flex-direction:column;backdrop-filter:blur(3px);background:rgba(255,255,255,.88) !important}
#genyLoaderMsg{color:#012C60 !important;font-weight:600}
.loader-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.loader-dots span{animation:loaderBounce 1.2s infinite ease-in-out;background:#FF7F15;border-radius:50%;height:10px;width:10px}
.loader-dots span:nth-child(2){animation-delay:.15s}
.loader-dots span:nth-child(3){animation-delay:.3s}
@keyframes loaderBounce{0%,80%,to{opacity:.45;transform:translateY(0)}40%{opacity:1;transform:translateY(-8px)}}

/* §17 — auth agent: Genyo fluttuante al posto dello slider fotografico */
.login-genyo{display:flex;justify-content:center;margin-bottom:24px}
.login-genyo img{animation:w-genyo-float 4s ease-in-out infinite;max-width:min(300px,60vw);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.25))}
.login-slider h1{color:#fff}
@media(max-width:991px){.login-genyo img{max-width:190px}}

/* §18 — E1: campi indirizzo da completare quando NetMap non dà CAP/provincia */
.coincide-missing{border-color:#FF7F15 !important;box-shadow:0 0 0 3px rgba(255,127,21,.15) !important}
.coincide-hint{background:#FFF4E8;border:1px solid #FFD9B3;border-radius:10px;color:#8a4b00;font-size:13px;font-weight:600;margin:4px 0 16px;padding:10px 14px}

/* §19 — sezione copertura come sul sito: banda crema come le sezioni adiacenti
   (#FFF4EB = .bg-light-orange), titolo navy fuori dal box arancione, niente
   sovrapposizione all'hero (vale anche per esito firma / pdf-generated /
   riprendi-richiesta che usano la stessa .top-overlapped) */
/* Stephanie 01/10: via il grigio — la banda della verifica copertura è bianca. */
section.global-form.top-overlapped{margin-top:0 !important;transform:none !important;top:0 !important;background:#fff;padding:64px 0 72px}
section.global-form{background:#fff;padding:56px 0 64px}
.coverage-title{color:#012C60;display:block;font-size:clamp(20px,3vw,30px);font-weight:800;margin:0 0 28px;text-align:center}
.coverage-section{border-radius:20px}
.coverage-section h5{display:none} /* eventuali h5 residui dentro il box */

/* §20 — step 1 checkout: respiro tra il box indirizzo (.sub-form) e i checkbox
   sottostanti (cliente esistente / privacy), erano attaccati al bordo grigio */
.form-wrapper-main .form-wrapper .sub-form{margin-bottom:24px}

/* §21 — step Servizi accessori: respiro dai bordi del card, altezza uniforme
   delle 6 tessere (prima seguivano il testo e la griglia risultava sfalsata) */
.step-services > .w-100{padding:0 8px}
.step-services .top-title{margin-bottom:24px}
.step-services .top-title p{margin-top:6px}
.step-services .accessory-card{min-height:132px;height:calc(100% - 20px);display:flex;align-items:center;padding:20px 22px}
.step-services .accessory-card .customer-option small{line-height:1.45}
.step-services > .w-100 > p{margin:8px 0 0;padding:0 4px}

/* §22 — step pagamento: separatore e aria tra metodo di pagamento, codice promo
   e totale (le tre zone erano incollate) */
.form-field:has(#promoCodeInput){margin:28px 0 0 !important;padding-top:22px;border-top:1px solid #ececec}
.form-field:has(#promoCodeInput) .form-label{margin-bottom:8px}
.form-field:has(#promoCodeInput) .form-label small{font-size:15px;color:#012C60;font-weight:600}
#promoCodeInput{height:48px}
#applyPromoBtn{padding:10px 26px;white-space:nowrap}
#promo-feedback{display:block;margin-top:8px}
.final-price:has(#total-due-today-amount){margin-top:26px !important;padding-top:18px !important}

/* §22b — step pagamento: respiro dai bordi e tra titolo/metodo (feedback 02/09) */
.step-9 > .w-100{padding:0 8px}
.step-9 .top-title{margin-bottom:26px}
.step-9 .top-title p{margin-top:6px}
.step-9 .payment-radio{padding:20px 22px;margin-bottom:26px}
.step-9 .all-radios{margin-bottom:8px}

/* §23 — select con lo stile del resto del form (freccia brand, niente look di
   sistema sul controllo chiuso); la tendina custom è gestita da checkout_form.js */
select.form-control{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23012C60' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}

/* Tendina custom (sostituisce il popup nativo del browser) */
.geny-select{position:relative}
.geny-select-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 34px rgba(1,44,96,.14);padding:6px;max-height:260px;overflow-y:auto}
.geny-select-option{padding:11px 14px;border-radius:9px;cursor:pointer;color:#012C60;font-size:15px}
.geny-select-option:hover,.geny-select-option.active{background:#FFF3E8;color:#FF7F15}
.geny-select-option.selected{font-weight:700}

/* §24 — overlay durante il redirect al pagamento Nexi */
#payment-redirect-overlay{position:fixed;inset:0;z-index:99999;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center}
#payment-redirect-overlay .pr-box{text-align:center;max-width:340px;padding:24px}
#payment-redirect-overlay .pr-box p{color:#012C60;font-weight:600;font-size:17px;margin:18px 0 0}
#payment-redirect-overlay .pr-spinner{width:52px;height:52px;margin:0 auto;border:5px solid #FFE4CC;border-top-color:#FF7F15;border-radius:50%;animation:prspin 1s linear infinite}
@keyframes prspin{to{transform:rotate(360deg)}}

/* §25 — pagina esito firma/pagamento (/pdf-generated): card e hero in stile brand
   (feedback Stephanie 03/09: pagina anonima, non rispettava l'identità del sito).
   Banda navy compatta col solo titolo; card bianca con icona, tipografia navy e
   bottoni standard (.secondary-btn/.white-btn) al posto degli inline style. */
.thank-you-banner{min-height:0;padding:80px 0 88px;align-items:center}
.thank-you-banner .banner-title{width:100%;text-align:center;padding:0}

.thank-you-banner .banner-title h1{margin:0 auto}
.pdf-block{max-width:520px;margin:0 auto;padding:44px 36px;border-radius:20px;box-shadow:0 12px 40px rgba(1,44,96,.10)}
.pdf-block-icon{margin-bottom:18px}
.pdf-block-icon img{width:64px;height:64px;object-fit:contain}
.pdf-block h5{color:#012C60;font-weight:700;margin-bottom:10px;font-size:22px}
.pdf-block p{color:#6b7280;margin-bottom:28px}
.pdf-block .btn{display:block;width:100%}
.pdf-block .btn + .btn{margin-top:14px}
@media (max-width: 576px){
  .thank-you-banner{padding:56px 0 64px}
  .pdf-block{padding:32px 20px}
}

/* §26 — Footer: link leggibili sul fondo navy. La regola globale a{color:#012C60}
   li rendeva invisibili sul footer scuro: si vedevano solo i puntini separatori
   (review Stephanie 07/09). */
footer .footer-bottom small {
    gap: 8px;
    flex-wrap: wrap;
}
footer .footer-bottom small a {
    color: #D8D8D8;
    text-decoration: underline;
    text-underline-offset: 2px;
}
footer .footer-bottom small a:hover {
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   6. Lava-lamp carousel dots (30/09) — PORT FEDELE dal sito (richiesta
   Stephanie: "copy the website implementation"). Stessi valori del sito:
   pallini custom (gli owl-dots nativi vengono nascosti), blob arancione che
   si stira tra un pallino e l'altro e si richiude a cerchio.
--------------------------------------------------------------------------- */
.lava-enhanced .owl-dots { display: none !important; }
.lava-dots-wrapper {
  align-items: center;
  display: none;
  gap: 14px;
  justify-content: center;
  margin-top: 18px;
  position: relative;
}
.lava-dots-wrapper.active-dots { display: flex; }
.lava-dots-wrapper .dot {
  background: #D8D8D8;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  height: 12px;
  padding: 0;
  position: relative;
  transition: background .3s ease, transform .3s ease;
  width: 12px;
  z-index: 2;
}
/* Area di tocco allargata, come sul sito */
.lava-dots-wrapper .dot:before {
  content: "";
  height: 44px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}
.lava-dots-wrapper .dot:hover { background: #B2B2B2; transform: scale(1.15); }
.lava-dots-wrapper .dot.active { background: transparent; }
.lava-dots-wrapper .lava-blob {
  background: #FF7F15;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 127, 21, .55);
  height: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1), border-radius .35s cubic-bezier(.4, 0, .2, 1);
  width: 12px;
  z-index: 1;
}
.lava-dots-wrapper .lava-blob.is-moving {
  border-radius: 6px;
  transition: left .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), border-radius .15s ease;
}