/* ==========================================
   APP SHELL & SPA NAVIGATION
   ========================================== */
#app-loading{position:fixed;top:0;left:0;width:100%;height:100%;background:white;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .3s,visibility .3s;}
#app-loading.hidden{opacity:0;visibility:hidden;}
.app-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--black);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

#app-content{opacity:1;transition:opacity .25s ease;}
#app-content.transitioning{opacity:0;}

/* Toast notifications */
.toast-container{position:fixed;top:90px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{pointer-events:auto;background:var(--black);color:white;padding:14px 20px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.2);transform:translateX(120%);transition:transform .35s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;gap:10px;max-width:340px;}
.toast.show{transform:translateX(0);}
.toast.success{background:#1a7e3b;}
.toast.error{background:#c0392b;}
.toast.info{background:#2c3e50;}
.toast-close{background:none;border:none;color:white;font-size:16px;cursor:pointer;margin-left:auto;opacity:.6;padding:0 0 0 8px;}
.toast-close:hover{opacity:1;}

/* Mobile bottom nav */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;width:100%;background:white;border-top:1px solid var(--border);z-index:999;padding:6px 0 env(safe-area-inset-bottom,8px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:center;}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;font-size:9px;font-weight:600;color:#999;text-decoration:none;transition:.2s;position:relative;min-width:56px;}
.bottom-nav a .nav-icon{font-size:20px;line-height:1;transition:.2s;}
.bottom-nav a.active{color:var(--black);}
.bottom-nav a.active .nav-icon{transform:scale(1.15);}
.bottom-nav .cart-badge-mobile{position:absolute;top:0;right:8px;background:var(--accent-dark);color:white;font-size:8px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;font-weight:700;}

/* Cart badge pulse */
@keyframes badgePulse{0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}
.badge-pulse{animation:badgePulse .3s ease;}

/* Smooth hover lift */
.lift-hover{transition:transform .25s,box-shadow .25s;}
.lift-hover:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08);}

/* Quick action buttons (wishlist, add to cart) */
.ajax-btn{transition:transform .2s,background .2s;}
.ajax-btn:active{transform:scale(.95);}

/* Haptic feedback simulation */
@keyframes haptic{0%,100%{transform:translateX(0);}25%{transform:translateX(-2px);}75%{transform:translateX(2px);}}
.haptic{animation:haptic .15s ease;}

/* Product card quick-add overlay */
.product-quick-add{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:.3s;display:flex;gap:8px;}
.product-card:hover .product-quick-add{opacity:1;}
.product-quick-add .btn{min-height:38px;font-size:11px;flex:1;}

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* iOS-style pull to refresh indicator */
@keyframes refreshSpin{to{transform:rotate(360deg);}}

/* Bottom sheet modal */
.bottom-sheet-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10001;opacity:0;visibility:hidden;transition:.3s;}
.bottom-sheet-overlay.show{opacity:1;visibility:visible;}
.bottom-sheet{position:fixed;bottom:0;left:0;width:100%;max-height:85vh;background:white;border-radius:20px 20px 0 0;z-index:10002;transform:translateY(100%);transition:transform .4s cubic-bezier(.175,.885,.32,1.275);overflow-y:auto;padding:0 env(safe-area-inset-bottom,20px);}
.bottom-sheet-overlay.show .bottom-sheet{transform:translateY(0);}
.bottom-sheet-handle{width:36px;height:4px;background:#ddd;border-radius:2px;margin:12px auto 8px;}
.bottom-sheet-header{padding:8px 24px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.bottom-sheet-header h3{font-size:17px;letter-spacing:-0.5px;}
.bottom-sheet-body{padding:20px 24px;}

/* Tab bar style page indicators */
.tab-indicator{position:absolute;bottom:0;height:2px;background:var(--black);transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);}

/* Number stepper */
.qty-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.qty-stepper button{width:36px;height:36px;border:none;background:var(--light);font-size:16px;font-weight:700;cursor:pointer;transition:.2s;}
.qty-stepper button:active{background:var(--border);}
.qty-stepper input{width:40px;text-align:center;border:none;font-size:14px;font-weight:700;border-left:1px solid var(--border);border-right:1px solid var(--border);}

/* Swipe-to-delete hint */
.swipe-hint{color:#dc3545;font-size:11px;font-weight:600;opacity:0;transition:.2s;}
.swipe-item:hover .swipe-hint{opacity:1;}

/* Progress indicator for checkout */
.progress-bar{display:flex;align-items:center;gap:0;margin-bottom:30px;}
.progress-step{flex:1;text-align:center;position:relative;padding-top:30px;}
.progress-step::before{content:'';position:absolute;top:8px;left:0;right:0;height:2px;background:var(--border);}
.progress-step:first-child::before{left:50%;}
.progress-step:last-child::before{right:50%;}
.progress-step.active::before,.progress-step.done::before{background:var(--black);}
.progress-step .step-dot{width:16px;height:16px;border-radius:50%;background:var(--border);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;transition:.3s;}
.progress-step.active .step-dot{background:var(--black);box-shadow:0 0 0 4px rgba(16,16,16,.15);}
.progress-step.done .step-dot{background:var(--black);}
.progress-step span{font-size:10px;font-weight:700;color:#999;}
.progress-step.active span,.progress-step.done span{color:var(--black);}

@media(max-width:1000px){
    .bottom-nav{display:block;}
    body{padding-bottom:70px;}
    .toast-container{top:auto;bottom:80px;right:12px;left:12px;}
    .toast{max-width:100%;}
}

@media(max-width:700px){
    .toast{font-size:12px;padding:12px 16px;}
}