/*
 * Tessera fedeltà raccontata (OOR_Fedelta_Info): riga nel footer e pagina /tessera-fedelta/.
 * Colori del sito: blu #035F83, inchiostro #0b2f40.
 */

/* --- Footer: la riga della tessera sopra il copyright -------------------- */
.footer-bottom .footer-left { text-align: left; }
/* Con la riga della tessera il blocco di sinistra va in colonna, a tutta larghezza */
.footer-bottom .inner-wrap:has(.oor-piede-tessera) { flex-wrap: wrap; align-items: flex-end; }
.footer-bottom .footer-left:has(.oor-piede-tessera) { display: block; flex: 1 1 100%; max-width: 100%; }
.footer-bottom .footer-left .oor-piede-tessera { width: 100%; }
.footer-copyright,
.footer-copyright .oor-firma { text-align: left; }

.oor-piede-tessera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    text-align: left;
}
.oor-piede-tessera__testo { display: flex; flex-direction: column; gap: 3px; color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.5; }
.oor-piede-tessera__testo strong { color: #fff; font-size: 16px; font-weight: 600; }
.oor-piede-tessera__testo a { color: #fff; text-decoration: underline; font-weight: 600; }
.oor-piede-tessera__wallet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oor-piede-tessera__wallet a { display: block; line-height: 0; transition: opacity .2s ease, transform .2s ease; }
.oor-piede-tessera__wallet a:hover { opacity: .9; transform: translateY(-1px); }
.oor-piede-tessera__wallet img { height: 42px; width: auto; }
@media (max-width: 575px) {
    .oor-piede-tessera { padding: 14px 16px; }
    .oor-piede-tessera__wallet img { height: 40px; }
}

/* --- Pagina /tessera-fedelta/ -------------------------------------------- */
.oor-tf {
    --tf-blu: #035F83;
    --tf-inchiostro: #0b2f40;
    --tf-testo: #3b5562;
    --tf-grigio: #6b7f89;
    --tf-linea: #e2e9ed;
    --tf-fondo: #f5f8fa;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 72px;
    color: var(--tf-testo);
    font-family: "Jost", Arial, sans-serif;
}
.oor-tf h1, .oor-tf h2 { color: var(--tf-inchiostro); font-family: inherit; letter-spacing: -.01em; }
.oor-tf-sopra { margin: 0 0 8px; color: var(--tf-blu); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.oor-tf-testa {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 28px;
    background: linear-gradient(135deg, #e8f2f6 0%, #f5f8fa 60%, #fff 100%);
}
.oor-tf-testa h1 { margin: 0 0 16px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; font-weight: 500; }
.oor-tf-testa p { font-size: 17px; line-height: 1.65; margin: 0 0 24px; }
.oor-tf-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.oor-tf .oor-tf-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--tf-blu);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: background .2s ease, transform .2s ease;
}
.oor-tf .oor-tf-bottone { color: #fff !important; text-decoration: none !important; }
.oor-tf .oor-tf-bottone:hover { background: var(--tf-inchiostro); color: #fff; transform: translateY(-2px); }
.oor-tf .oor-tf-bottone--vuoto { background: transparent; color: var(--tf-blu) !important; box-shadow: inset 0 0 0 1.5px var(--tf-blu); }
.oor-tf .oor-tf-bottone--vuoto:hover { background: var(--tf-blu); color: #fff !important; }

/* La carta d'esempio, stessa grafica della tessera nell'area riservata */
.oor-tf-carta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    padding: 24px 26px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .22), transparent 45%),
        linear-gradient(145deg, #0b6a96, #035F83 45%, #023b54);
    box-shadow: 0 30px 60px -28px rgba(3, 60, 84, .8);
    color: #fff;
    overflow: hidden;
    transform: rotate(-3deg);
}
.oor-tf-carta::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(255, 255, 255, .04), 0 0 0 60px rgba(255, 255, 255, .03);
}
.oor-tf-carta__alto { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.oor-tf-carta__alto img { height: 34px; width: auto; }
.oor-tf-carta__alto span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.oor-tf-carta__punti { font-size: 16px; }
.oor-tf-carta__punti strong { display: block; font-size: 54px; font-weight: 500; line-height: 1; color: #fff; }
.oor-tf-carta__basso { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 14px; opacity: .9; }
.oor-tf-carta__basso span:first-child { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; }

.oor-tf-passi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
}
.oor-tf-passo { padding: 28px; border: 1px solid var(--tf-linea); border-radius: 20px; background: #fff; }
.oor-tf-passo__numero {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--tf-blu);
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}
.oor-tf-passo h2 { margin: 0 0 8px; font-size: 21px; font-weight: 500; }
.oor-tf-passo p { margin: 0; font-size: 15px; line-height: 1.6; }

.oor-tf-conto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    margin-top: 40px;
    padding: 40px 44px;
    border-radius: 24px;
    background: var(--tf-inchiostro);
    color: rgba(255, 255, 255, .85);
}
.oor-tf-conto h2 { margin: 0 0 12px; color: #fff; font-size: clamp(26px, 3vw, 34px); font-weight: 500; }
.oor-tf-conto .oor-tf-sopra { color: #bfe3f1; }
.oor-tf-conto p { margin: 0; font-size: 16px; line-height: 1.65; }
.oor-tf-esempi { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.oor-tf-esempi li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    font-size: 16px;
}
.oor-tf-esempi strong { color: #fff; font-weight: 600; }

.oor-tf-wallet {
    margin-top: 40px;
    padding: 40px 44px;
    border: 1px solid var(--tf-linea);
    border-radius: 24px;
    background: #fff;
}
.oor-tf-wallet h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 34px); font-weight: 500; }
.oor-tf-wallet p { max-width: 640px; font-size: 16px; line-height: 1.65; }
.oor-tf-wallet__pulsanti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.oor-tf-wallet__pulsanti a { line-height: 0; }
.oor-tf-wallet__pulsanti img { height: 50px; width: auto; }
.oor-tf-nota { margin: 12px 0 0; color: var(--tf-grigio); font-size: 14px !important; }

.oor-tf-domande { margin-top: 48px; }
.oor-tf-domande h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 34px); font-weight: 500; }
.oor-tf-domande details { border-bottom: 1px solid var(--tf-linea); }
.oor-tf-domande summary {
    position: relative;
    padding: 18px 40px 18px 0;
    color: var(--tf-inchiostro);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.oor-tf-domande summary::-webkit-details-marker { display: none; }
.oor-tf-domande summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tf-blu);
    font-size: 24px;
    font-weight: 300;
    transition: transform .2s ease;
}
.oor-tf-domande details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.oor-tf-domande details p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; }

@media (max-width: 991px) {
    .oor-tf-testa { grid-template-columns: minmax(0, 1fr); padding: 36px 28px; gap: 36px; }
    .oor-tf-carta { max-width: 420px; }
    .oor-tf-passi { grid-template-columns: minmax(0, 1fr); }
    .oor-tf-conto { grid-template-columns: minmax(0, 1fr); padding: 32px 28px; gap: 24px; }
}
@media (max-width: 575px) {
    .oor-tf { padding: 12px 14px 48px; }
    .oor-tf-testa { padding: 28px 20px; border-radius: 22px; }
    .oor-tf-azioni { flex-direction: column; }
    .oor-tf .oor-tf-bottone { width: 100%; }
    .oor-tf-carta { transform: none; min-height: 200px; }
    .oor-tf-passo { padding: 22px 20px; }
    .oor-tf-wallet { padding: 28px 20px; }
    .oor-tf-wallet__pulsanti img { height: 44px; }
}

/* Pagina della tessera: il titolo e' gia' nella testata della pagina */
.oor-tessera-info .main > .page-header,
.oor-tessera-info .main > .woocommerce-breadcrumb,
.oor-tessera-info .main > .breadcrumb-wrap { display: none; }
.oor-tessera-info .page-content { padding-top: 24px; }