/* ══════════════════════════════════════════════════════════════════════════
   AREA CLIENTI — intesagrandimpianti (design "app bold" intesa)
   Self-contained: font Barlow (@import) + accent verde intesa. NIENTE baresto.
   Accent tutto su --iga-accent: cambiare verde↔oro = una riga.
   ══════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap");

.iga {
  --iga-accent:   #2CA24E;   /* verde intesa — flip qui per oro (#c19a3e) */
  --iga-accent-d: #1c7a38;
  --iga-ink:      #10211a;
  --iga-muto:     #6b7d74;
  --iga-line:     #e3e9e5;
  --iga-bg:       #f4f6f4;
  font-family: 'Barlow', sans-serif;
  color: var(--iga-ink);
  background: var(--iga-bg);
  overflow-x: hidden;
}
.iga *, .iga *::before, .iga *::after { box-sizing: border-box; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.iga-hero {
  position: relative;
  min-height: clamp(340px, 46vh, 460px);
  padding: clamp(120px,14vh,180px) clamp(24px,6vw,90px) clamp(90px,12vh,140px);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
}
.iga-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,#0a100d 20%,rgba(10,16,13,.9) 42%,rgba(10,16,13,.55) 62%,rgba(10,16,13,.15) 100%);
}
.iga-hero-in { position: relative; max-width: 1200px; margin: 0 auto; width: 100%; }
.iga-eyebrow {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700;
  font-size: clamp(13px,1.05vw,17px); letter-spacing: 2.5px;
  color: var(--iga-accent); text-transform: uppercase;
}
.iga-eyebrow-line { display: block; height: 4px; width: 56px; background: var(--iga-accent); border-radius: 2px; margin: 12px 0 20px; }
.iga-hero h1 {
  margin: 0; font-weight: 700; line-height: 1.04; letter-spacing: -1px;
  font-size: clamp(34px,4.4vw,60px); color: #fff;
}
.iga-hero p {
  margin: 16px 0 0; max-width: 480px;
  font-size: clamp(15px,1.15vw,18px); line-height: 1.55; color: rgba(255,255,255,.82);
}

/* ── PANNELLO (card bianca sovrapposta all'hero) ──────────────────────────── */
.iga-panel-wrap {
  position: relative; z-index: 2;
  max-width: 1200px;
  margin: clamp(-80px,-10vh,-110px) auto clamp(60px,9vw,120px);
  padding: 0 clamp(20px,6vw,90px);
}
.iga-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 70px -24px rgba(16,33,26,.32), 0 4px 14px rgba(16,33,26,.06);
  padding: clamp(26px,3vw,44px);
}
.iga-panel[hidden] { display: none; }

.iga-fields {
  display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap;
}
.iga-field { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.iga-field-grow { flex: 1 1 340px; }
.iga-field label {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--iga-muto); margin-bottom: 8px;
}
.iga-field input,
.iga-pwd input {
  width: 100%; height: 60px;
  border: 1.5px solid var(--iga-line); border-radius: 14px;
  padding: 0 20px; font-family: 'Barlow', sans-serif; font-size: 17px;
  color: var(--iga-ink); background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.iga-field input::placeholder, .iga-pwd input::placeholder { color: #a7b3ad; }
.iga-field input:focus, .iga-pwd input:focus {
  outline: none; border-color: var(--iga-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--iga-accent) 16%, transparent);
}

/* campo password con toggle occhio */
.iga-pwd { position: relative; }
.iga-pwd input { padding-right: 52px; }
.iga-pwd-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: #a7b3ad; padding: 0;
  transition: color .2s ease;
}
.iga-pwd-toggle:hover, .iga-pwd-toggle.is-on { color: var(--iga-accent); }

/* bottone accent */
.iga-btn {
  align-self: flex-end; flex: 0 0 auto;
  height: 60px; padding: 0 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--iga-accent); color: #fff;
  border: 0; border-radius: 14px; cursor: pointer;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.iga-btn:hover { background: var(--iga-accent-d); transform: translateY(-1px); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--iga-accent) 60%, transparent); }
.iga-btn:active { transform: translateY(0); }
.iga-btn svg { flex: 0 0 auto; }

/* footer pannello: link recupera / torna */
.iga-panel-foot { margin-top: 16px; display: flex; justify-content: flex-end; }
.iga-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--iga-muto); text-decoration: none; cursor: pointer;
  transition: color .2s ease;
}
.iga-link:hover { color: var(--iga-accent); }
.iga-link-back { justify-content: flex-start; }
.iga-panel-foot:has(.iga-link-back) { justify-content: flex-start; }

/* messaggio errore login */
.iga-alert {
  background: #fdecec; border: 1.5px solid #f3b4b4; color: #a12626;
  border-radius: 12px; padding: 13px 18px; margin-bottom: 20px;
  font-size: 15px; font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD (utente loggato)
   ══════════════════════════════════════════════════════════════════════════ */
.iga-hero-dash { min-height: clamp(300px, 40vh, 420px); }
.iga-hero-dash h1 { display: flex; flex-wrap: wrap; gap: 0 .3em; align-items: baseline; }
.iga-accent-txt { color: var(--iga-accent); }
.iga-logout {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px; padding: 10px 18px;
  transition: background .2s ease, border-color .2s ease;
}
.iga-logout:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.iga-dash { padding: clamp(26px,3vw,48px); }
.iga-dash-grid {
  display: grid; grid-template-columns: 1fr minmax(280px, 360px);
  gap: clamp(28px,4vw,56px); align-items: start;
}
.iga-dash-main { min-width: 0; }

.iga-dash-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.iga-dash h2 {
  margin: 0; font-weight: 700; font-size: clamp(20px,2vw,26px);
  color: var(--iga-accent-d); letter-spacing: -.3px;
}
.iga-dash-h2b { margin-top: 34px !important; margin-bottom: 20px !important; }
.iga-badge {
  display: inline-flex; align-items: center;
  background: var(--iga-accent); color: #fff;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .5px; padding: 6px 14px; border-radius: 10px;
}

.iga-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
.iga-dl > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.iga-dl span {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--iga-muto);
}
.iga-dl strong { font-weight: 600; font-size: 17px; color: var(--iga-ink); word-break: break-word; }

.iga-fatt { margin-top: 26px; padding-top: 22px; border-top: 1.5px solid var(--iga-line); }
.iga-fatt span {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--iga-muto);
}
.iga-fatt p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--iga-ink); }

/* card visiva */
.iga-cardvis {
  position: sticky; top: 24px;
  aspect-ratio: 1.586; border-radius: 18px;
  background: linear-gradient(135deg, var(--iga-accent) 0%, var(--iga-accent-d) 100%);
  box-shadow: 0 22px 48px -18px color-mix(in srgb, var(--iga-accent) 55%, transparent);
  overflow: hidden; color: #fff;
}
.iga-cardvis::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 42%);
}
.iga-cardvis-in {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px,3vw,28px);
}
.iga-cardvis-brand {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .92;
}
.iga-cardvis-tipo { margin-top: auto; font-size: clamp(22px,2.4vw,30px); font-weight: 800; letter-spacing: -.5px; }
.iga-cardvis-num { font-size: clamp(15px,1.4vw,18px); letter-spacing: 2px; font-variant-numeric: tabular-nums; opacity: .9; }

/* ── TILE PROGRAMMA REWARD ────────────────────────────────────────────────── */
/* Ingresso al loyalty dalla dashboard card: un solo blocco cliccabile, niente
   <button> (iOS Safari li rompe se stilizzati). Compare solo se la card è
   agganciata a un cliente Reward attivo. */
.iga-rwtile {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 34px; padding: 26px 28px;
  border: 1.5px solid var(--iga-line); border-radius: 20px;
  background: linear-gradient(135deg, #fff 0%, #f2f8f3 100%);
  text-decoration: none; color: var(--iga-ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.iga-rwtile:hover {
  border-color: var(--iga-accent);
  box-shadow: 0 14px 34px rgba(28,122,56,.14);
  transform: translateY(-2px);
}
.iga-rwtile-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.iga-rwtile-eyebrow {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--iga-accent);
}
.iga-rwtile-go { font-size: 22px; line-height: 1; color: var(--iga-accent); }
.iga-rwtile-n {
  font-size: clamp(30px,3.4vw,42px); font-weight: 800; letter-spacing: -1px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.iga-rwtile-n em { font-style: normal; font-size: .42em; font-weight: 600; color: var(--iga-muto); letter-spacing: 0; }
.iga-rwtile-track { display: block; height: 8px; border-radius: 999px; background: #e6ece7; overflow: hidden; }
.iga-rwtile-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--iga-accent-d), var(--iga-accent));
}
.iga-rwtile-msg { display: block; font-size: 16px; color: var(--iga-ink); line-height: 1.5; }
.iga-rwtile-msg b { font-weight: 700; }
.iga-rwtile-sub { display: block; margin-top: 6px; font-size: 14px; color: var(--iga-muto); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .iga-fields { flex-direction: column; align-items: stretch; gap: 18px; }
  .iga-field, .iga-field-grow { flex: 1 1 auto; }
  .iga-btn { align-self: stretch; width: 100%; }
  .iga-panel-foot, .iga-panel-foot:has(.iga-link-back) { justify-content: center; }
  .iga-hero p { max-width: none; }

  .iga-dash-grid { grid-template-columns: 1fr; }
  .iga-cardvis { position: relative; top: 0; order: -1; max-width: 360px; }
  .iga-dl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .iga-dl { grid-template-columns: 1fr; }
  .iga-rwtile { padding: 22px 20px; margin-top: 26px; }
}