/**
 * 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, #F4F8F6); }

.rei-contatti {
    /* v2.2: transparent — lascia trasparire la filigrana a tema del main */
    background: transparent;
    color: var(--rei-ink, #157155);
    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(32,164,123,0.55) 0%, rgba(32,164,123,0) 70%); }
.rei-contatti__glow--tr { top: -200px; right: -200px; background: radial-gradient(circle, rgba(209,224,0,0.45) 0%, rgba(209,224,0,0) 70%); }
.rei-contatti__glow--bl { bottom: -190px; left: -200px; background: radial-gradient(circle, rgba(209,224,0,0.45) 0%, rgba(209,224,0,0) 70%); }
.rei-contatti__glow--br { bottom: -190px; right: -190px; background: radial-gradient(circle, rgba(32,164,123,0.55) 0%, rgba(32,164,123,0) 70%); }

.rei-contatti__particle { position: absolute; color: var(--rei-green, #20A47B); 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, #D1E000); 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, #D1E000); 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, #D1E000); 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, #D1E000); 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, #D1E000); 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: #D2F0E6;
    color: var(--rei-green-deep, #157155);
    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, #157155);
}
.rei-contatti__title-green { color: var(--rei-green, #20A47B); }
.rei-contatti__intro {
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 760px;
    color: var(--rei-ink, #157155);
}

/* ==========================================================================
   SEZIONE PRINCIPALE — pannello verde 4 colonne + form richiamata
   ========================================================================== */
.rei-contatti__main { padding: 48px 0 80px; background: transparent; position: relative; }

/* Pannello verde con le 4 colonne di contatto (come il live) */
.fe-contatti-panel {
    background: var(--rei-green, #20A47B);
    border-radius: 24px;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    color: #fff;
    box-shadow: 0 24px 48px -20px rgba(32,164,123,0.55);
    margin-bottom: 64px;
}
.fe-contatti-panel__col { text-align: center; }
.fe-contatti-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    color: #fff;
}
.fe-contatti-panel__icon svg { width: 56px; height: 56px; }
.fe-contatti-panel__title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.2;
}
.fe-contatti-panel__line {
    font-size: 1rem;
    line-height: 1.6;
    margin: 6px 0;
    color: #fff;
    overflow-wrap: anywhere;
}
.fe-contatti-panel__line strong { font-weight: 700; }
.fe-contatti-panel__line a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.fe-contatti-panel__line a:hover { color: var(--rei-yellow, #D1E000); }

/* Form richiamata centrata sotto il pannello */
.rei-contatti__cols {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
}

/* Card form (verde) */
.rei-contatti__form-card {
    background: var(--rei-green, #20A47B);
    color: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 30px 60px -22px rgba(32,164,123,0.5);
}
.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: #157155; }
.rei-contatti__form-feedback.is-error { background: #fff0f0; color: #D63638; }

.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, #157155);
    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, #157155);
    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); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .fe-contatti-panel { grid-template-columns: repeat(2, 1fr); padding: 40px 32px; }
}
@media (max-width: 768px) {
    .rei-contatti__container { padding: 0 20px; }
    .rei-contatti__hero { padding: 48px 0; }
    .rei-contatti__main { padding: 32px 0 56px; }
    .fe-contatti-panel { grid-template-columns: 1fr; gap: 36px; padding: 36px 24px; margin-bottom: 44px; }
    .rei-contatti__form-card { padding: 28px 22px; }
    .rei-contatti__privacy-opts { display: flex; margin-left: 0; margin-top: 10px; }
}