/* Custom global overrides and premium space-tech styles */

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

/* ============================================================
   MOBILE BOTTOM TAB BAR (PREMIUM SPACE-TECH GLASSMORPHISM)
   ============================================================ */

@media (max-width: 991.98px) {
    body {
        padding-bottom: 72px !important; /* Space for the fixed bottom tab bar */
    }
}

.mobile-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 1045;
    background: rgba(10, 10, 10, 0.8) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}

/* Light Mode Overrides for Mobile Tabs */
html:not(.dark) .mobile-tabs {
    background: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

/* Tab item base */
.mobile-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px 4px;
    position: relative;
}

html:not(.dark) .mobile-tab-item {
    color: rgba(0, 0, 0, 0.45);
}

.mobile-tab-item i {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.mobile-tab-item span {
    line-height: 1;
    letter-spacing: 0.2px;
}

.mobile-tab-item:active {
    transform: scale(0.9);
}

/* Active state - Space-tech Neon Green */
.mobile-tab-item.active {
    color: #39ff14 !important;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

html:not(.dark) .mobile-tab-item.active {
    color: #128C7E !important; /* Elegant emerald/teal for light mode active */
    text-shadow: none;
}

/* Active indicator dot */
.mobile-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px currentColor;
}

/* Elevated Shopping Center Tab */
.tab-carrito {
    position: relative;
}

.tab-carrito-bubble {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #39ff14, #128C7E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000 !important;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(57, 255, 20, 0.4);
    margin-top: -16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid #000;
}

html:not(.dark) .tab-carrito-bubble {
    background: linear-gradient(135deg, #128C7E, #25D366);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(18, 140, 126, 0.3);
    border-color: #fff;
}

.tab-carrito:active .tab-carrito-bubble {
    transform: scale(0.9) translateY(2px);
}

/* Off-canvas "Más" Drawer menu items */
.mobile-more-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

html:not(.dark) .mobile-more-tile {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.7);
    border-color: rgba(0, 0, 0, 0.05);
}

.mobile-more-tile:hover, .mobile-more-tile:active {
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.2);
    color: #39ff14;
}

html:not(.dark) .mobile-more-tile:hover, html:not(.dark) .mobile-more-tile:active {
    background: rgba(18, 140, 126, 0.08);
    border-color: rgba(18, 140, 126, 0.2);
    color: #128C7E;
}

.mobile-more-tile.active {
    background: rgba(57, 255, 20, 0.1);
    border-color: rgba(57, 255, 20, 0.3);
    color: #39ff14;
}

html:not(.dark) .mobile-more-tile.active {
    background: rgba(18, 140, 126, 0.1);
    border-color: rgba(18, 140, 126, 0.3);
    color: #128C7E;
}

/* ============================================================
   LIVE SEARCH RESULTS OVERRIDES
   ============================================================ */

.nav-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    margin-top: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    z-index: 1050;
    max-height: 340px;
    overflow-y: auto;
    transition: all 0.2s ease;
}

.nav-search-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.nav-search-item:hover {
    background: rgba(249, 115, 22, 0.12);
}

.nav-search-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 12px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-search-info {
    flex-grow: 1;
}

.nav-search-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.nav-search-price {
    color: #f97316;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.nav-search-empty {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #a1a1aa;
}

.nav-search-footer {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #f97316;
    background: rgba(249, 115, 22, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none !important;
}

.nav-search-footer:hover {
    background: rgba(249, 115, 22, 0.18);
}

/* Adaptabilidad de Tarjetas a Temas */
html[data-theme="light"] .feature-card,
html[data-theme="light"] .glass-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="rosita"] .feature-card,
html[data-theme="rosita"] .glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
    color: #831843 !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.1) !important;
}

/* ============================================================
   APARIENCIA Y TEMAS COMPLETOS (NAVBAR, DROPDOWNS, TABS & BODY)
   ============================================================ */

/* ------------------------------------------------------------
   1. MODO CLARO (Predeterminado)
   ------------------------------------------------------------ */
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] nav {
    background-color: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] nav a,
html[data-theme="light"] nav button,
html[data-theme="light"] nav i,
html[data-theme="light"] nav span {
    color: #334155 !important;
}
html[data-theme="light"] nav a:hover,
html[data-theme="light"] nav button:hover {
    color: #f97316 !important;
}
html[data-theme="light"] nav input {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] .nav-search-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .nav-search-name,
html[data-theme="rosita"] .nav-search-name {
    color: #09090b !important;
}

html[data-theme="light"] .nav-search-price,
html[data-theme="rosita"] .nav-search-price,
html[data-theme="light"] .nav-search-footer,
html[data-theme="rosita"] .nav-search-footer {
    color: #ea580c !important;
}

html[data-theme="light"] .nav-search-item,
html[data-theme="rosita"] .nav-search-item {
    border-bottom: 1px solid #f4f4f5 !important;
}

html[data-theme="light"] .nav-search-item:hover,
html[data-theme="rosita"] .nav-search-item:hover {
    background-color: #fff7ed !important;
}
html[data-theme="light"] .mobile-tabs {
    background: rgba(255, 255, 255, 0.92) !important;
    border-top-color: #e2e8f0 !important;
}
html[data-theme="light"] .mobile-tab-item {
    color: #64748b !important;
}
html[data-theme="light"] .mobile-tab-item.active {
    color: #ea580c !important;
    text-shadow: none !important;
}
html[data-theme="light"] .mobile-more-sheet {
    background-color: #ffffff !important;
    border-top-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .mobile-more-tile {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* ------------------------------------------------------------
   2. ROSITA (Rosa Femenino Vibrante)
   ------------------------------------------------------------ */
html[data-theme="rosita"] body {
    background: linear-gradient(135deg, #fff0f6 0%, #fce7f3 40%, #fbcfe8 100%) fixed !important;
    color: #701a75 !important;
}
html[data-theme="rosita"] nav {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%) !important;
    border-bottom: 1px solid rgba(236, 72, 153, 0.35) !important;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15) !important;
}
html[data-theme="rosita"] nav a,
html[data-theme="rosita"] nav button,
html[data-theme="rosita"] nav i,
html[data-theme="rosita"] nav span {
    color: #831843 !important;
}
html[data-theme="rosita"] nav a:hover,
html[data-theme="rosita"] nav button:hover {
    color: #be185d !important;
}
html[data-theme="rosita"] nav input {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #831843 !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
}
html[data-theme="rosita"] nav .absolute,
html[data-theme="rosita"] .nav-search-dropdown {
    background: #fdf2f8 !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
    color: #831843 !important;
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.2) !important;
}
html[data-theme="rosita"] nav .absolute a {
    color: #831843 !important;
}
html[data-theme="rosita"] nav .absolute a:hover,
html[data-theme="rosita"] .nav-search-item:hover {
    background-color: #fce7f3 !important;
    color: #be185d !important;
}
html[data-theme="rosita"] .mobile-tabs {
    background: rgba(253, 242, 248, 0.95) !important;
    border-top: 1px solid rgba(236, 72, 153, 0.35) !important;
    box-shadow: 0 -6px 25px rgba(236, 72, 153, 0.2) !important;
}
html[data-theme="rosita"] .mobile-tab-item {
    color: #9d174d !important;
}
html[data-theme="rosita"] .mobile-tab-item.active {
    color: #ec4899 !important;
    text-shadow: 0 0 12px rgba(236, 72, 153, 0.4) !important;
}
html[data-theme="rosita"] .mobile-more-sheet {
    background-color: #fdf2f8 !important;
    border-top: 1px solid rgba(236, 72, 153, 0.3) !important;
    color: #831843 !important;
}
html[data-theme="rosita"] .mobile-more-tile {
    background-color: #fce7f3 !important;
    border-color: rgba(236, 72, 153, 0.25) !important;
    color: #831843 !important;
}
html[data-theme="rosita"] .mobile-more-tile:hover {
    background-color: #fbcfe8 !important;
}

/* ------------------------------------------------------------
   3. VERDE OSCURO (Degradado Negro + Verde Neón)
   ------------------------------------------------------------ */
html[data-theme="dark-green"] body {
    background-color: #000000 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.14) 0%, transparent 65%) !important;
    color: #f4f4f5 !important;
}
html[data-theme="dark-green"] nav {
    background-color: #000000 !important;
    border-bottom-color: rgba(57, 255, 20, 0.2) !important;
}
html[data-theme="dark-green"] nav a,
html[data-theme="dark-green"] nav button,
html[data-theme="dark-green"] nav i,
html[data-theme="dark-green"] nav span {
    color: #d4d4d8 !important;
}
html[data-theme="dark-green"] nav a:hover,
html[data-theme="dark-green"] nav button:hover {
    color: #39ff14 !important;
}
html[data-theme="dark-green"] nav input {
    background-color: #18181b !important;
    color: #ffffff !important;
    border-color: #27272a !important;
}
html[data-theme="dark-green"] nav .absolute,
html[data-theme="dark-green"] .nav-search-dropdown {
    background-color: #09090b !important;
    border-color: rgba(57, 255, 20, 0.25) !important;
    color: #f4f4f5 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}
html[data-theme="dark-green"] nav .absolute a:hover,
html[data-theme="dark-green"] .nav-search-item:hover {
    background-color: rgba(57, 255, 20, 0.08) !important;
    color: #39ff14 !important;
}
html[data-theme="dark-green"] .mobile-tabs {
    background: rgba(10, 10, 10, 0.88) !important;
    border-top-color: rgba(57, 255, 20, 0.2) !important;
}
html[data-theme="dark-green"] .mobile-tab-item {
    color: rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="dark-green"] .mobile-tab-item.active {
    color: #39ff14 !important;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.3) !important;
}
html[data-theme="dark-green"] .mobile-more-sheet {
    background-color: #09090b !important;
    border-top-color: rgba(57, 255, 20, 0.2) !important;
    color: #f4f4f5 !important;
}
html[data-theme="dark-green"] .mobile-more-tile {
    background-color: #18181b !important;
    border-color: #27272a !important;
    color: #e4e4e7 !important;
}

/* ------------------------------------------------------------
   4. AZUL OSCURO (Degradado Negro + Azul Noche)
   ------------------------------------------------------------ */
html[data-theme="dark-blue"] body {
    background-color: #020617 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.22) 0%, transparent 70%), linear-gradient(180deg, #020617 0%, #000000 100%) !important;
    color: #f8fafc !important;
}
html[data-theme="dark-blue"] nav {
    background: linear-gradient(180deg, #020617 0%, #090d16 100%) !important;
    border-bottom: 1px solid rgba(2, 132, 199, 0.35) !important;
}
html[data-theme="dark-blue"] nav a,
html[data-theme="dark-blue"] nav button,
html[data-theme="dark-blue"] nav i,
html[data-theme="dark-blue"] nav span {
    color: #cbd5e1 !important;
}
html[data-theme="dark-blue"] nav a:hover,
html[data-theme="dark-blue"] nav button:hover {
    color: #38bdf8 !important;
}
html[data-theme="dark-blue"] nav input {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}
html[data-theme="dark-blue"] nav .absolute,
html[data-theme="dark-blue"] .nav-search-dropdown {
    background-color: #020617 !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.25) !important;
}
html[data-theme="dark-blue"] nav .absolute a:hover,
html[data-theme="dark-blue"] .nav-search-item:hover {
    background-color: rgba(2, 132, 199, 0.15) !important;
    color: #38bdf8 !important;
}
html[data-theme="dark-blue"] .mobile-tabs {
    background: rgba(2, 6, 23, 0.95) !important;
    border-top: 1px solid rgba(2, 132, 199, 0.3) !important;
}
html[data-theme="dark-blue"] .mobile-tab-item {
    color: #64748b !important;
}
html[data-theme="dark-blue"] .mobile-tab-item.active {
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}
html[data-theme="dark-blue"] .mobile-more-sheet {
    background-color: #020617 !important;
    border-top: 1px solid rgba(2, 132, 199, 0.3) !important;
    color: #f8fafc !important;
}
html[data-theme="dark-blue"] .mobile-more-tile {
    background-color: #0f172a !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    color: #e2e8f0 !important;
}

/* ------------------------------------------------------------
   5. MORADO OSCURO (Degradado Negro + Morado Eléctrico)
   ------------------------------------------------------------ */
html[data-theme="dark-purple"] body {
    background-color: #090314 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(147, 51, 234, 0.25) 0%, transparent 70%), linear-gradient(180deg, #090314 0%, #000000 100%) !important;
    color: #faf5ff !important;
}
html[data-theme="dark-purple"] nav {
    background: linear-gradient(180deg, #090314 0%, #110524 100%) !important;
    border-bottom: 1px solid rgba(147, 51, 234, 0.35) !important;
}
html[data-theme="dark-purple"] nav a,
html[data-theme="dark-purple"] nav button,
html[data-theme="dark-purple"] nav i,
html[data-theme="dark-purple"] nav span {
    color: #e9d5ff !important;
}
html[data-theme="dark-purple"] nav a:hover,
html[data-theme="dark-purple"] nav button:hover {
    color: #c084fc !important;
}
html[data-theme="dark-purple"] nav input {
    background-color: #18092a !important;
    color: #ffffff !important;
    border-color: rgba(147, 51, 234, 0.3) !important;
}
html[data-theme="dark-purple"] nav .absolute,
html[data-theme="dark-purple"] .nav-search-dropdown {
    background-color: #090314 !important;
    border-color: rgba(147, 51, 234, 0.35) !important;
    color: #faf5ff !important;
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.25) !important;
}
html[data-theme="dark-purple"] nav .absolute a:hover,
html[data-theme="dark-purple"] .nav-search-item:hover {
    background-color: rgba(147, 51, 234, 0.18) !important;
    color: #c084fc !important;
}
html[data-theme="dark-purple"] .mobile-tabs {
    background: rgba(9, 3, 20, 0.95) !important;
    border-top: 1px solid rgba(147, 51, 234, 0.3) !important;
}
html[data-theme="dark-purple"] .mobile-tab-item {
    color: #94a3b8 !important;
}
html[data-theme="dark-purple"] .mobile-tab-item.active {
    color: #c084fc !important;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.4) !important;
}
html[data-theme="dark-purple"] .mobile-more-sheet {
    background-color: #090314 !important;
    border-top: 1px solid rgba(147, 51, 234, 0.3) !important;
    color: #faf5ff !important;
}
html[data-theme="dark-purple"] .mobile-more-tile {
    background-color: #18092a !important;
    border-color: rgba(147, 51, 234, 0.25) !important;
    color: #f3e8ff !important;
}

/* Mobile-only hide utility */
@media (max-width: 639px) {
    .mobile-hide {
        display: none !important;
    }
}

/* Ensure object-contain utility always overrides cover in product cards */
img.object-contain {
    object-fit: contain !important;
}

/* ════════════════════════════════════════════════════════════════
   3D FLIP CARD ON DOUBLE CLICK SYSTEM
   ════════════════════════════════════════════════════════════════ */
.flip-card-3d {
    perspective: 1200px;
    user-select: none;
    touch-action: manipulation;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flip-card-3d.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
}

.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    background: #09090b;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

html[data-theme="rosita"] .flip-card-back {
    background: #2a081a;
    border-color: rgba(236, 72, 153, 0.3);
}

.dark .flip-card-back {
    background: #09090b;
    border-color: rgba(255, 255, 255, 0.15);
}