/* KAORI CERÁMICA - DESIGN SYSTEM */

/* LENIS SMOOTH SCROLL OPTIMIZATION */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* BASE STYLES */
body { 
    background-color: #F2F0E9; 
    color: #0D0D0D; 
    overflow-x: hidden; 
    width: 100%;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* NAVBAR ULTRA ESTABLE (SIN ANIMACIONES) */
#navbar, header {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #F2F0E9; /* Solid Kaori Crema */
}

/* NOISE TEXTURE LAYER */
.noise { 
    position: fixed; 
    inset: 0; 
    pointer-events: none; 
    z-index: 100; 
    opacity: 0.04; 
    mix-blend-mode: overlay; 
}


/* NAVIGATION */
.glass-nav { 
    background: rgba(242, 240, 233, 0.7); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    border: 1px solid rgba(13, 13, 13, 0.04); 
}

/* BUTTONS & INTERACTIONS */
.btn-p { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
}

.btn-p span.fill { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #CC5833; 
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); 
    z-index: 0; 
}

.btn-p:hover span.fill { 
    transform: translateY(-100%); 
}

/* GLOBAL INTERACTION OPTIMIZATION (Anti-Visual Bugs Patch) */
* { 
    -webkit-user-drag: none !important; 
    -webkit-tap-highlight-color: transparent !important;
}

html {
    touch-action: manipulation;
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}

/* FIX: PUNTO / MARCA AL TOCAR EN MOBILE */
a, button, div, span, input {
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent !important;
}

a:active, button:active {
    outline: none !important;
    background-color: transparent !important;
    opacity: 0.8; /* Instant visual feedback without flickering */
}

/* MODAL / OVERLAY STABILITY */
[id$="-view"], [id$="-modal"], #mobile-menu, #cart-overlay {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    will-change: opacity;
}

[id$="-view"].active, [id$="-modal"].active, #mobile-menu.active {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9500 !important; /* Force on top of everything including bot */
}

#cart-overlay.open, #cart-overlay.active {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99000 !important; /* Ensure cart is always on the very top of other views */
}

#auth-overlay, #profile-overlay, #product-detail-overlay, #checkout-view {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

#mobile-menu {
    overflow: hidden !important;
}

body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Maintain accessibility for keyboard navigation */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid #CC5833 !important;
    outline-offset: 2px;
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

/* Prevent iOS auto-zoom on inputs */
input, textarea, select {
    font-size: 16px !important;
}

/* Stable images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    transform: translateZ(0);
}

/* Buttons without click flashes */
button {
    background-clip: padding-box;
    transform: translateZ(0);
}

h1, h2, h3, h4, h5, h6, p, li, span, .selectable {
    user-select: text !important;
    -webkit-user-select: text !important;
}

input, textarea, [contenteditable="true"] { 
    user-select: text !important; 
    -webkit-user-select: text !important;
    cursor: auto !important; 
}

/* INTERACTIVE LAYERS MANAGEMENT */
#sacred-view header, 
#sacred-view .absolute, 
.sacred-overlays, 
.blur-layer { 
    pointer-events: none !important; 
}

#sacred-view, 
#sacred-view .max-w-7xl, 
#sacred-view nav, 
#cart-drawer,
#p-modal {
    pointer-events: auto !important;
    cursor: default;
}

a, button, .p-trigger, .btn-p { 
    cursor: pointer !important; 
}

/* PURCHASE SYSTEM CRITICAL OVERRIDES */
.quantity-wrapper,
.quantity-wrapper button,
.quantity-wrapper input,
#add-to-cart-btn {
    pointer-events: auto !important;
    position: relative;
    z-index: 999 !important;
    cursor: pointer !important;
}

#qty-input { 
    cursor: text !important; 
    pointer-events: auto !important; 
}

#sacred-view { 
    overscroll-behavior: contain; 
    overflow-y: auto; 
}

#p-modal { 
    position: fixed; 
    inset: 0; 
    background: #F2F0E9; 
    z-index: 8000; 
    display: none; 
    overflow-y: auto; 
    overscroll-behavior-y: contain; 
    -webkit-overflow-scrolling: touch; 
}

/* CART DRAWER SYSTEM */
#cart-drawer { 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 100%; 
    max-width: 450px; 
    height: 100%; 
    background: #F2F0E9; 
    z-index: 9500; 
    transform: translateX(100%); 
    box-shadow: -20px 0 50px rgba(13, 13, 13, 0.05); 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#cart-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(13, 13, 13, 0.2); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    z-index: 9400; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.5s ease;
}

#cart-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#cart-drawer.open {
    transform: translateX(0) !important;
}

.cart-item { 
    border-bottom: 1px solid rgba(13, 13, 13, 0.05); 
    padding: 1.5rem 0; 
    display: flex; 
    gap: 1.5rem; 
    align-items: center; 
}

.cart-scroll { 
    flex: 1; 
    overflow-y: auto; 
    padding: 0 2rem; 
    scrollbar-width: none; 
}

.cart-scroll::-webkit-scrollbar { 
    display: none; 
}

.qty-btn { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    border: 1px solid rgba(13, 13, 13, 0.1); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 10px; 
    transition: all 0.3s ease; 
}

.qty-btn:hover { 
    background: #0D0D0D; 
    color: #F2F0E9; 
    border-color: #0D0D0D; 
}

/* CHECKOUT FORM VALIDATION */
.input-group { 
    position: relative; 
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
}

.input-group input { 
    transition: all 0.4s ease; 
    border: 1px solid transparent; 
}

.input-group.has-error input { 
    border-color: rgba(204, 88, 51, 0.3); 
    background: #FFF9F7; 
    box-shadow: 0 0 20px rgba(204, 88, 51, 0.05); 
}

.input-group.has-error .error-msg { 
    opacity: 1; 
    transform: translateY(0); 
}

.error-msg { 
    position: absolute; 
    bottom: -18px; 
    left: 16px; 
    color: #CC5833; 
    font-size: 8px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    opacity: 0; 
    transform: translateY(-5px); 
    transition: all 0.4s ease; 
    pointer-events: none; 
}

/* CHECKOUT STATUS OVERLAYS */
#checkout-status-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(242, 240, 233, 0.8); 
    backdrop-filter: blur(30px) saturate(180%); 
    -webkit-backdrop-filter: blur(30px) saturate(180%); 
    z-index: 10000; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); 
}

#checkout-status-overlay.active { 
    display: flex; 
    opacity: 1; 
}

.status-card { 
    max-width: 480px; 
    width: 90%; 
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 3rem;
    border-radius: 4rem;
    text-align: center;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.05);
}

.check-container { 
    width: 100px; 
    height: 100px; 
    margin: 0 auto 3rem; 
    position: relative; 
}

.check-circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: #CC5833; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transform: scale(0); 
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check-circle.animate { 
    transform: scale(1); 
}

.check-mark { 
    width: 40px; 
    height: 20px; 
    border-left: 4px solid white; 
    border-bottom: 4px solid white; 
    transform: rotate(-45deg) translateY(-5px) scale(0); 
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.check-mark.animate { 
    transform: rotate(-45deg) translateY(-5px) scale(1); 
}

/* AUTHENTICATION INPUTS */
.auth-input { 
    width: 100%; 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid rgba(13, 13, 13, 0.1); 
    padding: 1.5rem 0; 
    font-size: 14px; 
    font-weight: 500; 
    letter-spacing: -0.02em; 
    transition: all 0.4s ease; 
    outline: none; 
}

.auth-input:focus { 
    border-bottom-color: #CC5833; 
}

.auth-input::placeholder { 
    color: rgba(13, 13, 13, 0.2); 
    font-weight: 400; 
}

/* SPINNER */
.spinner-minimal {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(204, 88, 51, 0.1);
    border-top-color: #CC5833;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* PRELOADER ANIMATIONS */
.p-symbol {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: dash 3s ease-in-out forwards;
}

@keyframes dash {
    to { stroke-dashoffset: 0; }
}

.p-text {
    animation: reveal-text 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 1s;
}

@keyframes reveal-text {
    to { transform: translateY(0); }
}

/* FLUID UTILITIES */
.fluid-px { padding-left: var(--fluid-px, clamp(1.5rem, 5vw, 6rem)); padding-right: var(--fluid-px, clamp(1.5rem, 5vw, 6rem)); }
.fluid-py { padding-top: var(--fluid-py, clamp(4rem, 10vw, 12rem)); padding-bottom: var(--fluid-py, clamp(4rem, 10vw, 12rem)); }

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .status-card { padding: 1.5rem; border-radius: 2rem; width: 95%; }
    #cart-drawer { width: 100%; max-width: 100%; }
    .glass-nav { padding: 0.75rem 1.25rem; }
    #navbar { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .menu-scroll {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 3.5rem !important; }
    .btn-p { width: 100%; text-align: center; }
}

/* KAORI VIRTUAL ASSISTANT (BOT) STYLES */
#kaori-bot-container * { transition: all 0.3s ease; }
#kaori-chat-window.opacity-100 { pointer-events: auto !important; }
#bot-messages::-webkit-scrollbar { width: 4px; }
#bot-messages::-webkit-scrollbar-track { background: transparent; }
#bot-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 10px; }
#kaori-bot-trigger:hover { transform: scale(1.05) rotate(5deg); }
#kaori-bot-trigger:active { transform: scale(0.95); }
@media (max-width: 640px) { 
    #kaori-bot-container { bottom: 1rem; right: 1rem; } 
    #kaori-chat-window { width: calc(100vw - 2rem); bottom: 3.5rem; max-height: 60vh; border-radius: 2rem; }
    #kaori-chat-window .p-6 { padding: 1rem; }
    #bot-messages { max-height: 300px; padding: 1rem; }
    #bot-options { padding: 1rem; gap: 1.5px; }
    #bot-options button { padding: 0.65rem; font-size: 9px; }
}