/*
 Theme Name:   Singulari Theme
 Theme URI:    https://singularicolecciones.com
 Description:  Tema propio con modificaciones adicionales sobre el tema Hello Elementor
 Author:       Héctor & Ledys
 Author URI:   https://grupo-pro.es
 Template:     hello-elementor
 Version:      1.0
*/

/* Aquí pondrás tu CSS adicional */

html,
body{
	width:100%;
	overflow-x:hidden;
}

/* Hace que el contenido de Mi Cuenta ocupe todo el ancho al quitar el menú */
.woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    padding: 3em!important;
    background-color: #f5f5f5!important;
}

.woocommerce table.shop_table {
border: none!important;
}

/* Oculta el menú si el código anterior no fuera suficiente en tu tema */
.woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Oculta los párrafos de bienvenida en la página de Mi Cuenta */
.woocommerce-MyAccount-content > p:nth-child(-n+3) {
    display: none !important;
}

.woocommerce {
  font-family: "Roboto", Sans-serif;
  font-weight: 300;
}

.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
  width: 100%;
  padding: 15px 25px;
  border: none;
  border-radius: 50px;
  background-color: #ffffff;
  color: #333333;
  font-size: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  font-family: inherit;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
background-color: #000000;
  color: #ffffff;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.woocommerce form .form-row label {
  font-weight: 500;
  margin-left: 25px;
}

.woocommerce form .form-row label.checkbox {
  margin-left: 0px;
}

#account_display_name_description {
  display:none;
}

fieldset {
  border: none;
  padding-left: 0px!important;
}

legend {
  display: none!important;
}

#update_all_subscriptions_billing_contact_field {
  margin-left: 25px;
}


/* Cambio de tabla por boxes */

table.woocommerce-orders-table--subscriptions {
border: 0px!important;
}

/* Ocultar la cabecera de la tabla */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions thead {
    display: none;
}

/* Convertir cada fila en una tarjeta */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody tr {
    display: flex !important;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 15px !important;
    padding: 20px !important;
    border: none !important;
}

/* Cada celda ocupa su espacio */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody td {
    border: none !important;
    padding: 5px 15px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Añadir etiqueta encima de cada dato (como mini-título) */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody td::before {
    content: attr(data-title);
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Estilo del número de suscripción */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody td.subscription-id a {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    text-decoration: none;
}

/* Badge de estado "Activa" */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .wc-subscription-status {
    display: inline-block;
    background: #e6f4ea;
    color: #2e7d32;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Botón "Ver" */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .button {
    background: #000 !important;
    color: #fff !important;
    border-radius: 25px !important;
    padding: 10px 25px !important;
    font-size: 13px !important;
    border: none !important;
    cursor: pointer;
    text-decoration: none;
}

.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .button:hover {
    background: #333 !important;
    transition: background 0.3s ease;
}

/* Grid de 3 columnas en escritorio */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px;
}

/* 2 columnas en tablet */
@media (max-width: 1024px) {
    .woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 columna en móvil */
@media (max-width: 768px) {
    .woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody {
        grid-template-columns: 1fr;
    }
}

/* Ocultar cabecera de la tabla */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions thead {
    display: none;
}

/* Cada tarjeta */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody tr {
    display: flex !important;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 20px !important;
    border: none !important;
    margin: 0 !important;
}

/* Celdas dentro de la tarjeta */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody td {
    border: none !important;
    padding: 6px 0 !important;
    display: flex;
    flex-direction: column;
}

/* Mini etiqueta encima de cada dato */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody td::before {
    content: attr(data-title);
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

/* Badge estado "Activa" */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .wc-subscription-status {
    display: inline-block;
    background: #e6f4ea;
    color: #2e7d32;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
}

/* Botón Ver */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .button {
    background: #000 !important;
    color: #fff !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    border: none !important;
    text-align: center;
    margin-top: auto;
    text-decoration: none;
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .button:hover {
    background: #333 !important;
    transition: background 0.3s ease;
}

/* Fondo blanco en todas las celdas */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions tbody td {
    background: #ffffff !important;
    border: none !important;
    padding: 6px 0 !important;
    display: flex;
    flex-direction: column;
}

/* Botón Ver con color personalizado */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .button {
    background: #C41543 !important;
    color: #fff !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    border: none !important;
    text-align: center;
    margin-top: auto;
    text-decoration: none;
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

/* Hover del botón (versión más oscura del color) */
.woocommerce-orders-table.woocommerce-MyAccount-subscriptions .button:hover {
    background: #9e1136 !important;
    transition: background 0.3s ease;
}

/* ============================================================
   DISEÑO TARJETAS SUSCRIPCIÓN - FUSIONADO
============================================================ */

/* ===============================
   FONDO GENERAL
================================= */

.woocommerce-account .woocommerce-view-subscription {
    background: #f6f6f8;
    padding: 20px;
}

/* ===============================
   TABLAS BASE
================================= */

.shop_table.subscription_details,
.shop_table.order_details,
.my_account_orders,
.woocommerce-account .woocommerce-view-subscription .shop_table {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    box-shadow: none !important;
    margin-bottom: 30px !important;
}

/* ===============================
   FILAS COMO TARJETAS
================================= */

.woocommerce-MyAccount-content tr,
.woocommerce-account .woocommerce-view-subscription .shop_table tr {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border-radius: 12px !important;
    display: table-row !important;
}

/* ===============================
   CELDAS
================================= */

.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content th,
.woocommerce-account .woocommerce-view-subscription .shop_table th,
.woocommerce-account .woocommerce-view-subscription .shop_table td {
    border: none !important;
    padding: 15px 20px !important;
    vertical-align: middle !important;
    background: #ffffff !important;
}

/* Etiquetas (th) más sutiles */
.woocommerce-account .woocommerce-view-subscription .shop_table th {
    background: transparent !important;
    color: #888 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 35%;
}

.woocommerce-account .woocommerce-view-subscription .shop_table td {
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222 !important;
}

/* Redondear esquinas de la fila */
.woocommerce-MyAccount-content tr td:first-child,
.woocommerce-MyAccount-content tr th:first-child {
    border-radius: 12px 0 0 12px !important;
}

.woocommerce-MyAccount-content tr td:last-child,
.woocommerce-MyAccount-content tr th:last-child {
    border-radius: 0 12px 12px 0 !important;
}

/* ===============================
   BADGE ESTADO
================================= */

.woocommerce-account .woocommerce-view-subscription .wc-subscription-status,
.woocommerce-account .woocommerce-view-subscription .shop_table mark {
    background: #eaf7ee !important;
    color: #1e7e34 !important;
    padding: 5px 14px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* ===============================
   BOTONES
================================= */

/* Botón general → Rojo */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-view-subscription .button:not(.cancel),
.woocommerce-account .woocommerce-view-subscription a.button:not(.cancel) {
    background: #C41543 !important;
    color: #ffffff !important;
    border-radius: 40px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    margin-bottom: 8px;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-view-subscription .button:not(.cancel):hover {
    background: #9e1136 !important;
    transform: translateY(-2px);
}

/* Botón Cancelar y Ver → Negro */
.woocommerce-MyAccount-content .button.cancel,
.woocommerce-MyAccount-content .button.view,
.woocommerce-MyAccount-content .my_account_orders .button,
.woocommerce-account .woocommerce-view-subscription .button.cancel,
.woocommerce-account .woocommerce-view-subscription a.button.cancel {
    background: #111111 !important;
    color: #ffffff !important;
}

.woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-account .woocommerce-view-subscription .button.cancel:hover {
    background: #333333 !important;
    transform: translateY(-2px);
}

/* Botones de acciones (Cancelar, Cambiar...) a ancho completo */
.woocommerce-account .woocommerce-view-subscription .shop_table tr td .button,
.woocommerce-account .woocommerce-view-subscription .shop_table tr td a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* ===============================
   TÍTULOS DE SECCIÓN
================================= */

.woocommerce-account .woocommerce-view-subscription h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 30px 0 15px 0 !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
}

/* ===============================
   TOTALES DE SUSCRIPCIÓN
================================= */

.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 30px !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details thead tr {
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details thead th {
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 20px !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tbody tr,
.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tfoot tr {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tbody td,
.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tfoot td {
    padding: 14px 20px !important;
    border: none !important;
    font-size: 14px !important;
}

/* Total final destacado en rojo */
.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-view-subscription .woocommerce-table--order-details tfoot tr:last-child td {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #C41543 !important;
}

/* ===============================
   PEDIDOS RELACIONADOS
================================= */

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 30px !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders thead tr {
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders thead th {
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 20px !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders tbody tr {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders tbody tr:hover {
    transform: translateY(-2px);
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders tbody td {
    padding: 14px 20px !important;
    border: none !important;
    font-size: 14px !important;
}

/* Botón Ver en pedidos → Negro */
.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders .button {
    background: #111 !important;
    color: #fff !important;
    border-radius: 40px !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders .button:hover {
    background: #333 !important;
    transform: translateY(-2px);
}

/* ===============================
   DIRECCIONES
================================= */

.woocommerce-MyAccount-content .col2-set .col-1,
.woocommerce-MyAccount-content .col2-set .col-2,
.woocommerce-account .woocommerce-view-subscription .col2-set .col-1,
.woocommerce-account .woocommerce-view-subscription .col2-set .col-2 {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
}

.woocommerce-account .woocommerce-view-subscription .col2-set {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

.woocommerce-account .woocommerce-view-subscription .col2-set h2 {
    font-size: 14px !important;
    color: #888 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px 0 !important;
}

.woocommerce-account .woocommerce-view-subscription address {
    font-style: normal !important;
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.9 !important;
}

/* ===============================
   RESPONSIVE
================================= */

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-view-subscription .col2-set {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Móvil */
@media (max-width: 768px) {

    /* Direcciones en 1 columna */
    .woocommerce-account .woocommerce-view-subscription .col2-set {
        grid-template-columns: 1fr !important;
    }

    /* Filas como bloques verticales */
    .woocommerce-MyAccount-content tr,
    .woocommerce-account .woocommerce-view-subscription .shop_table tr {
        display: block !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
    }

    .woocommerce-MyAccount-content td,
    .woocommerce-MyAccount-content th,
    .woocommerce-account .woocommerce-view-subscription .shop_table th,
    .woocommerce-account .woocommerce-view-subscription .shop_table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 0 !important;
    }

    .woocommerce-account .woocommerce-view-subscription .shop_table thead {
        display: none !important;
    }

    /* Pedidos en móvil */
    .woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders thead {
        display: none !important;
    }

    .woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders tbody tr {
        display: block !important;
        padding: 15px !important;
        margin-bottom: 10px !important;
    }

    .woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders tbody td {
        display: block !important;
        padding: 6px 0 !important;
    }

    .woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders tbody td::before {
        content: attr(data-title);
        font-size: 11px;
        color: #999;
        font-weight: 600;
        text-transform: uppercase;
        display: block;
        margin-bottom: 3px;
    }

    /* Botones a ancho completo en móvil */
    .woocommerce-MyAccount-content .button,
    .woocommerce-account .woocommerce-view-subscription .woocommerce-table.my_account_orders .button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
    }
}

address {
padding: 0px!important;
border: 0px!important;
}

/* ============================================================
   PERSONALIZACIÓN DE INPUTS Y DESPLEGABLE DE PAÍSES
============================================================ */

/* 1. Estilo para Inputs normales y Selects estándar */
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important; /* Borde muy sutil */
    border-radius: 40px !important; /* Redondeado igual que tus otros inputs */
    padding: 12px 25px !important;
    height: auto !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
}

/* 2. Estilo específico para el desplegable de Países (Select2 de WooCommerce) */
.woocommerce-account .select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 40px !important;
    height: 48px !important; /* Ajusta según la altura de tus otros inputs */
    outline: none !important;
    display: flex !important;
    align-items: center !important;
}

/* Ajustar el texto interno del desplegable */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 25px !important;
    padding-right: 25px !important;
    color: #444 !important;
    line-height: 48px !important;
}

/* Ajustar la flechita del desplegable */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 15px !important;
    height: 48px !important;
}

/* Quitar el borde al hacer foco */
.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-account input.input-text:focus {
    border-color: #C41543 !important; /* Color de tu marca al seleccionar */
}

/* 3. Estilo para la lista desplegable cuando se abre */
.select2-dropdown {
    border-radius: 15px !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

.select2-results__option {
    padding: 10px 25px !important;
}

/* Color al pasar el ratón por las opciones */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #C41543 !important;
}


body.woocommerce-account.elementor-page-customer-support .elementor-section, 
body.woocommerce-account:not([class*="woocommerce-orders"]):not([class*="woocommerce-edit-address"]):not([class*="woocommerce-edit-account"]):not([class*="woocommerce-view-"]):not([class*="subscriptions"]):not([class*="woocommerce-payment-methods"]) .woocommerce-MyAccount-content {
background-color: #fff!important;
padding:0px!important;
}