/* ==========================================================================
   Pagina di conferma ordine
   I blocchi sono stampati da inc/class-thankyou.php sugli hook del template
   WooCommerce; qui si veste anche il markup nativo (riepilogo e tabella).
   ========================================================================== */

/* Il verde oliva del tema (--usm-olive #79806e) su sfondo chiaro dà un
   contrasto di 2.6:1, sotto il minimo di 4.5:1 per il testo. Qui il testo
   secondario usa una tinta della stessa famiglia ma leggibile: 5.1:1 sullo
   sfondo pagina (#fbf9f3) e 4.6:1 sulle card più scure (#efeee8), quindi
   conforme in entrambi i contesti in cui compare. */
.usm-ty,
.usm-ty-passi,
.usm-ty-chiusura,
.woocommerce-order .woocommerce-table--order-details {
    --usm-ty-secondario: #656c5c;
}

/* L'elenco puntato nativo ripete gli stessi dati della card di riepilogo:
   resta nel markup per i plugin che lo leggono, ma non si mostra due volte. */
.woocommerce-order .woocommerce-order-overview {
    display: none;
}

/* Il messaggio "ordine ricevuto" è svuotato via filtro: senza questo resta
   un blocco vuoto con il suo margine. */
.woocommerce-order .woocommerce-thankyou-order-received:empty {
    display: none;
}

/* ── Intestazione ─────────────────────────────────────────────── */

.usm-ty {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.usm-ty__hero {
    padding: 8px 0 28px;
}

.usm-ty__segno {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
}

.usm-ty__segno .material-symbols-outlined {
    font-size: 40px;
    font-weight: 600;
}

.usm-ty__titolo {
    margin: 0 0 12px;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    color: var(--usm-text, #1b1c19);
}

.usm-ty__sottotitolo {
    max-width: 52ch;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--usm-ty-secondario, #656c5c);
}

/* ── Riepilogo in card ────────────────────────────────────────── */

.usm-ty__riepilogo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--usm-outline, #807660);
    border: 1px solid var(--usm-outline, #807660);
    border-radius: var(--usm-radius, 12px);
    overflow: hidden;
}

.usm-ty__dato {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 14px;
    background: var(--usm-bg, #fbf9f3);
    text-align: center;
}

.usm-ty__etichetta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--usm-ty-secondario, #656c5c);
}

.usm-ty__valore {
    font-size: 16px;
    font-weight: 600;
    color: var(--usm-text, #1b1c19);
    overflow-wrap: anywhere;
}

/* ── Cosa succede ora ─────────────────────────────────────────── */

.usm-ty-passi {
    max-width: 960px;
    margin: 0 auto 44px;
}

.usm-ty-passi__titolo {
    margin: 0 0 22px;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: 24px;
    text-align: center;
    color: var(--usm-text, #1b1c19);
}

.usm-ty-passi__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.usm-ty-passo {
    position: relative;
    padding: 24px 20px 20px;
    background: var(--usm-surface, #efeee8);
    border: 1px solid rgba(128, 118, 96, .18);
    border-radius: var(--usm-radius, 12px);
}

.usm-ty-passo__icona {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--usm-bg, #fbf9f3);
    border: 1px solid rgba(128, 118, 96, .22);
    color: var(--usm-dark-green, #213e25);
}

.usm-ty-passo__icona .material-symbols-outlined {
    font-size: 24px;
}

/* Il numero è un riferimento d'ordine, non un contenuto da leggere ad alta
   voce: resta decorativo in un angolo. */
.usm-ty-passo__numero {
    position: absolute;
    top: 16px;
    right: 18px;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: 30px;
    line-height: 1;
    color: rgba(128, 118, 96, .28);
}

.usm-ty-passo__titolo {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--usm-text, #1b1c19);
}

.usm-ty-passo__testo {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--usm-ty-secondario, #656c5c);
}

/* ── Tabella dettagli ordine (markup nativo) ──────────────────── */

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
    max-width: 960px;
    margin: 0 auto 36px;
}

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: 22px;
    margin-bottom: 16px;
}

.woocommerce-order .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    background: var(--usm-bg, #fbf9f3);
    border: 1px solid rgba(128, 118, 96, .25);
    border-radius: var(--usm-radius, 12px);
    overflow: hidden;
}

.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(128, 118, 96, .16);
    text-align: left;
}

.woocommerce-order .woocommerce-table--order-details thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--usm-ty-secondario, #656c5c);
    background: var(--usm-surface, #efeee8);
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 17px;
    font-weight: 700;
    border-bottom: 0;
}

/* ── Istruzioni di pagamento (bonifico) ───────────────────────── */

.woocommerce-order .woocommerce-bacs-bank-details {
    max-width: 960px;
    margin: 0 auto 36px;
    padding: 20px 22px;
    background: rgba(235, 189, 23, .10);
    border: 1px solid rgba(235, 189, 23, .38);
    border-radius: var(--usm-radius, 12px);
}

.woocommerce-order .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
    margin-top: 0;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: 20px;
}

/* ── Chiusura ─────────────────────────────────────────────────── */

.usm-ty-chiusura {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 8px;
    text-align: center;
}

.usm-ty-chiusura__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
}

/* Il tema veste ogni <a> come bottone con `.btn:not(.unset)`: qui servono
   regole proprie abbastanza specifiche da avere la meglio. */
.usm-ty-chiusura .usm-ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--usm-transition-md, 250ms ease),
        color var(--usm-transition-md, 250ms ease),
        transform var(--usm-transition-md, 250ms ease);
}

.usm-ty-chiusura .usm-ty-btn--primario {
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
    border: 1px solid var(--usm-gold, #EBBD17);
}

.usm-ty-chiusura .usm-ty-btn--primario:hover,
.usm-ty-chiusura .usm-ty-btn--primario:focus-visible {
    background: var(--usm-gold-dark, #c9a110);
    border-color: var(--usm-gold-dark, #c9a110);
    color: var(--usm-dark, #151616);
    transform: translateY(-2px);
}

.usm-ty-chiusura .usm-ty-btn--secondario {
    background: transparent;
    color: var(--usm-text, #1b1c19);
    border: 1.5px solid var(--usm-outline, #807660);
}

.usm-ty-chiusura .usm-ty-btn--secondario:hover,
.usm-ty-chiusura .usm-ty-btn--secondario:focus-visible {
    background: var(--usm-surface, #efeee8);
    color: var(--usm-text, #1b1c19);
    transform: translateY(-2px);
}

.usm-ty-chiusura__aiuto {
    margin: 0;
    font-size: 15px;
    line-height: 2;
    color: var(--usm-ty-secondario, #656c5c);
}

/* Telefono ed email sono i due modi per farsi aiutare: meritano un'area
   toccabile comoda, non la sola altezza della riga di testo. */
.usm-ty-chiusura__aiuto a {
    display: inline-block;
    padding: 6px 4px;
    color: var(--usm-dark-green, #213e25);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .usm-ty { margin-bottom: 30px; }

    /* Quattro colonne su schermo stretto renderebbero i valori illeggibili. */
    .usm-ty__riepilogo { grid-template-columns: repeat(2, 1fr); }

    .usm-ty__dato { padding: 15px 12px; }
    .usm-ty__segno { width: 60px; height: 60px; }
    .usm-ty__segno .material-symbols-outlined { font-size: 34px; }

    .usm-ty-passi__lista { grid-template-columns: 1fr; gap: 12px; }
    .usm-ty-passo { padding: 20px 18px 18px; }

    .woocommerce-order .woocommerce-table--order-details th,
    .woocommerce-order .woocommerce-table--order-details td { padding: 12px 13px; }

    .usm-ty-chiusura__azioni { flex-direction: column; }
    .usm-ty-chiusura .usm-ty-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .usm-ty-chiusura .usm-ty-btn { transition: none; }
    .usm-ty-chiusura .usm-ty-btn:hover { transform: none; }
}