/* ============================================================
   ab24-piani.css — Pagina Piani e servizi
   Piani annuali prepagati (Start / Pro / Premium)
   Card + tabella comparativa raggruppata per sezioni.
   Palette e token da ab24.css (:root).
   ============================================================ */

/* ─────────────────────────────────────────────
   1. CARD PIANI
   Stili .ab-pcard* e .ab-pcard-grid sono in ab24.css (globali,
   condivisi con la home). Qui solo la nota "primo anno" e la tabella.
   ───────────────────────────────────────────── */

/* Nota primo anno sotto le card */
.ab-ptable__firstyear-note {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 16px 20px;
  background: var(--ab-bg-2);
  border-radius: var(--ab-radius);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ab-ink-2);
  text-align: center;
}
.ab-ptable__firstyear-note i {
  color: var(--ab-blue);
  margin-right: 5px;
}
.ab-ptable__firstyear-note strong {
  color: var(--ab-ink);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   2. TABELLA COMPARATIVA (raggruppata per sezioni)
   ───────────────────────────────────────────── */
.ab-ptable__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ab-radius-lg);
  border: 1px solid var(--ab-line-2);
  background: var(--ab-surface);
}

.ab-ptable {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

/* Header tabella */
.ab-ptable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ab-surface);
  padding: 18px 16px;
  text-align: center;
  vertical-align: bottom;
  border-bottom: 2px solid var(--ab-line-2);
}
.ab-ptable__feature-col {
  text-align: left !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--ab-ink-3);
  width: 34%;
}
.ab-ptable__plan-col {
  width: 22%;
}
.ab-ptable__plan-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ab-ink);
  letter-spacing: -0.02em;
}

/* Righe della sezione COSTI: prezzi grandi */
.ab-ptable__row--price .ab-ptable__cell {
  font-size: 22px;
  font-weight: 700;
  color: var(--ab-ink);
  letter-spacing: -0.02em;
}
.ab-ptable__row--price:first-of-type .ab-ptable__cell {
  font-size: 26px;
}
.ab-ptable__row--price:first-of-type .ab-ptable__cell.is-featured {
  color: var(--ab-blue);
}
.ab-ptable__row--price .ab-ptable__txt {
  font-weight: 700;
  color: inherit;
}
.ab-ptable__row--price .ab-ptable__per {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--ab-ink-4);
  letter-spacing: 0;
}
/* Colonna piano in evidenza */
.ab-ptable__plan-col.is-featured {
  background: var(--ab-blue-soft);
  border-bottom-color: var(--ab-blue);
}
.ab-ptable__plan-col.is-featured .ab-ptable__plan-name {
  color: var(--ab-blue-dark);
}

/* Riga gruppo (sottotitolo sezione) */
.ab-ptable__group td {
  background: var(--ab-bg-2);
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ab-ink-3);
  border-top: 1px solid var(--ab-line-2);
  border-bottom: 1px solid var(--ab-line-2);
}

/* Righe dati */
.ab-ptable tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ab-line);
  font-size: 14px;
}
.ab-ptable tbody tr:hover td {
  background: rgba(15, 94, 255, 0.02);
}
.ab-ptable tbody tr:hover .ab-ptable__group td {
  background: var(--ab-bg-2);
}
.ab-ptable__feature {
  text-align: left;
  color: var(--ab-ink-2);
}
.ab-ptable__cell {
  text-align: center;
  color: var(--ab-ink-2);
}
.ab-ptable__cell.is-featured {
  background: rgba(15, 94, 255, 0.04);
}
.ab-ptable__txt {
  font-weight: 500;
  color: var(--ab-ink);
}

/* Icone ✓ / ✗ */
.ab-ptable .ab-ok {
  color: var(--ab-success);
  font-size: 16px;
}
.ab-ptable .ab-no {
  color: var(--ab-ink-5);
  font-size: 15px;
}

/* Footer tabella (CTA) */
.ab-ptable tfoot td {
  padding: 18px 16px;
  border-top: 2px solid var(--ab-line-2);
  text-align: center;
}
.ab-ptable tfoot .ab-ptable__cell.is-featured {
  background: var(--ab-blue-soft);
}

/* Nota price lock */
.ab-ptable__pricelock {
  text-align: center;
  font-size: 12px;
  color: var(--ab-ink-4);
  margin-top: 16px;
  font-style: italic;
}

/* Ancora #confronto: offset per header fisso */
#confronto {
  scroll-margin-top: calc(var(--ab-header-h, 64px) + 20px);
}

/* ─────────────────────────────────────────────
   3. RESPONSIVE (solo tabella; le card sono in ab24.css)
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Suggerimento scroll orizzontale tabella */
  .ab-ptable__wrap {
    position: relative;
  }
  .ab-ptable__plan-name {
    font-size: 16px;
  }
  .ab-ptable__row--price .ab-ptable__cell {
    font-size: 17px;
  }
  .ab-ptable__row--price:first-of-type .ab-ptable__cell {
    font-size: 19px;
  }
  .ab-ptable thead th,
  .ab-ptable tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }
}