/* Global Font */
body { font-family: 'Bree Serif', serif; background-color: #f8fafc; }
#home-sec, #account-sec, #tutorial-sec { font-family: 'Bree Serif', serif; }
.nav-gradient { background: white; color: #1e293b; }

/* Active Tab updated to Green */
.active-tab { color: #16a34a !important; }
.hidden { display: none !important; }
.font-en { font-family: 'Bree Serif', serif; }
.font-bn { font-family: 'Noto Serif Bengali', serif; }
.lang-auto { font-family: 'Bree Serif', serif; }
#home-sec .lang-auto { font-family: 'Bree Serif', serif; }
.lang-auto:lang(bn), .lang-auto:lang(bn-BD) { font-family: 'Noto Serif Bengali', serif; }

.notice-scroll { animation: scroll-left 15s linear infinite; display: inline-block; white-space: nowrap; }
@keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.method-card { transition: all 0.2s; border: 2px solid transparent; }
.method-card:active { transform: scale(0.95); }

@keyframes fadeInUp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.animate-fade-in { animation: fadeInUp 0.4s ease-out forwards; }

/* Product Card - Green Hover & Active State */
.product-card { background: white; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s ease; }
.product-card:hover { border-color: #86efac; } /* Light green hover */
.product-card.selected { border: 1.5px solid #16a34a; background-color: #f0fdf4; } /* Green selected border & bg */
.product-bullet { height: 12px; width: 12px; background-color: #e5e7eb; border-radius: 50%; margin-right: 8px; }
.product-card.selected .product-bullet { background-color: #16a34a; }

#fab-container.is-open #fab-toggler { background-color: #dc2626; }
#fab-container.is-open #fab-icon-open { transform: rotate(-180deg) scale(0); opacity: 0; }
#fab-container.is-open #fab-icon-close { transform: scale(1) rotate(0); opacity: 1; }
#fab-container.is-open #fab-options { transform: translateY(0); opacity: 1; pointer-events: auto; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aspect-video { aspect-ratio: 16 / 9; }

.step-transition { animation: slideInRight 0.3s ease-out forwards; }
@keyframes slideInRight { from { transform: translateX(10%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.theme-bkash { background-color: #e2136e !important; border-color: #e2136e !important; }
.theme-nagad { background-color: #f7941d !important; border-color: #f7941d !important; }
.theme-rocket { background-color: #8c3494 !important; border-color: #8c3494 !important; }

.text-theme-bkash { color: #e2136e !important; }
.text-theme-nagad { color: #f7941d !important; }
.text-theme-rocket { color: #8c3494 !important; }

.pay-option-card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; cursor: pointer; position: relative; transition: all 0.2s; }
.pay-option-card.selected { border: 2px solid #ef4444; }
.pay-option-card.selected::before { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 0; left: 0; background: #ef4444; color: white; font-size: 10px; padding: 2px 6px; border-bottom-right-radius: 6px; z-index: 10; }

/* Preloader Styles - Spinner updated to Green */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #f8fafc; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.4s ease;
}
.loader-spinner {
    border: 4px solid #e5e7eb; border-top: 4px solid #16a34a; /* Green spinner */
    border-radius: 50%; width: 40px; height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (min-width: 768px) {
    .dropdown-menu { transform-origin: top right; }
}