/* ==========================================================
   Account area — shared styles for all customer account pages
   page-customer-account covers: identity, history, order-slip, gdpr
   page-my-account and page-addresses lack it, so add explicitly
   ========================================================== */

/* Title: brand header style — margin-top matches mi-cuenta's block-category (20px padding + 1rem) */
.page-customer-account .page-header h1,
.page-addresses .page-header h1,
.page-order-detail .page-header h1 {
    font-family: var(--font-brand);
    font-size: 2rem;
    text-align: center;
    color: var(--color-dark-pink);
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.1;
    margin: calc(1rem + 20px) 0 0.5rem;
}

/* Card wrapper for content */
.page-customer-account #content,
.page-my-account #content,
.page-addresses #content,
.page-order-detail #content {
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
    padding: 30px 40px 40px;
}

/* En móvil el padding de 40px lateral (más el que añaden algunos módulos dentro)
   deja el contenido muy estrecho; se reduce. */
@media (max-width: 767.98px) {
    .page-customer-account #content,
    .page-my-account #content,
    .page-addresses #content,
    .page-order-detail #content {
        padding: 20px 16px;
    }

    .page-customer-account #content .psgdprinfo17 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Form inputs inside account pages */
.page-customer-account #content .form-group input[type="text"],
.page-customer-account #content .form-group input[type="email"],
.page-customer-account #content .form-group input[type="password"],
.page-customer-account #content .form-group input[type="tel"],
.page-addresses #content .form-group input[type="text"],
.page-addresses #content .form-group input[type="email"],
.page-addresses #content .form-group input[type="tel"] {
    display: block;
    width: 100%;
    height: var(--btn-height);
    padding: 10px 20px;
    font-size: 13px;
    line-height: 1.42857;
    color: var(--color-gray-input);
    background-color: var(--color-gray-light-bg);
    border: none;
    border-radius: var(--input-radius);
}

.page-customer-account #content select,
.page-addresses #content select,
.page-order-detail #content select {
    height: auto;
    min-height: var(--btn-height);
    padding: 8px 20px;
    font-size: 13px;
    color: var(--color-gray-input);
    background-color: var(--color-gray-light-bg);
    border: none;
    border-radius: var(--input-radius);
}

/* Form labels */
.page-customer-account #content .form-group .form-control-label,
.page-addresses #content .form-group .form-control-label {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-text-dark);
}

/* Navegación inferior (Volver a su cuenta / Inicio). Se estilizan como botones
   pill de marca para que encajen con el estilo de la web (antes eran texto gris
   plano). El footer los coloca centrados con separación. */
.page-customer-account .page-footer,
.page-addresses .page-footer,
.page-order-detail .page-footer,
.wishlist-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 1.5rem;
}

.page-customer-account .page-footer .account-link,
.page-addresses .page-footer .account-link,
.page-order-detail .page-footer .account-link,
.wishlist-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-white) !important;
    background: var(--color-pink);
    border-radius: var(--btn-radius);
    padding: 8px 20px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.page-customer-account .page-footer .account-link:hover,
.page-addresses .page-footer .account-link:hover,
.page-order-detail .page-footer .account-link:hover,
.wishlist-footer-links a:hover {
    background: var(--color-blue);
    color: var(--color-white) !important;
}

.page-customer-account .page-footer .account-link i,
.page-addresses .page-footer .account-link i,
.page-order-detail .page-footer .account-link i,
.wishlist-footer-links a i {
    font-size: 16px;
    vertical-align: middle;
}

/* ==========================================================
   My account dashboard — page-specific overrides
   ========================================================== */

/* Reduce gap between title and card */
.page-my-account .block-category {
    padding-bottom: 0;
    min-height: auto;
    margin-bottom: 0;
}

/* Subtitle */
.page-my-account .my-account-subtitle {
    font-family: var(--font-body-condensed);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 2rem;
}

/* Link grid */
.page-my-account #content .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Link buttons — 3 per row. El grupo .btn-brand les da height y line-height fijos
   de una línea; los textos largos ("Historial y detalles de mis pedidos", "Mis
   datos personales") envolvían a dos líneas y se salían por debajo del botón (se
   veía al hacer hover). Se centra con flex y se deja el alto automático para que
   el texto multilínea quepa dentro. */
.page-my-account #content .links a {
    flex: 1 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: var(--btn-height);
    line-height: 1.2;
    padding-top: 6px;
    padding-bottom: 6px;
    /* Borde reservado (transparente) en reposo: al hover solo cambia de color, así
       la altura del botón/fila no varía. */
    border: 1px solid transparent;
}

.page-my-account #content .links a:hover {
    color: var(--color-pink);
    background-color: var(--color-white);
    border-color: var(--color-pink);
}

/* Algunos enlaces los pinta un hook envueltos en <span class="link-item"> con su
   propio line-height, lo que rompía el centrado respecto a los de texto directo.
   Con display:contents el wrapper no genera caja y el texto se coloca igual que en
   los demás botones (mismo flex del enlace). El icono se sigue ocultando. */
.page-my-account #content .links a span.link-item {
    display: contents;
}

.page-my-account #content .links a .link-item i {
    display: none;
}

/* Logout button */
.page-my-account .my-account-logout {
    text-align: center;
    margin-top: 2rem;
}

.page-my-account .my-account-logout .btn-logout {
    display: inline-block;
    color: var(--color-white);
    background: var(--color-blue);
    border: none;
    height: var(--btn-height);
    line-height: var(--btn-height);
    border-radius: var(--btn-radius);
    padding: 0 35px;
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.page-my-account .my-account-logout .btn-logout:hover {
    background: var(--color-pink);
}

/* ==========================================================
   Addresses
   ========================================================== */

.page-addresses .address {
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 0.75rem 1.25rem;
}

.page-addresses .address .address-body {
    padding: 0.5rem 0;
}

.page-addresses .address .address-body h4 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

.page-addresses .address .address-body address {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-dark);
    font-style: normal;
    line-height: 1.6;
}

.page-addresses .address .address-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0 0;
    border-top: none;
}

.page-addresses .address .address-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-pink);
    border: none;
    border-radius: var(--btn-radius);
    padding: 0 16px;
    height: 32px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.page-addresses .address .address-footer a i {
    display: none;
}

.page-addresses .address .address-footer a:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

.page-addresses .addresses-footer a {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--color-dark-pink);
}

/* ==========================================================
   Order history
   ========================================================== */

/* Tabla limpia: sin los bordes pesados del tema padre, con separadores suaves
   entre filas y hover sutil. */
.page-history #content table {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

.page-history #content table th {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-text-dark);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-gray-border);
    padding: 12px 14px;
}

.page-history #content table td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--color-text-dark);
}

/* Precio total (3ª columna) en negrita. */
.page-history #content table tbody tr td:nth-child(3) {
    font-weight: bold;
}

/* Se anula el rayado gris del tema padre; hover sutil de fila. */
.page-history #content table.table-striped tbody tr:nth-of-type(odd),
.page-history #content table tbody tr {
    background: transparent;
}

.page-history #content table tbody tr:hover td,
.page-history #content table tbody tr:hover th {
    background: var(--color-gray-light-bg);
}

/* Referencia del pedido (celda cabecera de fila) destacada en rosa primario. */
.page-history #content table tbody th {
    font-family: var(--font-brand);
    font-weight: normal;
    color: var(--color-pink);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px;
    vertical-align: middle;
}

/* Badge de estado como etiqueta suave (estilo product flag): fondo tintado claro y
   texto del color del estado. El color propio de cada estado llega inline, así que
   el tinte suave y el color de texto los aplica un script (softenOrderStatusLabels
   en custom.js); aquí se define solo la forma y el centrado. Mismo estilo en la
   tabla de desktop y en las tarjetas de móvil (.orders). */
.page-history #content table .label,
.page-history .orders .label,
.page-order-detail .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 4px;
    /* Padding superior un poco mayor que el inferior: la fuente de marca reserva
       espacio de descendentes (vacío en mayúsculas), por lo que el texto parecía
       subido; así queda ópticamente centrado. */
    padding: 7px 12px 5px;
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: normal;
}

/* Botones de acción de la fila (ver datos / pedir de nuevo): pills de marca en vez
   de enlaces de texto sueltos. "Datos" en azul, "Pedir de nuevo" en rosa. */
.page-history #content table .view-order-details-link,
.page-history #content table .reorder-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-size: 11px;
    color: var(--color-white) !important;
    border-radius: var(--btn-radius);
    padding: 6px 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.page-history #content table .view-order-details-link {
    background: var(--color-blue);
}

.page-history #content table .reorder-link {
    background: var(--color-pink);
    margin-left: 6px;
}

.page-history #content table .view-order-details-link:hover {
    background: var(--color-dark-pink);
}

.page-history #content table .reorder-link:hover {
    background: var(--color-blue);
}

/* Los dos botones de acción en la misma línea, alineados a la derecha. */
.page-history #content table td:last-child {
    white-space: nowrap;
    text-align: right;
}

/* ---- Tarjetas de móvil ---- */
/* Código del pedido en rosa primario y precio en azul secundario. El tema padre
   lo colorea vía `#history .orders .order a h3` (con id), de ahí el !important. */
.page-history .orders .order h3 {
    color: var(--color-pink) !important;
}

.page-history .orders .order .total {
    color: var(--color-blue);
    font-weight: bold;
}

/* Lupa (ver datos) y "pedir de nuevo" en línea, no apilados. */
.page-history .orders .order .col-xs-2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.page-history .orders .order .col-xs-2 > div {
    display: inline-flex;
}

/* Iconos de acción de las tarjetas de móvil en color de marca (venían en turquesa
   ajeno a la paleta). Los enlaces de icono no tienen clase. */
.page-history .orders a .material-icons {
    color: var(--color-pink);
    transition: color var(--transition-fast);
}

.page-history .orders a:hover .material-icons {
    color: var(--color-blue);
}

/* ==========================================================
   Wishlist (blockwishlist module — Vue-rendered, different structure)
   body#module-blockwishlist-lists = lists page
   body#view = single wishlist view page
   ========================================================== */

body#module-blockwishlist-lists .wishlist-container-header,
body#view .wishlist-products-container-header {
    flex-wrap: wrap;
}

body#module-blockwishlist-lists .wishlist-container-header h1,
body#view .wishlist-products-container-header h1 {
    font-family: var(--font-brand);
    font-size: 2rem;
    color: var(--color-dark-pink);
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    margin-top: calc(1rem + 20px);
}

/* Wishlist count badge */
body#module-blockwishlist-lists .wishlist-list-item-title span,
body#view .wishlist-products-count {
    display: inline-block;
    background: var(--color-pink);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--btn-radius);
    margin-left: 6px;
    vertical-align: middle;
}

body#module-blockwishlist-lists .wishlist-add-to-new,
body#view .wishlist-add-to-new {
    color: var(--color-pink) !important;
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 13px;
}

body#module-blockwishlist-lists #content,
body#view #content {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
    border-radius: 8px;
}

/* Los enlaces Volver/Inicio de la lista de deseos (.wishlist-footer-links a) usan
   el mismo estilo pill de marca que el resto de páginas de cuenta (definido
   arriba, junto a .account-link). */

/* Wishlist sort dropdown */
body#view .sort-by-row {
    display: flex;
    align-items: center;
}

body#view .sort-by-row .sort-by {
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
    max-width: none;
    padding-right: 8px;
}

body#view .sort-by-row .products-sort-order {
    flex: 1 1 auto;
    max-width: none;
    width: auto;
}

body#view .sort-by-row .dropdown-menu {
    background-color: var(--color-white);
}

/* GDPR section headings */
.page-customer-account #content .psgdprinfo17 h2 {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1.1rem;
    color: var(--color-dark-pink);
    margin-bottom: 0.8rem;
}

/* GDPR: remove gray sub-box backgrounds */
.page-customer-account #content .psgdprinfo17 {
    background: transparent;
}

/* GDPR: botones de la card ("Obtener mis datos CSV/PDF") en azul secundario. Se
   colocan inline (uno al lado del otro) cuando hay ancho y envuelven centrados en
   pantallas estrechas. El módulo los flota a la derecha (float:right), lo cual se
   anula; se centran como inline-flex con el text-align del contenedor. */
.page-customer-account #content .psgdprinfo17 {
    text-align: center;
}

.page-customer-account #content .psgdprinfo17 > p {
    text-align: left;
}

.page-customer-account #content .psgdprgetdatabtn17.btn.btn-primary {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0.75rem 6px 0;
    color: var(--color-white);
    background: var(--color-blue);
    border: none;
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    line-height: 1.2;
    padding: 8px 25px;
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    transition: background var(--transition-fast);
}

.page-customer-account #content .psgdprgetdatabtn17.btn.btn-primary:hover {
    background: var(--color-pink);
}

/* ==========================================================
   Order detail
   ========================================================== */

.page-order-detail #content h3 {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--color-text-dark);
}

.page-order-detail #content table th {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-text-dark);
}

.page-order-detail #content table a {
    color: var(--color-pink);
}

.page-order-detail #content table a:hover {
    color: var(--color-blue);
}

/* Botón "Pedir de nuevo" con estilo de botón de marca (venía como enlace de texto
   turquesa), igual que en el historial. */
.page-order-detail .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--color-pink);
    color: var(--color-white) !important;
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    border: none;
    border-radius: var(--btn-radius);
    padding: 8px 18px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.page-order-detail .button-primary:hover {
    background: var(--color-blue);
    color: var(--color-white) !important;
}

/* Cabecera del pedido (referencia + botón "Pedir de nuevo"): en la misma fila y
   centrados verticalmente. El tema usa columnas flotadas alineadas arriba, por eso
   el botón no quedaba centrado respecto al texto. */
.page-order-detail #content .row:has(> .col-xs-3 .button-primary) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* En móvil la columna del botón (col-xs-3) es demasiado estrecha y apretaba el
   texto; se pasa el botón a su propia línea, alineado a la izquierda. */
@media (max-width: 767.98px) {
    .page-order-detail #content .row:has(> .col-xs-3 .button-primary) > .col-xs-9,
    .page-order-detail #content .row:has(> .col-xs-3 .button-primary) > .col-xs-3 {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .page-order-detail #content .row:has(> .col-xs-3 .button-primary) > .col-xs-3 {
        /* !important para ganar a la clase .text-xs-right del tema. */
        text-align: left !important;
        margin-top: 10px;
    }
}