/* ==========================================================================
   CM Blast - adattamenti per tablet e telefoni
   Caricato dopo style.css (vedi header.php).
   ========================================================================== */

/* Contenuti e immagini non escono mai dallo schermo */
.site-content img,
main img,
.wizard-card img {
    max-width: 100%;
    height: auto;
}
iframe,
video {
    max-width: 100%;
}
.site-content table,
main table {
    max-width: 100%;
}

/* ---- Elenco annunci dell'utente (Le mie inserzioni, Preferiti) ---------- */
.my-ad {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 14px;
    margin: 0 0 18px;
}
.my-ad-photo {
    flex: 0 0 300px;
    max-width: 300px;
    display: block;
}
.my-ad-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
    background: #f3f3f1;
}
.my-ad-info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.my-ad-actions {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.my-ad-actions .btn-primary {
    display: block;
    margin: 0;
    text-align: center;
}
.my-ad-status {
    font-size: 13px;
    font-weight: 700;
    color: #c99400;
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 991px) {
    .my-ad-photo { flex-basis: 240px; max-width: 240px; }
    .my-ad-actions { flex-basis: 170px; }
}

/* ---- Telefoni ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Nessuno zoom automatico di iPhone/Android quando si tocca un campo */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Pulsanti e link piu' facili da toccare */
    .btn,
    .btn-primary,
    button,
    input[type="submit"] {
        min-height: 44px;
    }
    footer a,
    .footer-widget a {
        display: inline-block;
        padding: 6px 0;
    }

    /* Schede annuncio in colonna */
    .my-ad {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }
    .my-ad-photo {
        flex: none;
        max-width: none;
        width: 100%;
    }
    .my-ad-info { text-align: left; }
    .my-ad-actions {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .my-ad-actions .btn-primary { flex: 1 1 130px; }
    .my-ad-status { flex: 1 1 100%; }

    /* Selettore lingua: compatto in basso a sinistra, non copre l'intestazione */
    .lang-widget {
        top: auto !important;
        bottom: 14px !important;
        left: 12px !important;
        right: auto !important;
        min-width: 0 !important;
    }
    .lang-widget #select-dropdown {
        top: auto !important;
        bottom: 100% !important;
        left: 0 !important;
        right: auto !important;
    }
}

/* ---- iPhone / iPad (Safari) e tablet --------------------------------------- */
/* Safari su iOS non supporta lo sfondo "fixed": le fasce con immagine appaiono
   ingrandite o sfocate. Su tablet e telefoni lo sfondo scorre normalmente. */
@media (max-width: 1199px), (hover: none) {
    html .bg-parallax {
        background-attachment: scroll !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* ---- Barra in alto su telefono e tablet ------------------------------------
   "Inserisci annuncio" non compare (si trova nella pagina iniziale e nel menu
   dell'account); Login/Logout resta attaccato al bordo destro dello schermo. */
@media (max-width: 1199px) {
    .header .top-header {
        padding: 8px 0;
    }
    .header .top-header .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .header .top-header .top-right {
        float: none;
        width: 100%;
        text-align: right;
    }
    .header .top-header ul.info-header {
        margin: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .header .top-header .hdr-sell {
        display: none !important;
    }
    /* Elementi di servizio senza contenuto visibile (contenitore del selettore lingua) */
    .header .top-header ul.info-header li:not(.hdr-login) {
        padding: 0;
        margin: 0;
        width: 0;
        overflow: visible;
    }
    .header .top-header ul.info-header li.hdr-login {
        margin: 0;
        padding: 0 14px 0 20px;
    }
    .header .top-header ul.info-header li.hdr-login a {
        padding: 8px 0;
        display: inline-block;
    }

    /* Selettore lingua fuori dalla barra: piccolo, in basso a sinistra */
    .lang-widget {
        top: auto !important;
        bottom: 14px !important;
        left: 12px !important;
        right: auto !important;
        min-width: 0 !important;
    }
    .lang-widget #select-dropdown {
        top: auto !important;
        bottom: 100% !important;
        left: 0 !important;
        right: auto !important;
    }
}

/* ---- Barra in alto SOLO su telefono: "Inserisci annuncio" a sinistra, Login/Logout a destra ---- */
@media (max-width: 767px) {
    .header .top-header ul.info-header {
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .header .top-header ul.info-header li.hdr-sell {
        display: block !important;
        order: -1;
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0 0 0 12px;
    }
    .header .top-header ul.info-header li.hdr-sell a.btn {
        display: inline-block;
        padding: 8px 14px !important;
        min-height: 0;
        white-space: nowrap;
    }
    .header .top-header ul.info-header li.hdr-login {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 12px 0 16px;
    }
}

@media (max-width: 767px) {
    /* Il testo di Login/Logout si accorcia con "…" invece di sparire */
    .header .top-header ul.info-header li.hdr-login a {
        display: inline;
        padding: 0;
    }
}

@media (max-width: 767px) {
    /* Su telefono si mostra solo "Logout", senza l'indirizzo email */
    .header .top-header .hdr-email {
        display: none;
    }
}

@media (max-width: 767px) {
    /* L'icona utente sta vicino alla scritta Login/Logout */
    .header .top-header ul.info-header li.hdr-login i {
        position: static;
        margin-right: 6px;
        vertical-align: middle;
    }
    .header .top-header ul.info-header li.hdr-login {
        padding-left: 8px;
    }
}