/*
Theme Name: FlowAdvice
Theme URI: https://flowadvice.nl
Author: FlowAdvice
Author URI: https://flowadvice.nl
Description: FlowAdvice — Meer klanten zonder gedoe. Modern conversiegerichte one-page homepage voor het FlowAdvice marketing dashboard.
Version: 1.0.1
License: Proprietary
Tags: marketing, saas, agency, one-page, landing-page
Text Domain: flowadvice
*/

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: #0a0a14;
}

/* ─────────────────────────────────────────
   GRADIENT MESH HERO
───────────────────────────────────────── */
.hero-bg {
  background: linear-gradient(135deg, #0a0a14 0%, #0f0f2e 50%, #0a0a14 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(99,102,241,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(139,92,246,.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 80%, rgba(59,130,246,.10) 0%, transparent 70%);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ─────────────────────────────────────────
   GRADIENT TEXT
───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 40%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-dark {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────
   GLOW BUTTON
───────────────────────────────────────── */
.btn-glow {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 0 0 rgba(99,102,241,.5);
  transition: box-shadow .3s, transform .2s;
}
.btn-glow:hover {
  box-shadow: 0 8px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   CARD HOVER
───────────────────────────────────────── */
.card-hover {
  transition: transform .25s, box-shadow .25s;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(99,102,241,.12);
}

/* ─────────────────────────────────────────
   PRICING CARD FEATURED
───────────────────────────────────────── */
.price-card-active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
}

/* ─────────────────────────────────────────
   FADE-UP ANIMATION
───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up  { animation: fadeUp .7s ease both; }
.delay-1  { animation-delay: .1s; }
.delay-2  { animation-delay: .2s; }
.delay-3  { animation-delay: .3s; }
.delay-4  { animation-delay: .4s; }

/* ─────────────────────────────────────────
   STEP BADGE
───────────────────────────────────────── */
.step-badge {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* ─────────────────────────────────────────
   SECTION SEPARATOR
───────────────────────────────────────── */
.section-sep {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.2), transparent);
  height: 1px;
}

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
#flowadvice-nav {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─────────────────────────────────────────
   PULSE DOT
───────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ─────────────────────────────────────────
   MOBILE STICKY CTA
───────────────────────────────────────── */
.mobile-sticky-cta { display: none; }
@media (max-width: 768px) {
  .mobile-sticky-cta { display: flex; }
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 3px; }

/* ─────────────────────────────────────────
   DASHBOARD MOCKUP
───────────────────────────────────────── */
.dash-bar { transition: height .6s ease; }

/* ─────────────────────────────────────────
   GRAVITY FORMS — DARK THEME
   Overschrijft GF orbital theme volledig
───────────────────────────────────────── */

/* ── 1. Override GF CSS-variabelen (hoge specificiteit) ── */
.gf-dark-wrapper .gform_wrapper.gform-theme,
.gf-dark-wrapper .gform_wrapper {
  --gf-color-in-ctrl: transparent !important;
  --gf-color-in-ctrl-darker: rgba(255,255,255,.08) !important;
  --gf-color-in-ctrl-contrast: #fff !important;
  --gf-color-in-ctrl-contrast-rgb: 255,255,255 !important;
  --gf-color-in-ctrl-dark: rgba(255,255,255,.5) !important;
  --gf-color-in-ctrl-dark-lighter: rgba(255,255,255,.5) !important;
  --gf-color-in-ctrl-dark-darker: rgba(255,255,255,.7) !important;
  --gf-color-out-ctrl-dark: rgba(255,255,255,.5) !important;
  --gf-color-out-ctrl-dark-lighter: rgba(255,255,255,.5) !important;
  --gf-color-out-ctrl-dark-darker: #fff !important;
  --gf-color-out-ctrl-light: rgba(255,255,255,.12) !important;
  --gf-color-out-ctrl-light-darker: rgba(255,255,255,.2) !important;
  --gf-ctrl-border-color: rgba(255,255,255,.15) !important;
  --gf-ctrl-label-color-primary: rgba(255,255,255,.6) !important;
  --gf-ctrl-label-color-secondary: rgba(255,255,255,.4) !important;
  --gf-color-secondary: #0f0f22 !important;
  --gf-color-secondary-contrast: #fff !important;
  --gf-color-secondary-darker: #0a0a14 !important;
  --gf-color-primary: #6366f1 !important;
  --gf-color-primary-rgb: 99,102,241 !important;
  --gf-color-primary-darker: #4f46e5 !important;
  --gf-color-primary-lighter: #818cf8 !important;
  --gf-radius: 12px !important;
  --gf-field-pg-steps-number-color: rgba(255,255,255,.6) !important;
  --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.293 0.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E") !important;
}

/* ── 2. Formulier-container: geen extra achtergrond van GF ── */
.gf-dark-wrapper .gform_wrapper,
.gf-dark-wrapper .gform-body,
.gf-dark-wrapper .gform_body {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── 3. Titel & beschrijving ── */
.gf-dark-wrapper .gform_title {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
}
.gf-dark-wrapper .gform_description {
  color: rgba(255,255,255,.5) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
}
.gf-dark-wrapper .gform_heading {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* ── 4. Labels (hoofd én sub-labels) ── */
.gf-dark-wrapper .gfield_label,
.gf-dark-wrapper .gform-field-label,
.gf-dark-wrapper .gfield_label_before_complex,
.gf-dark-wrapper legend.gfield_label {
  color: rgba(255,255,255,.55) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  margin-bottom: 0.375rem !important;
  display: block !important;
}
.gf-dark-wrapper .gform-field-label--type-sub {
  color: rgba(255,255,255,.35) !important;
  font-size: 0.7rem !important;
  margin-top: 0.3rem !important;
}

/* ── 5. Veld-rij spacing ── */
.gf-dark-wrapper .gfield {
  margin-bottom: 1rem !important;
  padding: 0 !important;
}
.gf-dark-wrapper .gform_fields {
  row-gap: 0 !important;
  grid-row-gap: 0 !important;
}

/* ── 6. Invoervelden — kern ── */
.gf-dark-wrapper input[type="text"],
.gf-dark-wrapper input[type="email"],
.gf-dark-wrapper input[type="tel"],
.gf-dark-wrapper input[type="number"],
.gf-dark-wrapper input[type="url"],
.gf-dark-wrapper input[type="password"],
.gf-dark-wrapper textarea {
  background-color: rgba(255,255,255,.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-family: 'Inter', sans-serif !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.gf-dark-wrapper input[type="text"]::placeholder,
.gf-dark-wrapper input[type="email"]::placeholder,
.gf-dark-wrapper input[type="tel"]::placeholder,
.gf-dark-wrapper textarea::placeholder {
  color: rgba(255,255,255,.25) !important;
}
.gf-dark-wrapper input[type="text"]:focus,
.gf-dark-wrapper input[type="email"]:focus,
.gf-dark-wrapper input[type="tel"]:focus,
.gf-dark-wrapper textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25) !important;
  outline: none !important;
  background-color: rgba(99,102,241,.06) !important;
}

/* ── 7. Select ── */
.gf-dark-wrapper select,
.gf-dark-wrapper select.gfield_select {
  background-color: rgba(255,255,255,.06) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.293 0.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' fill='rgba(255,255,255,0.45)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 10px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-family: 'Inter', sans-serif !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}
.gf-dark-wrapper select:focus,
.gf-dark-wrapper select.gfield_select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25) !important;
  outline: none !important;
}
.gf-dark-wrapper select option {
  background: #0f0f22 !important;
  color: #fff !important;
}

/* ── 8. Ginput container ── */
.gf-dark-wrapper .ginput_container,
.gf-dark-wrapper .ginput_container_text,
.gf-dark-wrapper .ginput_container_email,
.gf-dark-wrapper .ginput_container_select,
.gf-dark-wrapper .ginput_container_name {
  margin: 0 !important;
}

/* ── 9. Naam-veld (2 kolommen) ── */
.gf-dark-wrapper .ginput_container--name.gform-grid-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
}
.gf-dark-wrapper .gform-grid-col {
  min-width: 0 !important;
}

/* ── 10. Halve breedte velden naast elkaar ── */
.gf-dark-wrapper .gfield--width-half {
  display: inline-block !important;
  width: calc(50% - 0.375rem) !important;
  vertical-align: top !important;
}
.gf-dark-wrapper .gfield--width-half:nth-child(odd) {
  margin-right: 0.75rem !important;
}

/* ── 11. Required indicator ── */
.gf-dark-wrapper .gfield_required,
.gf-dark-wrapper .gfield_required_text {
  color: #f87171 !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  margin-left: 0.25rem !important;
}

/* ── 12. Submit-knop ── */
.gf-dark-wrapper .gform_footer,
.gf-dark-wrapper .gform_page_footer {
  margin-top: 0.75rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.gf-dark-wrapper input[type="submit"].gform_button,
.gf-dark-wrapper input[type="submit"],
.gf-dark-wrapper button[type="submit"] {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  font-family: 'Inter', sans-serif !important;
  padding: 1rem 1.5rem !important;
  border-radius: 1rem !important;
  border: none !important;
  width: 100% !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: box-shadow .3s ease, transform .2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
.gf-dark-wrapper input[type="submit"].gform_button:hover,
.gf-dark-wrapper input[type="submit"]:hover,
.gf-dark-wrapper button[type="submit"]:hover {
  box-shadow: 0 8px 30px rgba(99,102,241,.5) !important;
  transform: translateY(-1px) !important;
}

/* ── 13. Validatiefouten ── */
.gf-dark-wrapper .gfield_error input,
.gf-dark-wrapper .gfield_error textarea,
.gf-dark-wrapper .gfield_error select {
  border-color: rgba(248,113,113,.6) !important;
}
.gf-dark-wrapper .validation_message,
.gf-dark-wrapper .gfield_validation_message {
  color: #f87171 !important;
  font-size: 0.75rem !important;
  margin-top: 0.3rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
}
.gf-dark-wrapper .gform_validation_errors,
.gf-dark-wrapper .validation_error {
  background: rgba(248,113,113,.1) !important;
  border: 1px solid rgba(248,113,113,.3) !important;
  border-radius: 0.75rem !important;
  color: #f87171 !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
}

/* ── 14. Succes-bevestiging ── */
.gf-dark-wrapper .gform_confirmation_message {
  color: #4ade80 !important;
  background: rgba(74,222,128,.1) !important;
  border: 1px solid rgba(74,222,128,.25) !important;
  border-radius: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── 15. GF-specifieke state-kleuren wissen ── */
.gf-dark-wrapper .gform-theme .gfield_error .ginput_container input,
.gf-dark-wrapper .gform-theme .gfield_error .ginput_container select,
.gf-dark-wrapper .gform-theme .gfield_error .ginput_container textarea {
  border-color: rgba(248,113,113,.6) !important;
  background-color: rgba(248,113,113,.05) !important;
}

/* ── 16. Verberg onnodige GF-elementen ── */
.gf-dark-wrapper .gf_progressbar_wrapper,
.gf-dark-wrapper .ginput_recaptcha { display: none !important; }

/* ─────────────────────────────────────────
   WORDPRESS ADMIN BAR OFFSET
───────────────────────────────────────── */
.admin-bar #flowadvice-nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #flowadvice-nav {
    top: 46px;
  }
}