/* ============================================
   get.bd — Custom Styles
   Bangladesh Green (#006A4E) & Red (#F42A41) Theme
   (Supplements TailwindCSS + Flowbite)
   ============================================ */

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

/* ---------- Scroll Behavior ---------- */
html {
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

section[id] {
    scroll-margin-top: 5rem;
}

/* ---------- Hero Decorative Orbs ---------- */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: float-orb 8s ease-in-out infinite;
    mix-blend-mode: screen;
    /* Better blending in dark mode */
}

/* Light mode adjustments for orbs */
html:not(.dark) .hero-orb {
    mix-blend-mode: multiply;
    /* Better blending in light mode */
    opacity: 0.15;
}

.hero-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 106, 78, 0.25) 0%, transparent 70%);
    top: -20%;
    right: -10%;
    animation-duration: 20s;
}

html:not(.dark) .hero-orb-1 {
    background: radial-gradient(circle, rgba(0, 106, 78, 0.1) 0%, transparent 70%);
}

.hero-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(244, 42, 65, 0.15) 0%, transparent 70%);
    bottom: -10%;
    left: -5%;
    animation-duration: 25s;
    animation-direction: reverse;
}

html:not(.dark) .hero-orb-2 {
    background: radial-gradient(circle, rgba(244, 42, 65, 0.08) 0%, transparent 70%);
}

/* Small floating particles */
.hero-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
    animation: float-particle 6s ease-in-out infinite;
}

.particle-1 {
    width: 6px;
    height: 6px;
    background: #34d399;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.particle-2 {
    width: 4px;
    height: 4px;
    background: #F42A41;
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.particle-3 {
    width: 8px;
    height: 8px;
    background: #006A4E;
    bottom: 30%;
    left: 10%;
    animation-delay: 4s;
}

@keyframes float-orb {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 10px);
    }
}

@keyframes float-particle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* ---------- Hero Gradient Backgrounds ---------- */
/* Light Mode: White to Very Pale Slate/Green */
.hero-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

/* Dark Mode: Deep Slate */
.dark .hero-gradient {
    background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

/* ---------- Search Bar Glow ---------- */
.search-glow:focus-within {
    border-color: #006A4E !important;
    box-shadow: 0 0 0 3px rgba(0, 106, 78, 0.2), 0 0 30px rgba(0, 106, 78, 0.15);
}

/* ---------- Spinner ---------- */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Step Number Gradient ---------- */
.step-gradient {
    background: linear-gradient(135deg, #006A4E, #004a35);
    box-shadow: 0 4px 14px rgba(0, 106, 78, 0.3);
}

/* ---------- Card Hover Glow (Dark Mode) ---------- */
.dark .card-glow:hover {
    border-color: rgba(0, 106, 78, 0.3) !important;
    background: rgba(15, 23, 42, 0.6) !important;
    /* darker neutral bg */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ---------- Card Hover Glow (Light Mode) ---------- */
.card-glow:hover {
    border-color: rgba(0, 106, 78, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 106, 78, 0.08) !important;
}

/* ---------- Header CTA Gradient ---------- */
.header-cta-gradient {
    background: linear-gradient(135deg, #006A4E, #005a41);
}

/* ---------- Red accent gradient ---------- */
.red-gradient {
    background: linear-gradient(135deg, #F42A41, #d91e34);
}

/* ---------- Custom Select for Search ---------- */
/* Dark Mode Select Arrow (White) */
.dark .search-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Light Mode Select Arrow (Dark Gray) */
.search-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.dark .search-select option {
    background: #0f172a;
    color: #ffffff;
    padding: 8px;
}

.search-select option {
    background: #ffffff;
    color: #1f2937;
    padding: 8px;
}

/* ---------- View Transition API Animations ---------- */
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-bottom {
    from {
        transform: translateY(20px);
    }
}

@keyframes slide-to-top {
    to {
        transform: translateY(-20px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
            300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
    }

    ::view-transition-new(root) {
        animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
            300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-bottom;
    }

    /* Keep header stable if desired, but cross-fade usually looks cleaner for MPAs */
    /* ::view-transition-group(site-header) { animation-duration: 0s; } */
}

/* ---------- View Transition Fallback (Basic) ---------- */
@supports (view-transition-name: none) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        /* Default adjustments */
    }
}

/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-track {
    background: #020617;
}

.dark ::-webkit-scrollbar-thumb {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}