/* Assistenza tecnica e riparazione (/assistenza-tecnica-riparazione/).
   Lo carica inc/assistenza.php, solo sulla pagina con la classe
   montanaro-assistenza: il caricatore generale di functions.php lo salta.
   Colori e carattere del sito, come le news: rosso #C30B1B, verde #00380D,
   testo #3B3B3B, crema #FAF9F3, Roboto. Le regole di ponte.css pensate per
   le pagine di Elementor qui non valgono (:not(.montanaro-assistenza *)). */

.montanaro-assistenza {
    --ass-rosso: #C30B1B;
    --ass-verde: #00380D;
    --ass-verde-chiaro: #EDF3EE;
    --ass-testo: #3B3B3B;
    --ass-tenue: #6B6B6B;
    --ass-bordo: #E4E0D4;
    --ass-fondo: #FAF9F3;
    color: var(--ass-testo);
    font-family: "Roboto", sans-serif;
}

/* Come nelle news: i contenitori di Bricks non hanno margine laterale.
   Larghezza: 1100 px al massimo, mai piu' dello schermo (la regola di
   ripiego di ponte.css li lascerebbe a 767 px anche sul telefono). */
#brx-content .montanaro-assistenza > .brxe-container {
    width: 100%;
    max-width: 1100px;
    padding-left: 20px;
    padding-right: 20px;
}

.montanaro-assistenza h1,
.montanaro-assistenza h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ass-testo);
}
.montanaro-assistenza h2 {
    font-size: clamp(26px, 3.4vw, 38px);
}
.montanaro-assistenza p {
    margin: 0;
}
.montanaro-assistenza .montanaro-assistenza-intro {
    margin: 0 0 24px;
    max-width: 64ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ass-tenue);
}
.montanaro-assistenza-intro a {
    color: var(--ass-rosso);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.montanaro-assistenza-intro a:hover,
.montanaro-assistenza-intro a:focus-visible {
    text-decoration: underline;
}

/* ------------------------------------------------------------- la testata */

.montanaro-assistenza-testata {
    padding: 56px 0 64px;
    background: var(--ass-fondo);
}

#brx-content .montanaro-assistenza-pulsante {
    margin: 0 0 36px;
    padding: 12px 26px;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
    background: var(--ass-rosso);
    border-radius: 3px;
    transition: background-color .2s;
}
#brx-content .montanaro-assistenza-pulsante:hover,
#brx-content .montanaro-assistenza-pulsante:focus-visible {
    background: #9E0916;
}

/* L'immagine «Assistenza e ricambi» e la galleria, affiancate come nella
   finestra della home (45 e 55 per cento); sotto i 992 px una sopra l'altra. */
.montanaro-assistenza-vetrina {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 36px;
    align-items: center;
    width: 100%;
}
.montanaro-assistenza-locandina {
    margin: 0;
}
#brx-content .montanaro-assistenza-locandina img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .montanaro-assistenza-vetrina {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* La galleria: miniature 3:2 (le ritaglia Bricks), velo scuro al passaggio
   come nella finestra, foto che entrano una alla volta (js/assistenza.js). */
.montanaro-assistenza-galleria figure {
    margin: 0;
    overflow: hidden;
}
.montanaro-assistenza-galleria a {
    position: relative;
    display: block;
}
.montanaro-assistenza-galleria a::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color .8s;
    pointer-events: none;
}
.montanaro-assistenza-galleria a:hover::after,
.montanaro-assistenza-galleria a:focus-visible::after {
    background-color: rgba(0, 0, 0, .5);
}
.montanaro-dilaziona .montanaro-assistenza-galleria img {
    opacity: 0;
    transform: scale(.5);
    transform-origin: center top;
    transition: opacity .8s, transform .8s;
}
.montanaro-dilaziona .montanaro-assistenza-galleria img.is-entrata {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------- il lavaggio ad ultrasuoni */

.montanaro-assistenza-ultrasuoni {
    padding: 64px 0 72px;
    background: #fff;
}
.montanaro-assistenza .montanaro-assistenza-occhiello {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ass-tenue);
}
.montanaro-assistenza .montanaro-assistenza-sottotitolo {
    margin: 0 0 28px;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ass-verde);
}

.montanaro-assistenza-foto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}
.montanaro-assistenza-foto .brxe-image {
    margin: 0;
}
#brx-content .montanaro-assistenza-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.montanaro-assistenza .montanaro-assistenza-testo {
    margin: 28px 0;
    max-width: 72ch;
    font-size: 17px;
    line-height: 1.65;
}

/* Il trattamento a caldo: riquadro con un'icona per lato. */
.montanaro-assistenza-caldo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    width: 100%;
    padding: 22px 26px;
    background: var(--ass-verde-chiaro);
    border-radius: 8px;
}
.montanaro-assistenza-caldo__icona {
    flex: 0 0 auto;
    font-size: 40px;
    color: var(--ass-verde);
}
.montanaro-assistenza-caldo__testo {
    flex: 1 1 auto;
}
.montanaro-assistenza-caldo h3 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ass-verde);
}
.montanaro-assistenza-caldo p {
    font-size: 16px;
    line-height: 1.55;
}
@media (max-width: 600px) {
    .montanaro-assistenza-caldo {
        padding: 18px;
        gap: 14px;
    }
    .montanaro-assistenza-caldo__icona {
        font-size: 30px;
    }
    .montanaro-assistenza-caldo__icona:last-child {
        display: none;
    }
}

/* I titoletti con il filo che arriva fino al bordo, come nel volantino. */
.montanaro-assistenza .montanaro-assistenza-titoletto {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 52px 0 22px;
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ass-testo);
}
.montanaro-assistenza-titoletto::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ass-bordo);
}

/* I quattro vantaggi: quattro per riga, due sotto i 992 px, uno sotto i 479. */
.montanaro-assistenza-vantaggi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}
/* Bricks da' ai blocchi align-self: flex-start: qui tutte alte uguali. */
#brx-content .montanaro-assistenza-vantaggio,
#brx-content .montanaro-assistenza-confronto__voce {
    align-self: stretch;
}
.montanaro-assistenza-vantaggio {
    padding: 22px 20px;
    background: var(--ass-fondo);
    border: 1px solid var(--ass-bordo);
    border-radius: 8px;
}
#brx-content .montanaro-assistenza-vantaggio__icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 22px;
    color: #fff;
    background: var(--ass-verde);
    border-radius: 50%;
}
.montanaro-assistenza-vantaggio h4 {
    margin: 14px 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ass-testo);
}
.montanaro-assistenza-vantaggio p {
    font-size: 15px;
    line-height: 1.55;
}
@media (max-width: 991px) {
    .montanaro-assistenza-vantaggi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 478px) {
    .montanaro-assistenza-vantaggi {
        grid-template-columns: 1fr;
    }
}

/* Il confronto: pulizia manuale » ultrasuoni; sotto i 768 px uno sopra
   l'altro, con la freccia che punta in basso. */
.montanaro-assistenza-confronto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
}
.montanaro-assistenza-confronto__voce {
    padding: 20px 24px;
    background: var(--ass-fondo);
    border: 1px solid var(--ass-bordo);
    border-radius: 8px;
}
.montanaro-assistenza-confronto__voce--dopo {
    background: var(--ass-verde-chiaro);
    border-color: #CFE0D2;
}
.montanaro-assistenza-confronto__testa {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
#brx-content .montanaro-assistenza-confronto__icona {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 17px;
    color: #fff;
    background: var(--ass-tenue);
    border-radius: 50%;
}
#brx-content .montanaro-assistenza-confronto__voce--dopo .montanaro-assistenza-confronto__icona {
    background: var(--ass-verde);
}
.montanaro-assistenza-confronto h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.montanaro-assistenza-confronto ul {
    margin: 14px 0 0;
    padding-left: 20px;
}
.montanaro-assistenza-confronto li {
    font-size: 16px;
    line-height: 1.6;
}
.montanaro-assistenza-confronto__freccia {
    align-self: center;
    font-size: 30px;
    color: #C9C4B5;
}
@media (max-width: 767px) {
    .montanaro-assistenza-confronto {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .montanaro-assistenza-confronto__freccia {
        justify-self: center;
        transform: rotate(90deg);
    }
}

/* --------------------------------------------------------------- il modulo */

.montanaro-assistenza-richiesta {
    padding: 56px 0 72px;
    background: var(--ass-fondo);
}
.montanaro-assistenza-richiesta .brxe-shortcode {
    width: 100%;
    max-width: 760px;
}

/* I campi di testo li disegna gia' ponte.css (.montanaro-modulo, come il
   modulo della home); etichette e coppie affiancate come nel modulo SIMEI. */
.montanaro-assistenza-modulo {
    padding: 26px 26px 18px;
    background: #fff;
    border: 1px solid var(--ass-bordo);
    border-radius: 8px;
}
.montanaro-assistenza-modulo__gruppo {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}
.montanaro-assistenza-modulo__gruppo legend {
    width: 100%;
    margin: 0 0 14px;
    padding: 0 0 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ass-verde);
    border-bottom: 1px solid var(--ass-bordo);
}
.montanaro-assistenza-modulo label,
.montanaro-assistenza-modulo__etichetta {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ass-testo);
}
.montanaro-assistenza-modulo label .wpcf7-form-control-wrap {
    margin-top: 6px;
}
.montanaro-assistenza .montanaro-assistenza-modulo p {
    margin: 0 0 14px;
}
.montanaro-assistenza-modulo .montanaro-appuntamento__coppia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}
.montanaro-assistenza-modulo select {
    width: 100%;
    height: 40px;
    padding: 5px 12px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--ass-testo);
    background-color: #fff;
    border: 1px solid #69727d;
    border-radius: 3px;
}
.montanaro-assistenza-modulo textarea {
    height: 120px;
}
.montanaro-assistenza-modulo .montanaro-obbligatorio {
    color: var(--ass-rosso);
}
.montanaro-assistenza-modulo .montanaro-facoltativo,
.montanaro-assistenza-modulo .montanaro-aiuto {
    font-weight: 300;
    color: var(--ass-tenue);
}
.montanaro-assistenza-modulo .montanaro-aiuto {
    display: block;
    font-size: 14px;
}

/* L'urgenza: tre scelte in riga, che vanno a capo se non ci stanno. */
.montanaro-assistenza-modulo__scelta .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 8px;
}
.montanaro-assistenza-modulo__scelta .wpcf7-list-item {
    margin: 0;
}
.montanaro-assistenza-modulo__scelta label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    cursor: pointer;
}
.montanaro-assistenza-modulo input[type="radio"],
.montanaro-assistenza-modulo input[type="checkbox"] {
    accent-color: var(--ass-rosso);
}

/* Le foto: tre campi uno sotto l'altro. */
.montanaro-assistenza-modulo__foto .wpcf7-form-control-wrap {
    margin-top: 8px;
}
.montanaro-assistenza-modulo input[type="file"] {
    width: 100%;
    max-width: 100%;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--ass-testo);
}

.montanaro-assistenza-modulo .montanaro-consenso,
.montanaro-assistenza-modulo .montanaro-consenso label {
    font-weight: 300;
}

@media (max-width: 600px) {
    .montanaro-assistenza-modulo .montanaro-appuntamento__coppia {
        grid-template-columns: 1fr;
    }
    .montanaro-assistenza-modulo {
        padding: 18px 16px 12px;
    }
}

/* Finche' non si spunta il consenso Contact Form 7 disattiva il pulsante:
   che si veda, invece di un clic che non fa niente. */
.montanaro-assistenza-modulo input[type="submit"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}