/* Client Branding Utilities - keep overrides minimal and scoped */

/* Text color utilities mapped to brand palette */
.text-positive {
  color: var(--primary-color) !important;
}

.text-negative {
  color: var(--error-color) !important;
}

.text-attention {
  color: var(--accent-secondary-color) !important;
}

/* Background utility for brand primary */
.bg-brand {
  background-color: var(--primary-color) !important;
}

/* Badge variant in brand accent */
.badge-brand {
  background-color: var(--accent-secondary-color) !important;
  color: var(--white-color) !important;
}

/* Header alignment tweaks so header buttons line up like on homepage */
.main-header .header-contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-header .header-contact-btn .btn-default {
  margin: 0;
}

.main-header .navbar .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* Subtle, friendly notice block (used in vragenlijst) */
.kg-notice {
  background-color: #F6F7F9;
  /* zacht neutraal, niet blauw */
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
  line-height: 1.5;
  color: var(--primary-color);
}

@media (prefers-color-scheme: dark) {
  .kg-notice {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

/* --- Brand Typography: Prefer Gill Sans Regular with safe fallbacks --- */
:root {
  /* If you later provide licensed webfont files, update this variable to use the webfont name */
  --brand-font-sans: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', Arial, sans-serif;
  /* Override theme font variables so headings that use theme vars also switch to Gill Sans */
  --default-font: var(--brand-font-sans);
  --accent-font: var(--brand-font-sans);
}

/* Apply brand font site-wide; !important to override scattered defaults */
html,
body {
  font-family: var(--brand-font-sans) !important;
}

/* Ensure headings and display titles also use the brand font */
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.hero-title {
  font-family: var(--brand-font-sans) !important;
}

/* Extra specificity for theme sections that set fonts on headings */
.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5,
.section-title h6,
.text-anime-style-2 {
  font-family: var(--brand-font-sans) !important;
}



/* Client Branding Utilities - keep overrides minimal and scoped */

/* Text color utilities mapped to brand palette */
.text-positive {
  color: var(--primary-color) !important;
}

.text-negative {
  color: var(--error-color) !important;
}

.text-attention {
  color: var(--accent-secondary-color) !important;
}

/* Background utility for brand primary */
.bg-brand {
  background-color: var(--primary-color) !important;
}

/* Badge variant in brand accent */
.badge-brand {
  background-color: var(--accent-secondary-color) !important;
  color: var(--white-color) !important;
}

/* Header alignment tweaks so header buttons line up like on homepage */
.main-header .header-contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-header .header-contact-btn .btn-default {
  margin: 0;
}

.main-header .navbar .container {
  padding-top: 0;
  padding-bottom: 0;
}


/* --- Page specific fine-tuning -------------------------------------------------
   Services/Over jou: the theme styles only ULs inside .service-entry (as a 3-col
   feature list). Our content uses an ordered list (OL) with steps. Without
   overrides this looks odd and spacing is off. These scoped rules make the OL
   read comfortably and match the theme’s visual language. */
.service-entry ol {
  /* Keep a clean, stacked list (not the 3-col flex used for ULs) */
  list-style: decimal;
  margin: 16px 0 0 0;
  padding-left: 22px;
  /* consistent with theme bullets */
  display: block;
}

.service-entry ol li {
  line-height: 1.7em;
  margin-bottom: 10px;
}

.service-entry ol li:last-child {
  margin-bottom: 0;
}

/* Give the numbers a subtle brand accent */
.service-entry ol li::marker {
  color: var(--accent-color);
  font-weight: 600;
}

/* Keep the bold step label readable in our brand color */
.service-entry ol li>strong {
  color: var(--primary-color);
}

/* Larger variant for brand button to reduce cramped feel on forms */
.btn-default.btn-lg {
  padding: 14px 22px;
  font-size: 1.05rem;
  border-radius: 12px;
}

/* ---------------------------------------------------------------
   FAQ section – improve readability when open + clearer icons
   We keep the theme structure but override colors and icons so the
   open state is not a large yellow block with white text.
----------------------------------------------------------------- */

/* Body becomes white with normal text for optimal contrast */
.faq-accordion .accordion-item .accordion-body {
  background: var(--white-color) !important;
  color: var(--primary-color) !important;
}

.faq-accordion .accordion-item .accordion-body p {
  color: var(--primary-color) !important;
}

/* Replace ambiguous square icons with chevrons (down = closed, up = open) */
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
  /* Replace Bootstrap's default SVG caret to avoid double icons */
  background-image: none !important;
  transform: none !important;
  /* prevent Bootstrap from rotating the caret */
  font-family: "FontAwesome";
  font-weight: 900;
  content: '\f077';
  /* chevron-up when open */
  color: var(--white-color);
}

.faq-accordion .accordion-item .accordion-button.collapsed::after {
  background-image: none !important;
  transform: none !important;
  content: '\f078';
  /* chevron-down when closed */
  color: var(--accent-color);
}

/* Keep header tidy, remove heavy shadows if any */
.faq-accordion .accordion-header .accordion-button {
  box-shadow: none;
}

/* Mobile comfort for action row on add-measurement page */
@media (max-width: 576px) {
  section.add-measurement .d-flex.justify-content-between {
    flex-direction: column;
    gap: 12px;
  }

  section.add-measurement .btn-default {
    width: 100%;
  }
}



/* Client Branding Utilities - keep overrides minimal and scoped */

/* Text color utilities mapped to brand palette */
.text-positive {
  color: var(--primary-color) !important;
}

.text-negative {
  color: var(--error-color) !important;
}

.text-attention {
  color: var(--accent-secondary-color) !important;
}

/* Background utility for brand primary */
.bg-brand {
  background-color: var(--primary-color) !important;
}

/* Badge variant in brand accent */
.badge-brand {
  background-color: var(--accent-secondary-color) !important;
  color: var(--white-color) !important;
}

/* Header alignment tweaks so header buttons line up like on homepage */
.main-header .header-contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-header .header-contact-btn .btn-default {
  margin: 0;
}

.main-header .navbar .container {
  padding-top: 0;
  padding-bottom: 0;
}



/* Client Branding Utilities - keep overrides minimal and scoped */

/* Text color utilities mapped to brand palette */
.text-positive {
  color: var(--primary-color) !important;
}

.text-negative {
  color: var(--error-color) !important;
}

.text-attention {
  color: var(--accent-secondary-color) !important;
}

/* Background utility for brand primary */
.bg-brand {
  background-color: var(--primary-color) !important;
}

/* Badge variant in brand accent */
.badge-brand {
  background-color: var(--accent-secondary-color) !important;
  color: var(--white-color) !important;
}

/* Header alignment tweaks so header buttons line up like on homepage */
.main-header .header-contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-header .header-contact-btn .btn-default {
  margin: 0;
}

.main-header .navbar .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* Larger variant for brand button to reduce cramped feel on forms */
.btn-default.btn-lg {
  padding: 14px 22px;
  font-size: 1.05rem;
  border-radius: 12px;
}

/* Mobile comfort for action row on add-measurement page */
@media (max-width: 576px) {
  section.add-measurement .d-flex.justify-content-between {
    flex-direction: column;
    gap: 12px;
  }

  section.add-measurement .btn-default {
    width: 100%;
  }
}

/* --- New: Softer cards and a homepage-like section header for patient pages --- */
section.patient-dashboard .card,
section.add-measurement .card {
  border-radius: 18px;
  border-color: var(--divider-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

section.patient-dashboard .card-header,
section.add-measurement .card-header {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* Optional hover lift for interactive feel */
section.patient-dashboard .card:hover,
section.add-measurement .card:hover {
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Section row spacing similar to homepage */
section.patient-dashboard .section-row,
section.add-measurement .section-row {
  margin-bottom: 24px;
}

section.patient-dashboard .section-title h2,
section.add-measurement .section-title h2 {
  letter-spacing: 0.1px;
}


/* Patient pages: make cards match testimonial-review-box (30px radius, 40px padding) */
section.patient-dashboard .card,
section.add-measurement .card {
  border-radius: 30px;
  border-color: var(--divider-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}

section.patient-dashboard .card-header,
section.add-measurement .card-header {
  background-color: transparent !important;
  /* remove gray bar */
  border-bottom: 1px solid var(--divider-color);
  padding: 40px !important;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

section.patient-dashboard .card-body,
section.add-measurement .card-body {
  padding: 40px !important;
}

/* Keep subtle hover but align with larger radius */
section.patient-dashboard .card:hover,
section.add-measurement .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}


/* ---- Contact page adjustments: wrap long e-mail and tidy checkbox ---- */
.page-contact-us .contact-info-list .contact-item-content p,
.page-contact-us .contact-info-list .contact-item-content a {
  max-width: 100%;
  overflow-wrap: anywhere;
  /* allow breaking long addresses like long@example.domain */
  word-break: break-word;
}

/* Extra safety for older Safari/iOS where overflow-wrap is flaky */
@supports (-webkit-hyphens:none) {
  .page-contact-us .contact-info-list .contact-item-content a {
    word-break: break-all;
  }
}

/* Keep the privacy checkbox text compact and readable */
.page-contact-us .contact-form .form-check label {
  line-height: 1.45;
  margin-bottom: 0;
}


/* --- Wizard compact spacing and typeform-like layout --- */
.page-header--compact {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (max-width: 767.98px) {
  .page-header--compact {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.section-space--compact {
  padding-top: 56px;
  padding-bottom: 72px;
}

@media (max-width: 767.98px) {
  .section-space--compact {
    padding-top: 36px;
    padding-bottom: 48px;
  }
}

/* Wizard container and steps */
.kg-wizard {
  border-radius: 22px;
  border: 1px solid var(--divider-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}

.kg-wizard .wizard-step {
  display: none;
}

.kg-wizard .wizard-step.active {
  display: block;
}

.kg-wizard .floating-label {
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-color);
}

.kg-wizard .form-floating>label {
  color: var(--text-color);
  opacity: .85;
}

.kg-wizard .form-control,
.kg-wizard .form-select {
  border-radius: 14px;
  padding-top: 1.1rem;
  padding-bottom: .85rem;
}

.kg-wizard .form-control:focus {
  box-shadow: 0 0 0 0.15rem rgba(67, 97, 238, .15);
}

/* Buttons: align with site accent styling (avoid dark/black buttons) */
.btn-hero.primary {
  background: var(--accent-color);
  color: var(--white-color);
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  transition: box-shadow .2s ease, filter .2s ease, transform .2s ease;
}

.btn-hero.primary:hover,
.btn-hero.primary:focus {
  filter: brightness(0.98);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

/* Action rows spacing */
.kg-wizard .d-flex.gap-2 {
  gap: 12px !important;
}

.kg-wizard .prev-step {
  min-width: 120px;
}

.kg-wizard .next-step {
  min-width: 140px;
}

/* Reduce top white space between header and card */
.section-space.section-space--compact .section-title {
  margin-bottom: 20px;
}

/* ===== Vragenlijst modal tuning (intake/vragenlijst) ===== */
#vragenlijstModal .modal-dialog {
  /* keep it centered and compact with safe viewport margins */
  margin: 1.25rem;
}

@media (min-width: 768px) {
  #vragenlijstModal .modal-dialog {
    margin: 1.75rem auto;
  }
}

#vragenlijstModal .modal-content {
  border-radius: 28px;
  /* rounder modal */
  border: 1px solid var(--divider-color);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  /* clip inner card corners */
}

#vragenlijstModal .modal-header {
  padding: 12px 12px 0 12px;
}

#vragenlijstModal .btn-close {
  width: 40px;
  height: 40px;
  background-size: 12px 12px;
  opacity: .7;
}

#vragenlijstModal .btn-close:hover {
  opacity: 1;
}

#vragenlijstModal .modal-body {
  padding: 10px 12px;
  /* tighter default */
}

@media (min-width: 768px) {
  #vragenlijstModal .modal-body {
    padding: 14px 16px;
  }
}

/* Rounder inner wizard card and compact paddings inside modal */
#vragenlijstModal .kg-wizard {
  border-radius: 24px;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  /* Ensure seamless blend */
}

/* --- Premium UI/UX Overrides for Modal Wizard --- */

/* 1. Refined Typography for Labels (The "Kicker" style) */
#vragenlijstModal .kg-wizard .floating-label {
  font-family: var(--brand-font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--text-muted, #6c757d);
  /* Fallback if var not defined */
  margin-bottom: 16px;
  /* Generous spacing */
  display: block;
}

/* 2. Modern Pill-Shaped Inputs */
#vragenlijstModal .kg-wizard .form-control,
#vragenlijstModal .kg-wizard .form-select {
  background-color: #f1f3f5;
  /* Light grey, distinct from white modal */
  border: 1px solid transparent;
  border-radius: 16px;
  /* Soft, modern rounding (or use 50rem for full pill) */
  padding: 1.2rem 1.5rem;
  /* Large, comfortable touch target */
  font-size: 1.25rem;
  /* Large, readable text */
  font-weight: 500;
  color: var(--primary-color);
  box-shadow: none;
  transition: all 0.2s ease;
}

/* Focus state: subtle lift, no harsh blue glow */
#vragenlijstModal .kg-wizard .form-control:focus,
#vragenlijstModal .kg-wizard .form-select:focus {
  background-color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Hide the floating label inside the input container if we are using the outer label */
#vragenlijstModal .kg-wizard .form-floating>label {
  display: none;
  /* We use the custom .floating-label above instead */
}

/* Adjust container spacing */
#vragenlijstModal .kg-wizard .form-floating {
  margin-bottom: 24px !important;
  /* More breathing room between fields */
}

/* 3. Buttons */
#vragenlijstModal .kg-wizard .btn-hero.primary {
  padding: 14px 32px;
  font-size: 1.1rem;
  border-radius: 50rem;
  /* Full pill button */
  box-shadow: 0 4px 14px rgba(255, 193, 7, 0.4);
  /* Soft shadow matching accent */
}

#vragenlijstModal .modal-dialog {
  max-height: 92vh;
}

#vragenlijstModal .modal-content {
  max-height: 92vh;
  display: flex;
}

#vragenlijstModal .modal-body {
  overflow: auto;
}