@import url('/static/vendor/fonts/fonts.css');

:root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
}

body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    background-color: #F8F9FB;
    color: #1D1D1F;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Layout loading indicator */
.htmx-indicator {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator,
body.htmx-request #page-loading-indicator {
    opacity: 1;
    pointer-events: auto;
}

/* Glassmorphism */
.ios-glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

/* Custom Scrolling */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animations */
@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.float-anim { animation: subtle-float 4s ease-in-out infinite; }

.active-press { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.active-press:active { transform: scale(0.92); }

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #1D1D1F 0%, #434345 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Shimmer Effect */
.shimmer-btn {
    position: relative;
    overflow: hidden;
}
.shimmer-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: 0.5s;
}
.shimmer-btn:hover::after { left: 100%; }

/* Product image placeholder shown before remote image data is fully loaded */
.product-image {
    background-color: #f3f4f6;
    background-image: url('/static/default-product.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}