/* =============================================================================
 * dm-forms.css - Pegamento de cuenta y formularios (tramo 5).
 *
 * Alcance: /login, /register, /mi-cuenta y todo lo que cuelga de ella
 * (perfil, direcciones, tarjetas, referidos, contrasena), /contact,
 * arrepentimiento de compra, listas de deseos y el centro de notificaciones.
 * Se carga con un @section head desde esas vistas, igual que dm-cart.css y
 * dm-checkout.css.
 *
 * De donde salio cada cosa:
 *
 *   - site.css 1707-1828 y site-mobile.css 1309-1460: el bloque FORM LOGIN,
 *     otra vez duplicado casi textual entre las dos hojas. Aca queda una sola
 *     version mobile-first; las diferencias reales eran el corrimiento de la
 *     etiqueta flotante (55px contra 50px) y dos ajustes de tamano.
 *   - site.css 364-400 y site-mobile.css 29-65: el patron .float-label /
 *     .float-input / .float-span, TAMBIEN duplicado. Ese patron ya existe en el
 *     design system como .dm-float-*, asi que las cuatro vistas que lo usaban
 *     pasaron a las clases del DS y las dos copias se borraron.
 *   - El <style> embebido de Register (el campo de cupon).
 *
 * COLORES QUE QUEDAN EN HEX porque el design system todavia no los modela:
 *
 *   #ffffffb5  blanco translucido de los botones sobre la foto del login
 *   #e7e7e7    borde del campo de cupon
 *
 * ============================================================================= */


/* =============================================================================
 * 1. Login y registro
 *
 * Las dos pantallas comparten estructura: una card partida en dos columnas, con
 * el formulario propio a la izquierda y los proveedores externos a la derecha,
 * sobre una foto. Abajo de 1321px la foto no se muestra y las columnas se
 * apilan.
 * ========================================================================== */

.card-login {
    border-radius: 2rem;
}

#login-local {
    border-radius: 2rem 0 0 0;
    padding-bottom: var(--dm-space-3);
    font-size: var(--dm-text-sm);
}

/* El pie de la columna izquierda invita a la otra pantalla: "¿Aún no tenés
   cuenta?" en chico y gris, y abajo el llamado en naranja. */
.login-footer-nota {
    font-size: var(--dm-text-sm);
}

.login-footer-cta {
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand);
}

/* Los iconos que van dentro del campo y al lado del proveedor externo. */
.icono-campo {
    width: 2.5rem;
}

.icono-proveedor {
    width: 2rem;
}

.coupon-label {
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text);
}

#login-local h5 {
    font-weight: var(--dm-weight-bold);
}

#login-local .card-footer {
    border-radius: 0 0 0 2rem;
}

#login-local .card-footer p {
    display: grid;
}

#login-local .card-link {
    color: var(--dm-text);
}

#login-local .card-link:hover {
    color: var(--dm-text-strong);
}

.form-login {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

/* El campo de login no lleva el borde completo del componente: solo la linea de
   abajo, y en naranja. El borde del contenedor se apaga porque el icono va
   dentro de la misma fila.
 *
 * OJO con el display. El markup es <label class="form-group row ... dm-float-label">,
 * o sea que cuenta con el `display: flex` de .row de Bootstrap para poner el
 * icono y el campo uno al lado del otro. Pero .dm-float-label del design system
 * declara `display: block` y le gana, porque dm-components.css se carga DESPUES
 * de bootstrap.min.css y las dos reglas tienen la misma especificidad. Sin esta
 * linea el icono queda arriba y el campo abajo. */
.form-login .dm-float-label {
    display: flex;
    border: none;
}

.form-login .dm-float-label i {
    margin-top: 10px;
}

/* El icono no se encoge; el campo se queda con todo lo que sobre.
 *
 * La base va en 0, no en auto: con `auto` el flex-basis sale del ancho
 * intrinseco del <input>, que son los 20 caracteres del atributo size por
 * defecto (~177px). Sumado a los 40px del icono se pasaba del contenedor y el
 * campo se iba solo a la linea de abajo. Con base 0 arranca de cero y crece.
 * Por lo mismo hace falta `min-width: 0`: un input trae min-width auto. */
.form-login .dm-float-label i {
    flex: 0 0 auto;
}

.form-login .dm-float-input {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 2rem;
    font-size: var(--dm-text-base);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--dm-brand);
}

.form-login .dm-float-input::placeholder {
    font-weight: var(--dm-weight-light);
}

/* La etiqueta arranca a la derecha del icono, no en el borde del campo.
   Va en una sola linea y un punto mas chica: "Confirmar contraseña" no entra en
   los ~145px del campo a 13px y se partia en dos, pisando la linea de abajo. */
.form-login .dm-float-span {
    left: 50px;
    font-size: 13px;
    white-space: nowrap;
}

/* El mensaje de validacion es el cuarto hijo del label, o sea otro item del
   flex, y viene con col-md-9 (flex: 0 0 75%). Entre el icono, el campo y ese
   75% no entra nada en una linea y el campo se iba abajo. El error va donde
   corresponde: en su propio renglon, debajo del campo. */
.form-login .campo-error {
    flex: 0 0 100%;
    max-width: 100%;
    font-size: 13px;
}

/* El boton de "Ingresar" / "Registrarme" ocupa la mayor parte del ancho del
   formulario, no todo: es un formulario angosto y a ancho completo se ve tosco. */
#login-local .form-login .dm-btn {
    width: 60%;
    text-transform: uppercase;
}

/* --- Proveedores externos (la columna de la derecha) --- */

#login-servicios .form-services {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

/* La columna de proveedores también tiene foto de fondo abajo de 1024, pero es
   OTRA imagen (apaisada contra vertical) y las esquinas redondeadas van abajo,
   porque ahí las dos columnas están apiladas en vez de lado a lado. */
@media screen and (max-width: 1023px) {
    #login-servicios {
        background-image: url("../images/fondo-login-movil.jpg");
        height: 100%;
        background-size: cover;
        border-radius: 0 0 2rem 2rem;
    }
}

#login-servicios .form-services .dm-btn {
    width: 90%;
    background: #ffffffb5;
    color: var(--dm-text);
    border: none;
    box-shadow: none;
    border-radius: var(--dm-radius-sm);
    font-weight: var(--dm-weight-medium);
}

#login-servicios .form-services .dm-btn:hover {
    background: var(--dm-surface-sunken);
}

/* A 320px el botón necesita salirse un poco del contenedor para que el texto
   del proveedor entre en una línea. Es el piso de pantalla que soporta el sitio. */
@media (max-width: 320px) {
    #login-servicios .form-services .dm-btn {
        width: 105%;
    }
}

.form-services .dm-btn .i {
    font-size: 28px;
}

/* --- El campo de cupon del registro (venia en un <style> dentro de la vista) --- */

.form-login .coupon-field {
    margin: var(--dm-space-2) 0 var(--dm-space-3);
}

.form-login .coupon-input {
    box-sizing: border-box;
    width: 100%;
    height: 35px;
    padding: 0.75rem var(--dm-space-3);
    border: 1px solid #e7e7e7;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    background: var(--dm-surface);
}

.form-login .coupon-input:focus {
    border-color: var(--dm-brand);
    box-shadow: 0 0 0 0.2rem rgba(245, 134, 52, 0.15);
    outline: 0;
}

/* De 1321 para arriba entra la foto de fondo y las dos columnas se pegan. */
@media screen and (min-width: 1321px) {
    #col-login-local {
        padding-right: 0;
    }

    #col-login-servicios {
        padding-left: 0;
    }

    #login-local {
        font-size: inherit;
        padding-bottom: 0;
    }

    #login-servicios {
        background-image: url("../images/fondo-login.jpg");
        height: 100%;
        background-size: cover;
        border-radius: 0 2rem 2rem 0;
    }

    #login-servicios .form-services .dm-btn {
        width: 80%;
    }

    .form-login .dm-float-span {
        left: 55px;
    }
}




/* =============================================================================
 * 1-bis. Login y registro modernizados (.dm-auth)
 *
 * AGOSTO DE 2026. Reemplaza visualmente al bloque "1. Login y registro" de mas
 * arriba para /login y /register. Ese bloque NO se borro porque
 * ForgotPassword.cshtml y ResetPassword.cshtml siguen usando .card-login y
 * .form-login con el patron viejo: borrarlo las rompia. Lo que hay aca esta
 * acotado a .dm-auth, asi que conviven sin pisarse.
 *
 * El porque del rediseno esta arriba de Login.cshtml. En una linea: la card
 * partida en dos dejaba media pantalla en blanco entre 1024 y 1320px, Google
 * quedaba desconectado del formulario en otra columna, y los campos median
 * 32px de alto.
 *
 * Mobile primero: las reglas base son las de telefono y los @media suben.
 * ========================================================================== */

.dm-auth {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    max-width: 1040px;
    margin: var(--dm-space-5) auto;
    background: var(--dm-surface);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow-card);
    overflow: hidden;
}

/* ---- Panel de marca (decorativo, solo en pantalla grande) ---- */

.dm-auth__marca {
    display: none;
    flex: 1 1 45%;
    position: relative;
    padding: var(--dm-space-6) var(--dm-space-5);
    background-image: linear-gradient(180deg, rgba(35, 31, 32, .72), rgba(35, 31, 32, .58)), url("../images/fondo-login.jpg");
    background-size: cover;
    background-position: center;
    color: var(--dm-text-on-brand);
}

.dm-auth__marca-contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--dm-space-4);
    height: 100%;
}

.dm-auth__marca-claim {
    margin: 0;
    font-size: var(--dm-text-xl);
    font-weight: var(--dm-weight-semibold);
    line-height: 1.3;
    /* Ver la nota del `p { text-align: right }` global, unas lineas mas arriba. */
    text-align: left;
}

.dm-auth__marca-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    font-size: var(--dm-text-base);
}

/* El tilde de cada beneficio es un pseudo y no un <img>: son tres, y un archivo
   mas por tres tildes no se justifica. */
.dm-auth__marca-lista li {
    position: relative;
    padding-left: 26px;
    line-height: 1.4;
}

.dm-auth__marca-lista li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--dm-brand);
    border-bottom: 2px solid var(--dm-brand);
    transform: rotate(45deg);
}

/* ---- Panel del formulario ---- */

.dm-auth__panel {
    flex: 1 1 100%;
    max-width: 480px;
    padding: var(--dm-space-5) var(--dm-space-3);
}

.dm-auth__head {
    margin-bottom: var(--dm-space-4);
    text-align: center;
}

.dm-auth__titulo {
    margin: 0 0 var(--dm-space-1);
    font-size: var(--dm-text-xl);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
}

/* OJO CON LOS <p> DE ESTE SITIO: site.css (linea 1360) y site-mobile.css
   (linea 53) declaran `p { text-align: right }` SIN NINGUN SCOPE. O sea que en
   todo el storefront un parrafo sale alineado a la derecha salvo que alguien lo
   diga explicitamente, y heredar del padre no alcanza porque la regla apunta al
   <p> directamente. Por eso cada parrafo de aca lleva su text-align escrito.
   Sacar esa regla global seria lo correcto, pero hay que revisar antes que
   pantallas del tema viejo se apoyan en ella sin saberlo. */
.dm-auth__bajada {
    margin: 0;
    font-size: var(--dm-text-base);
    color: var(--dm-text-muted);
    line-height: 1.4;
    text-align: center;
}

.dm-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-3);
    /* Se anulan los tres valores que el bloque viejo le pone a .form-login: aca
       el formulario ocupa el ancho del panel, que ya esta acotado. */
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}

.dm-auth__par {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dm-space-3);
}

/* ---- Un campo ---- */

.dm-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* ETIQUETA ARRIBA Y NO FLOTANTE. La flotante ahorra alto pero desaparece
   apenas se empieza a tipear, justo cuando conviene poder verificar en que
   campo se esta. En un alta de seis campos eso importa. */
.dm-campo__label {
    margin: 0;
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-campo__caja {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    /* 48px de alto: por arriba del minimo de WCAG 2.5.5. El campo anterior
       media 32. */
    min-height: 48px;
    padding: 0 var(--dm-space-3);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-input);
    border-radius: var(--dm-radius-sm);
    transition: var(--dm-transition-fast);
}

/* El foco se pinta en el CONTENEDOR, no en el <input>: el input no tiene borde
   propio, asi que un outline suyo quedaria adentro de la caja. */
.dm-campo__caja:focus-within {
    border-color: var(--dm-brand);
    box-shadow: 0 0 0 3px rgba(245, 134, 52, 0.18);
}

.dm-campo__icono {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    opacity: .55;
}

.dm-campo__input {
    flex: 1 1 0;
    /* min-width 0 es obligatorio: un <input> trae min-width auto y, con el
       icono al lado, se desbordaba de la caja. */
    min-width: 0;
    height: 46px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-md);
    color: var(--dm-text);
}

.dm-campo__input:focus {
    outline: none;
    box-shadow: none;
}

.dm-campo__input::placeholder {
    color: var(--dm-text-faint);
    font-weight: var(--dm-weight-normal);
}

/* El ojito. 40px de lado, centrado sobre el borde derecho de la caja. */
.dm-campo__ojo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: calc(var(--dm-space-2) * -1);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dm-text-muted);
    border-radius: var(--dm-radius-round);
    cursor: pointer;
    position: relative;
}

.dm-campo__ojo:hover {
    color: var(--dm-text-strong);
    background: var(--dm-surface-alt);
}

/* Con la clave a la vista el ojo se tacha, que es la convencion. La barra es un
   pseudo del boton y no otro SVG. */
.dm-campo__ojo.is-visible::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 1px;
}

.dm-campo__error {
    font-size: var(--dm-text-sm);
    color: var(--dm-danger);
    line-height: 1.35;
}

.dm-campo__error--bloque:not(:empty) {
    padding: var(--dm-space-2) var(--dm-space-3);
    background: #fdeceb;
    border-radius: var(--dm-radius-sm);
}

.dm-campo__ayuda {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
    line-height: 1.35;
}

/* ---- Recordarme + olvide mi contrasena ---- */

.dm-auth__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-2);
}

.dm-check {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    margin: 0;
    /* El area tocable llega a 44px aunque la casilla mida 18. */
    min-height: 44px;
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    cursor: pointer;
}

.dm-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dm-brand);
    cursor: pointer;
}

.dm-auth__olvide {
    font-size: var(--dm-text-base);
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-semibold);
}

.dm-auth__olvide:hover {
    color: var(--dm-brand-darker);
    text-decoration: underline;
}

/* ---- Divisor "o" ---- */

.dm-auth__divisor {
    display: flex;
    align-items: center;
    gap: var(--dm-space-3);
    margin: var(--dm-space-4) 0;
    color: var(--dm-text-faint);
    font-size: var(--dm-text-sm);
    text-transform: uppercase;
}

.dm-auth__divisor::before,
.dm-auth__divisor::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--dm-border);
}

/* ---- Proveedores externos ---- */

/* .form-services del bloque viejo declara display:flex con height:100%: aca se
   lo devuelve a un apilado normal, porque ya no vive en una columna propia. */
.dm-auth__proveedores {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    height: auto;
}

.dm-auth__proveedor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-space-2);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--dm-space-3);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-input);
    border-radius: var(--dm-radius-sm);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text);
    cursor: pointer;
    transition: var(--dm-transition-fast);
}

.dm-auth__proveedor:hover {
    background: var(--dm-surface-alt);
    border-color: var(--dm-border-strong);
}

.dm-auth__proveedor img {
    width: 20px;
    height: 20px;
}

/* ---- Cupon plegado (registro) ---- */

.dm-auth__cupon > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-brand-strong);
    cursor: pointer;
    list-style: none;
}

.dm-auth__cupon > summary::-webkit-details-marker {
    display: none;
}

.dm-auth__cupon > summary::before {
    content: "+";
    margin-right: var(--dm-space-2);
    font-size: var(--dm-text-lg);
    line-height: 1;
}

.dm-auth__cupon[open] > summary::before {
    content: "\2212"; /* signo menos */
}

.dm-auth__cupon[open] > summary {
    margin-bottom: var(--dm-space-2);
}

/* ---- Pie ---- */

.dm-auth__legal {
    margin: 0;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
    text-align: center;
    line-height: 1.4;
}

.dm-auth__legal a {
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-semibold);
}

.dm-auth__pie {
    margin: var(--dm-space-4) 0 0;
    padding-top: var(--dm-space-3);
    border-top: 1px solid var(--dm-border);
    text-align: center;
    font-size: var(--dm-text-base);
    color: var(--dm-text-muted);
}

.dm-auth__pie a {
    display: block;
    margin-top: 2px;
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-bold);
}

/* ---- Tablet ---- */
@media (min-width: 576px) {
    .dm-auth__panel {
        padding: var(--dm-space-6) var(--dm-space-5);
    }

    .dm-auth__par {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Escritorio: entra el panel de marca ----
   A LOS 1024 Y NO A LOS 1321. Ese era el bug visual mas grande de la pantalla
   anterior: entre 1024 y 1320px la mitad derecha quedaba en blanco. */
@media (min-width: 1024px) {
    .dm-auth {
        margin: var(--dm-space-6) auto;
    }

    .dm-auth__marca {
        display: block;
    }

    .dm-auth__panel {
        flex: 1 1 55%;
        max-width: 520px;
    }
}


/* =============================================================================
 * 2. Panel de cuenta (/mi-cuenta y lo que cuelga de ella)
 *
 * El menu lateral es el AccountMenu del design system y ya se migro en el tramo
 * 1. Lo de aca es el panel de la derecha.
 * ========================================================================== */

.account-dashboard .dm-page-header {
    margin-bottom: var(--dm-space-4);
}

/* Cada bloque del panel es una card del DS: fondo blanco, esquinas de 1rem y la
   sombra estandar. Reemplaza los `style="border-radius: 2rem"` sueltos. */
.account-panel {
    background: var(--dm-surface);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow);
    padding: var(--dm-space-4);
}

.account-panel + .account-panel {
    margin-top: var(--dm-space-3);
}

/* Cabecera del bloque: titulo a la izquierda y el "Editar" a la derecha. */
.account-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-space-2);
    margin-bottom: var(--dm-space-3);
    padding-bottom: var(--dm-space-2);
    border-bottom: 1px solid var(--dm-border);
}

.account-panel__title {
    font-size: var(--dm-text-base);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
    margin: 0;
}

/* Las filas de dato del perfil: etiqueta a la izquierda, valor a la derecha. */
.account-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-space-2);
    justify-content: space-between;
    align-items: baseline;
    padding: var(--dm-space-2) 0;
    border-bottom: 1px solid var(--dm-border);
}

.account-row:last-child {
    border-bottom: none;
}

.account-row__label {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.account-row__value {
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text);
}


/* =============================================================================
 * 3. Direcciones
 * ========================================================================== */

/* La lista de direcciones guardadas: una card por direccion, en grilla, para
   que en escritorio no quede una columna angosta de tarjetas anchas. */
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--dm-space-3);
}

.address-card {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    padding: var(--dm-space-3);
    background: var(--dm-surface);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow);
}

/* OJO: el tema tiene un `p { text-align: right }` GLOBAL (site.css 1360 y
   site-mobile.css 53). O sea que todo parrafo del sitio nace alineado a la
   derecha, y por eso el markup viejo esta lleno de class="text-left" para
   contrarrestarlo: hay 20 en las vistas. Cualquier <p> nuevo tiene que declarar
   su alineacion o sale corrido. */
.address-card p,
.address-card__name {
    text-align: left;
}

.address-card__name {
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text);
}

.address-card__body {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
    flex: 1;
}

.address-card__actions {
    display: flex;
    gap: var(--dm-space-2);
}

/* "Establecer como direccion de envio predeterminada" va con el resto del
   contenido de la tarjeta, no centrado: el <form> que lo envuelve es un bloque
   y el boton heredaba el centrado del texto largo. */
.address-card form {
    text-align: left;
}

.address-card__actions form {
    display: inline-flex;
}


/* =============================================================================
 * 4. Contacto y arrepentimiento de compra
 * ========================================================================== */

.contact-form {
    max-width: 640px;
    margin: 0 auto;
}

.contact-form .dm-field + .dm-field {
    margin-top: var(--dm-space-3);
}