/* =====================================================================
   VreauImprumut.ro — Design System F1 "Ink + Lime" (fintech)
   Acces liber la informație. Caută · Compară · Explorează.
   Loaded AFTER the inline <style> in base.html so it re-skins the site
   by redefining the existing CSS custom properties.
   ===================================================================== */

:root {
    /* --- Brand F1 --- */
    --brand-ink:        #0E1726;   /* dark base: hero, footer, headings */
    --brand-ink-2:      #1B2A41;   /* dark surface / cards on dark */
    --brand-ink-border: #2C3F5C;   /* borders on dark */
    --brand-lime:       #34E08A;   /* signature accent (great on dark) */
    --brand-lime-2:     #16B36A;   /* lime on light bg / hover */
    --brand-lime-ink:   #06281A;   /* text on lime */
    --brand-green:      #0E8F5E;   /* readable interactive green (links/icons) */
    --brand-green-2:    #0B7A4F;   /* hover */

    /* --- Re-map legacy tokens to F1 (re-skins everything) --- */
    --bcr-primary:       #0E8F5E;
    --bcr-primary-hover: #0B7A4F;
    --bcr-primary-light: rgba(14, 143, 94, 0.10);
    --bcr-dark-blue:     #0E1726;
    --bcr-navy:          #1B2A41;

    --btn-cta:       #34E08A;
    --btn-cta-hover: #16B36A;

    --orange-cta:       #34E08A;   /* legacy "accent" spans -> lime */
    --orange-cta-hover: #16B36A;

    /* Backgrounds */
    --bg-primary:     #ffffff;
    --bg-section-alt: #F4F6F8;
    --bg-card:        #ffffff;

    /* Text hierarchy */
    --text-dark:    #0E1726;
    --text-heading: #0E1726;
    --text-medium:  #52606D;
    --text-light:   #6B7785;
    --text-muted:   #8A95A1;

    /* Semantic */
    --success: #15A862;
    --warning: #F2A93B;
    --danger:  #E2574C;
    --info:    #0E8F5E;

    --accent-green: #15A862;
    --accent-blue:  #0E8F5E;

    /* Borders & radii */
    --border-light:  #E3E8EE;
    --border-medium: #CFD8E2;
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-primary);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.btn-primary,
.btn-primary.btn-lg {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary.btn-lg:hover {
    background-color: var(--brand-green-2) !important;
    border-color: var(--brand-green-2) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(14, 143, 94, 0.28);
}
.btn-outline-primary {
    color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    background: #fff;
}
.btn-outline-primary:hover {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}
/* CTA "lime" — for the main search / hero action */
.btn-cta {
    background-color: var(--brand-lime) !important;
    border-color: var(--brand-lime) !important;
    color: var(--brand-lime-ink) !important;
    font-weight: 700;
}
.btn-cta:hover {
    background-color: var(--brand-lime-2) !important;
    border-color: var(--brand-lime-2) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(52, 224, 138, 0.35);
}
.btn-dark-ink {
    background-color: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #fff !important;
}
.btn-dark-ink:hover {
    background-color: var(--brand-ink-2) !important;
    color: #fff !important;
}

/* ---------- Cards ---------- */
.card,
.card-shadow {
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    background: var(--bg-card);
}
.modern-card { border-radius: var(--radius-lg) !important; }

/* ---------- Navbar (light, clean) ---------- */
.navbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-light);
}
.nav-link:hover {
    background: var(--bcr-primary-light) !important;
    color: var(--brand-green) !important;
}
.dropdown-item:hover {
    background: var(--bcr-primary-light) !important;
    color: var(--brand-green) !important;
}
.dropdown-menu .dropdown-item:hover {
    background: var(--bcr-primary-light) !important;
    border-color: var(--brand-green) !important;
}
.dropdown-menu .dropdown-item:hover .rounded-circle { background: var(--brand-green) !important; }

/* ---------- Forms ---------- */
.form-control, .form-control-lg, .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-medium);
    color: var(--text-dark) !important;
}
.form-control:focus, .form-control-lg:focus, .form-select:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 4px rgba(14, 143, 94, 0.14) !important;
}
.form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

/* ---------- Footer (ink) ---------- */
.footer {
    background-color: var(--brand-ink) !important;
    color: #cdd9e8;
}
.footer .text-muted { color: #9fb0c4 !important; }
.footer a.text-muted:hover, .footer a.text-white:hover { color: var(--brand-lime) !important; }
.footer hr { border-color: var(--brand-ink-border) !important; }

/* ---------- Utility ---------- */
.text-primary { color: var(--brand-green) !important; }
.bg-ink   { background-color: var(--brand-ink) !important; }
.bg-ink-2 { background-color: var(--brand-ink-2) !important; }
.text-lime { color: var(--brand-lime) !important; }
.bg-lime  { background-color: var(--brand-lime) !important; color: var(--brand-lime-ink) !important; }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--radius-pill);
    padding: 5px 14px; font-size: 13px; font-weight: 500;
}

/* Hero (ink) — forțează textul deschis peste regulile !important din base.html */
#hero h1, #hero h2, #hero h3 { color: #ffffff !important; }
#hero h1 span { color: var(--brand-lime) !important; }
#hero .lead, #hero p { color: #9fb0c4 !important; }
#hero .pill { color: var(--brand-lime) !important; }

/* County landing hero (ink) — text deschis peste !important din base */
.county-hero-section h1, .county-hero-section h2, .county-hero-section h3,
.county-hero-section .lead, .county-hero-section p, .county-hero-section small { color: #ffffff !important; }
.county-hero-section h3 { color: var(--brand-lime) !important; }

/* Headings tighter, modern */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
.display-4, .display-5, .display-6 { letter-spacing: -0.03em; font-weight: 800; }

/* ===================================================================
   BESPOKE FINTECH "beton" — fonturi cu caracter + hero de produs
   =================================================================== */
body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1, h2, h3, .display-4, .display-5, .display-6 {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    letter-spacing: -0.03em;
}

.vi-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(180deg, #0B1320 0%, #0E1726 60%, #111e30 100%);
    padding: 5.5rem 0 5rem;
}
.vi-hero-glow { position: absolute; top: -180px; right: -140px; width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(52,224,138,0.20), transparent 62%); pointer-events: none; }
.vi-hero-grid { position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 48px 48px; }
.vi-pill { display: inline-flex; align-items: center; gap: 8px;
    background: rgba(52,224,138,0.10); border: 1px solid rgba(52,224,138,0.35); color: #34E08A;
    font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 999px; }
.vi-display { font-size: clamp(40px, 5.2vw, 62px); font-weight: 800; line-height: 1.02; color: #fff !important; margin: 22px 0 0; }
.vi-lime { color: #34E08A !important; }
.vi-sub { color: #9fb0c4 !important; font-size: 18px; line-height: 1.6; max-width: 440px; margin: 18px 0 26px; }
.vi-btn-ghost { border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: 14px; background: transparent; font-weight: 600; }
.vi-btn-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }
.vi-stats { display: flex; gap: 32px; margin-top: 30px; }
.vi-stat-n { font-family: 'Bricolage Grotesque'; font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
.vi-stat-l { font-size: 13px; color: #7e8ca0; margin-top: 4px; }

.vi-rise { opacity: 0; transform: translateY(16px); animation: viRise .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes viRise { to { opacity: 1; transform: none; } }
.vi-float { animation: viFloat 6s ease-in-out infinite; }
@keyframes viFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.vi-visual { position: relative; height: 390px; }
.vi-card-result { position: absolute; top: 10px; right: 0; width: 280px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 28px 60px rgba(0,0,0,0.45); }
.vi-card-map { position: absolute; top: 155px; left: 0; width: 184px; height: 138px; background: #10243a; border: 1px solid rgba(52,224,138,0.25); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 44px rgba(0,0,0,0.4); animation-delay: 1.2s; }
.vi-card-stat { position: absolute; bottom: 4px; right: 22px; width: 216px; background: #0F1B2D; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 15px 16px; box-shadow: 0 20px 44px rgba(0,0,0,0.4); animation-delay: .6s; }

.vi-searchpanel { background: #0E1726; padding: 0 0 3.5rem; }
.vi-panel-card { background: #fff; border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,0.20); padding: 1.75rem 2rem 2rem; margin-top: -3.5rem; position: relative; z-index: 3; }

.nav-pills .nav-link.active { background: var(--brand-green) !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) { .vi-rise, .vi-float { animation: none; opacity: 1; transform: none; } }
@media (max-width: 991px) { .vi-hero { padding: 3.5rem 0 2.5rem; } .vi-panel-card { margin-top: 1.5rem; } .vi-sub { font-size: 16px; } }