/* Fuente global para el plugin */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.tpi-tabla {
    font-family: 'Montserrat', sans-serif !important;
    text-align: center !important;
    margin: 2px auto !important; /* Ajustar margen */
    padding: 2px 0 !important; /* Ajustar padding */
    border: none !important; /* Eliminar el borde del shortcode */
}

/* Estilo para el título */
.tpi-tabla h2 {
    font-size: 30px !important; /* Cambiar tamaño del título */
    font-weight: bold !important;
    margin-bottom: 10px !important; /* Reducir espacio inferior */
    color: #333 !important;
}

/* Estilo para "Número de cuentas de correo" */
.tpi-tabla .tpi-quantity-label {
    font-size: 12px !important; /* Cambiar tamaño del texto */
    color: #666 !important; /* Color gris */
    text-align: center !important;
    margin-bottom: 5px !important; /* Ajustar espacio inferior */
    display: block !important; /* Mostrar como bloque */
}

/* Estilo para la descripción */
.tpi-tabla .tpi-description {
    font-size: 12px !important; /* Cambiar tamaño de la descripción */
    background-color: var(--e-global-color-secondary) !important; /* Fondo de color secundario global */
    color: #fff !important; /* Texto blanco */
    font-family: "DM Sans", Sans-serif !important; /* Fuente DM Sans */
    font-weight: 500 !important; /* Peso de la fuente */
    padding: 2px 10px 2px 10px !important; /* Ajustar padding dentro del texto */
    border-radius: 15px !important; /* Bordes redondeados */
    display: inline-block !important; /* Ajustar al contenido del texto */
    margin: 0 auto 10px auto !important; /* Separar de otros elementos */
    text-align: center !important;
}

/* Estilos para el precio */
.tpi-tabla .tpi-price {
    font-size: 35px !important; /* Cambiar tamaño del precio */
    font-weight: bold !important;
    color: #000 !important; /* Cambiar color del precio al negro */
    text-align: center !important;
    display: block !important; /* Mostrar en bloque separado */
    margin: 1px auto !important; /* Ajustar margen del precio */
}

/* Línea transparente debajo de la descripción */
.tpi-line {
    width: 80% !important;
    height: 2px !important;
    background-color: rgba(0, 0, 0, 0.1) !important; /* Línea transparente */
    margin: 10px auto !important; /* Espaciado debajo de la descripción */
}

/* Estilos para el contenedor de cantidad */
.tpi-quantity-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #cdd8df !important;
    border-radius: 4px !important;
    width: 170px !important; /* Cambiar el ancho a 170px */
    margin: 10px auto 15px auto !important; /* Ajustar espacio superior e inferior */
    background-color: #f9f9f9 !important; /* Fondo para el contenedor */
    padding: 5px !important;
    box-sizing: border-box !important; /* Evitar que los botones queden fuera */
}

/* Estilos para los botones de cantidad */
.tpi-quantity-wrapper button {
    width: 40px !important;
    height: 30px !important; /* Ajustar el alto a 30px */
    font-size: 18px !important;
    text-align: center !important;
    border: none !important;
    background-color: #000 !important;
    cursor: pointer !important;
    font-weight: bold !important;
    color: #fff !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

.tpi-quantity-wrapper span {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    text-align: center !important;
}

/* Botón de añadir al carrito */
.tpi-buy-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--e-global-color-primary) !important;
    color: #fff !important;
    font-size: 14px !important; /* Ajustar tamaño del texto del botón */
    text-transform: none !important;
    text-decoration: none !important;
    padding: 2px 50px !important; /* Cambiar padding */
    border-radius: 15px !important; /* Cambiar border-radius */
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    gap: 10px !important; /* Separación entre icono y texto */
}

/* Texto y alineación del botón */
.tpi-buy-link span {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Icono del carrito dentro del botón */
.tpi-buy-link::before {
    content: '\1F6D2'; /* Unicode para el icono del carrito de compras */
    font-size: 18px !important;
}

/* Estilo personalizado para la descripción */
.custom-description {
    background-color: var(--e-global-color-secondary);
    font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
    padding: 2px 10px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
}

/* Estilo personalizado para la descripción */
.custom-description {
    background-color: #5eaa2c;
    font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
    padding: 2px 10px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
}

/* Forzar estilo personalizado para la descripción */
.custom-description {
    background-color: #5eaa2c !important;
    font-family: "DM Sans", Sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    padding: 2px 10px !important;
    border-radius: 10px !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Estilo para la descripción */
#tpi_descripcion, .tpi-description {
    background-color: #5eaa2c !important;
    font-family: "DM Sans", Sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    padding: 2px 10px !important;
    border-radius: 10px !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Estilo para el precio */
.tpi-price {
    font-size: 38px !important;
    font-weight: bold !important;
    color: #000000 !important;
}