/* #graphic-page css */

#container-main .container-center, #container-main .container-sx div, #container-main .container-dx div {
    height: 600px;
}

#container-main .container-center {
    background-image: url('../../../images/frontend/graphic-pages/pro/banner/center.jpg');
    background-size: 1110px 600px;
}

#container-main .container-sx div {
    background-image: url('../../../images/frontend/graphic-pages/pro/banner/sx.jpg');
    background-size: 1px 600px;
}

#container-main .container-dx div {
    background-image: url('../../../images/frontend/graphic-pages/pro/banner/dx.jpg');
    background-size: 1px 600px;
}

#container-main .container-center div {
    padding-top: 15px;
    width: 500px;
}


body.mobile-view #container-main .banner-mobile img {
    content: url('../../../images/frontend/graphic-pages/pro/banner/center-mobile.jpg');
}

.common-plus-container {
    color: var(--vn-yale-blue);
    fill: var(--vn-yale-blue);
}

.common-plus-container .icon-element {
    background-color: var(--vn-yale-very-light-blue)
}

.container-logo img {
    width: 500px;
}

#pro-registration-data {
    background-color: var(--vn-mint-cream);
    width: 100%;
    padding: 0 30px 20px 30px;
    border-radius: 15px;
    border: 1px solid;
}

body.mobile-view .container-logo img {
    width: 90%;
}

.iti--inline-dropdown .iti__dropdown-content {
    z-index: 9999 !important;
}

/* Ora e' un MODIFICATORE di .vn-badge, non un badge riscritto da zero: nel markup la classe sta
   accanto a `vn-badge`, e qui resta solo cio' che questa campagna chiede in piu'.
   Sei dichiarazioni su dieci erano la base ridichiarata (pillola maiuscola in grassetto, inline,
   padding e raggio) e sono spariti. Tre valori cambiano nel passaggio, tutti presi dalla base:
   il padding da 4px 14px a 5px 12px, la spaziatura fra lettere da 1px a .8px (--vn-label-tracking)
   e il raggio da 20px a --vn-radius-pill, che a questa altezza rende identico.
   Il fondo passa al token --vn-accent, che vale esattamente var(--vn-saffron). La tinta del testo
   resta grezza di proposito: e' il blu del marchio PRO su una pagina PUBBLICA che descrive PRO,
   quindi non e' un ruolo - scriverci --vn-pro-chrome affermerebbe che questa e' una superficie sotto
   .vinocom-pro, e non lo e'. Stesso trattamento delle tinte di campagna dei bottoni card. */
.pro-wi-badge {
    margin-bottom: 12px;
    background-color: var(--vn-accent);
    color: var(--vn-yale-blue);
    font-size: var(--vn-label-size-lg);
}

.pro-wi-included {
    margin-top: 20px;
    color: var(--vn-yale-blue);
    font-weight: 600;
}

.pro-wi-included i {
    margin-right: 6px;
}

/* ===== Richiedi accesso nel banner ===============================================================
   Il bottone porta alla sezione #pro-request-access piu' sotto. Un <p> e non un <div>: la regola
   #container-main .container-center div in cima al file da' padding e 500px di larghezza a ogni div
   del banner. Su mobile si centra come il sottotitolo, che lo fa con lo stesso body.mobile-view. */
.page-graphic p.pro-hero-cta {
    margin: 26px 0 0;
}

body.mobile-view .page-graphic p.pro-hero-cta {
    text-align: center;
}

/* L'header e' fisso: senza margine il salto lascerebbe il titolo della sezione sotto l'header.
   I due valori sono quelli con cui #Content scende sotto l'header in styles-typography.css. */
#pro-request-access {
    scroll-margin-top: 155px;
}

body.mobile-view #pro-request-access {
    scroll-margin-top: 110px;
}

/* ===== Richiedi accesso (utente non loggato) =====================================================
   Due passi affiancati: 1 Entra in Vino.com (attivo), 2 Diventa PRO (attenuato). Le tinte sono tutte
   di palette: il mockup chiedeva due azzurri fuori palette (#cfe0f7 bordo, #8fadd6 freccia), resi con
   --vn-uranian-blue e --vn-yale-light-blue. Come per .pro-wi-badge il blu resta grezzo: e' una pagina
   pubblica che descrive PRO, non una superficie sotto .vinocom-pro.
   I due bottoni del passo 1 sono quelli del design system, senza ritocchi di pagina: "Accedi" e' il
   .vn-btn-primary d'oro di "Aggiungi al carrello", "Iscriviti" il .vn-btn-secondary di "Scopri come"
   nella sezione del reso (graphic-pages/common/order-return.html). Qui sotto ne resta solo la
   disposizione, in .pro-access-step-actions. Prima erano .vn-btn-primary .vn-btn accanto a .vn-btn
   .vn-btn-accent, la coppia che design-system/buttons.html documenta e che resta valida: il cambio e'
   una scelta di design, non la correzione di un errore. */

.pro-access-intro {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-top: 8px;
}

/* Solo margine e peso. Il selettore (0,3,1) batte .page-graphic .content-large p (0,2,1), che
   azzera il peso a 400; corpo e interlinea restano quelli della regola generica, 22/33 su desktop e
   19/29 dalla sua versione mobile (0,3,2), che qui non e' in conflitto perche' non tocca le stesse
   proprieta'. */
.page-graphic .content-large p.pro-access-lead {
    margin: 22px 0 0;
    font-weight: 700;
}

.pro-access-steps {
    display: grid;
    /* minmax(0, ...) e non 1fr: 1fr non scende sotto il min-content, e i due bottoni affiancati con le
       etichette lunghe (DE "Registrieren", FR "Se connecter") allargavano la colonna oltre lo schermo. */
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: stretch;
    margin-top: 28px;
    text-align: left;
}

.pro-access-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 28px;
    border: 1px solid var(--vn-uranian-blue);
    border-radius: 20px;
    background-color: white;
}

.pro-access-step-current {
    border: 2px solid var(--vn-yale-blue);
}

.pro-access-step-next {
    opacity: .9;
}

.pro-access-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pro-access-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--vn-yale-very-light-blue);
    color: var(--vn-yale-blue);
    font-size: 16px;
    font-weight: 700;
}

.pro-access-step-current .pro-access-step-num {
    background-color: var(--vn-yale-blue);
    color: white;
}

.pro-access-step-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--vn-yale-blue);
}

.page-graphic .pro-access-steps .pro-access-step p.pro-access-step-text {
    flex: 1;
    margin: 0;
    font-size: 17px;
    line-height: 25px;
}

.pro-access-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Affiancati finche' ciascuno ha almeno 120px e l'etichetta ci sta su una riga; sotto, uno per riga
   invece di sbordare dalla card. Senza nowrap le etichette di due parole (FR "Se connecter", NL
   "Account aanmaken") andavano a capo dentro il bottone invece di mandare a capo il bottone. */
.pro-access-step-actions a {
    flex: 1 1 120px;
    white-space: nowrap;
}

.pro-access-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vn-yale-light-blue);
    font-size: 30px;
    font-weight: 700;
}

.pro-access-step-free {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vn-yale-blue);
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .pro-access-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .pro-access-arrow {
        height: 40px;
        transform: rotate(90deg);
    }

    .pro-access-step {
        padding: 20px;
    }
}