.ddk-area-box {
    max-width: 760px;
    margin: 0 auto 32px;
    padding: 22px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #fff;
    color: #1c2230;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ddk-area-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ddk-area-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
}

.ddk-area-form input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
}

.ddk-area-form button {
    justify-self: start;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: #1c2230;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ddk-area-message {
    padding: 10px 12px;
    border-radius: 6px;
    background: #edf7ed;
    color: #1f5c2e;
}

.ddk-area-message.is-error {
    background: #fff1f0;
    color: #9f1c1c;
}

.ddk-area-message.is-warning {
    background: #fff8e5;
    color: #7a4d00;
}

.ddk-area-profile {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 16px;
    max-width: 520px;
}

.ddk-area-profile dt {
    color: #6b7280;
    font-weight: 700;
}

.ddk-area-profile dd {
    margin: 0;
}

.ddk-area-documents {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e4e7ec;
}

.ddk-area-documents h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.ddk-area-download {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    border-radius: 999px;
    padding: 0 18px;
    background: #1c2230;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.ddk-area-download:hover {
    color: #fff;
    background: #30384a;
}

.ddk-area-doc-group {
    margin-top: 16px;
}

.ddk-area-doc-group h4 {
    margin: 0 0 8px;
    font-size: 15px;
}

.ddk-area-doc-list {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ddk-area-doc-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
}

.ddk-area-doc-list a {
    flex-shrink: 0;
    font-weight: 700;
    text-decoration: none;
}

.ddk-area-account {
    max-width: 1000px;
}

.ddk-area-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.ddk-area-blocco h3 {
    margin: 0 0 10px;
    font-size: 17px;
}

.ddk-area-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #6b7280;
}

/* Pulsante "Salva i miei dati": alto come un campo, allineato in basso alla
   riga (non un pill che riempie tutta la cella). */
.ddk-area-edit button {
    justify-self: start;
    align-self: end;
    height: 40px;
    min-height: 40px;
    border-radius: 8px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
}

/* Documenti generali e certificati: categorie impilate, voci che fluiscono
   su piu' colonne (niente piu' una colonna per categoria). */
.ddk-area-cat {
    margin-top: 16px;
}

.ddk-area-cat h4 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ddk-primario, #8a1c2b);
}

.ddk-area-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Ogni documento e' una card intera cliccabile (nessun link "Apri"). */
.ddk-area-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 16px;
    border: 1px solid #e4e7ec;
    border-left: 3px solid #c9ced6;
    border-radius: 8px;
    background: #fff;
    color: #1c2230;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.ddk-area-card:hover {
    border-color: #1c2230;
    border-left-color: var(--ddk-primario, #8a1c2b);
    background: #fbfbfc;
    box-shadow: 0 3px 10px rgba(16, 24, 40, 0.08);
    color: #1c2230;
}

.ddk-area-card-t {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
}

.ddk-area-card-data {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 12px;
    color: #6b7280;
}

.ddk-area-card-apri {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ddk-primario, #8a1c2b);
}

/* --- Visual PDF Cards (Frontend Area Riservata - Max 3 Colonne) --- */

.ddk-area-pdf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 14px;
}

.ddk-area-pdf-card {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ddk-area-pdf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.1);
    border-color: #8a1c2b;
}

.ddk-area-pdf-thumb {
    height: 220px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.ddk-area-pdf-thumb canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ddk-area-pdf-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.ddk-area-pdf-title {
    font-size: 13px;
    font-weight: 600;
    color: #101828;
    line-height: 1.35;
    margin-bottom: 8px;
    word-break: break-word;
}

.ddk-area-pdf-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

a.ddk-area-pdf-btn-prev,
a.ddk-area-pdf-btn-prev:visited,
a.ddk-area-pdf-btn-prev:link {
    display: block;
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    background: #101828 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

a.ddk-area-pdf-btn-prev:hover,
a.ddk-area-pdf-btn-prev:focus,
a.ddk-area-pdf-btn-prev:active {
    background: var(--ddk-primario, #8a1c2b) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(138, 28, 43, 0.25) !important;
}

.ddk-area-pdf-btn-dl {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    background: #f2f4f7;
    color: #344054;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ddk-area-pdf-btn-dl:hover {
    background: #e4e7ec;
    color: #101828;
}

/* Anni come pill con il totale documenti dell'anno. */
.ddk-area-tuoi {
    margin-top: 26px;
}

.ddk-area-anno-eco {
    color: #6b7280;
    font-weight: 400;
}

.ddk-area-anni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.ddk-area-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d8dde5;
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: #1c2230;
}

.ddk-area-pill:hover {
    border-color: #1c2230;
}

.ddk-area-pill.is-attiva {
    background: #1c2230;
    border-color: #1c2230;
    color: #fff;
}

.ddk-area-pill-conta {
    min-width: 20px;
    text-align: center;
    background: #e4e7ec;
    color: #1c2230;
    border-radius: 999px;
    font-size: 12px;
    padding: 0 7px;
}

.ddk-area-pill.is-attiva .ddk-area-pill-conta {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ddk-area-anno-bar {
    margin: 6px 0 14px;
}

.ddk-area-anno-bar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.ddk-area-anno-bar select {
    min-height: 38px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    padding: 6px 10px;
    font: inherit;
}

.ddk-area-accordion {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    overflow: hidden;
}

.ddk-acc-item + .ddk-acc-item {
    border-top: 1px solid #e4e7ec;
}

.ddk-acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #f6f7f9;
    border: 0;
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
}

.ddk-acc-head:hover {
    background: #eef0f3;
}

.ddk-acc-item.is-aperta .ddk-acc-head {
    background: #1c2230;
    color: #fff;
}

.ddk-acc-titolo {
    flex: 1;
    font-weight: 700;
    font-size: 15px;
}

.ddk-acc-conta {
    background: #e4e7ec;
    color: #1c2230;
    font-size: 13px;
    font-weight: 700;
    padding: 1px 9px;
    border-radius: 20px;
}

.ddk-acc-item.is-aperta .ddk-acc-conta {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ddk-acc-freccia {
    color: #98a2b3;
    transition: transform 0.15s ease;
}

.ddk-acc-item.is-aperta .ddk-acc-freccia {
    transform: rotate(180deg);
    color: #fff;
}

.ddk-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.ddk-acc-item.is-aperta .ddk-acc-body {
    grid-template-rows: 1fr;
}

.ddk-acc-inner {
    overflow: hidden;
    min-height: 0;
}

.ddk-acc-inner .ddk-area-cards {
    padding: 14px 16px;
}

.ddk-area-vuoto-anno {
    color: #6b7280;
    font-style: italic;
    margin-top: 12px;
}

.ddk-area-contact {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e4e7ec;
}

.ddk-area-contact h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.ddk-area-contact-form {
    display: grid;
    gap: 12px;
    max-width: 520px;
}

.ddk-area-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
}

.ddk-area-contact-form select,
.ddk-area-contact-form textarea {
    width: 100%;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
}

.ddk-area-contact-form button {
    justify-self: start;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: #1c2230;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Rifinitura: piu' aria, gerarchia, leggibilita'.
   --------------------------------------------------------------------------- */

.ddk-area-account {
    max-width: 1040px;
    padding: 32px 34px;
    line-height: 1.5;
}

.ddk-area-account h2 {
    margin: 0 0 4px;
    font-size: 26px;
    line-height: 1.2;
}

.ddk-area-account .ddk-area-hello {
    margin: 0 0 26px;
    color: #6b7280;
    font-size: 15px;
}

/* Gerarchia dei titoli:
   h2  = titolo pagina
   h3 di sezione (Documenti e certificati, I tuoi documenti, Contatta DDK)
        = grandi, con filetto di separazione
   h3 dentro le card profilo = piu' piccoli
   h4  = etichette di categoria (maiuscolette grigie) */
.ddk-area-account h3 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #1c2230;
}

.ddk-area-blocco h3 {
    margin: 0 0 14px;
    font-size: 16px;
}

.ddk-area-documents h3,
.ddk-area-contact h3 {
    font-size: 20px;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef0f3;
}

.ddk-area-documents .ddk-area-tuoi {
    margin-top: 44px;
}

.ddk-area-account h4 {
    font-size: 12px;
    letter-spacing: 0.05em;
}

/* I due riquadri del profilo diventano card morbide, distanziate. */
.ddk-area-cols {
    gap: 22px;
    margin-bottom: 4px;
}

.ddk-area-blocco {
    background: #fbfcfd;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 22px 24px;
}

.ddk-area-profile {
    gap: 12px 18px;
    max-width: none;
}

.ddk-area-profile dt {
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #98a2b3;
}

.ddk-area-profile dd {
    font-weight: 600;
}

/* Sezioni principali ben separate. */
.ddk-area-documents {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid #eef0f3;
}

.ddk-area-contact {
    margin-top: 34px;
    padding-top: 28px;
}

.ddk-area-cat {
    margin-top: 24px;
}

.ddk-area-cards {
    gap: 14px;
}

/* Niente sottolineatura sui titoli delle card (il tema la forza sui link). */
.ddk-area-card,
.ddk-area-card:hover,
.ddk-area-card:focus,
.ddk-area-card .ddk-area-card-t {
    text-decoration: none !important;
}

.ddk-area-tuoi {
    margin-top: 36px;
}

@media (max-width: 640px) {
    .ddk-area-account {
        padding: 22px 20px;
    }

    .ddk-area-form {
        grid-template-columns: 1fr;
    }

    .ddk-area-cols {
        grid-template-columns: 1fr;
    }

    .ddk-area-profile {
        grid-template-columns: 1fr;
    }

    .ddk-area-doc-list li {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   IL RIQUADRO DI ACCESSO — la porta dell'area clienti
   Aggiunto nella 0.7.0.

   POGGIA SU ddk-base.css, NON LO RIFA'. Dalla 0.8.0 di ddk-front la cornice
   sta su tutte le pagine, quindi --ink, --g500, --g300, --font e --ease sono
   gia' pubblicate qui. Il valore dopo la virgola in ogni var() e' solo una
   rete: se un giorno questo shortcode finisse su una pagina senza la nostra
   cornice, il riquadro resta vestito invece di perdere colori e curve.

   IL COLORE ARRIVA DALLA CENTRALE: var(--ddk-primario), pubblicata su ogni
   pagina da wp-content/mu-plugins/ddk-colori.php. Qui dentro non si scrive
   nessun esadecimale di marchio — e' la condizione che rende possibile
   scegliere il colore alla fine (DECISIONI, 31/07).

   RTL: solo proprieta' logiche. L'unico translateX e' quello della freccia,
   ed e' specchiato a mano piu' sotto — le trasformazioni sono FISICHE e non
   si specchiano da sole. Trappola gia' pagata quattro volte il 31/07.
   ========================================================================== */

.ddk-accesso {
    --ddk-acc-bordo: var(--g300, #d0d5dd);
    max-inline-size: 460px;
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 4rem);
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--ink, #101820);
}

/* --- 1. Il pannello: il gesto frequente -------------------------------- */

.ddk-accesso__pannello {
    padding: clamp(1.6rem, 4vw, 2.4rem);
    border: 1px solid var(--ddk-acc-bordo);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ddk-accesso__tit {
    margin: 0 0 .4rem;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;
}

.ddk-accesso__lead {
    margin: 0 0 1.6rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--g500, #667085);
}

/* L'avviso di accesso fallito. Il bordo sta sul lato da cui si comincia a
   leggere: border-inline-start si specchia da solo in arabo e persiano. */
.ddk-accesso__avviso {
    margin: 0 0 1.2rem;
    padding: .7rem .9rem;
    border-inline-start: 3px solid var(--ddk-primario, #8a1c2b);
    border-radius: 6px;
    background: var(--ddk-primario-tenue, #f3e8ea);
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ink, #101820);
}

/* Variante di passaggio dal vecchio sito: stesso riquadro, con il link di
   recupero password in evidenza. Si spegne da Area Riservata > Impostazioni. */
.ddk-accesso__avviso--migrazione a {
    display: inline-block;
    margin-block-start: .35rem;
    font-weight: 600;
    color: var(--ddk-primario, #8a1c2b);
}

/* --- Il modulo di WordPress, vestito ----------------------------------- */
/* Le classi qui sotto (.login-username, .login-password, .login-remember,
   .login-submit) le stampa wp_login_form(): non sono nostre e non vanno
   rinominate. Si vestono e basta. */

.ddk-accesso #loginform p {
    margin: 0 0 1rem;
}

.ddk-accesso #loginform label {
    display: block;
    margin-block-end: .35rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.ddk-accesso #loginform input[type="text"],
.ddk-accesso #loginform input[type="password"] {
    inline-size: 100%;
    min-block-size: 46px;
    padding: .6rem .9rem;
    border: 1px solid var(--ddk-acc-bordo);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: inherit;
    /* La morbidezza sta qui: il campo non "scatta" a fuoco, ci arriva. */
    transition: border-color .45s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                box-shadow   .45s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.ddk-accesso #loginform input[type="text"]:focus,
.ddk-accesso #loginform input[type="password"]:focus {
    outline: none;
    border-color: var(--ddk-primario, #8a1c2b);
    box-shadow: 0 0 0 4px rgba(var(--ddk-primario-rgb, 138, 28, 43), .12);
}

/* "Ricordami": etichetta e casella sulla stessa riga, senza il grassetto
   degli altri campi — non e' un campo da compilare, e' una scelta. */
.ddk-accesso #loginform .login-remember label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 400;
    font-size: .88rem;
    color: var(--g500, #667085);
    cursor: pointer;
}

.ddk-accesso #loginform .login-remember input {
    margin: 0;
    accent-color: var(--ddk-primario, #8a1c2b);
}

.ddk-accesso #loginform .login-submit {
    margin-block-end: 0;
}

.ddk-accesso #loginform #wp-submit {
    inline-size: 100%;
    min-block-size: 48px;
    padding-inline: 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--ink, #101820);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    /* Stessa curva e stessa durata dei bottoni della home: il sito deve
       sembrare uno solo anche nel modo in cui reagisce al mouse. */
    transition: background .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                transform  .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                box-shadow .35s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.ddk-accesso #loginform #wp-submit:hover {
    background: var(--ddk-primario, #8a1c2b);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--ddk-primario-rgb, 138, 28, 43), .22);
}

.ddk-accesso #loginform #wp-submit:active {
    transform: translateY(0);
}

.ddk-accesso__scordata {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: .86rem;
}

.ddk-accesso__scordata a {
    color: var(--g500, #667085);
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: color .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                border-color .35s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.ddk-accesso__scordata a:hover {
    color: var(--ddk-primario, #8a1c2b);
    border-block-end-color: currentColor;
}

/* --- 2. L'invito: il gesto raro, indicato bene -------------------------- */

.ddk-accesso__invito {
    margin-block-start: 1.6rem;
    padding: clamp(1.3rem, 3.4vw, 1.8rem);
    border: 1px dashed var(--ddk-acc-bordo);
    border-radius: 14px;
    background: transparent;
    text-align: center;
}

.ddk-accesso__invito-tit {
    margin: 0 0 .45rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.ddk-accesso__invito-testo {
    margin: 0 0 1.2rem;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--g500, #667085);
}

.ddk-accesso__cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-block-size: 44px;
    padding-inline: 1.5rem;
    border: 1px solid var(--ddk-acc-bordo);
    border-radius: 999px;
    color: var(--ink, #101820);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                border-color .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                color .35s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                transform .35s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.ddk-accesso__cta:hover {
    border-color: var(--ink, #101820);
    background: var(--ink, #101820);
    color: #fff;
    transform: translateY(-2px);
}

/* ⚠️ translateX e' FISICO: in arabo e persiano la freccia deve puntare e
   scorrere dall'altra parte, altrimenti indica il verso sbagliato. Stessa
   regola che ddk-base.css applica a .arw. */
.ddk-accesso__arw {
    transition: transform .35s var(--ease, cubic-bezier(.16, 1, .3, 1));
}

.ddk-accesso__cta:hover .ddk-accesso__arw {
    transform: translateX(4px);
}

[dir="rtl"] .ddk-accesso__arw {
    transform: scaleX(-1);
}

[dir="rtl"] .ddk-accesso__cta:hover .ddk-accesso__arw {
    transform: scaleX(-1) translateX(4px);
}

/* Chi ha chiesto meno movimento non lo riceve. L'entrata dei due blocchi e'
   gia' coperta da ddk-base.css; qui si spengono le transizioni di questo
   riquadro, che sono nostre. */
@media (prefers-reduced-motion: reduce) {
    .ddk-accesso *,
    .ddk-accesso *::before,
    .ddk-accesso *::after {
        transition: none !important;
    }

    .ddk-accesso #loginform #wp-submit:hover,
    .ddk-accesso__cta:hover {
        transform: none;
    }
}

/* ==========================================================================
   IL MODULO DI RICHIESTA ACCESSO — rifatto nella 0.8.0

   Prima erano sei campi in un riquadro stretto. Ora sono quindici piu' il
   consenso, ricalcati sulle colonne dell'export di PrivateContent: se
   combaciano, il giorno dell'importazione i 46 clienti del sito vecchio
   passano di la' senza ricomporre le schede a mano.

   ⚠️ IL COLORE ARRIVA DALLA CENTRALE, non e' scritto qui.
   var(--ddk-primario) lo pubblica wp-content/mu-plugins/ddk-colori.php su
   ogni pagina, da una sola opzione nel database. Il valore dopo la virgola e'
   solo una rete se il mu-plugin mancasse. Vedi DECISIONI.md, 31/07.

   ⚠️ NESSUN translateX QUI DENTRO. E' fisico e in arabo non si specchia:
   trappola gia' pagata quattro volte sulla home. Le distanze usano proprieta'
   logiche (margin-inline, padding-inline), che si specchiano da sole.
   ========================================================================== */

.ddk-area-richiesta {
    max-width: 900px;
    padding: clamp(20px, 4vw, 38px);
}

/* La regola, in cima e detta una volta sola. Non e' un avviso: e' piu' spenta
   dei titoli di gruppo apposta, perche' si legge una volta e poi deve
   togliersi di mezzo. */
.ddk-area-form__regola {
    margin: 0 0 clamp(18px, 3vw, 26px);
    font-size: 13px;
    line-height: 1.45;
    color: #7b8494;
}

/* I TRE GRUPPI.
   Quindici caselle identiche in fila si leggono come un modulo lungo; le
   stesse divise in tre blocchi si leggono come tre cose brevi. Il ritmo lo
   fanno i titoli e lo spazio fra un blocco e l'altro, non il colore. */
.ddk-gruppo {
    margin: 0 0 clamp(22px, 4vw, 34px);
    padding: 0;
    border: 0;
    /* I browser danno a <fieldset> un minimo di larghezza suo che gli impedisce
       di stringersi dentro una griglia. Senza questo, da telefono il modulo
       esce dallo schermo. */
    min-width: 0;
}

.ddk-gruppo:last-of-type {
    margin-block-end: clamp(18px, 3vw, 26px);
}

/* Il titolo del gruppo. <legend> di suo si incastra nel bordo del fieldset:
   qui il bordo non c'e', quindi si comporta come un titolo normale. */
.ddk-gruppo__titolo {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0 0 8px;
    border-block-end: 1px solid #e4e7ec;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ddk-primario, #8a1c2b);
}

/* La griglia e' a due colonne, e i campi lunghi ne prendono due.
   Il criterio non e' estetico: un CAP in una casella larga mezza pagina
   sembra chiedere piu' di quello che chiede, e un indirizzo in una casella
   corta sembra non entrarci. La larghezza della casella e' un suggerimento
   sulla lunghezza della risposta. */
.ddk-gruppo__campi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.ddk-area-form--richiesta .ddk-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.ddk-area-form--richiesta .ddk-campo--largo {
    grid-column: 1 / -1;
}

.ddk-area-form--richiesta label {
    font-size: 14px;
    font-weight: 600;
}

/* LE NOTE VANNO IN LINEA, ACCANTO ALL'ETICHETTA — non sotto.
   Sotto erano una riga in piu' solo su alcuni campi, quindi le caselle di una
   stessa fila partivano ad altezze diverse: il modulo sembrava sbilenco.
   In linea non spostano niente. Segnalato da Riccardo il 04/08.

   ⚠️ Sono rimaste due sole — «facoltativo», e le due che dicono una regola
   vera (l'email e' la credenziale, la password vuole otto caratteri). Tutte
   le altre le ha sostituite il titolo del gruppo, che dice la stessa cosa
   una volta per tutti i campi invece di ripeterla sotto ognuno. */
.ddk-area-form--richiesta .ddk-campo__nota {
    margin-inline-start: 7px;
    font-weight: 400;
    font-size: 12px;
    color: #7b8494;
}

.ddk-area-form--richiesta input,
.ddk-area-form--richiesta select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    padding: 9px 11px;
    background: #fff;
    color: inherit;
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ddk-area-form--richiesta input:focus,
.ddk-area-form--richiesta select:focus {
    outline: none;
    border-color: var(--ddk-primario, #8a1c2b);
    box-shadow: 0 0 0 3px rgba(var(--ddk-primario-rgb, 138, 28, 43), .14);
}

/* LA PASSWORD E IL SUO OCCHIO.
   Il guscio e il bottone li costruisce front.js: a JavaScript spento resta
   una casella password normale, e queste regole non trovano nulla da vestire
   senza rompere niente. */
.ddk-area-form--richiesta .ddk-password {
    position: relative;
    display: block;
}

.ddk-area-form--richiesta .ddk-password input {
    /* Lo spazio per il bottone. padding-inline-end e non padding-right:
       in arabo il bottone sta dall'altra parte e lo spazio lo segue. */
    padding-inline-end: 92px;
}

.ddk-area-form--richiesta .ddk-password__occhio {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    min-height: 32px;
    border: 0;
    border-radius: 4px;
    padding: 0 10px;
    background: transparent;
    color: var(--ddk-primario, #8a1c2b);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ddk-area-form--richiesta .ddk-password__occhio:hover {
    background: rgba(var(--ddk-primario-rgb, 138, 28, 43), .08);
}

/* LA SPUNTA DEL CONSENSO.
   Su una riga sola con il testo accanto, non incolonnata come gli altri
   campi: e' una frase da leggere, non un dato da inserire. */
.ddk-area-form--richiesta .ddk-campo--spunta label {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
}

.ddk-area-form--richiesta .ddk-campo--spunta input {
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    height: 18px;
    margin-block-start: 2px;
    accent-color: var(--ddk-primario, #8a1c2b);
}

.ddk-area-form--richiesta .ddk-campo--spunta a {
    color: var(--ddk-primario, #8a1c2b);
    text-decoration: underline;
    text-underline-offset: .16em;
}

.ddk-area-form--richiesta .ddk-campo--invio {
    margin-block-start: 6px;
}

.ddk-area-form--richiesta button[type="submit"] {
    justify-self: start;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    padding: 0 26px;
    background: var(--ddk-primario, #8a1c2b);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease;
}

.ddk-area-form--richiesta button[type="submit"]:hover {
    background: var(--ddk-primario-scuro, #6e1622);
}

/* L'ultimo gruppo, quello delle credenziali, si stacca dagli altri due:
   e' l'unico che parla di lui invece che della sua azienda, ed e' quello
   dove si decide se arrivare in fondo. */
.ddk-gruppo--accesso {
    padding: clamp(16px, 3vw, 24px);
    border-radius: 8px;
    background: #f7f8fa;
}

.ddk-gruppo--accesso .ddk-gruppo__titolo {
    border-block-end-color: #dfe3ea;
}

.ddk-gruppo--accesso input[type="email"],
.ddk-gruppo--accesso input[type="password"],
.ddk-gruppo--accesso input[type="text"] {
    background: #fff;
}

/* Da telefono una colonna sola: due campi affiancati su uno schermo stretto
   diventano due caselle in cui non ci sta niente. */
@media (max-width: 700px) {
    .ddk-gruppo__campi {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ddk-area-form--richiesta input,
    .ddk-area-form--richiesta select,
    .ddk-area-form--richiesta button[type="submit"] {
        transition: none;
    }
}