/* ═══════════════════════════════════════════ */
/* BASE STYLES                                 */
/* ═══════════════════════════════════════════ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════ */
/* SELECTION STYLES                            */
/* ═══════════════════════════════════════════ */

::selection {
    background-color: rgba(22, 163, 74, 0.15);
    color: inherit;
}

/* ═══════════════════════════════════════════ */
/* HERO PLACEHOLDER                            */
/* ═══════════════════════════════════════════ */

.hero-placeholder {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
}

.dark .hero-placeholder {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%);
}

.hero-placeholder .hero-placeholder-content {
    display: flex !important;
}

/* ═══════════════════════════════════════════ */
/* SCROLL ANIMATIONS                           */
/* ═══════════════════════════════════════════ */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════ */
/* NAVBAR STYLES                               */
/* ═══════════════════════════════════════════ */

nav {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

nav.scrolled {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

/* ═══════════════════════════════════════════ */
/* PAGE LOADER                                 */
/* ═══════════════════════════════════════════ */

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

.dark #page-loader {
    background-color: #020617;
}

.loader-spinner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(#16a34a, #22c55e, #16a34a);
    animation: spin 0.8s linear infinite;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-content {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark .loader-content {
    background-color: #020617;
}

.loader-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

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

/* ═══════════════════════════════════════════ */
/* SMOOTH HOVER TRANSITIONS                    */
/* ═══════════════════════════════════════════ */

a, button {
    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* ═══════════════════════════════════════════ */
/* CUSTOM SCROLLBAR                            */
/* ═══════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

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

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

/* ═══════════════════════════════════════════ */
/* FAQ ACCORDION                               */
/* ═══════════════════════════════════════════ */

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

.faq-icon {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-icon-open {
    transform: rotate(45deg);
    background-color: #dcfce7 !important;
}

.dark .faq-icon-open {
    background-color: rgba(22, 101, 52, 0.4) !important;
}

.faq-icon-open svg {
    color: #16a34a !important;
}

.faq-item-open {
    border-color: #bbf7d0 !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

.dark .faq-item-open {
    border-color: #166534 !important;
}

/* ═══════════════════════════════════════════ */
/* RTL SUPPORT OVERRIDES                       */
/* ═══════════════════════════════════════════ */

[dir="rtl"] .lg\:text-left {
    text-align: right;
}

[dir="rtl"] .lg\:justify-start {
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════ */
/* INFINITE SCROLL ANIMATION                   */
/* ═══════════════════════════════════════════ */

@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.animate-infinite-scroll {
    animation: infinite-scroll 25s linear infinite;
}