/**
 * Minimalist Style - Haute Joaillerie & Fine Jewelry
 * Luxury Design System & Custom Components CSS
 * 
 * @package MinimalistStyle
 * @version 2.5.0
 */

/* ==========================================================================
   1. LUXURY COLOR PALETTE & DESIGN VARIABLES
   ========================================================================== */
:root {
    --gold-primary: #C5A880;
    --gold-dark: #9A7B3E;
    --gold-light: #E8D8C4;
    --gold-soft: #F9F5F0;
    --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #C5A880 50%, #F5E6BE 100%);
    --gold-metallic: linear-gradient(135deg, #ECC880 0%, #D4AF37 25%, #C5A880 50%, #B89758 75%, #F7E7B4 100%);
    
    --silver-primary: #D1D5DB;
    --silver-dark: #9CA3AF;
    --silver-light: #F3F4F6;
    --silver-metallic: linear-gradient(135deg, #FFFFFF 0%, #E5E7EB 30%, #CBD5E1 60%, #94A3B8 100%);

    --rose-gold-metallic: linear-gradient(135deg, #FAD0C4 0%, #E8A598 40%, #D88373 70%, #FCE4DC 100%);
    --white-gold-metallic: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 40%, #CBD5E1 70%, #FFFFFF 100%);
    --platinum-metallic: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 50%, #90A4AE 100%);
    
    --emerald-deep: #064E3B;
    --emerald-light: #059669;
    --emerald-glow: radial-gradient(circle, #10B981 0%, #064E3B 100%);

    --obsidian-900: #121212;
    --obsidian-800: #1A1A1A;
    --obsidian-700: #262626;
    --obsidian-600: #333333;
    
    --cream-surface: #FAF8F5;
    --cream-card: #FFFFFF;
    --stone-border: #E7E5E4;
}

/* ==========================================================================
   2. GLOBAL CURSORS & INTERACTION FIXES
   ========================================================================== */
button,
a,
input[type="submit"],
input[type="button"],
.trigger-size-guide,
#mobile-menu-toggle,
#close-mobile-nav,
#trigger-mini-cart,
.trigger-mini-cart,
.trigger-variation-drawer,
#site-header a,
#site-header button {
    cursor: pointer !important;
}

:root {
    --font-display: 'Playfair Display', 'Cinzel', 'Georgia', serif;
    --font-serif: 'Cormorant Garamond', 'Georgia', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --shadow-subtle: 0 4px 20px -2px rgba(26, 26, 26, 0.05);
    --shadow-luxury: 0 20px 40px -15px rgba(197, 168, 128, 0.2);
    --shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   2. BASE TYPOGRAPHY & SMOOTH RESETS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--obsidian-800);
    background-color: var(--cream-surface);
    overflow-x: hidden;
    line-height: 1.5;
}

h1, h2, h3, h4, .font-headline {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.font-serif-luxury {
    font-family: var(--font-serif);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F5F5F4;
}
::-webkit-scrollbar-thumb {
    background: #D6D3D1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A38047;
}

/* ==========================================================================
   3. VISUAL MATERIAL SWATCHES & GEMSTONE PILLS
   ========================================================================== */
.swatch-gold-18k {
    background: var(--gold-metallic) !important;
    border: 1px solid #D4AF37;
}

.swatch-white-gold {
    background: var(--white-gold-metallic) !important;
    border: 1px solid #CBD5E1;
}

.swatch-rose-gold {
    background: var(--rose-gold-metallic) !important;
    border: 1px solid #E8A598;
}

.swatch-silver-925 {
    background: var(--silver-metallic) !important;
    border: 1px solid #94A3B8;
}

.swatch-steel,
.swatch-acero {
    background: linear-gradient(135deg, #E2E8F0 0%, #64748B 50%, #94A3B8 100%) !important;
    border: 1px solid #475569;
}

.swatch-platinum {
    background: var(--platinum-metallic) !important;
    border: 1px solid #90A4AE;
}

.card-mini-swatch {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.card-mini-swatch:hover {
    transform: scale(1.25);
}

.card-mini-swatch.active {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #1A1A1A;
    transform: scale(1.15);
}

/* Gemstone Shimmer Effects */
.gem-shimmer-emerald {
    background: radial-gradient(circle at 30% 30%, #34D399, #064E3B 80%);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.gem-shimmer-diamond {
    background: linear-gradient(135deg, #FFFFFF 0%, #E0F2FE 40%, #BAE6FD 80%, #FFFFFF 100%);
    box-shadow: 0 0 12px rgba(186, 230, 253, 0.45);
}

.gem-shimmer-sapphire {
    background: radial-gradient(circle at 30% 30%, #60A5FA, #1E3A8A 80%);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}

.gem-shimmer-ruby {
    background: radial-gradient(circle at 30% 30%, #F87171, #881337 80%);
    box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}

/* ==========================================================================
   4. PRODUCT CARD HOVER & LUXURY TRANSITIONS
   ========================================================================== */
.product-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08);
}

.product-image-container .secondary-img {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    position: absolute;
    inset: 0;
}

.product-image-container:hover .secondary-img {
    opacity: 1;
    transform: scale(1.04);
}

.product-image-container .main-img {
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-image-container:hover .main-img {
    transform: scale(1.04);
}

/* ==========================================================================
   5. INTERACTIVE RING SIZE GAUGE
   ========================================================================== */
.ring-gauge-circle {
    border: 2px dashed #C5A880;
    border-radius: 9999px;
    background: rgba(197, 168, 128, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.15s ease-out;
    box-shadow: inset 0 0 20px rgba(197, 168, 128, 0.15);
}

/* ==========================================================================
   6. 3D LUXURY CREDIT CARD SIMULATOR (CHECKOUT)
   ========================================================================== */
.luxury-card-simulator {
    perspective: 1000px;
    width: 100%;
    max-width: 360px;
    height: 215px;
    margin: 0 auto 20px auto;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

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

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
    background: linear-gradient(135deg, #1C1917 0%, #0C0A09 60%, #1A1A1A 100%);
    border: 1px solid rgba(197, 168, 128, 0.3);
    color: #FAF8F5;
}

.card-back {
    transform: rotateY(180deg);
    padding: 20px 0;
}

.card-chip {
    width: 44px;
    height: 32px;
    background: linear-gradient(135deg, #E8D8C4 0%, #C5A880 100%);
    border-radius: 6px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.card-magnetic-stripe {
    width: 100%;
    height: 40px;
    background: #000000;
    margin-bottom: 20px;
}

.card-cvv-band {
    background: #FAF8F5;
    color: #1A1A1A;
    font-family: monospace;
    font-size: 13px;
    text-align: right;
    padding: 6px 12px;
    margin: 0 20px;
    border-radius: 4px;
}

/* ==========================================================================
   7. MODALS, OFFCANVAS DRAWERS & MOBILE MENU ENGINE
   ========================================================================== */
.drawer-backdrop,
#mini-cart-backdrop,
#mobile-nav-drawer,
#quick-view-modal,
#size-guide-modal,
#cod-fast-checkout-modal {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-backdrop.active,
#mini-cart-backdrop.active,
#mobile-nav-drawer.active,
#quick-view-modal.active,
#size-guide-modal.active,
#cod-fast-checkout-modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important;
}

#mini-cart-drawer-panel {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#mini-cart-drawer-panel.active,
#mini-cart-backdrop.active #mini-cart-drawer-panel {
    transform: translateX(0) !important;
}

#mobile-nav-content {
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-nav-content.active,
#mobile-nav-drawer.active #mobile-nav-content {
    transform: translateX(0) !important;
}

#mobile-nav-scroll-area {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

.mobile-filter-scroll {
    scrollbar-width: thin;
    scrollbar-color: #E8D8C4 transparent;
}

.mobile-filter-scroll::-webkit-scrollbar {
    height: 3px;
}

.mobile-filter-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-filter-scroll::-webkit-scrollbar-thumb {
    background: #D4AF37;
    border-radius: 9999px;
}

#site-header {

    background-color: #FFFFFF !important;
    isolation: isolate !important;
    z-index: 50 !important;
}

#quick-view-dialog,
#size-guide-dialog,
#cod-modal-dialog {
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#quick-view-modal.active #quick-view-dialog,
#size-guide-modal.active #size-guide-dialog,
#cod-fast-checkout-modal.active #cod-modal-dialog {
    transform: scale(1) !important;
}

/* Toast Container */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.luxury-toast {
    background: #1A1A1A;
    color: #FAF8F5;
    border-left: 3px solid #C5A880;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile Sticky Bottom Nav */
@media (max-width: 768px) {
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid #E7E5E4;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 8px 4px 12px 4px;
    }
}

@media (min-width: 769px) {
    .mobile-bottom-bar {
        display: none;
    }
}

/* ==========================================================================
   8. VARIATION DRAWER / SELECCIÓN RÁPIDA DE OPCIONES
   ========================================================================== */
#minimalistyle-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#minimalistyle-drawer-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

#minimalistyle-variation-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100%) !important;
    width: 100% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
    max-height: 85vh !important;
    background-color: #FFFFFF !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25) !important;
    z-index: 99999 !important;
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
    overflow-x: hidden !important;
}

/* Botones dentro del variation drawer (Añadir a la bolsa / Comprar ahora) */
#drawer-submit-add,
#drawer-submit-buy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 13px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#minimalistyle-variation-drawer.active {
    transform: translateX(-50%) translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Pastillas interactivas de tallas / variaciones */
.drawer-pill-select {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background-color: #FAF8F5;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.drawer-pill-select:hover {
    border-color: #C5A880;
    background-color: #FFFFFF;
    color: #1A1A1A;
}

.drawer-pill-select.selected-pill {
    border-color: #1A1A1A !important;
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#drawer-submit-add,
#drawer-submit-buy {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

#drawer-submit-add {
    border: 1.5px solid #C5A880;
    color: #9A7B3E;
    background: transparent;
}

#drawer-submit-add:hover:not(:disabled) {
    background: #FAF8F5;
    border-color: #9A7B3E;
}

#drawer-submit-buy {
    background: #1A1A1A;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#drawer-submit-buy:hover:not(:disabled) {
    background: #9A7B3E;
    box-shadow: 0 6px 16px rgba(154, 123, 62, 0.3);
}