/* ============================================================ * Glamour — campo telefono con prefisso (intl-tel-input v25) * Design condiviso da tutti i moduli del sito. Il JS aggiunge la * classe .glamour-phone al contenitore .iti creato dalla libreria; * la tendina dei paesi vive in dentro .iti--container. * ============================================================ */ .iti.glamour-phone { width: 100%; display: block; } /* Spazio per bandierina+prefisso: --glamour-iti-pad la scrive il JS (larghezza reale + 10px); 120px e' il fallback. Gli 8px extra compensano il rientro del contenitore (left: 6px). */ .iti.glamour-phone > input { padding-left: calc(var(--glamour-iti-pad, 120px) + 8px) !important; } /* Nei wizard .glamour-input al focus si alza di 2px (transform): dentro .iti bandierina e prefisso sono un fratello assoluto e resterebbero fermi -> alziamo tutto il blocco e togliamo il transform al solo input. */ .iti.glamour-phone { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .iti.glamour-phone:has(> .glamour-input:focus) { transform: translateY(-2px); } .iti.glamour-phone > .glamour-input:focus { transform: none !important; } /* Bandierina + prefisso. Il tema (Hello Elementor) colora OGNI button:hover/:focus di magenta con testo bianco: qui lo neutralizziamo. L'hover e' una pillola grigia unica, rientrata 6px dal bordo del campo cosi' segue la curva e non sborda. */ .iti.glamour-phone .iti__country-container { top: 6px; bottom: 6px; left: 6px; } .iti.glamour-phone .iti__selected-country { height: 100% !important; padding: 0 14px !important; margin: 0 !important; border: 0 !important; border-radius: 50px !important; background: transparent !important; color: inherit !important; font: inherit !important; line-height: 1 !important; box-shadow: none !important; transition: background .2s ease; } .iti.glamour-phone .iti__selected-country:hover, .iti.glamour-phone .iti__selected-country:focus, .iti.glamour-phone .iti__selected-country:focus-visible, .iti.glamour-phone .iti__selected-country[aria-expanded="true"] { background: #f2f2f2 !important; color: inherit !important; outline: none !important; } .iti.glamour-phone .iti__selected-country-primary, .iti.glamour-phone .iti__selected-country-primary:hover, .iti.glamour-phone .iti__selected-country:hover .iti__selected-country-primary { padding: 0; gap: 6px; background: transparent !important; } .iti.glamour-phone .iti__selected-dial-code { font-weight: 600; padding-left: 6px; } /* Freccia: chevron al posto del triangolino pieno */ .iti.glamour-phone .iti__arrow { width: 8px; height: 8px; border: 0 !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg); margin: -4px 12px 0 8px; transition: transform .2s ease, margin .2s ease; } .iti.glamour-phone .iti__arrow--up { transform: rotate(-135deg); margin-top: 3px; } /* Tendina paesi (in : sopra a tutto, popup Elementor compresi) */ .iti--container { z-index: 100001; } .iti--container .iti__dropdown-content { border: 1px solid #e5e5e5; border-radius: 20px; background: #fff !important; color: #060506; box-shadow: 0 12px 32px rgba(0,0,0,.14); overflow: hidden; } .iti--container .iti__country-list { background: #fff !important; margin: 0; padding: 0; list-style: none; } .iti--container .iti__search-input-wrapper { padding: 12px 12px 6px; background: #fff; } .iti--container .iti__search-icon { left: 28px; } .iti--container .iti__search-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; line-height: 22px; padding: 11px 46px 11px 44px !important; margin: 0; border: 1.5px solid #ddd !important; border-radius: 50px !important; background: #f7f7f7 !important; color: #060506; outline: none !important; box-shadow: none !important; } /* La X "cancella ricerca" e' un