/*
 * KD Beauty & Style - Rediseño Negro y Dorado
 * Paleta: Negro mármol + Oro elegante
 * Versión: 2.0
 */

/* ============================================
   VARIABLES - PALETA NEGRO Y DORADO
   ============================================ */
:root {
    --gold:          #C9A84C;
    --gold-light:    #D4B86A;
    --gold-dark:     #A8893A;
    --gold-shine:    #F0D080;
    --black:         #0a0a0a;
    --black-soft:    #111111;
    --black-card:    #161616;
    --black-hover:   #1e1e1e;
    --white:         #FFFFFF;
    --white-soft:    #F5F0E8;
    --gray-text:     #B0A090;
    --border-gold:   rgba(201, 168, 76, 0.35);
    --shadow-gold:   rgba(201, 168, 76, 0.15);
}


/* ============================================
   TODOS LOS BOTONES RECTANGULARES
   ============================================ */
button,
input[type="button"],
input[type="submit"],
.btn,
.cart-btn,
.btn-login,
.btn-register,
.btn-logout,
.btn-admin,
.filter-btn,
.add-to-cart-btn,
.checkout-btn,
.whatsapp-btn,
.btn-detail-add-cart,
.btn-detail-close,
.btn-aceptar,
.qty-btn,
.search-bar button {
    border-radius: 0 !important;
}

/* ============================================
   RESET GENERAL - FONDO NEGRO
   ============================================ */
body {
    background-color: var(--black) !important;
    color: var(--white-soft) !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* ============================================
   HEADER
   ============================================ */
header,
.header,
.navbar,
nav {
    background: rgba(10, 10, 10, 0.97) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    backdrop-filter: blur(10px);
}

.header-top {
    background: var(--black-soft) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.header-top i {
    color: var(--gold);
}

/* Logo */
.logo {
    color: var(--gold) !important;
}

.logo img {
    filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.4));
}

/* Barra de búsqueda */
.search-bar input {
    background: var(--black-card) !important;
    border: 1.5px solid var(--border-gold) !important;
    color: var(--white-soft) !important;
    border-radius: 50px !important;
}

.search-bar input::placeholder {
    color: var(--gray-text) !important;
}

.search-bar input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--shadow-gold) !important;
    outline: none;
}

.search-bar button {
    background: var(--gold) !important;
    color: var(--black) !important;
}

.search-bar button:hover {
    background: var(--gold-light) !important;
}

/* Botones header */
.cart-btn,
.btn-login,
.btn-register,
.btn-logout,
.btn-admin {
    background: transparent !important;
    color: var(--gold) !important;
    border: 1.5px solid var(--gold) !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

.cart-btn:hover,
.btn-login:hover,
.btn-register:hover {
    background: var(--gold) !important;
    color: var(--black) !important;
    box-shadow: 0 4px 15px var(--shadow-gold) !important;
}

.btn-logout {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}

.btn-logout:hover {
    background: #e74c3c !important;
    color: white !important;
}

.btn-admin {
    background: var(--gold) !important;
    color: var(--black) !important;
    border-color: var(--gold) !important;
    font-weight: 700 !important;
}

.cart-count {
    background: var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700;
}

/* ============================================
   HERO / BANNER
   ============================================ */
.hero,
.banner,
.hero-section {
    background: transparent !important;
    border-bottom: 1px solid var(--border-gold) !important;
    padding: 2rem 0 !important;
}

.hero h1,
.banner h1,
.hero-title,
.kd-main {
    color: var(--gold) !important;
    text-shadow: 0 0 30px rgba(201, 168, 76, 0.3) !important;
}

.hero h2,
.hero p,
.banner p,
.beauty-sub {
    color: var(--white-soft) !important;
}

/* ============================================
   LOGO CENTRADO SOBRE LOS FILTROS
   ============================================ */
.filters-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 0.5rem;
}

.filters-logo-wrapper img {
    width: 30%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    background: transparent !important;
    background-color: transparent !important;
    mix-blend-mode: normal;
    margin-bottom: 0;
    transition: transform 0.3s ease;
}

.filters-logo-wrapper img:hover {
    transform: scale(1.05);
}

/* ============================================
   NAVEGACIÓN DE FILTROS (CATEGORÍAS)
   ============================================ */
.filters {
    background: transparent !important;
    border-top: 1px solid var(--border-gold) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    padding: 0 !important;
}

.filter-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 0.75rem 1.5rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.filter-btn {
    background: transparent !important;
    color: var(--gold) !important;
    border: 1.5px solid var(--border-gold) !important;
    border-radius: 0 !important;
    padding: 0.55rem 1.2rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    transition: all 0.25s ease !important;
    white-space: nowrap;
    text-transform: uppercase;
}

.filter-btn:hover {
    background: var(--gold) !important;
    color: var(--black) !important;
    border-color: var(--gold) !important;
    transform: none !important;
    box-shadow: 0 2px 10px var(--shadow-gold) !important;
}

.filter-btn.active {
    background: var(--gold) !important;
    color: var(--black) !important;
    border-color: var(--gold) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 12px var(--shadow-gold) !important;
}

/* ============================================
   SECCIÓN DE PRODUCTOS
   ============================================ */
.products-section {
    padding: 3rem 0 !important;
    background: transparent !important;
}

.section-header h2 {
    color: var(--white-soft) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 2.2rem !important;
    text-align: center;
    letter-spacing: 1px;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0.75rem auto 0;
}

.section-header p {
    color: var(--gray-text) !important;
    text-align: center;
}

/* ============================================
   TARJETAS DE PRODUCTOS
   ============================================ */
.product-card {
    background: var(--black-card) !important;
    border: 1.5px solid #E8927C !important;
    border-radius: 0 !important;
    overflow: hidden;
    transition: all 0.4s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.product-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 12px 40px var(--shadow-gold) !important;
}

.product-image {
    background: var(--black-soft) !important;
    overflow: hidden;
}

.product-info {
    padding: 1.25rem !important;
    background: var(--black-card) !important;
}

.product-category {
    color: var(--gold) !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.product-name {
    color: var(--white-soft) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0.4rem 0 !important;
}

.product-description {
    color: var(--gray-text) !important;
    font-size: 0.85rem !important;
}

.product-footer {
    border-top: 1px solid var(--border-gold) !important;
    padding-top: 1rem !important;
    margin-top: 0.75rem !important;
}

.product-price {
    color: var(--gold) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif;
}

/* Botón agregar al carrito */
.add-to-cart-btn {
    background: transparent !important;
    color: var(--gold) !important;
    border: 1.5px solid var(--gold) !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.2rem !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

.add-to-cart-btn:hover {
    background: var(--gold) !important;
    color: var(--black) !important;
    box-shadow: 0 4px 15px var(--shadow-gold) !important;
    transform: scale(1.05) !important;
}

.add-to-cart-btn:disabled {
    border-color: #444 !important;
    color: #444 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Badges */
.product-badge,
.product-badge.destacado {
    background: var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    border-radius: 50px !important;
}

.product-badge.nuevo {
    background: #2d6a4f !important;
    color: white !important;
}

.product-badge.descuento {
    background: #c0392b !important;
    color: white !important;
}

/* ============================================
   MODAL CARRITO Y PRODUCTO
   ============================================ */
.modal-content {
    background: var(--black-card) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: 16px !important;
    color: var(--white-soft) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-gold) !important;
    color: var(--white-soft) !important;
}

.modal-header h2 {
    color: var(--gold) !important;
}

.close-modal {
    color: var(--gray-text) !important;
}

.close-modal:hover {
    color: var(--gold) !important;
}

.cart-item {
    background: var(--black-soft) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: 10px !important;
}

.cart-item-name {
    color: var(--white-soft) !important;
}

.cart-item-price {
    color: var(--gold) !important;
}

.cart-summary {
    background: var(--black-soft) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: 12px !important;
}

.cart-total {
    border-top: 1px solid var(--border-gold) !important;
    color: var(--white-soft) !important;
}

.cart-total-price {
    color: var(--gold) !important;
}

.checkout-btn {
    background: var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
}

.checkout-btn:hover {
    background: var(--gold-light) !important;
    box-shadow: 0 8px 25px var(--shadow-gold) !important;
}

.qty-btn {
    background: var(--black-card) !important;
    border: 2px solid var(--border-gold) !important;
    color: var(--gold) !important;
}

.qty-btn:hover {
    border-color: var(--gold) !important;
    background: var(--gold) !important;
    color: var(--black) !important;
}

/* Modal de detalle de producto */
.product-detail-category {
    color: var(--gold) !important;
}

.product-detail-name {
    color: var(--white-soft) !important;
}

.product-detail-price {
    color: var(--gold) !important;
}

.product-detail-description {
    color: var(--gray-text) !important;
}

.product-detail-meta {
    background: var(--black-soft) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: 10px !important;
}

.product-detail-meta-label {
    color: var(--gray-text) !important;
}

.product-detail-meta-value {
    color: var(--gold) !important;
}

.product-detail-meta-item {
    border-right-color: var(--border-gold) !important;
}

.btn-detail-add-cart {
    background: var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

.btn-detail-add-cart:hover {
    background: var(--gold-light) !important;
    box-shadow: 0 8px 25px var(--shadow-gold) !important;
}

.btn-detail-close {
    background: var(--black-soft) !important;
    border: 1px solid var(--border-gold) !important;
    color: var(--white-soft) !important;
    border-radius: 10px !important;
}

/* Variaciones */
.var-chip {
    background: var(--black-soft) !important;
    border-color: var(--border-gold) !important;
    color: var(--white-soft) !important;
}

.var-chip:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

.var-chip.selected,
.var-chip.active {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
}

.cantidad-select {
    background: var(--black-card) !important;
    border-color: var(--border-gold) !important;
    color: var(--white-soft) !important;
}

.cantidad-select:focus {
    border-color: var(--gold) !important;
}

/* ============================================
   FORMULARIO DE CHECKOUT
   ============================================ */
.form-group label {
    color: var(--gold) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea {
    background: var(--black-soft) !important;
    border: 1.5px solid var(--border-gold) !important;
    color: var(--white-soft) !important;
    border-radius: 8px !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray-text) !important;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--shadow-gold) !important;
    outline: none;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    background: var(--black-soft) !important;
    color: var(--gray-text) !important;
    border-top: 1px solid var(--border-gold) !important;
    margin-top: 4rem !important;
}

footer h3,
footer h4,
.footer-section h3 {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif !important;
    margin-bottom: 1rem !important;
}

footer p,
footer a,
.footer-section p,
.footer-section a {
    color: var(--gray-text) !important;
}

footer a:hover,
.footer-section a:hover {
    color: var(--gold) !important;
}

.footer-bottom {
    border-top: 1px solid var(--border-gold) !important;
    color: #555 !important;
    font-size: 0.8rem;
    padding-top: 1.5rem !important;
}

.social-links a {
    background: rgba(201, 168, 76, 0.1) !important;
    border: 1px solid var(--border-gold) !important;
    color: var(--gold) !important;
    transition: all 0.3s ease !important;
}

.social-links a:hover {
    background: var(--gold) !important;
    color: var(--black) !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   NOTIFICACIÓN
   ============================================ */
.notification {
    background: var(--black-card) !important;
    border: 1px solid var(--gold) !important;
    border-left: 4px solid var(--gold) !important;
    color: var(--white-soft) !important;
    box-shadow: 0 4px 20px var(--shadow-gold) !important;
    border-radius: 10px !important;
}

.notification i {
    color: var(--gold) !important;
}

/* ============================================
   MODAL LEGAL
   ============================================ */
.modal-legal-content {
    background: var(--black-card) !important;
    border: 1px solid var(--border-gold) !important;
}

.modal-legal-header {
    background: var(--black-card) !important;
    border-bottom: 1px solid var(--border-gold) !important;
}

.modal-legal-header h2 {
    color: var(--gold) !important;
}

.modal-legal-body {
    background: var(--black-card) !important;
    color: var(--gray-text) !important;
}

.modal-legal-body h3 {
    color: var(--gold) !important;
}

.modal-legal-footer {
    background: var(--black-card) !important;
    border-top: 1px solid var(--border-gold) !important;
}

.btn-aceptar {
    background: var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
}

.btn-aceptar:hover {
    background: var(--gold-light) !important;
    box-shadow: 0 4px 15px var(--shadow-gold) !important;
}

.close-legal {
    color: var(--gray-text) !important;
}

.close-legal:hover {
    color: var(--gold) !important;
}

/* Scrollbar dorado */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--black-soft);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .filter-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.82rem !important;
    }

    .product-price {
        font-size: 1.3rem !important;
    }

    .section-header h2 {
        font-size: 1.8rem !important;
    }
}