/**
 * REI — Pagina Contatti
 * Stessa palette/criterio di Consulente e Pagamenti.
 * Hero crema + colonna canali (icone verdi) + card form verde.
 *
 * @since 1.100.0
 */

body.rei-static-page--contatti { background: var(--rei-cream, #FFF4E6); }

.rei-contatti {
    background: var(--rei-cream, #FFF4E6);
    color: var(--rei-ink, #0B1733);
    position: relative;
    overflow-x: hidden;
}
.rei-contatti * { box-sizing: border-box; }

.rei-contatti__container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   DECORAZIONI DI SFONDO (glow + lampadine/fiamme pulsanti)
   ========================================================================== */
.rei-contatti__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rei-contatti__glow { position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(80px); opacity: 0.45; }
.rei-contatti__glow--tl { top: -190px; left: -190px; background: radial-gradient(circle, rgba(34,202,1,0.55) 0%, rgba(34,202,1,0) 70%); }
.rei-contatti__glow--tr { top: -200px; right: -200px; background: radial-gradient(circle, rgba(255,180,0,0.45) 0%, rgba(255,180,0,0) 70%); }
.rei-contatti__glow--bl { bottom: -190px; left: -200px; background: radial-gradient(circle, rgba(255,180,0,0.45) 0%, rgba(255,180,0,0) 70%); }
.rei-contatti__glow--br { bottom: -190px; right: -190px; background: radial-gradient(circle, rgba(34,202,1,0.55) 0%, rgba(34,202,1,0) 70%); }

.rei-contatti__particle { position: absolute; color: var(--rei-green, #22ca01); opacity: 0.10; animation: rei-cont-pulse 4s ease-in-out infinite; }
.rei-contatti__particle svg { width: 100%; height: 100%; }
.rei-contatti__particle--1  { top: 14%; left: 5%;  width: 120px; height: 120px; animation-delay: 0s; }
.rei-contatti__particle--2  { top: 20%; right: 4%; width: 170px; height: 170px; color: var(--rei-yellow, #FFB400); animation-delay: 0.6s; }
.rei-contatti__particle--3  { top: 60%; left: 3%;  width: 110px; height: 110px; animation-delay: 1.2s; }
.rei-contatti__particle--4  { top: 72%; right: 6%; width: 150px; height: 150px; color: var(--rei-yellow, #FFB400); animation-delay: 1.8s; }
.rei-contatti__particle--5  { top: 8%;  left: 42%; width: 90px;  height: 90px;  animation-delay: 2.4s; }
.rei-contatti__particle--6  { top: 86%; left: 40%; width: 130px; height: 130px; color: var(--rei-yellow, #FFB400); animation-delay: 3s; }
.rei-contatti__particle--7  { top: 40%; right: 2%; width: 100px; height: 100px; animation-delay: 0.9s; }
.rei-contatti__particle--8  { top: 46%; left: 8%;  width: 80px;  height: 80px;  color: var(--rei-yellow, #FFB400); animation-delay: 1.5s; }
.rei-contatti__particle--9  { top: 30%; left: 24%; width: 90px;  height: 90px;  animation-delay: 2.1s; }
.rei-contatti__particle--10 { top: 66%; right: 22%; width: 110px; height: 110px; color: var(--rei-yellow, #FFB400); animation-delay: 2.7s; }
@keyframes rei-cont-pulse { 0%,100% { transform: scale(1); opacity: 0.08; } 50% { transform: scale(1.12); opacity: 0.16; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.rei-contatti__hero { padding: 80px 0 40px; background: transparent; position: relative; }
.rei-contatti__eyebrow {
    display: inline-block;
    background: #d9f5dd;
    color: var(--rei-green-deep, #0a7d2c);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 20px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.rei-contatti__title {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 22px;
    color: var(--rei-ink, #0B1733);
}
.rei-contatti__title-green { color: var(--rei-green, #22ca01); }
.rei-contatti__intro {
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 760px;
    color: var(--rei-ink, #0B1733);
}

/* ==========================================================================
   SEZIONE PRINCIPALE — canali + form (2 colonne)
   ========================================================================== */
.rei-contatti__main { padding: 16px 0 80px; background: transparent; position: relative; }
.rei-contatti__hours {
    font-style: italic;
    color: var(--rei-green-deep, #0a7d2c);
    font-size: 1.02rem;
    margin: 0 0 36px;
}
.rei-contatti__cols {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: start;
}

/* Colonna canali */
.rei-contatti__channel {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 34px;
}
.rei-contatti__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a9c00 0%, #0a7d2c 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px -10px rgba(10,125,44,0.7);
}
.rei-contatti__icon svg { width: 28px; height: 28px; }
.rei-contatti__channel-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--rei-green, #22ca01);
    margin: 4px 0 10px;
}
.rei-contatti__line { font-size: 1.05rem; line-height: 1.6; margin: 4px 0; color: var(--rei-ink, #0B1733); }
.rei-contatti__line strong { margin-right: 6px; }
.rei-contatti__line a { color: var(--rei-green-deep, #0a7d2c); text-decoration: none; font-weight: 600; }
.rei-contatti__line a:hover { text-decoration: underline; }

/* Card form (verde) */
.rei-contatti__form-card {
    background: linear-gradient(135deg, #1a9c00 0%, #0a7d2c 100%);
    color: #fff;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 30px 60px -22px rgba(10,125,44,0.55);
}
.rei-contatti__form-title { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0 0 8px; }
.rei-contatti__form-intro { color: rgba(255,255,255,0.92); margin: 0 0 22px; line-height: 1.6; }
.rei-contatti__form-feedback { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; }
.rei-contatti__form-feedback.is-ok { background: rgba(255,255,255,0.95); color: #0a7d2c; }
.rei-contatti__form-feedback.is-error { background: #fff0f0; color: #b32d2e; }

.rei-contatti__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rei-contatti__field { display: flex; flex-direction: column; margin-bottom: 18px; }
.rei-contatti__field label { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; color: #fff; }
.rei-contatti__field .req { color: #ffd9d9; }
.rei-contatti__field input,
.rei-contatti__field select {
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
    color: var(--rei-ink, #0B1733);
    width: 100%;
}
.rei-contatti__field input:focus,
.rei-contatti__field select:focus { outline: 3px solid rgba(255,255,255,0.5); }

.rei-contatti__privacy { margin: 6px 0 24px; font-size: 0.96rem; line-height: 1.6; }
.rei-contatti__privacy-label { color: rgba(255,255,255,0.95); }
.rei-contatti__privacy-label a { color: #fff; text-decoration: underline; font-weight: 600; }
.rei-contatti__privacy .req { color: #ffd9d9; }
.rei-contatti__privacy-opts { display: inline-flex; gap: 20px; margin-left: 12px; }
.rei-contatti__privacy-opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.rei-contatti__submit-wrap { text-align: center; }
.rei-contatti__submit {
    background: #fff;
    color: var(--rei-green-deep, #0a7d2c);
    border: none;
    padding: 16px 56px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.rei-contatti__submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(0,0,0,0.45); }

/* Fallback evidenziatori titolo (se le utility globali non sono caricate) */
.rei-contatti .rei-underline--yellow { background: linear-gradient(transparent 62%, rgba(255,217,103,0.85) 0); }
.rei-contatti .rei-underline--green  { background: linear-gradient(transparent 62%, rgba(34,202,1,0.22) 0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .rei-contatti__cols { grid-template-columns: 1fr; gap: 40px; }
    .rei-contatti__form-card { order: -1; }
}
@media (max-width: 768px) {
    .rei-contatti__container { padding: 0 20px; }
    .rei-contatti__hero { padding: 56px 0 28px; }
    .rei-contatti__main { padding: 8px 0 56px; }
    .rei-contatti__form-card { padding: 28px 22px; }
    .rei-contatti__privacy-opts { display: flex; margin-left: 0; margin-top: 10px; }
    .rei-contatti__channel-title { font-size: 1.25rem; }
}