/* ============================================================
   DICE.fm — complemento: portada a DOS COLUMNAS

   Mismo reparto que el complemento de Motor Show Xtreme:

   Izquierda : imagen del evento, descripción, recinto, horarios…
               el texto informativo.
   Derecha   : título y fecha del evento y, debajo, las entradas
               (productos + botón de compra), pegajosas al scroll.

   Se pega DESPUÉS de dice-pretix.css, en el mismo campo "CSS
   personalizado" del evento. Es independiente: si se quita, el tema
   sigue funcionando con la portada de una columna.

   Sólo actúa en escritorio (≥992px), sólo en la página de entradas
   (usa :has() para detectar que hay productos) y sólo si el evento NO
   tiene plano de butacas: el plano necesita el ancho completo. En
   navegadores sin :has() no se aplica nada y se ve la portada normal.
   ============================================================ */

@media (min-width: 992px) {

    main#content:has(article.product-row):not(:has(.panel-seating)) {
        display: grid;
        /* información : entradas — sube el primer valor para dar más
           sitio al texto, o el segundo para las entradas */
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        column-gap: 48px;
        row-gap: 0;
        align-items: start;
    }

    /* Columna izquierda: imagen, descripción, recinto, horarios… */
    main#content:has(article.product-row):not(:has(.panel-seating)) > * {
        grid-column: 1;
        min-width: 0;
    }

    /* Columna derecha, arriba: título y fecha del evento. */
    main#content:has(article.product-row):not(:has(.panel-seating)) > h2.content-header {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        margin: 0 0 24px 0;
        font-size: 36px;
    }

    /* Columna derecha, debajo: el formulario de entradas, a lo alto y
       pegajoso, para que acompañe al scroll del texto. */
    main#content:has(article.product-row):not(:has(.panel-seating)) > form {
        grid-column: 2;
        grid-row: 2 / span 50;
        align-self: start;
        position: sticky;
        top: 24px;
        margin: 0;
    }

    /* El carrito, cuando hay algo dentro, acompaña a las entradas en la
       columna de la derecha, justo encima de ellas. */
    main#content:has(article.product-row):not(:has(.panel-seating)) > details.cart {
        grid-column: 2;
        grid-row: 2;
        margin: 0 0 24px 0;
    }

    /* …y entonces las entradas bajan una fila para dejarle sitio. Si no
       hay carrito, esta regla no se aplica y siguen en la fila 2. */
    main#content:has(article.product-row):not(:has(.panel-seating)):has(details.cart) > form {
        grid-row: 3 / span 49;
    }

    /* La imagen arranca arriba y abarca las filas de las entradas, para
       que el texto de la izquierda siga por debajo de ella.
       Nota: si la lista de entradas llega a ser MÁS alta que la imagen,
       el texto de la izquierda empieza por debajo de esa lista. Con
       muchas entradas, dale más peso a la columna derecha arriba
       (p. ej. 5fr / 7fr) o reduce la altura de la imagen. */
    main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo {
        grid-row: 1 / span 51;
        align-self: start;
        margin: 0 0 24px 0;
    }

    main#content:has(article.product-row):not(:has(.panel-seating)) > .page-header .event-logo {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* El bloque final ocupa todo el ancho. Va después de las dos
       columnas, así que no desplaza nada: se coloca solo, en la fila
       libre que queda por debajo del texto.
       Ojo: cualquier elemento a 1/-1 colocado ANTES rompería el reparto
       de columnas. */
    main#content:has(article.product-row):not(:has(.panel-seating)) > aside.front-page {
        grid-column: 1 / -1;
        margin-top: 40px;
    }

    /* Fecha, hora y recinto (bloques .info-row de Pretix), separados por
       la línea fina del tema. */
    main#content:has(article.product-row):not(:has(.panel-seating)) .info-row {
        border-top: 1px solid var(--dc-border-soft);
        padding: 12px 0;
        margin: 0;
    }

    main#content:has(article.product-row):not(:has(.panel-seating)) .info-row:last-child {
        border-bottom: 1px solid var(--dc-border-soft);
    }

    main#content:has(article.product-row):not(:has(.panel-seating)) section.item-category > h3 {
        text-align: left;
    }

    /* La columna es más estrecha: se reparten nombre, precio y cantidad. */
    main#content:has(article.product-row):not(:has(.panel-seating)) article.product-row .col-md-8 {
        width: 50%;
    }

    main#content:has(article.product-row):not(:has(.panel-seating)) article.product-row .col-md-2.price {
        width: 22%;
    }

    main#content:has(article.product-row):not(:has(.panel-seating)) article.product-row .col-md-2.availability-box {
        width: 28%;
    }

    /* El botón de compra ocupa toda la columna: si se queda en su tercio
       de Bootstrap, el texto parte en dos líneas. */
    main#content:has(article.product-row):not(:has(.panel-seating)) .front-page .col-md-4.col-md-offset-8 {
        width: 100%;
        margin-left: 0;
    }

    /* ---------- Eventos SIN h2.content-header ----------
       Cuando el evento tiene logo grande, Pretix no genera el título
       visible: mete el nombre y las fechas en un <h1 class="sr-only">
       dentro de la cabecera, oculto salvo para lectores de pantalla.
       Aquí desmontamos la cabecera (display:contents) para repartir su
       título a la columna derecha y su imagen a la izquierda. */
    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo,
    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header.pager-header-with-logo > div:not(.clearfix) {
        display: contents;
    }

    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header .clearfix {
        display: none;
    }

    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header h1 {
        grid-column: 2;
        grid-row: 1;
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
        margin: 0 0 24px 0;
        padding: 0;
        text-align: left;
        font-size: 36px;
        font-weight: 400;
        letter-spacing: -0.02em;
        color: var(--dc-text);
    }

    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header h1 small,
    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header h1 small time {
        display: block;
        margin-top: 12px;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--dc-yellow);
    }

    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header > div > a,
    main#content:not(:has(h2.content-header)):has(article.product-row):not(:has(.panel-seating)) > .page-header > div > .event-logo {
        grid-column: 1;
        grid-row: 1 / span 51;
        align-self: start;
        display: block;
        margin-bottom: 24px;
    }

    /* Si el evento no tiene ningún título, las entradas suben a la
       primera fila para no dejar el hueco de la fila del título… */
    main#content:not(:has(h2.content-header)):not(:has(.page-header h1)):has(article.product-row):not(:has(.panel-seating)) > form {
        grid-row: 1 / span 51;
    }

    /* …salvo que haya carrito, que va el primero de la columna. */
    main#content:not(:has(h2.content-header)):not(:has(.page-header h1)):has(article.product-row):not(:has(.panel-seating)):has(details.cart) > details.cart {
        grid-row: 1;
    }

    main#content:not(:has(h2.content-header)):not(:has(.page-header h1)):has(article.product-row):not(:has(.panel-seating)):has(details.cart) > form {
        grid-row: 2 / span 50;
    }
}
/* ============================================================
   DICE.fm look & feel para Pretix (Ticketrona)
   Pegar en: Configuración del evento → Apariencia / Display
              → "CSS personalizado" (Custom CSS)
   Referencia: https://dice.fm/event/nv9k6l-imb-festival-madrid-...
   Página objetivo:
   https://tickets.ticketrona.com/organizacion1/test-redsys-1/
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --dc-bg:           #000000;
    --dc-surface:      #1a1a1a;
    --dc-surface-2:    #111111;
    --dc-border:       rgba(255, 255, 255, 0.2);
    --dc-border-soft:  rgba(255, 255, 255, 0.08);
    --dc-text:         #ffffff;
    --dc-text-muted:   rgba(255, 255, 255, 0.66);
    --dc-text-dim:     rgba(255, 255, 255, 0.4);
    --dc-yellow:       #f2ef1d;
    --dc-yellow-hover: #fffd5b;
    --dc-radius:       16px;
    --dc-radius-btn:   100px;
    --dc-font:         'Inter', Helvetica, Arial, sans-serif;

    /* ---- Halo de la portada -------------------------------------
       En dice.fm el arte del evento se repite de fondo a todo ancho,
       ampliado y desenfocado al 40 %, y se funde a negro hacia abajo.
       Pretix sólo pinta la imagen una vez y el CSS no puede leer el
       src de un <img>, así que la URL va aquí a mano: es la misma
       imagen que has subido al evento (clic derecho sobre la portada
       → "Copiar dirección de la imagen").

           --dc-hero-image: url("https://tickets.…/logo.png");

       Si se deja en `none`, la portada mantiene un halo neutro y el
       resto del tema no cambia. */
    --dc-hero-image:   none;
    --dc-hero-height:  720px;
}

/* ---------- Base ---------- */
html,
body {
    /* `clip` (y no `hidden`) recorta el halo ampliado sin crear un
       contenedor de scroll. */
    overflow-x: clip;
    background-color: var(--dc-bg) !important;
    color: var(--dc-text) !important;
    font-family: var(--dc-font) !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* Halo neutro: lo que se ve cuando no se ha puesto la imagen del
   evento en --dc-hero-image. Con imagen queda por debajo de ella. */
body {
    position: relative;
    background-image: radial-gradient(120% 60% at 50% 0%,
                                      rgba(255, 255, 255, 0.09) 0%,
                                      rgba(255, 255, 255, 0.03) 35%,
                                      transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* El arte del evento, ampliado y borroso, fundiéndose a negro: es el
   degradado de la cabecera de dice.fm. Las paradas del fundido son las
   mismas que usa DICE, sólo que aplicadas como máscara de la imagen en
   vez de como capa negra encima. */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dc-hero-height);
    z-index: 0;
    pointer-events: none;
    background-image: var(--dc-hero-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: blur(18px);
    /* la escala esconde el borde blando que deja el desenfoque */
    transform: scale(1.08);
    transform-origin: top center;
    -webkit-mask-image: linear-gradient(to bottom,
                        #000 0%, #000 37%,
                        rgba(0, 0, 0, 0.925) 45%,
                        rgba(0, 0, 0, 0.80) 53%,
                        rgba(0, 0, 0, 0.62) 62%,
                        rgba(0, 0, 0, 0.46) 70%,
                        rgba(0, 0, 0, 0.26) 81%,
                        transparent 100%);
            mask-image: linear-gradient(to bottom,
                        #000 0%, #000 37%,
                        rgba(0, 0, 0, 0.925) 45%,
                        rgba(0, 0, 0, 0.80) 53%,
                        rgba(0, 0, 0, 0.62) 62%,
                        rgba(0, 0, 0, 0.46) 70%,
                        rgba(0, 0, 0, 0.26) 81%,
                        transparent 100%);
}

a {
    color: var(--dc-text);
}

a:hover,
a:focus {
    color: var(--dc-yellow);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--dc-font);
    color: var(--dc-text);
    font-weight: 400;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: 56px; line-height: 1.05; font-weight: 400; }
h2, .h2 { font-size: 28px; line-height: 1.2; font-weight: 400; }
h3, .h3 { font-size: 20px; font-weight: 500; }
h4, .h4 { font-size: 16px; font-weight: 600; }

p, li { color: var(--dc-text-muted); }
strong, b { color: var(--dc-text); font-weight: 600; }

/* ---------- Contenedor principal ---------- */
.container.main-box {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 20px;
}

.page-header-links,
.page-header-links-outside {
    background: transparent !important;
    border: none !important;
}

/* ---------- Logo / portada del evento ---------- */
.page-header.pager-header-with-logo {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0;
    text-align: center;
}

.page-header.pager-header-with-logo .event-logo {
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* ---------- Título del evento ---------- */
h2.content-header {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--dc-text);
    text-transform: none;
    letter-spacing: -0.02em;
    padding-bottom: 0;
    margin-top: 28px;
    border-bottom: none;
}

h2.content-header small {
    display: block;
    margin-top: 12px;
    color: var(--dc-yellow);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

h2.content-header small time {
    color: var(--dc-yellow);
}

/* ---------- Alertas (modo prueba) ---------- */
/* Pretix pinta el icono del aviso como una banda de color en ::before,
   pegada al borde izquierdo y a toda la altura. Sin reservarle sitio se
   come las primeras palabras del texto, sobre todo en móvil. */
.alert {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--dc-border-soft);
    padding: 14px 18px 14px 68px;
    overflow: hidden;
}

.alert::before {
    width: 44px !important;
    border-radius: 12px 0 0 12px;
}

.alert-warning::before,
.alert-testmode::before,
.alert-info::before,
.alert-success::before {
    background-color: var(--dc-yellow) !important;
}

.alert-danger::before {
    background-color: #ff5050 !important;
}

.alert-warning,
.alert-testmode {
    background: rgba(242, 239, 29, 0.06) !important;
    border-color: rgba(242, 239, 29, 0.4) !important;
    color: var(--dc-text-muted) !important;
}

.alert-warning strong,
.alert-testmode strong {
    color: var(--dc-yellow);
}

.alert-success {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--dc-border) !important;
    color: var(--dc-text) !important;
}

.alert-info {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--dc-border) !important;
    color: var(--dc-text-muted) !important;
}

.alert-danger {
    background: rgba(255, 80, 80, 0.10) !important;
    border-color: rgba(255, 80, 80, 0.45) !important;
    color: #ffc8c8 !important;
}

/* ---------- Texto general ---------- */
main#content p,
main#content li {
    color: var(--dc-text-muted);
    font-size: 16px;
    line-height: 1.55;
}

main#content strong {
    color: var(--dc-text);
}

/* ---------- Tarjetas de entradas (product-row) ---------- */
section.item-category {
    margin-top: 32px;
}

section.item-category > h3 {
    color: var(--dc-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 18px;
    opacity: 1;
}

article.product-row {
    background: var(--dc-surface) !important;
    border: 1px solid var(--dc-border-soft) !important;
    border-radius: var(--dc-radius);
    padding: 20px 24px !important;
    margin: 0 0 12px 0 !important;
    transition: border-color .15s ease, background .15s ease;
}

article.product-row:hover {
    border-color: var(--dc-border) !important;
    background: #202020 !important;
}

article.product-row .product-description h4 {
    color: var(--dc-text);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    font-size: 17px;
    margin: 0 0 4px 0;
}

article.product-row .product-description {
    color: var(--dc-text-muted);
}

article.product-row .price {
    color: var(--dc-text);
    font-weight: 700;
    font-size: 18px;
    text-align: right;
}

article.product-row .price p {
    margin: 0;
    color: var(--dc-text) !important;
}

/* ---------- Selector de cantidad (-, input, +) ---------- */
.availability-box {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.input-item-count-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-btn);
    overflow: hidden;
    background: transparent;
    max-width: 100%;
    flex-wrap: nowrap;
}

.input-item-count-group .btn,
.input-item-count-dec,
.input-item-count-inc {
    background: transparent !important;
    color: var(--dc-text) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    min-width: 32px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}

.input-item-count-group .btn:hover {
    background: rgba(242, 239, 29, 0.12) !important;
    color: var(--dc-yellow) !important;
}

.input-item-count {
    background: transparent !important;
    color: var(--dc-text) !important;
    border: none !important;
    border-left: 1px solid var(--dc-border) !important;
    border-right: 1px solid var(--dc-border) !important;
    box-shadow: none !important;
    text-align: center;
    width: 42px !important;
    min-width: 0;
    padding: 6px 0 !important;
    font-weight: 600;
    font-size: 14px;
    flex: 0 1 auto;
}

/* En desktop la columna .col-md-2 es muy estrecha; ampliamos un poco la
   columna de cantidad sacándolo de la columna de precio. */
@media (min-width: 992px) {
    article.product-row .col-md-8 { width: 58.333%; }
    article.product-row .col-md-2.price { width: 16.666%; }
    article.product-row .col-md-2.availability-box { width: 25%; }
}

/* ---------- Botones (estilo "Buy now" pill) ---------- */
.btn {
    font-family: var(--dc-font);
    border-radius: var(--dc-radius-btn);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 22px;
    font-size: 13px;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}

.btn-lg {
    padding: 16px 28px !important;
    font-size: 14px !important;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary,
.btn-primary:focus,
#btn-add-to-cart {
    background: var(--dc-yellow) !important;
    border: 2px solid var(--dc-yellow) !important;
    color: #000 !important;
}

.btn-primary:hover,
#btn-add-to-cart:hover {
    background: var(--dc-yellow-hover) !important;
    border-color: var(--dc-yellow-hover) !important;
    color: #000 !important;
}

.btn-default {
    background: transparent !important;
    border: 2px solid var(--dc-border) !important;
    color: var(--dc-text) !important;
}

.btn-default:hover,
.btn-default:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: var(--dc-text) !important;
}

.btn-success {
    background: var(--dc-yellow) !important;
    border: 2px solid var(--dc-yellow) !important;
    color: #000 !important;
}

.btn-success:hover {
    background: var(--dc-yellow-hover) !important;
    border-color: var(--dc-yellow-hover) !important;
}

/* ---------- Inputs ---------- */
.form-control {
    background: var(--dc-surface) !important;
    border: 1px solid var(--dc-border-soft) !important;
    color: var(--dc-text) !important;
    border-radius: 10px;
    box-shadow: none !important;
    padding: 12px 14px;
    font-size: 15px;
}

.form-control:focus {
    border-color: var(--dc-yellow) !important;
    box-shadow: 0 0 0 3px rgba(242, 239, 29, 0.2) !important;
    background: var(--dc-surface) !important;
}

.form-control::placeholder {
    color: var(--dc-text-dim);
}

select.form-control,
textarea.form-control {
    background: var(--dc-surface) !important;
    color: var(--dc-text) !important;
}

select.form-control option {
    background: var(--dc-surface-2);
    color: var(--dc-text);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--dc-yellow);
}

/* ---------- Bloque "Si ya ha pedido una entrada" ---------- */
aside.front-page {
    background: var(--dc-surface) !important;
    border: 1px solid var(--dc-border-soft);
    border-radius: var(--dc-radius);
    padding: 24px;
    margin-top: 40px;
}

aside.front-page h2,
aside.front-page .h3 {
    color: var(--dc-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
}

aside.front-page p {
    color: var(--dc-text-muted);
}

/* ---------- Footer ---------- */
footer {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--dc-border-soft);
    color: var(--dc-text-dim);
}

footer nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

footer nav ul li {
    display: inline-block;
    margin: 0 12px;
}

footer a {
    color: var(--dc-text-dim) !important;
    font-size: 13px;
}

footer a:hover {
    color: var(--dc-yellow) !important;
}

/* ---------- Modales ---------- */
.modal-card,
.modal-content {
    background: var(--dc-surface) !important;
    color: var(--dc-text) !important;
    border-radius: var(--dc-radius) !important;
    border: 1px solid var(--dc-border-soft) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.modal-card-icon .fa {
    color: var(--dc-yellow);
}

.modal-card-title,
.modal-card-content h2,
.modal-card-content h3 {
    color: var(--dc-text);
}

.modal-card-description,
.modal-card-content p {
    color: var(--dc-text-muted);
}

.fa,
.info-row-icon {
    color: var(--dc-yellow);
}

/* ============================================================
   CHECKOUT (questions / payment / confirm)
   ============================================================ */

/* ---------- Wizard ---------- */
.checkout-flow {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 24px 0 36px 0;
    position: relative;
}

.checkout-flow::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--dc-border-soft);
    z-index: 0;
}

.checkout-step {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    color: var(--dc-text-dim);
}

.checkout-step-icon {
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    border-radius: 50% !important;
    background: var(--dc-bg) !important;
    border: 1px solid var(--dc-border) !important;
    color: var(--dc-text-dim) !important;
    margin: 0 auto 8px auto;
    display: inline-block;
    text-align: center;
    font-size: 14px;
}

.checkout-step.step-current .checkout-step-icon,
.checkout-step.step-done .checkout-step-icon {
    background: var(--dc-yellow) !important;
    border-color: var(--dc-yellow) !important;
    color: #000 !important;
}

.checkout-step.step-current .checkout-step-label,
.checkout-step.step-done .checkout-step-label {
    color: var(--dc-text);
    font-weight: 600;
}

.checkout-step-label {
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- Paneles ---------- */
.panel,
.panel-default {
    background: var(--dc-surface) !important;
    border: 1px solid var(--dc-border-soft) !important;
    border-radius: var(--dc-radius) !important;
    box-shadow: none !important;
    color: var(--dc-text);
    margin-bottom: 16px;
    overflow: hidden;
}

.panel-heading,
summary.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--dc-border-soft) !important;
    color: var(--dc-text) !important;
    padding: 16px 20px !important;
    cursor: pointer;
    list-style: none;
}

summary.panel-heading::-webkit-details-marker {
    display: none;
}

summary.panel-heading::after {
    content: '\f078';
    font-family: FontAwesome;
    float: right;
    color: var(--dc-text-dim);
    transition: transform .2s ease;
}

details[open] > summary.panel-heading::after {
    transform: rotate(180deg);
}

.panel-title,
.panel-heading h2,
.panel-heading h3 {
    color: var(--dc-text);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title .fa,
.panel-title i {
    color: var(--dc-yellow);
    margin-right: 8px;
}

.panel-title a,
.panel-title .h6 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dc-text-dim) !important;
    margin-left: auto;
}

.panel-title a:hover {
    color: var(--dc-yellow) !important;
}

.panel-title a .fa {
    margin-right: 4px;
    color: inherit;
}

.panel-body {
    background: transparent !important;
    color: var(--dc-text) !important;
    padding: 20px !important;
}

/* ---------- Carrito ---------- */
details.panel.cart {
    background: var(--dc-surface) !important;
}

#cart-deadline-short {
    color: var(--dc-yellow);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

#cart-deadline {
    color: var(--dc-text-dim);
    font-size: 13px;
    margin: 12px 0 6px 0;
}

#cart-extend-form.text-muted {
    color: var(--dc-text-dim) !important;
}

.inline-dialog {
    background: var(--dc-surface) !important;
    color: var(--dc-text) !important;
    border: 1px solid var(--dc-border-soft) !important;
    border-radius: var(--dc-radius) !important;
}

.cart-row {
    color: var(--dc-text);
    padding: 10px 0;
    border-bottom: 1px solid var(--dc-border-soft);
}

.cart-row.total {
    border-top: 1px solid var(--dc-border);
    border-bottom: none;
    margin-top: 8px;
    padding-top: 14px;
    font-size: 16px;
}

.cart-row .product strong,
.cart-row .totalprice strong,
.cart-row .singleprice {
    color: var(--dc-text);
}

.cart-row .text-muted {
    color: var(--dc-text-dim) !important;
}

#cart-foldable-container,
.sneak-peek-content {
    background: transparent !important;
}

.sneak-peek-container .sneak-peek-content,
.sneak-peek-content {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.sneak-peek-content::before,
.sneak-peek-content::after,
.sneak-peek-container::before,
.sneak-peek-container::after {
    background: transparent !important;
    background-image: none !important;
    display: none !important;
    content: none !important;
}

.sneak-peek-container:not(.details-open) .sneak-peek-content {
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%) !important;
            mask-image: linear-gradient(to bottom, #000 50%, transparent 100%) !important;
}

/* El botón "Mostrar carrito completo" va en absoluto sobre la vista
   previa del carrito: necesita fondo propio o se le transparentan las
   filas por debajo. El degradado arranca en el mismo color del panel
   con alfa 0 —si cambias --dc-surface, cámbialo también aquí— para que
   no aparezca un velo gris. */
.sneak-peek-trigger {
    margin: 0;
    padding: 28px 20px 12px;
    border-top: none;
    background: linear-gradient(to bottom,
                rgba(26, 26, 26, 0) 0%,
                var(--dc-surface) 55%) !important;
}

.sneak-peek-trigger .btn-default {
    width: 100%;
}

/* ---------- Formularios ---------- */
.form-horizontal .control-label,
.control-label,
label {
    color: var(--dc-text) !important;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 14px;
}

/* El <i> del "obligatorio" es display:inline de serie: al partirse en
   dos líneas, la píldora se monta sobre el campo. */
.label-required {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle;
    color: #000 !important;
    background: var(--dc-yellow);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
    letter-spacing: 0.08em;
    border-radius: 100px;
    padding: 2px 8px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.has-error .form-control {
    border-color: #ff5050 !important;
    box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.2) !important;
}

.form-group.has-error .control-label,
.form-group.has-error .help-block {
    color: #ff8c8c !important;
}

.help-block {
    color: var(--dc-text-dim) !important;
    font-size: 12px;
    margin-top: 6px;
}

.help-block p {
    margin: 0;
    color: var(--dc-text-dim) !important;
    font-size: 12px !important;
}

/* ---------- list-group / método de pago ---------- */
.list-group {
    background: transparent !important;
    border-radius: 0 0 var(--dc-radius) var(--dc-radius);
    margin: 0;
    padding: 0;
}

.list-group-item {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--dc-border-soft) !important;
    color: var(--dc-text) !important;
    padding: 16px 20px;
}

.list-group-item:first-child {
    border-top: none !important;
}

.list-group-item h4,
.list-group-item h5 {
    color: var(--dc-text);
}

.list-group-item p,
.list-group-item .text-center {
    color: var(--dc-text-muted) !important;
}

/* ---------- Botonera del checkout ---------- */
.checkout-button-row {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--dc-border-soft);
}

.checkout-button-row .btn-lg {
    padding: 16px 28px;
    font-size: 14px;
}

/* ---------- Tablas ---------- */
table,
.table {
    color: var(--dc-text);
    background: transparent;
}

table th,
.table th {
    color: var(--dc-text);
    border-bottom: 1px solid var(--dc-border) !important;
}

table td,
.table td {
    border-top: 1px solid var(--dc-border-soft) !important;
    color: var(--dc-text-muted);
}

/* ---------- Otros ajustes finos ---------- */
hr {
    border-top-color: var(--dc-border-soft);
}

.text-muted {
    color: var(--dc-text-dim) !important;
}

::selection {
    background: var(--dc-yellow);
    color: #000;
}