/* Custom styles for the clothing store will go here */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #ffffff !important; /* Fondo blanco principal */
    color: #212529 !important; /* Color de texto oscuro para tema claro */
}

main {
    flex: 1;
    background-color: #ffffff !important; /* Asegurar que el main también sea blanco */
}

/* Example: Style for product cards */
.card {
    background-color: #ffffff !important; /* Color de fondo blanco para cards */
    border-color: #dee2e6 !important; /* Color de borde claro para cards */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; /* Sombra sutil */
}

.card-title, .card-text {
    color: #212529 !important; /* Color de texto oscuro para el contenido de las cards */
}

.card-product-img {
    max-height: 200px;
    object-fit: cover;
}

#cart-count {
    font-size: 0.75em;
    padding: 0.2em 0.4em;
    vertical-align: top;
    background-color: #dc3545 !important; /* Rojo más visible */
    color: #ffffff !important;
    font-weight: 600;
}

/* Admin Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    padding: 56px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .125); /* Sombra más oscura para tema claro */
    overflow-y: auto;
    background-color: #f8f9fa !important; /* Fondo claro para el sidebar */
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 56px;
    padding-top: 0;
  }
}

.sidebar .list-group-item {
    border-radius: 0;
    background-color: #ffffff !important; /* Fondo de items blanco */
    color: #212529 !important; /* Texto de items oscuro */
    border-color: #dee2e6 !important; /* Borde de items claro */
}

.sidebar .list-group-item.active {
    z-index: 2;
    background-color: #0d6efd !important; /* Azul primario de Bootstrap para activo */
    color: #fff !important;
    border-color: #0d6efd !important;
}

.sidebar .list-group-item:hover {
    background-color: #f8f9fa !important; /* Un poco más claro al pasar el mouse */
}


/* Sidebar Styles */
#adminSidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    z-index: 1030;
    padding-top: 1rem;
    background-color: #1a1d20 !important; /* Un negro un poco más suave para el admin sidebar */
    border-right: 1px solid #343a40 !important; /* Borde oscuro */
    overflow-y: auto;
}


@media (max-width: 767.98px) {
  #adminSidebar {
    position: relative;
    width: 100%;
    height: auto;
    box-shadow: none;
    padding-top: 1rem;
    z-index: auto;
  }
  .admin-main-content {
    margin-left: 0 !important;
    padding-top: 1rem;
  }
}

#adminSidebar .list-group-item {
    border-radius: 0;
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

#adminSidebar .list-group-item.active {
    z-index: 2;
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}

#adminSidebar .list-group-item:hover {
    background-color: #f8f9fa !important;
}

/* Main content adjustments */
.admin-main-content {
    margin-left: 250px;
    padding: 1rem;
    padding-top: 1rem;
    transition: margin-left 0.2s ease-in-out;
    width: calc(100% - 250px);
    background-color: #000000 !important; /* Fondo negro para el contenido principal del admin */
    color: #dee2e6 !important;
}

/* Responsive adjustments for main content when sidebar is not fixed */
@media (max-width: 767.98px) {
    .admin-main-content {
        margin-left: 0;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Styling for the overall admin layout container if needed */
.admin-layout-container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

/* Otros elementos generales para tema oscuro */
.table {
    color: #dee2e6 !important;
    border-color: #495057 !important;
}
.table th, .table td {
    border-color: #495057 !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.05) !important; /* Color de stripe más sutil */
}
.table-hover>tbody>tr:hover>* {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075) !important; /* Hover más sutil */
}

.form-control {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #495057 !important;
    border-radius: 18px !important;
}
.form-control:focus {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #86b7fe !important; /* Color de foco de Bootstrap */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
.form-select {
    background-color: #ffffff !important;
    color: #333 !important;
    border-color: #dee2e6 !important;
}

.form-select option {
    background-color: #ffffff !important;
    color: #333 !important;
}

.btn-light { /* Para botones que eran claros, hacerlos oscuros y viceversa si es necesario */
    background-color: #343a40 !important;
    color: #dee2e6 !important;
    border-color: #495057 !important;
}
.btn-light:hover {
    background-color: #495057 !important;
    color: #fff !important;
}

/* Botones globales con esquinas más redondeadas */
.btn { border-radius: 14px !important; }
.btn-primary { border-radius: 16px !important; }

.modal-content {
    background-color: #212529 !important;
    color: #dee2e6 !important;
}
.modal-header {
    border-bottom-color: #495057 !important;
}
.modal-footer {
    border-top-color: #495057 !important;
}
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Para que el botón de cerrar sea visible en fondo oscuro */
}

.dropdown-menu {
    background-color: #212529 !important;
    border-color: #000000 !important;
}
.dropdown-item {
    color: #dee2e6 !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: #343a40 !important;
    color: #fff !important;
}
.dropdown-divider {
    border-top-color: #495057 !important;
}

.navbar-light .navbar-brand {
    color: #000000 !important; /* Texto del brand blanco */
}
.navbar-light .navbar-nav .nav-link {
    color: #242424 !important; /* Texto de links de navegación claro */
}
/* Navbar Light Theme Styles */
.navbar-light .navbar-nav .nav-link {
    color: #000000 ; /* Enlaces de navegación oscuros */
    font-weight: 600; /* Más peso para mejor visibilidad */
    transition: color 0.3s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #8f8f8f ; /* Color azul al pasar el mouse */
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: #b6b6b6 !important; /* Link activo azul */
}

.navbar-light .navbar-toggler {
    border-color: rgba(33, 37, 41, 0.1) !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown Styles for Light Theme */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item {
    color: #212529 !important;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #0d6efd !important;
}

/* Header Brand Improvements */
.navbar-brand:hover {
    text-decoration: none;
    color: #0d6efd !important;
}

/* Icon Improvements */
.nav-link i {
    color: #212529 !important; /* Iconos más oscuros */
    transition: color 0.3s ease;
}

.nav-link:hover i {
    color: #8f8f8f !important;
}

/* Badge del carrito más visible */
.badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Dropdown toggle arrow */
.dropdown-toggle::after {
    color: #212529 !important;
}

/* Mejoras adicionales para navegación */
.navbar-nav .dropdown-menu {
    margin-top: 0.5rem;
}

/* Estilo para el brand hover */
.navbar-brand span:hover {
    color: #495057 !important;
    transition: color 0.3s ease;
}

/* ===================== */
/* Botones flotantes     */
/* ===================== */
.scroll-top-btn{
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 1080;
    border-radius: 50%;
    width: 48px; height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.scroll-top-btn i{ font-size: 1.25rem; }
.scroll-top-btn.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 575.98px){ .scroll-top-btn{ right: 10px; bottom: 12px; width: 44px; height: 44px; } }

.whatsapp-btn{
    position: fixed;
    right: 14px;
    bottom: 72px; /* encima del scroll-top */
    z-index: 1080;
    border-radius: 50%;
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366; /* color oficial WhatsApp */
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    text-decoration: none;
}
.whatsapp-btn i{ font-size: 1.6rem; line-height: 1; }
.whatsapp-btn:hover{ filter: brightness(0.95); }
@media (max-width: 575.98px){ .whatsapp-btn{ right: 10px; bottom: 64px; width: 48px; height: 48px; } .whatsapp-btn i{ font-size: 1.4rem; } }

/* ===================== */
/* Auth (login/register) */
/* ===================== */
.auth-card, .login-card { /* alias para compatibilidad */
    border: 0;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    background: #ffffff;
}
.auth-tabs, .login-tabs { display:flex; gap:28px; justify-content:center; }
.auth-tabs .tab, .login-tabs .tab {
    position:relative; text-decoration:none; color:#6c757d; font-weight:600;
}
.auth-tabs .tab[href], .login-tabs .tab[href] { cursor:pointer; }
.auth-tabs .tab.active, .login-tabs .tab.active { color:#212529; }
.auth-tabs .tab.active::after, .login-tabs .tab.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; margin:auto; width:64px; height:3px; background: var(--bs-primary);
    border-radius: 999px;
}
.auth-input, .login-input {
    border-radius: 999px !important;
    height: 48px;
    padding-left: 14px;
    border: 1px solid #e1e5ea;
    background-color:#fff;
}
.auth-input:focus, .login-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(13,110,253, .15);
}
.auth-btn, .login-btn, .btn.auth-btn {
    border-radius: 999px !important;
    --bs-btn-border-radius: 999px;
    padding: 12px 18px;
    font-weight: 600;
    color: #fff !important;
    background: var(--bs-primary) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(13,110,253, .25);
}
.auth-btn:hover, .login-btn:hover { filter: brightness(0.95); box-shadow: 0 10px 22px rgba(13,110,253,.3); }
.auth-btn:active, .login-btn:active { transform: translateY(1px); }
.login-page .form-label, .register-page .form-label { font-weight:600; }