/* =============================================================================
   PROBAR - AREA ACCOUNT: LE MIE GIFT CARD
   -----------------------------------------------------------------------------
   Percorso: [child]/css/credito-account.css | Solo pagine account.
   Stessa lingua visiva di Monete, Recensioni e Lista dei desideri: fondo nero,
   filetti d'oro sottili, Playfair sui numeri che contano, niente rumore.
   ============================================================================= */

:root {
  --gc-gold: #FFCE53;
  --gc-gold-line: rgba(255, 206, 83, 0.18);
  --gc-line: rgba(255, 255, 255, 0.10);
  --gc-muted: rgba(255, 255, 255, 0.55);
  --gc-panel: #0a0a0a;
  --gc-field: #0f0f0f;
  --gc-ok: #35c26b;
  --gc-ease: cubic-bezier(0.16, 1, 0.30, 1);
}

/* ==========================================================================
   1. INTRO E CAMPO PER AGGIUNGERE
   ========================================================================== */
.abm-gc-intro {
  margin: 0 0 30px;
  padding: 26px 26px 22px;
  border: 1px solid var(--gc-gold-line);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 206, 83, 0.06), rgba(255, 206, 83, 0.01) 60%),
    var(--gc-panel);
}

.abm-gc-titolo {
  margin: 0 0 10px !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--gc-gold);
}

.abm-gc-lead {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.7;
}

.abm-gc-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.abm-gc-form input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--gc-line);
  border-radius: 10px;
  background: var(--gc-field);
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: border-color 0.2s var(--gc-ease);
}

.abm-gc-form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 1.5px;
}

.abm-gc-form input[type="text"]:focus {
  outline: none;
  border-color: var(--gc-gold);
}

.abm-gc-avviso {
  margin: 0;
  color: var(--gc-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   2. PULSANTI
   ========================================================================== */
.abm-gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--gc-ease), background 0.2s var(--gc-ease), color 0.2s var(--gc-ease);
}

.abm-gc-btn--gold {
  background: var(--gc-gold);
  color: #111;
}

.abm-gc-btn--gold:hover {
  transform: translateY(-1px);
  background: #ffd873;
  color: #111;
}

/* Il tema colora d'oro OGNI link dentro l'area account, con la regola
   .woocommerce-MyAccount-content a, che ha specificita' piu' alta di una
   classe sola: il pulsante usciva oro su oro, cioe' un rettangolo vuoto.
   Visto in pagina il 14 agosto 2026, non dedotto. Serve un selettore che
   pareggi il conto, e vale solo per i pulsanti che sono link. */
.woocommerce-MyAccount-content a.abm-gc-btn--gold,
.woocommerce-MyAccount-content a.abm-gc-btn--gold:hover {
  color: #111;
  text-decoration: none;
}

.abm-gc-btn--nudo {
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--gc-muted);
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.abm-gc-btn--nudo:hover {
  color: #fff;
}

/* ==========================================================================
   3. STATO VUOTO
   ========================================================================== */
.abm-gc-vuoto {
  padding: 46px 26px;
  border: 1px dashed var(--gc-line);
  border-radius: 14px;
  text-align: center;
}

.abm-gc-vuoto__titolo {
  margin: 0 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  color: #fff;
}

.abm-gc-vuoto__sub {
  margin: 0 auto 22px;
  max-width: 460px;
  color: var(--gc-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ==========================================================================
   4. L'ELENCO DELLE CARD
   ========================================================================== */
.abm-gc-totale {
  margin: 0 0 16px;
  color: var(--gc-muted);
  font-size: 14px;
}

.abm-gc-totale strong {
  color: var(--gc-gold);
  font-weight: 600;
}

.abm-gc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.abm-gc-carta {
  position: relative;
  padding: 22px 24px 18px;
  border: 1px solid var(--gc-gold-line);
  border-radius: 14px;
  background: var(--gc-panel);
}

/* Card finita o bloccata: resta leggibile ma smette di brillare. */
.abm-gc-carta.is-chiusa {
  border-color: var(--gc-line);
}

.abm-gc-carta.is-chiusa .abm-gc-carta__residuo {
  color: var(--gc-muted);
}

.abm-gc-carta__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.abm-gc-carta__codice {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.82);
}

.abm-gc-stato {
  padding: 3px 10px;
  border: 1px solid var(--gc-line);
  border-radius: 999px;
  color: var(--gc-muted);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.abm-gc-carta__residuo {
  margin: 0 0 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.1;
  color: var(--gc-gold);
}

.abm-gc-carta__residuo .woocommerce-Price-amount {
  color: inherit;
}

.abm-gc-carta__iniziale {
  margin: 0 0 14px;
  color: var(--gc-muted);
  font-size: 13px;
}

.abm-gc-carta__iniziale .woocommerce-Price-amount {
  color: inherit;
}

/* ==========================================================================
   5. LO STORICO - fisarmonica nativa, come al checkout
   ========================================================================== */
.abm-gc-storico {
  border-top: 1px solid var(--gc-line);
  padding-top: 12px;
}

.abm-gc-storico__testa {
  position: relative;
  padding-right: 24px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--gc-gold);
  font-size: 13.5px;
  letter-spacing: 0.3px;
}

.abm-gc-storico__testa::-webkit-details-marker {
  display: none;
}

.abm-gc-storico__testa::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gc-gold);
  border-bottom: 2px solid var(--gc-gold);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.abm-gc-storico[open] .abm-gc-storico__testa::after {
  transform: rotate(225deg);
  top: 7px;
}

.abm-gc-movimenti {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
}

.abm-gc-movimento {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
}

.abm-gc-movimento:last-child {
  border-bottom: none;
}

.abm-gc-movimento__data {
  color: var(--gc-muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.abm-gc-movimento__nota {
  color: rgba(255, 255, 255, 0.78);
}

.abm-gc-movimento__nota a {
  color: var(--gc-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.abm-gc-movimento__importo {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.abm-gc-movimento__importo .woocommerce-Price-amount {
  color: inherit;
}

.abm-gc-movimento__importo.is-entrata {
  color: var(--gc-ok);
}

.abm-gc-movimento__importo.is-uscita {
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   6. TOGLI DALLA LISTA
   ========================================================================== */
.abm-gc-togli {
  margin: 6px 0 0;
}

/* ==========================================================================
   7. QUELLO CHE IL TEMA SI RIPRENDE
   --------------------------------------------------------------------------
   Misurato in pagina il 14 agosto 2026, non dedotto.

   `.entry-content p { margin-bottom: 1.6em }` ha una classe PIU' un elemento,
   quindi batte una classe sola: si e' ripreso i margini di ogni riga della
   pagina, e sotto il residuo restava un buco di 61 pixel al posto di 4. Stessa
   storia per il testo dei pulsanti, che Astra scrive tutto maiuscolo.

   Il prefisso col contenitore dell'account porta a due classi e vince, senza
   un solo !important. Vale la regola generale: dentro l'area account una
   classe sola non basta a tenersi i propri margini.
   ========================================================================== */
.woocommerce-MyAccount-content .abm-gc-lead { margin: 0 0 20px; }
.woocommerce-MyAccount-content .abm-gc-avviso { margin: 0; }
.woocommerce-MyAccount-content .abm-gc-totale { margin: 0 0 16px; }
.woocommerce-MyAccount-content .abm-gc-vuoto__titolo { margin: 0 0 8px; }
.woocommerce-MyAccount-content .abm-gc-vuoto__sub { margin: 0 auto 22px; }
.woocommerce-MyAccount-content .abm-gc-carta__residuo { margin: 0 0 4px; }
.woocommerce-MyAccount-content .abm-gc-carta__iniziale { margin: 0 0 14px; }

/* "Togli dalla lista" e' un link di servizio, non un pulsante che grida. */
.woocommerce-MyAccount-content .abm-gc-carta button.abm-gc-btn--nudo {
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================================================================
   8. TELEFONO
   ========================================================================== */
@media (max-width: 600px) {
  .abm-gc-intro {
    padding: 20px 18px 18px;
  }

  .abm-gc-carta {
    padding: 18px 18px 16px;
  }

  .abm-gc-form .abm-gc-btn {
    flex: 1 1 100%;
  }

  .abm-gc-movimento {
    grid-template-columns: 1fr auto;
  }

  .abm-gc-movimento__data {
    grid-column: 1 / -1;
  }
}