/*
 * Concerto Casa Pablito.
 *
 * The concert views were written against class names that never existed in
 * padel.css, so the pages rendered unstyled. This file supplies them, reusing
 * the tokens from color.css and the type conventions of the padel stylesheet:
 * Bebas Neue for display and form controls, Roboto Condensed for prose.
 */

/* ---------- page loader ---------- */
/*
 * Same splash as paolorossifoundation.it (style.css) — full-screen brand blue
 * with the animated logo, faded out by .unload. Restated here because the
 * concert pages don't load style.css, and including the markup without these
 * rules leaves a stray GIF at the top of the page.
 */

#PageLoad {
    background-color: var(--primary-color);
    z-index: 9999999999;
    position: fixed;
    display: flex;
    width: 100%;
    top: 0;
    height: 100%;
    align-content: space-between;
    justify-content: space-around;
    align-items: center;
}

.loaderGif {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 13rem;
    height: 13rem;
}

.unload {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s linear;
}

/* ---------- shared layout ---------- */

.hero-concerto,
.form-page,
.checkout-page,
.thankyou-page {
    padding: 6rem 0 5rem;
    font-family: 'Roboto Condensed', sans-serif;
    color: #000;
}

.logo-hero {
    display: block;
    margin: 0 auto 2.5rem;
    max-width: 180px;
    height: auto;
}

.title-hero,
.title-form {
    font-family: 'Bebas Neue';
    color: var(--primary-color);
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.subtitle-hero,
.subtitle-form {
    font-family: 'Bebas Neue';
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: #000;
    margin-bottom: 2rem;
}

.testo-hero {
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 auto 2.5rem;
}

.hero-concerto .testo-hero {
    text-align: center;
}

.section-title {
    font-family: 'Bebas Neue';
    font-size: 1.9rem;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin: 2.5rem 0 0.5rem;
}

.section-note {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #8b8b8b;
    margin-bottom: 1.25rem;
}

.posti-disponibili {
    display: inline-block;
    font-family: 'Bebas Neue';
    letter-spacing: 1px;
    font-size: 1.15rem;
    background-color: var(--third-color);
    border-left: 4px solid var(--secondary-color);
    padding: 0.6rem 1rem;
    margin-bottom: 2rem;
}

/* ---------- form controls ---------- */
/*
 * Fields, selects and checkboxes are styled by padel.css and style.css:
 * .input-donation, .input-donation.sel, .choice-sel > .checkbox-c + .label-check.
 * The concert form uses those same classes so the three sites match, which
 * is why there are no field rules of our own here any more.
 */

/* ---------- ticket counter ---------- */
/*
 * The markup uses .select-number, the same grid the padel dinner form uses for
 * its adult/child counters, so only the two buttons need rules here — and they
 * mirror .add-adulto / .remove-adulto exactly, so the two counters look and
 * behave the same across the sites.
 */

.add-biglietto {
    background-color: var(--primary-color);
    width: 100%;
    height: 62px;
    margin-bottom: 1rem;
    font-size: 3rem;
    font-family: 'Bebas Neue';
    display: flex;
    color: #fff;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    border: none;
}

.remove-biglietto {
    background-color: #dbdbdb4f;
    width: 100%;
    height: 62px;
    margin-bottom: 1rem;
    font-size: 3rem;
    font-family: 'Bebas Neue';
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    border: none;
    color: var(--primary-color);
}

/* ---------- per-attendee rows ---------- */

.lista-nominativi {
    margin-bottom: 1rem;
}

.riga-nominativo {
    background-color: var(--third-color);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--primary-color);
}

.label-nominativo {
    font-family: 'Bebas Neue';
    letter-spacing: 1px;
    font-size: 1.05rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.riga-nominativo .input-nominativo {
    background-color: #fff;
    margin-bottom: 0.5rem;
}

/* ---------- total ---------- */
/* Mirrors .totale-padel. */

.totale-concerto {
    color: var(--primary-color);
    font-family: 'Bebas Neue';
    font-size: 3rem;
    line-height: 1.1;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #dbdbdb;
}

.totale-concerto small {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    color: #8b8b8b;
    letter-spacing: 0;
    margin-top: 0.25rem;
}

/* ---------- privacy + buttons ---------- */

.btn-form {
    display: inline-block;
    border: 0;
    background: var(--primary-color);
    color: #fff;
    font-family: 'Bebas Neue';
    font-size: 1.35rem;
    letter-spacing: 2px;
    padding: 1rem 3rem;
    cursor: pointer;
    text-decoration: none;
    transition: 0.5s;
}

.btn-form:hover {
    background: #00376b;
    color: #fff;
}

.btn-form:disabled {
    background-color: #c3c3c3;
    cursor: not-allowed;
}

/* ---------- checkout ---------- */

.recap-box {
    background-color: var(--third-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.recap-box .section-title {
    margin-top: 0;
}

.table-recap {
    width: 100%;
    margin-top: 1rem;
}

.table-recap td {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dbdbdb;
}

.table-recap .riga-totale td {
    border-bottom: 0;
    border-top: 2px solid var(--primary-color);
    padding-top: 0.9rem;
    font-family: 'Bebas Neue';
    font-size: 1.5rem;
    color: var(--primary-color);
}

.lista-recap {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.lista-recap li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dbdbdb;
}

.lista-recap li:last-child {
    border-bottom: 0;
}

.codice-recap {
    font-family: 'Bebas Neue';
    letter-spacing: 2px;
    color: #8b8b8b;
}

.pagamento-box {
    background-color: #fff;
    border: 2px solid #dbdbdb;
    padding: 1.5rem;
    height: 100%;
}

.pagamento-box .section-title {
    margin-top: 0;
}

/* .btn-nexi already exists in padel.css; only the disabled state needs
   restating here, because the two payment options are mutually exclusive. */
.btn-nexi {
    border: 0;
    color: #fff;
    font-family: 'Bebas Neue';
    font-size: 1.35rem;
    padding: 1rem 2rem;
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.btn-nexi:disabled {
    background-color: #c3c3c3;
    cursor: not-allowed;
}

/* ==========================================================================
 * Landing page (concerto.home) — "Concerto per Casa Pablito".
 *
 * Built to the PRF_Concerto-Casa-Pablito_Desktop reference: a full-bleed blue
 * hero over the Paolo Rossi photo, then the sponsor grid on white, then the
 * blue footer. The two brand colours here are the concert's own — a deeper
 * blue and a brighter green than the padel theme (color.css) — so they are
 * declared locally rather than taken from --primary-color.
 * ========================================================================== */

.hero-pablito {
    --pablito-green: #7fe406;
    --pablito-blue: #00227E;
    position: relative;
    min-height: 100vh;
    padding: 2.5rem clamp(1.5rem, 5vw, 5rem) 3.5rem;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    /* The image is already blue-toned; the gradient only deepens the right
       side so the white and green text stays legible over the brighter grass. */
    background:
        linear-gradient(90deg, rgba(0, 34, 126, 0.35) 0%, rgba(0, 34, 126, 0.35) 45%, rgba(0, 34, 126, 0.82) 100%),
        url(/media/concerto_background.jpg) center/cover no-repeat;
    background-color: var(--pablito-blue);
}

/* ---- top logos ---- */

.hero-pablito-top {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    z-index: 2;
}

.hero-pablito-logo {
    height: clamp(60px, 8vw, 96px);
    width: auto;
}

/* ---- hero body: title | info ---- */

.hero-pablito-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 60% auto;
    gap: clamp(2rem, 27vw, 5rem);
    align-items: start;
    z-index: 2;
    padding-bottom: 10rem;
}

.hero-pablito-title {
    display: flex;
}

.hero-pablito-title img {
    width: 100%;
    max-width: 90vh;
    /* max-height: 70vh; */
    /* height: auto; */
    /* object-fit: contain; */
}

.hero-pablito-info {
    padding-top: 40vh;
}

/* "SERATA BENEFICA" sits to the left of the Glimmers & Friends logo. */
.hero-pablito-glimmers-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue';
}

.hero-pablito-glimmers {
    width: clamp(180px, 18vw, 200px);
    height: auto;
    flex-shrink: 0;
}

.hr-pablito {
    border: 0;
    height: 2px;
    background: var(--pablito-green);
    opacity: 1;
    margin: 1.5rem 0;
}

.pablito-serata {
    font-family: 'Bebas Neue';
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    letter-spacing: 1px;
    line-height: 1.05;
    margin: 0;
}

.pablito-quando {
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: 0.5px;
    margin: 0.75rem 0 0;
    font-family: 'Bebas Neue';
}

.pablito-costo {
    color: var(--pablito-green);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem;
    font-family: 'Bebas Neue';
}

.pablito-ricavato {
    text-transform: uppercase;
    font-size: clamp(0.85rem, 1.3vw, 3rem);
    line-height: 1.45;
    font-family: 'Bebas Neue';
    margin: 0 0 1.75rem;
    letter-spacing: 1px;
    font-weight: 500;
}

.btn-pablito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: var(--pablito-green);
    color: var(--pablito-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5rem;
    padding: 1.1rem 1.5rem;
    text-decoration: none;
    border: 0;
    transition: 0.3s;
    font-family: 'Bebas Neue';
}

/* Keep the text its brand blue on hover; without this a global a:hover would
   recolour it, since the button is a link. */
.btn-pablito:hover {
    color: #00227e;
}

.btn-pablito > svg {
    width: 1.5rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.btn-pablito:hover > svg {
    transform: rotate(-45deg);
}

.btn-pablito.disabled {
    background: #c3c3c3;
    color: #fff;
    cursor: not-allowed;
}

/* ---------- sponsor grid (white) ---------- */

.sponsor-pablito {
    background: #fff;
    padding: clamp(3rem, 7vw, 6rem) 0;
    font-family: 'Roboto Condensed', sans-serif;
}

/*
 * Desktop uses the padel partner grid verbatim — .h4-r headings and
 * .box-partners > .partner, so the layout and the grey→colour-on-hover on the
 * logos (both from padel.css) are identical to padel.paolorossifoundation.it.
 * Only the grey placeholder tile, which the padel has no equivalent of, is
 * defined here. The mobile accordion below still uses .sponsor-box.
 */
.sponsor-pablito .logo-vuoto {
    display: block;
    background: #8f9295;
    width: 145px;
    height: 90px;
    max-width: 100%;
}

.sponsor-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sponsor-box {
    flex: 1 1 150px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

/* Logos sit desaturated and come to colour on hover, so the wall of partners
   reads as one grey set until you point at one. */
.sponsor-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    transition: 0.2s;
}

.sponsor-box:hover img {
    filter: grayscale(0);
}

/* Each logo links to the partner, as on the padel; the anchor fills the tile
   so the whole logo is clickable. */
.sponsor-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Placeholder tiles for logos not yet supplied. */
.sponsor-box.vuoto {
    background: #8f9295;
}

/* The patrocinio and "a cura di" logos sit on the white directly. */
.sponsor-box.acura {
    justify-content: flex-start;
}

/* ---- mobile sponsor collapse ---- */
/*
 * The accordion machinery (flex header, +/- bars, .hide collapse) comes from
 * style.css / padel.css. These rules only retune it for the white sponsor
 * block and make the open/close deterministic regardless of what the shared
 * .cms-body-accordion base sets (it defaults to a green tint and a scroll).
 */
.sponsor-mobile .cms-accordion {
    margin: 0;
    width: 100%;
}

.sponsor-mobile .cms-header-accordion {
    font-size: 1.7rem;
    line-height: 1.2;
    color: #8b8b8b;
    border-bottom: 1px solid #d5d5d5;
    padding: 0.9rem 0;
}

.sponsor-mobile .cms-body-accordion {
    overflow: hidden;
    height: auto;
    max-height: 1200px;
    padding: 1rem 0 0.5rem;
    background: transparent;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.sponsor-mobile .cms-body-accordion.hide {
    max-height: 0;
    padding: 0;
}

.sponsor-mobile .sponsor-riga {
    margin-bottom: 0;
}

/* ---------- footer (blue) ---------- */
/*
 * The concert's own footer, straight from the reference: the deep brand blue
 * (#00227E, not the padel #00498d), the PRF logo with name and contacts on the
 * left, the copyright line to the right. Shared by every concert page.
 */

.footer-pablito {
    background: #00227E;
    color: #fff;
    padding: 2.5rem clamp(1.5rem, 5vw, 5rem);
    font-family: 'Roboto Condensed', sans-serif;
}

.footer-pablito .logo-footer {
    width: 100%;
    max-width: 80px;
    height: auto;
}

.footer-pablito-nome {
    font-family: 'Bebas Neue';
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin: 0 0 0.5rem;
}

.footer-pablito-link {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.5;
}

.footer-pablito-link:hover {
    color: #7fe406;
}

.footer-pablito-copy {
    font-size: 1rem;
    color: #c9d2ec;
    margin: 0;
    text-align: right;
    font-family: 'Bebas Neue';
    letter-spacing: 1px;
}

.footer-pablito-copy a {
    color: #c9d2ec;
    text-decoration: underline;
}

/* ---------- responsive ---------- */

/* Tablet landscape (iPad ~1024): still two columns, but the reference's 60/40
   split leaves the info column too narrow here — "SERATA BENEFICA" and the
   button label both wrapped. Give the info more room, cap the Glimmers logo and
   keep those two lines intact. Desktop ≥1200 keeps the reference proportions. */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-pablito-grid {
        grid-template-columns: 50% auto;
        gap: 2.5rem;
        padding-bottom: 4rem;
    }

    .hero-pablito-info {
        padding-top: 16vh;
    }

    .hero-pablito-glimmers {
        width: 150px;
    }

    .pablito-serata,
    .btn-pablito > span {
        white-space: nowrap;
    }
}

/* Tablet and down: the hero stacks to one column — title first, then the info
   block. The desktop-only offsets (info pushed down 40vh, grid's 10rem tail)
   are reset here, or the info would land in the middle of an empty screen. */
@media (max-width: 991px) {
    .hero-pablito {
        min-height: auto;
        padding-bottom: 2.5rem;
    }

    .hero-pablito-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 0;
        align-items: stretch;
    }

    .hero-pablito-title {
        justify-content: center;
    }

    .hero-pablito-title img {
        max-height: 42vh;
    }

    .hero-pablito-info {
        max-width: none;
        padding-top: 0;
    }

    /* Balance "SERATA BENEFICA" against the taller Glimmers logo. */
    .hero-pablito-glimmers-row {
        align-items: center;
    }

    /* The reason line is condensed enough to fit one tiny strip; give it a
       readable size and let it wrap to two lines. */
    .pablito-ricavato {
        font-size: 1rem;
    }

    .footer-pablito-copy {
        text-align: left;
        margin-top: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero-concerto,
    .form-page,
    .checkout-page,
    .thankyou-page {
        padding: 3rem 0;
    }

    .pagamento-box {
        margin-bottom: 1rem;
    }

    .totale-concerto {
        font-size: 2.2rem;
    }

    /* Two per row on phones instead of shrinking three into a strip. */
    .sponsor-box {
        flex: 1 1 40%;
        height: 90px;
    }
}

/* Small phones: keep "SERATA BENEFICA" beside the Glimmers logo, but let it
   wrap if there is genuinely no room, and cap the logo so it never pushes the
   text off-screen. */
@media (max-width: 480px) {
    .hero-pablito {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hero-pablito-glimmers-row {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .hero-pablito-glimmers {
        width: 150px;
    }

    .pablito-serata {
        font-size: 1.3rem;
    }

    .pablito-quando,
    .pablito-costo {
        font-size: 1.5rem;
    }

    .sponsor-box {
        flex-basis: 100%;
        height: 100px;
    }
}