/* Recoverly premium polish layer — public frontend only.
   Complements recoverly-premium.css without changing routes or backend behaviour. */
:root {
  --r-focus: rgba(83, 77, 255, .34);
  --r-card-shadow: 0 18px 48px rgba(40, 43, 115, .08);
  --r-card-shadow-hover: 0 24px 62px rgba(45, 38, 135, .15);
  --r-accent-strong: #315cff;
  --r-gradient-rich: linear-gradient(118deg, #1768ff 0%, #5638f5 48%, #c72df4 78%, #00bddf 130%);
}
html[data-recoverly-theme="dark"] {
  --r-focus: rgba(137, 126, 255, .42);
  --r-card-shadow: 0 22px 60px rgba(0, 0, 0, .23);
  --r-card-shadow-hover: 0 26px 70px rgba(18, 10, 54, .42);
  --r-accent-strong: #8f91ff;
}
html { scroll-padding-top: 90px; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(101, 66, 255, .25); color: var(--r-text); }
:focus-visible { outline: 3px solid var(--r-focus) !important; outline-offset: 3px; }

/* Cohesive, premium surfaces across page templates. */
#navbar { border-bottom: 1px solid transparent; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease; }
#navbar.navbar-fixed { background: color-mix(in srgb, var(--r-surface-solid) 86%, transparent) !important; border-color: var(--r-border) !important; box-shadow: 0 12px 42px rgba(19, 23, 74, .08); }
html[data-recoverly-theme="dark"] #navbar.navbar-fixed { box-shadow: 0 12px 42px rgba(0,0,0,.24); }
#navbar nav a, #navbar nav button { font-weight: 600; letter-spacing: -.01em; }
#navbar nav a:hover, #navbar nav button:hover { color: var(--r-violet) !important; }
#navbar .bg-\[\#0f1115\], #navbar [class*="bg-[#0f1115]"], #navbar .bg-primary-dark { background: var(--r-surface-solid) !important; border-color: var(--r-border) !important; color: var(--r-text) !important; box-shadow: var(--r-card-shadow); }
#navbar .text-white, #mobile-menu .text-white { color: var(--r-text) !important; }
#navbar a[class*="bg-gradient"], #navbar .btn-hover-effect[class*="bg-gradient"], #mobile-menu a[class*="bg-gradient"] { color: #fff !important; background-image: var(--r-gradient-rich) !important; border: 0 !important; box-shadow: 0 10px 28px rgba(83, 55, 235, .23); }
#navbar .text-text-secondary, #mobile-menu .text-text-secondary { color: var(--r-muted) !important; }
#mobile-menu { background: color-mix(in srgb, var(--r-bg) 94%, transparent) !important; color: var(--r-text); }
#mobile-menu > div:first-child { border-color: var(--r-border) !important; }
#mobile-menu a:hover, #mobile-menu button:hover { color: var(--r-violet) !important; }
#lang-dropdown, #mobile-menu #lang-dropdown { border: 1px solid var(--r-border) !important; border-radius: 18px !important; box-shadow: var(--r-card-shadow); }

/* Hero areas: the gradient identity follows the logo, in either theme. */
main section#home { isolation: isolate; background: linear-gradient(180deg, var(--r-bg), var(--r-bg-soft)) !important; }
main section#home:after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 5%, rgba(76, 74, 255, .09), transparent 43%), radial-gradient(ellipse at 8% 54%, rgba(0, 188, 222, .055), transparent 28%), radial-gradient(ellipse at 92% 45%, rgba(205, 45, 245, .06), transparent 30%); }
main section#home > .container { z-index: 2; }
main section#home h1 { letter-spacing: -.055em; line-height: 1.02; }
main section#home h1 #typing-text { background-image: linear-gradient(105deg, #1768ff 0%, #663bfa 55%, #d12af1 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
html[data-recoverly-theme="dark"] main section#home h1 #typing-text { background-image: linear-gradient(105deg, #71a3ff 0%, #a193ff 52%, #ec7aff 100%) !important; }
main section#home .text-white:not([class*="text-transparent"]), main section#home .text-slate-200, main section#home .text-slate-300 { color: var(--r-text) !important; }
main section#home .text-text-secondary, main section#home .text-slate-400, main section#home .text-slate-500 { color: var(--r-muted) !important; }
main section#home .border-white\/5, main section#home .border-white\/10 { border-color: var(--r-border) !important; }
main section#home .bg-white\/5, main section#home .bg-white\/\[0\.02\], main section#home .bg-white\/\[0\.03\] { background: var(--r-surface) !important; border-color: var(--r-border) !important; }
main section#home .text-transparent.bg-clip-text.bg-gradient-to-b { background-image: linear-gradient(180deg, var(--r-text), color-mix(in srgb, var(--r-text) 58%, var(--r-violet))) !important; }
html[data-recoverly-theme="dark"] main section#home .text-transparent.bg-clip-text.bg-gradient-to-b { background-image: linear-gradient(180deg, #fff, rgba(230,231,255,.58)) !important; }

/* Interior page mastheads are brightened in light mode and richer in dark mode. */
main > section.min-h-\[45vh\] { background: linear-gradient(135deg, var(--r-bg-soft), var(--r-bg)) !important; }
main > section.min-h-\[45vh\] .text-white { color: var(--r-text) !important; }
main > section.min-h-\[45vh\] .text-text-secondary { color: var(--r-muted) !important; }
main > section.min-h-\[45vh\] .border-white\/10, main > section.min-h-\[45vh\] .border-white\/5 { border-color: var(--r-border) !important; }
main > section.min-h-\[45vh\] .bg-white\/\[0\.03\] { background: var(--r-surface) !important; }
main > section.min-h-\[45vh\] h1 span.text-transparent { background-image: linear-gradient(110deg, #1f62ff 0%, #7040f7 58%, #cc31ed 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html[data-recoverly-theme="dark"] main > section.min-h-\[45vh\] { background: radial-gradient(ellipse at 50% 5%, rgba(98, 63, 255, .18), transparent 62%), linear-gradient(145deg, #070817, #10112c) !important; }
html[data-recoverly-theme="dark"] main > section.min-h-\[45vh\] .text-white { color: #f7f8ff !important; }
html[data-recoverly-theme="dark"] main > section.min-h-\[45vh\] h1 span.text-transparent { background-image: linear-gradient(110deg, #8cb2ff 0%, #b1a1ff 58%, #ed8bff 100%) !important; }

/* Interactive cards, data panels, and product modules. */
main .card-hover-effect, main [class*="group/card"], main .glass-panel, main .feature-card, main .rounded-\[28px\], main .rounded-\[32px\] { transition: box-shadow .24s ease, border-color .24s ease, transform .24s ease, background-color .24s ease; }
main .card-hover-effect:hover, main .feature-card:hover { box-shadow: var(--r-card-shadow-hover); border-color: color-mix(in srgb, var(--r-violet) 36%, var(--r-border)) !important; }
main .rounded-\[28px\], main .rounded-\[32px\], main .rounded-3xl, main .rounded-2xl, main .rounded-xl { border-color: var(--r-border); }
main [class*="bg-[#0B0F1A]"], main [class*="bg-[#050505]"], main [class*="bg-[#0f1115]"], main [class*="bg-primary-dark"], main .bg-black\/40 { background-color: var(--r-surface-solid) !important; }
main .bg-white\/5, main .bg-white\/10, main .bg-white\/\[0\.02\], main .bg-white\/\[0\.03\], main .bg-white\/\[0\.04\] { background-color: var(--r-surface) !important; }
main .border-white\/5, main .border-white\/10, main .border-white\/\[0\.05\] { border-color: var(--r-border) !important; }
main .text-white:not(.text-transparent):not([class*="bg-gradient"]), main .text-slate-100, main .text-slate-200, main .text-slate-300 { color: var(--r-text) !important; }
main .text-slate-400, main .text-slate-500, main .text-text-secondary { color: var(--r-muted) !important; }
/* Preserve high-contrast white labels on all gradient/purple primary controls. */
main a[class*="bg-gradient"], main button[class*="bg-gradient"], main .btn-hover-effect, main .premium-btn, main .recoverly-primary, #navbar a[class*="bg-gradient"], #mobile-menu a[class*="bg-gradient"] { color: #fff !important; background-image: var(--r-gradient-rich) !important; border-color: transparent !important; }
main .bg-accent-primary, main .feature-icon-box.bg-accent-primary { color: #fff !important; }
main .text-accent-primary, main .text-indigo-400, main .text-violet-400 { color: var(--r-violet) !important; }
html[data-recoverly-theme="dark"] main .text-accent-primary, html[data-recoverly-theme="dark"] main .text-indigo-400, html[data-recoverly-theme="dark"] main .text-violet-400 { color: #a99aff !important; }

/* Inputs are clear, calm, and consistent on login, contact and other public forms. */
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), main select, main textarea { min-height: 46px; background: var(--r-surface-solid) !important; color: var(--r-text) !important; border: 1px solid var(--r-border) !important; border-radius: 14px !important; box-shadow: inset 0 1px 1px rgba(20, 20, 70, .02); }
main input::placeholder, main textarea::placeholder { color: var(--r-muted) !important; opacity: .78; }
main input:focus, main select:focus, main textarea:focus { border-color: var(--r-violet) !important; box-shadow: 0 0 0 4px var(--r-focus) !important; }
main input[type="checkbox"], main input[type="radio"] { accent-color: #6d42f5; }

/* Market tables and long content remain usable on narrow screens. */
main .overflow-x-auto { max-width: 100%; scrollbar-width: thin; scrollbar-color: rgba(110, 88, 230, .4) transparent; }
main table { color: var(--r-text); }
main thead { background: var(--r-bg-soft) !important; }
main th { color: var(--r-muted) !important; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
main td, main th { border-color: var(--r-border) !important; }
main tbody tr { transition: background .18s ease; }
main tbody tr:hover { background: rgba(111, 70, 246, .055) !important; }
main img { max-width: 100%; }

/* Footer and floating theme control. */
footer { background: linear-gradient(180deg, var(--r-bg-soft), var(--r-bg)) !important; color: var(--r-text) !important; border-color: var(--r-border) !important; }
footer .text-white, footer h1, footer h2, footer h3, footer h4 { color: var(--r-text) !important; }
footer .text-text-secondary { color: var(--r-muted) !important; }
footer .border-white\/5 { border-color: var(--r-border) !important; }
footer a:hover { color: var(--r-violet) !important; }
.recoverly-theme-toggle { min-height: 48px; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--r-violet) 24%, var(--r-border)); box-shadow: 0 12px 38px rgba(39, 30, 108, .14); }
.recoverly-theme-toggle .r-theme-icon { background: var(--r-gradient-rich); box-shadow: 0 4px 16px rgba(82, 57, 235, .27); }
html[data-recoverly-theme="light"] .r-icon-sun { display: none; }
html[data-recoverly-theme="light"] .r-icon-moon { display: block; }
html[data-recoverly-theme="dark"] .r-icon-sun { display: block; }
html[data-recoverly-theme="dark"] .r-icon-moon { display: none; }

/* Respect RTL languages and users who prefer reduced motion. */
html[dir="rtl"] #navbar nav, html[dir="rtl"] #mobile-menu nav { direction: rtl; }
html[dir="rtl"] .recoverly-theme-toggle { right: auto; left: 20px; }
@media (max-width: 640px) {
  main section#home { min-height: auto; padding-bottom: 3rem; }
  main section#home h1 { font-size: clamp(2.45rem, 11vw, 4.4rem); }
  main > section.min-h-\[45vh\] { min-height: 34vh; padding-bottom: 2.2rem; }
  main .container { padding-left: 1rem; padding-right: 1rem; }
  main td, main th { padding: .72rem .68rem; white-space: nowrap; }
  .recoverly-theme-toggle { right: 12px; bottom: 12px; min-height: 44px; }
  html[dir="rtl"] .recoverly-theme-toggle { left: 12px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.recoverly-brand-logo { filter: drop-shadow(0 3px 12px rgba(73, 61, 245, .12)); }
html[data-recoverly-theme="dark"] .recoverly-brand-logo { filter: drop-shadow(0 4px 16px rgba(77, 85, 255, .2)); }
/* Keep labels/icons white when they sit on vivid semantic/primary backgrounds. */
main a[class*="bg-gradient"] *, main button[class*="bg-gradient"] *, main .btn-hover-effect *, main .premium-btn * { color: #fff !important; }
main [class~="text-white"][class*="bg-indigo-"], main [class~="text-white"][class*="bg-violet-"], main [class~="text-white"][class*="bg-blue-"], main [class~="text-white"][class*="bg-purple-"], main [class~="text-white"][class*="bg-emerald-"], main [class~="text-white"][class*="bg-green-"], main [class~="text-white"][class*="bg-rose-"], main [class~="text-white"][class*="bg-red-"], main [class~="text-white"][class*="bg-amber-"], main [class~="text-white"][class*="bg-orange-"] { color: #fff !important; }
