.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } #mobile-drawer {
transition: transform 0.3s var(--jtag-ease, cubic-bezier(0.4, 0, 0.2, 1));
transform: translateX(100%);
}
#mobile-drawer.open {
transform: translateX(0);
}
#mobile-drawer-overlay {
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
}
#mobile-drawer-overlay.open {
opacity: 0.5;
pointer-events: auto;
} .slide-up-modal {
transition: transform 0.35s var(--jtag-ease, cubic-bezier(0.4, 0, 0.2, 1));
transform: translateY(100%);
}
.slide-up-modal.active {
transform: translateY(0);
}
.fade-in-overlay {
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
}
.fade-in-overlay.active {
opacity: 1;
pointer-events: auto;
} @keyframes pageSlideIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pageSlideOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-8px); }
}
@keyframes pageFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.page-enter {
animation: pageSlideIn 0.3s var(--jtag-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}
.page-fade-in {
animation: pageFadeIn 0.25s ease forwards;
} @keyframes story-ring {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.story-border-animated {
position: relative;
}
.story-border-animated::after {
content: '';
position: absolute;
top: -3px; left: -3px; right: -3px; bottom: -3px;
border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: var(--jtag-primary, #00897B);
border-bottom-color: var(--jtag-gold, #C5A059);
animation: story-ring 2s linear infinite;
pointer-events: none;
}
.story-viewed .story-border-animated::after {
border-top-color: #D1D5DB;
border-bottom-color: #D1D5DB;
animation: none;
} .glass-effect {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-dark-effect {
background: rgba(10, 17, 40, 0.8);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
} .chat-bubble-user {
border-radius: 12px 12px 2px 12px;
background-color: var(--jtag-primary, #00897B);
color: #FFFFFF;
}
.chat-bubble-admin {
border-radius: 12px 12px 12px 2px;
background-color: #FFFFFF;
color: var(--jtag-on-surface, #191C1B);
border: 1px solid rgba(0, 0, 0, 0.06);
} .skeleton-loader {
background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease infinite;
border-radius: 8px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
} .ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: "";
display: block;
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10);
opacity: 0;
transition: transform .5s, opacity 1s;
}
.ripple:active::after {
transform: scale(0);
opacity: .15;
transition: 0s;
} .otp-input-field,
.otp-input-field-desk {
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
box-sizing: border-box !important;
direction: ltr !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.otp-input-field:focus,
.otp-input-field-desk:focus {
border-color: var(--jtag-primary, #00897B) !important;
box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.15) !important;
outline: none !important;
} @keyframes flashPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.flash-sale-pulse {
animation: flashPulse 2s ease-in-out infinite;
}
@keyframes flashCountdown {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.flash-countdown-tick {
animation: flashCountdown 1s ease-in-out infinite;
} @keyframes spin {
to { transform: rotate(360deg); }
}
.ptr-spinner {
animation: spin 0.8s linear infinite;
}
.ptr-indicator {
transition: transform 0.2s ease, opacity 0.2s ease;
} @media (min-width: 768px) {
.product-card {
transition: transform 0.2s var(--jtag-ease, ease), box-shadow 0.2s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
}
} .nav-item {
position: relative;
transition: color 0.2s ease;
}
.nav-item.active::before {
content: '';
position: absolute;
top: 0;
left: 25%;
right: 25%;
height: 3px;
background: var(--jtag-primary, #00897B);
border-radius: 0 0 4px 4px;
} @keyframes slideshowFade {
0%, 33% { opacity: 1; }
40%, 93% { opacity: 0; }
100% { opacity: 1; }
} .video-control-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 60%);
} @keyframes badgeBounce {
0% { transform: scale(0); }
60% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.badge-animate {
animation: badgeBounce 0.35s var(--jtag-ease, ease) forwards;
} .category-chip {
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.category-chip:active {
transform: scale(0.95);
}
.category-chip.active {
background-color: var(--jtag-primary, #00897B);
color: #FFFFFF;
} .empty-state {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
} @media (min-width: 1024px) {
.desktop-only-shadow {
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
.desktop-sidebar {
position: sticky;
top: 80px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
} @keyframes slideUpBanner {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#pwa-ios-install-banner:not(.hidden),
#pwa-android-install-banner:not(.hidden) {
animation: slideUpBanner 0.4s var(--jtag-ease, ease) forwards;
} .safe-top { padding-top: env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-left { padding-left: env(safe-area-inset-left, 0); }
.safe-right { padding-right: env(safe-area-inset-right, 0); } .jtag-toast {
position: fixed;
bottom: 90px;
left: 50%;
transform: translateX(-50%) translateY(8px);
padding: 10px 24px;
border-radius: 9999px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2);
z-index: 99999;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap;
max-width: 90vw;
text-overflow: ellipsis;
overflow: hidden;
}
.jtag-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.jtag-toast.success { background: var(--jtag-primary, #00897B); color: #fff; }
.jtag-toast.error { background: var(--jtag-error, #BA1A1A); color: #fff; } .dir-ltr { direction: ltr; unicode-bidi: isolate; }
.dir-rtl { direction: rtl; unicode-bidi: isolate; } .jtag-spinner {
width: 36px; height: 36px;
border: 3px solid rgba(0, 137, 123, 0.2);
border-top-color: var(--jtag-primary, #00897B);
border-radius: 50%;
animation: spin 0.7s linear infinite;
} .discount-badge {
background: linear-gradient(135deg, #E65100, #FF8A65);
color: #fff;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
} .status-pending { color: #F59E0B; background: #FFFBEB; }
.status-confirmed { color: #0D9488; background: #F0FDFA; }
.status-shipped { color: #2563EB; background: #EFF6FF; }
.status-completed { color: #16A34A; background: #F0FDF4; }
.status-cancelled,
.status-refunded { color: #DC2626; background: #FEF2F2; }