/**
 * Modal universale form personalizzazione (task 3.FORM).
 *
 * Stili scopati al modal `#dmt-personalizzazione-modal` per evitare
 * collisioni con altri form del tema. Eredita la palette / tipografia
 * globali (vedi style.css), aggiunge solo le regole specifiche.
 */

/* ==========================================================================
   Container modal + overlay
   ========================================================================== */

/* Modal — transizione premium open/close.
 *
 * Strategia: il modal è SEMPRE `display: block` quando il JS l'ha attivato
 * (il toggle `.is-open` non agisce più su `display`, ma su `opacity +
 * pointer-events + transform`). Questo permette di animare entrata/uscita.
 *
 * NOTA tecnica: NON uso `visibility` perché passare visibility:hidden ↔
 * visible mette l'elemento dentro/fuori dal paint tree, e i browser spesso
 * skippano la transizione del container in quel cambio di stato. Affidando
 * l'hiding a `opacity: 0` + `pointer-events: none`, la transizione resta
 * fluida. L'a11y è coperta dall'attributo `aria-hidden` (toggled dal JS).
 *
 * `[hidden]` resta fallback no-JS / pre-hydration: nasconde tutto a forza
 * con `display: none !important` (quando il JS rimuove l'attributo,
 * subentra la logica di transizione).
 */
.dmt-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    opacity: 0;
    pointer-events: none;
    /* Transizione di chiusura: più rapida (.35s) della apertura (.4s).
       Pattern Material/Apple: dismiss veloce, presentation più lenta. */
    transition: opacity .35s ease-in;
}

.dmt-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    /* Apertura: fade-in lento (.4s ease-out) per eleganza. */
    transition: opacity .4s ease-out;
}

/* Fallback: se l'attributo [hidden] è presente (pre-JS / no-JS), nascondi
   completamente. Quando il JS rimuove [hidden] al primo open, la logica
   .is-open subentra. Il JS NON deve ri-applicare [hidden] alla chiusura
   (altrimenti il `display: none !important` bypassa la transizione). */
.dmt-modal[hidden] {
    display: none !important;
}

.dmt-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 2, 5, .6);
    /* Backdrop blur — su browser che lo supportano (~95% del traffico nel 2026)
       dà un effetto glass premium senza fallback rotto altrove. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Wrapper scrollabile: quando il container cresce oltre il viewport,
       è l'overlay (non il container) a fornire lo scroll. Pattern più naturale
       di "scroll dentro la card" — il modal scrolla come se fosse una pagina. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dmt-modal__container {
    position: relative;
    max-width: 56rem;
    width: calc(100% - 3.2rem);
    margin: 5vh auto;
    background: #fff;
    padding: 3.2rem 2.4rem;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 2, 5, .25);
    /* Stato closed: container shifted in basso + shrinked.
       Stato open (.is-open): in posizione + scale piena.
       Easing expo-out (.19,1,.22,1) per coerenza con le card.
       Durata: .5s open / .35s close (matched ai timings dell'overlay sopra). */
    transform: translateY(2rem) scale(.96);
    transition: transform .35s cubic-bezier(.4, 0, .6, 1);
    will-change: transform;
}

.dmt-modal.is-open .dmt-modal__container {
    transform: translateY(0) scale(1);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}

.dmt-modal__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 3.6rem;
    height: 3.6rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 2.8rem;
    line-height: 1;
    color: #1B1F24;
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dmt-modal__close:hover,
.dmt-modal__close:focus {
    color: #000205;
    outline: none;
}

.dmt-modal__close:focus-visible {
    box-shadow: 0 0 0 2px #000205;
}

/* ==========================================================================
   Title + intro
   ========================================================================== */

.dmt-modal__title {
    font-family: var(--ff-heading);
    font-size: 2.4rem;
    font-weight: 600;
    color: #000205;
    line-height: 1.2;
    margin: 2.4rem 0;
    padding-right: 4rem;
}

.dmt-modal__intro {
    font-family: var(--ff-default);
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    margin: 0 0 2.4rem;
}

.dmt-modal__intro:empty {
    display: none;
}

/* Tag tipologia — eyebrow squadrato sotto il title, sopra l'intro.
   Pattern editorial coerente col modal (border-radius: 0). Hidden via
   :empty quando il tipo è `nodo` (JS popola con stringa vuota). */
.dmt-modal__tipo-label {
    display: inline-block;
    padding: .5rem 1rem;
    margin: 0 0 1.6rem;
    background: #EBC9A4; /* var(--cream-deep) della pagina /personalizzazione, usato esplicito qui */
    color: #1B1F24;
    font-family: var(--ff-default);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 0;
}

.dmt-modal__tipo-label:empty {
    display: none;
}

/* ==========================================================================
   Form rows
   ========================================================================== */

.dmt-modal__form {
    margin: 0;
}

.dmt-form-row {
    margin-bottom: 1.6rem;
    border: none;
    padding: 0;
    min-width: 0;
}

.dmt-form-row > label,
.dmt-form-row > legend,
.dmt-form-label {
    display: block;
    font-family: var(--ff-default);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1B1F24;
    margin-bottom: .6rem;
    padding: 0;
}

.dmt-form-row input[type="number"],
.dmt-form-row input[type="email"],
.dmt-form-row input[type="text"],
.dmt-form-row textarea {
    width: 100%;
    padding: 1.2rem;
    font-family: var(--ff-default);
    font-size: 1.8rem;
    color: #1B1F24;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color .2s;
    font-weight:500
}

.dmt-form-row input[type="number"]:focus,
.dmt-form-row input[type="email"]:focus,
.dmt-form-row input[type="text"]:focus,
.dmt-form-row textarea:focus {
    outline: none;
    border-color: #000205;
}

.dmt-form-row textarea {
    resize: vertical;
    min-height: 9rem;
}

.dmt-form-row input[aria-invalid="true"],
.dmt-form-row textarea[aria-invalid="true"] {
    border-color: #b3261e;
}

.dmt-form-error {
    display: block;
    font-family: var(--ff-default);
    font-size: 1.3rem;
    font-weight: 500;
    color: #b3261e;
    margin-top: .4rem;
}

/* Readonly modello */
.dmt-form-row--readonly .dmt-form-readonly {
    display: block;
    font-family: var(--ff-default);
    font-size: 1.7rem;
    font-weight: 500;
    color: #1B1F24;
    padding: .4rem 0;
}

/* ==========================================================================
   Canale (radio) — WhatsApp / Email
   ========================================================================== */

.dmt-form-canale {
    display: block;
}

.dmt-form-canale .dmt-form-radio {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-right: 2rem;
    font-family: var(--ff-default);
    font-size: 1.6rem;
    font-weight: 500;
    color: #1B1F24;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.dmt-form-canale .dmt-form-radio input[type="radio"] {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    accent-color: #000205;
    cursor: pointer;
}

/* ==========================================================================
   Privacy checkbox
   ========================================================================== */

.dmt-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    font-family: var(--ff-default);
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.dmt-form-checkbox input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    margin: .2rem 0 0;
    accent-color: #000205;
    flex-shrink: 0;
    cursor: pointer;
}

.dmt-form-checkbox a {
    color: #1B1F24;
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.dmt-form-checkbox a:hover {
    color: #000205;
}

/* ==========================================================================
   Honeypot — off-screen
   ========================================================================== */

.dmt-honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* ==========================================================================
   Actions row + submit button
   ========================================================================== */

.dmt-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: flex-end;
    margin-top: 2.4rem;
}

.dmt-modal__form .button {
    min-width: 0;
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
    cursor: pointer;
}

#dmt-form-submit {
    position: relative;
}

#dmt-form-submit[disabled],
#dmt-form-submit.is-loading {
    opacity: .8;
    cursor: progress;
}

.dmt-form-submit__spinner {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: .6rem;
    border: 2px solid #F9E5CF;
    border-top-color: transparent;
    border-radius: 50%;
    animation: dmt-spinner-rotate .8s linear infinite;
    vertical-align: middle;
}

.dmt-form-submit__spinner[hidden] {
    display: none;
}

@keyframes dmt-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Feedback (success / error)
   ========================================================================== */

.dmt-form-feedback {
    padding: 1.2rem;
    margin-top: 1.6rem;
    border-left: 3px solid;
    font-family: var(--ff-default);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
}

.dmt-form-feedback[hidden] {
    display: none;
}

.dmt-form-feedback.is-success {
    border-color: #2e7d32;
    background: #e8f5e9;
    color: #2e7d32;
}

.dmt-form-feedback.is-error {
    border-color: #b3261e;
    background: #fdeceb;
    color: #b3261e;
}

.dmt-form-feedback.is-info {
    border-color: #0b5394;
    background: #e3f2fd;
    color: #0b5394;
}

/* ==========================================================================
   Body lock when modal is open
   ========================================================================== */

body.dmt-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .dmt-modal__container {
        width: calc(100% - 1.6rem);
        margin: 2.5vh auto;
        padding: 2.4rem 1.6rem;
    }

    .dmt-modal__title {
        font-size: 2.2rem;
    }

    .dmt-modal__intro {
        margin-bottom: 2rem;
    }

    .dmt-form-actions {
        gap: .8rem;
    }

    .dmt-modal__form .button {
        padding: 1.1rem 1.6rem;
    }
}

@media (min-width: 768px) {
    .dmt-modal__container {
        padding: 4rem 3.2rem;
    }

    .dmt-modal__title {
        font-size: 3.2rem;
    }
}

/* ==========================================================================
   Card prodotto in cima al modal (task 3.FORM.b)
   Mostrata per tipi `incisione` / `colore_resina` / `sfondo_colorato`,
   nascosta per `nodo` (no modello specifico).
   ========================================================================== */

.dmt-modal__product-card {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem;
    margin-bottom: 2.4rem;
    background: #f1f2ec;
    border: 1px solid #e5e4df;
}

.dmt-modal__product-card[hidden] {
    display: none;
}

.dmt-modal__product-card-thumb {
    flex-shrink: 0;
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    border-radius: .2rem;
    background: #e8e6dd;
}

.dmt-modal__product-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dmt-modal__product-card.is-no-image .dmt-modal__product-card-thumb {
    /* Placeholder neutro: il thumb resta visibile come quadrato beige
       coerente col background, niente <img> rotta. */
    background: #e8e6dd;
}

.dmt-modal__product-card-info {
    flex: 1;
    min-width: 0; /* permette truncate del nome se troppo lungo */
}

.dmt-modal__product-card-name {
    font-family: var(--ff-default);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1B1F24;
    margin: 0 0 .4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dmt-modal__product-card-price {
    font-family: var(--ff-default);
    font-size: 1.5rem;
    line-height: 1.3;
    color: #555;
    margin: 0;
}

.dmt-modal__product-card-price strong {
    font-size: 1.8rem;
    font-weight: 600;
    color: #000205;
    margin-right: .6rem;
}

.dmt-modal__product-card-formula {
    font-size: 1.8rem;
    font-weight: 500;
    color: #000;
}

.dmt-modal__product-card-shipping {
    font-family: var(--ff-default);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    color: #3d3d3d;
    margin: 1rem 0 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    .dmt-modal__product-card {
        gap: 1.2rem;
        padding: 1.2rem;
    }

    .dmt-modal__product-card-thumb {
        width: 6.4rem;
        height: 6.4rem;
    }


    .dmt-modal__product-card-formula {
        display: block;
        margin-top: .2rem;
    }

    .dmt-modal__product-card-shipping {
        font-size: 1.5rem;
        margin-top: .8rem;
    }
}

/* Riduce le animazioni se richiesto dal sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .dmt-form-submit__spinner {
        animation: none;
    }

    .dmt-modal__close {
        transition: none;
    }

    /* Modal open/close: nessuna transizione, snap instantaneo. */
    .dmt-modal,
    .dmt-modal.is-open,
    .dmt-modal__container,
    .dmt-modal.is-open .dmt-modal__container {
        transition: none;
    }
    .dmt-modal__container {
        transform: none;
    }
}