/* ===========================================================================
 * Landing Page (index.html) — استایل‌های اختصاصی صفحه فرود
 *
 * این فایل شامل استایل‌های اختصاصی صفحه اصلی (فرود) است که در فایل
 * templates/index.html استفاده می‌شود:
 *   - glass-panel و pattern پس‌زمینه
 *   - انیمیشن float-slow
 *   - anchor offset (scroll-margin-top) برای هدر fixed
 *   - توکن‌های سایه (shadow-glass / shadow-card-soft / shadow-float-brand)
 *   - استایل LTR برای input شماره تلفن در صفحه RTL
 *   - حالت prefers-reduced-motion
 *
 * آیکون‌ها از Font Awesome استفاده می‌کنند (لوکال، در base.html لود می‌شود).
 * فونت پروژه (Vazirmatn) و رنگ‌های پایه از custom.css/base.html به ارث
 * می‌رسند.
 * ===========================================================================
 */

/* ---------- Glass / Frosted Panel ---------- */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color .2s ease, border-color .2s ease;
}

/* ---------- Decorative dot pattern ---------- */
.bg-pattern {
    background-image: radial-gradient(#dce9ff 1px, transparent 1px);
    background-size: 20px 20px;
    transition: background-image .2s ease;
}

/* ---------- Dark mode overrides for landing-specific tokens ---------- */
[data-theme="dark"] .glass-panel {
    background: rgba(35, 39, 48, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .bg-pattern {
    background-image: radial-gradient(rgba(125, 211, 252, 0.10) 1px, transparent 1px);
}
[data-theme="dark"] .shadow-card-soft  { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .shadow-float-brand { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.50); }

/* ---------- Gradient text utility ---------- */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #002956, #00616f);
}

/* ---------- 3D perspective for hero mockup ---------- */
.perspective-1000 {
    perspective: 1000px;
}

/* ---------- Subtle floating animation for hero elements ---------- */
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.float-slow {
    animation: float-slow 4s ease-in-out infinite;
}

/* ---------- Anchor offset so sticky header doesn't cover section titles ---------- */
section[id] {
    scroll-margin-top: 6rem;
}

/* ---------- Smooth scroll for in-page anchors ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- Form helper: number-like inputs in LTR while page is RTL ---------- */
input[type="tel"][dir="ltr"] {
    text-align: right;
}

/* ---------- Reusable shadow tokens (used in hero & pricing) ---------- */
.shadow-glass {
    box-shadow: 0 4px 30px rgba(0, 63, 125, 0.10);
}
.shadow-card-soft {
    box-shadow: 0 4px 20px rgba(0, 63, 125, 0.05);
}
.shadow-float-brand {
    box-shadow: 0 10px 40px rgba(34, 211, 238, 0.15);
}

/* ---------- Icon alignment inside buttons / labels ---------- */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-with-icon i {
    font-size: 1.1em;
    line-height: 1;
}

/* ---------- Reduce motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .float-slow,
    .animate-bounce {
        animation: none !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ===========================================================================
 * Light / Dark mode synchronization — Top Nav & Request Demo Form
 * ---------------------------------------------------------------------------
 * The form fields are rendered with Material-style utility names that are
 * NOT in the project's Tailwind config (e.g. `bg-surface-container-low`,
 * `border-outline-variant/30`, `text-on-surface`). Without an explicit
 * override they fall back to browser-default styling and look broken in
 * dark mode. The rules below drive every input/select/textarea inside
 * the demo form from the theme tokens (--bg-elevated, --border,
 * --accent, --text-faint) so the inputs feel native in BOTH modes, with
 * a clear, polished focus ring in each theme.
 * =========================================================================== */

/* Top navigation header — slightly more opaque in dark mode so brand
   contrast stays sharp against the dark page background. */
[data-theme="dark"] .landing-header {
    background: rgba(15, 17, 21, 0.85) !important;   /* var(--bg-page) @ 85% */
    border-color: var(--border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

/* Nav login button — neutral slate surface that flips cleanly between
   light (subtle gray) and dark (elevated panel) without losing contrast. */
.nav-login-btn {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-login-btn:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
}
[data-theme="dark"] .nav-login-btn { color: var(--text-secondary); }

/* Demo-form section gradient — light sky-100 → cyan-50 → white in light
   mode, deep slate gradient in dark mode. The dark gradient lives in the
   inline `dark:from-*` utilities; we just make sure the section
   background is solid enough that the card on top stays readable. */
.landing-demo-section { position: relative; }
[data-theme="dark"] .landing-demo-section {
    background: linear-gradient(135deg, #0f1115 0%, #13161d 50%, #0a0c10 100%) !important;
}

/* Form card surface — translucent on the gradient in light mode, deeper
   dark surface in dark mode so the inputs feel anchored. */
[data-theme="dark"] .landing-form-card {
    background: rgba(26, 29, 36, 0.92) !important;   /* var(--bg-surface) @ 92% */
    border-color: var(--border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55) !important;
}

/* Form inputs / selects / textareas — full theme-aware styling. The
   widget classes from `inquiries/forms.py` (bg-surface-container-low
   etc.) don't exist in the Tailwind config, so we override here. */
.landing-form input[type="text"],
.landing-form input[type="tel"],
.landing-form input[type="email"],
.landing-form input[type="number"],
.landing-form input[type="search"],
.landing-form input[type="url"],
.landing-form input:not([type]),
.landing-form select,
.landing-form textarea {
    width: 100%;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .landing-form input[type="text"],
[data-theme="dark"] .landing-form input[type="tel"],
[data-theme="dark"] .landing-form input[type="email"],
[data-theme="dark"] .landing-form input[type="number"],
[data-theme="dark"] .landing-form input[type="search"],
[data-theme="dark"] .landing-form input[type="url"],
[data-theme="dark"] .landing-form input:not([type]),
[data-theme="dark"] .landing-form select,
[data-theme="dark"] .landing-form textarea {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.landing-form input::placeholder,
.landing-form textarea::placeholder { color: var(--text-faint); opacity: 1; }

/* Hover — soft border lift */
.landing-form input:hover:not(:focus),
.landing-form select:hover:not(:focus),
.landing-form textarea:hover:not(:focus) {
    border-color: var(--border-strong);
}

/* Focus — polished brand-tinted ring in BOTH themes */
.landing-form input:focus,
.landing-form select:focus,
.landing-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Disabled / read-only state */
.landing-form input:disabled,
.landing-form select:disabled,
.landing-form textarea:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-subtle);
}

/* ===========================================================================
 * Brand gradient — soft radial glow behind the logo
 * ---------------------------------------------------------------------------
 * A subtle radial gradient wraps the brand logo. In light mode it is a
 * very faint sky-cyan halo (so the logo feels anchored but doesn't clash
 * with the white header). In dark mode the glow intensifies with
 * multi-stop cyan/sky tints, making the brand pop against the dark
 * surface of the sticky header and the dark footer.
 * =========================================================================== */
.brand-gradient {
    position: relative;
    isolation: isolate;
    transition: background .3s ease;
}
.brand-gradient::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    /* Light mode: very subtle sky/cyan halo */
    background:
        radial-gradient(ellipse at 30% 50%,
            rgba(56, 189, 248, 0.10)  0%,
            rgba(34, 211, 238, 0.05) 45%,
            transparent              75%);
    opacity: 1;
    transition: background .3s ease, opacity .3s ease;
}
.brand-gradient:hover::before {
    background:
        radial-gradient(ellipse at 30% 50%,
            rgba(56, 189, 248, 0.18)  0%,
            rgba(34, 211, 238, 0.10) 45%,
            transparent              75%);
}

/* Dark mode: much more prominent multi-stop cyan/sky glow */
[data-theme="dark"] .brand-gradient::before {
    background:
        radial-gradient(ellipse at 30% 50%,
            rgba(56, 189, 248, 0.35)  0%,
            rgba(34, 211, 238, 0.20) 35%,
            rgba(14, 165, 233, 0.10) 65%,
            transparent              85%);
    filter: blur(2px);
}
[data-theme="dark"] .brand-gradient:hover::before {
    background:
        radial-gradient(ellipse at 30% 50%,
            rgba(56, 189, 248, 0.50)  0%,
            rgba(34, 211, 238, 0.30) 35%,
            rgba(14, 165, 233, 0.15) 65%,
            transparent              85%);
    filter: blur(3px);
}

/* Footer variant — a touch warmer, sits on the always-dark slate-900
   footer. Uses cyan/indigo glow so the brand stays visible without
   fighting the dark surface. */
.brand-gradient--footer::before {
    background:
        radial-gradient(ellipse at 25% 50%,
            rgba(34, 211, 238, 0.22)  0%,
            rgba(99, 102, 241, 0.12) 50%,
            transparent              80%);
}
[data-theme="dark"] .brand-gradient--footer::before {
    background:
        radial-gradient(ellipse at 25% 50%,
            rgba(34, 211, 238, 0.30)  0%,
            rgba(99, 102, 241, 0.18) 50%,
            transparent              85%);
}