/* Developed by FarhanSMM */
:root {
    --primary-color: #0EA5E9;
    --primary-hover: #0284C7;
    --primary-dark: #0369A1;
    --primary-light: #38BDF8;
    --primary-soft: #F0F9FF;
    --primary-border: #7DD3FC;
    --primary-rgb: 14, 165, 233;
    --primary-glow: rgba(14, 165, 233, 0.25);
    --bg-light: #F8FAFC;
    --card-light: #FFFFFF;
    --border-light: #E2E8F0;
    --text-primary-light: #0F172A;
    --text-muted-light: #64748B;
}

body {
    background-color: #F8FAFC !important;
    color: #1E293B !important;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.font-display {
    font-family: 'Inter', -apple-system, sans-serif;
}

.site-title-font {
    font-family: 'Bungee', 'Archivo Black', 'Arial Black', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.08 !important;
    display: inline-block;
    background: linear-gradient(180deg, var(--primary-color) 0%, #1E293B 48%, var(--primary-hover) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.1px var(--primary-dark, #0284C7);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(0 2px 5px var(--primary-glow));
}

html.theme-dark .site-title-font {
    background: linear-gradient(180deg, var(--primary-light, #38BDF8) 0%, #0F172A 48%, var(--primary-color) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.1px rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

.star-gold {
    color: #F59E0B !important;
}

.star-empty {
    color: #CBD5E1 !important;
}

.gold-gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.gold-gradient-bg {
    background: var(--primary-color) !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    color: #FFFFFF !important;
}

.gold-gradient-bg,
.gold-gradient-bg *,
a.gold-gradient-bg,
button.gold-gradient-bg {
    color: #FFFFFF !important;
}

.glass-panel,
.glass-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    color: #1E293B !important;
}

html:not(.theme-dark) main h1,
html:not(.theme-dark) main h2,
html:not(.theme-dark) main h3,
html:not(.theme-dark) main h4,
html:not(.theme-dark) .glass-card h1,
html:not(.theme-dark) .glass-card h2,
html:not(.theme-dark) .glass-card h3,
html:not(.theme-dark) .glass-card h4 {
    color: #0F172A !important;
}

.product-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 1.25rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color) !important;
    box-shadow: 0 14px 28px -6px var(--primary-glow) !important;
}

#hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%) !important;
}

#hero h1,
#hero h1 * {
    color: #0F172A !important;
}

#hero h1 .gold-gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#hero p {
    color: #475569 !important;
}

#why-us {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

#why-us h3,
#why-us .font-display {
    color: #0F172A !important;
}

#why-us p {
    color: #64748B !important;
}

#trials {
    background: #F8FAFC !important;
}

#trials h2,
#trials .font-display {
    color: #0F172A !important;
}

#trials select {
    background-color: #FFFFFF !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
}

#trials .filter-btn.active {
    background: var(--primary-soft, #F0F9FF) !important;
    color: #0F172A !important;
    border: 2px solid var(--primary-border, #7DD3FC) !important;
}

html.theme-dark #trials .filter-btn.active {
    background: var(--primary-glow) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--primary-color) !important;
}

#trials .filter-btn:not(.active) {
    background: #FFFFFF !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

#trials .filter-btn:not(.active):hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

header.sticky {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

header.sticky a {
    color: #334155 !important;
}

header.sticky a:hover {
    color: var(--primary-color) !important;
}

.text-gold-base {
    color: var(--primary-color) !important;
}

.bg-obsidian-dark,
.bg-obsidian-base {
    background-color: #F8FAFC !important;
}

.bg-obsidian-accent,
.bg-obsidian-light {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

#faq {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

#faq h2,
#faq .font-display,
#faq .faq-question {
    color: #0F172A !important;
}

#faq p {
    color: #64748B !important;
}

#faq .faq-card {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

#drawerMenu,
#mobileMenuDrawer {
    background-color: #FFFFFF !important;
    border-left: 1px solid #E2E8F0 !important;
    color: #0F172A !important;
}

#drawerMenu a,
#mobileMenuDrawer a {
    color: #334155 !important;
}

#drawerMenu a:hover,
#mobileMenuDrawer a:hover {
    background-color: #F1F5F9 !important;
    color: var(--primary-color) !important;
}

.ticker-wrap {
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    color: #475569 !important;
}

.ticker-wrap span {
    color: #334155 !important;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

html.theme-dark body {
    background-color: #080A0F !important;
    color: #E2E8F0 !important;
}

html.theme-dark .glass-card,
html.theme-dark .product-card {
    background: #0E121A !important;
    border: 1px solid var(--primary-glow) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.7) !important;
}

html.theme-dark header.sticky {
    background-color: rgba(8, 10, 15, 0.95) !important;
    border-bottom: 1px solid var(--primary-glow) !important;
}

html.theme-dark header.sticky a {
    color: #CBD5E1 !important;
}

html.theme-dark #hero {
    background: linear-gradient(180deg, #080A0F 0%, #0B0E17 100%) !important;
}

html.theme-dark #hero h1,
html.theme-dark #hero h1 * {
    color: #FFFFFF !important;
}

html.theme-dark #hero p {
    color: #94A3B8 !important;
}

html.theme-dark #trials {
    background: #080A0F !important;
}

html.theme-dark #trials h2 {
    color: #FFFFFF !important;
}

html.theme-dark #drawerMenu,
html.theme-dark #mobileMenuDrawer {
    background-color: #080A0F !important;
    border-left: 1px solid var(--primary-glow) !important;
    color: #FFFFFF !important;
}

html.theme-dark #drawerMenu a,
html.theme-dark #mobileMenuDrawer a {
    color: #CBD5E1 !important;
}

html.theme-dark input:not([type="checkbox"]):not([type="radio"]),
html.theme-dark textarea,
html.theme-dark select {
    background-color: #121622 !important;
    color: #FFFFFF !important;
    border-color: var(--primary-glow) !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

.overflow-x-auto > table {
    min-width: 620px !important;
    white-space: nowrap !important;
}

.card-wishlist-btn {
    transition: transform 0.2s ease, color 0.2s ease;
}

.card-wishlist-btn:hover {
    transform: scale(1.15);
}

.card-wishlist-btn.active i {
    font-weight: 900;
    color: #EF4444 !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 9999px;
}