/* ===== 100 Baht Shop Thailand - Custom CSS ===== */

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-price {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(227, 6, 19, 0.3); }
    50% { box-shadow: 0 0 15px rgba(227, 6, 19, 0.6); }
}

.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.animate-slide-up { animation: slideUp 0.5s ease-out; }

/* Product Cards - Promo style */
.product-card {
    transition: all 0.3s ease;
}
.product-card:hover {
    transform: translateY(-6px);
}
.product-card:hover .card-frame {
    box-shadow: 0 12px 40px rgba(227, 6, 19, 0.35);
}
.product-card .add-cart-btn {
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
}
.product-card:hover .add-cart-btn {
    opacity: 1;
    transform: translateY(0);
}
.product-card .product-img {
    transition: transform 0.5s ease;
}
.product-card:hover .product-img {
    transform: scale(1.08);
}
.card-frame {
    transition: box-shadow 0.3s ease;
    position: relative;
}
/* Corner decorations */
.card-frame::before,
.card-frame::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 215, 0, 0.6);
    z-index: 10;
    pointer-events: none;
}
.card-frame::before {
    top: 4px; left: 4px;
    border-right: none; border-bottom: none;
    border-radius: 8px 0 0 0;
}
.card-frame::after {
    bottom: 4px; right: 4px;
    border-left: none; border-top: none;
    border-radius: 0 0 8px 0;
}

/* Section header arrow shape */
.section-header-arrow {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

/* Toast Notification */
.cart-toast {
    animation: slideIn 0.3s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #E30613; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #C8102E; }

/* Hide scrollbar for deal links */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Quantity Input */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* Hero Slider */
.hero-slide {
    pointer-events: none;
}
.hero-slide.active,
.hero-slide:first-child {
    pointer-events: auto;
}

/* Line clamp */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Chat animations */
#live-chat {
    animation: slideUp 0.3s ease-out;
}

/* Mobile Bottom Menu safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Payment options */
.payment-option {
    transition: all 0.2s ease;
}

/* Red border sections */
.red-border-section {
    border: 2px solid rgba(227, 6, 19, 0.2);
    border-radius: 12px;
    padding: 12px;
    background: white;
}
.red-border-section:hover {
    border-color: rgba(227, 6, 19, 0.5);
}

/* Category cards with red icons */
.category-card {
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 640px) {
    .product-card .add-cart-btn {
        opacity: 1;
        transform: translateY(0);
    }
    .card-frame::before,
    .card-frame::after {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }
}

@media (max-width: 768px) {
    body > main {
        padding-bottom: 0.5rem;
    }
}