/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Marquee Animation for Notice Bar */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.animate-marquee {
    display: inline-block;
    animation: marquee 18s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* Hide Scrollbar Utility */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Soft Shadow for Cards */
.shadow-soft {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

/* Toast Notification System */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: #ffffff;
    border-left: 4px solid #3FAE72;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    padding: 14px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    transform: translateX(120%);
    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.toast.error {
    border-left-color: #ef4444;
}

@keyframes slideIn {
    to { transform: translateX(0); }
}

@keyframes slideOut {
    to { transform: translateX(120%); opacity: 0; }
}

/* Custom Radio Button Indicator */
.radio-indicator {
    transition: all 0.2s ease;
}
input[type="radio"]:checked + div .radio-indicator {
    border-color: #FF7A00;
}



.product-card {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.product-card img {
    border-bottom: 1px solid #f3f4f6;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popup-overlay { animation: fadeIn .25s ease; }
.popup-box { animation: popIn .35s cubic-bezier(.2,.8,.2,1); }
.popup-close { animation: fadeIn .4s ease .15s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.fade-up { animation: fadeUp .45s ease both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.product-card { transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.12); }
#heroImg { transition: opacity .4s ease; }

.support-chip {
    flex: 1 1 calc(33.33% - 8px);
    min-width: 108px;
    background: #F08C22;
    color: #fff;
    border-radius: 14px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 10px rgba(240,140,34,.18);
}
.support-chip small {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .9;
}
.support-ico {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    color: #F08C22;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}