/*
  Song2Give Theme F - Lavendel & Indigo
  Achtergrond: RGB 228, 223, 239 (#E4DFEF) - zacht lavendel
  CTA: Indigo/paars tinten die passen bij lavendel (geen roze)

  Header font: Poppins (van Theme B - rond, vrolijk)
  Body font: Nunito (van Theme B - warm, friendly)
*/

/* Theme F wordt geactiveerd wanneer body.theme-f class heeft */
body.theme-f {
  /* Theme color override - indigo/paars als primaire kleur (past bij lavendel) */
  --theme-color: #5c6bc0;            /* Indigo - past mooi bij lavendel */
  --theme-color-secondary: #3f51b5;  /* Donkerder indigo voor secondary */

  /* Override CSS variabelen */
  --header-color: #120036;           /* Donkerblauw (zelfde als origineel A) */
  --pink: #5c6bc0;                   /* Indigo vervangt roze */
  --white-smoke: #eec6c5;            /* Zacht roze achtergrond (238, 198, 197) */
  --lavender: #eec6c5;               /* Zacht roze (238, 198, 197) */
  --light-blue: #f3d4d3;             /* Iets lichter roze */
  --magnolia: #f8e5e4;               /* Lichtste roze tint */

  /* Accent kleuren - blauwe/indigo tinten */
  --yellow: #7986cb;                 /* Licht indigo */
  --orchid: #5c6bc0;                 /* Indigo */
  --violet-red: #3f51b5;             /* Donker indigo */
  --purple: #5c6bc0;                 /* Indigo */
  --indigo: #3f51b5;                 /* Deep indigo */

  /* Transparante kleuren */
  --tra-indigo: rgba(92, 107, 192, 0.13);
  --tra-purple: rgba(63, 81, 181, 0.13);
  --tra-violet-red: rgba(237, 230, 244, 0.84);

  /* Fonts - Poppins voor headers, Nunito voor body (van Theme B) */
  font-family: var(--nunito-font-family), 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Headers met Poppins - rond en vrolijk */
body.theme-f h1,
body.theme-f h2,
body.theme-f h3,
body.theme-f h4,
body.theme-f h5,
body.theme-f h6,
body.theme-f .h2-xl,
body.theme-f .h2-lg,
body.theme-f .h2-md,
body.theme-f .h5-md,
body.theme-f .h5-lg,
body.theme-f .h6-lg,
body.theme-f .section-title h2,
body.theme-f .hero-11-txt h2 {
  font-family: var(--poppins-font-family), 'Poppins', sans-serif !important;
  font-style: normal !important;
  color: var(--header-color);
}

/* Navigatie - Nunito lettertype dikgedrukt en pastel rode CTA */
body.theme-f .wsmainfull,
body.theme-f .wsmenu,
body.theme-f .wsmenu > .wsmenu-list > li > a,
body.theme-f .wsmenu > .wsmenu-list > li > .wsmenu-click,
body.theme-f .navbar-nav,
body.theme-f .nav-link,
body.theme-f .wsmenu-list li a {
  font-family: var(--nunito-font-family), 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* Navigatie CTA-knop - rood/roze */
body.theme-f .wsmenu > .wsmenu-list > li > a.btn,
body.theme-f .wsmenu .btn--theme,
body.theme-f header .btn--theme,
body.theme-f .navbar .btn--theme {
  background-color: #dc445b !important;
  border-color: #dc445b !important;
  color: white !important;
}

body.theme-f .wsmenu > .wsmenu-list > li > a.btn:hover,
body.theme-f .wsmenu .btn--theme:hover,
body.theme-f header .btn--theme:hover,
body.theme-f .navbar .btn--theme:hover {
  background-color: #c13a4e !important;
  border-color: #c13a4e !important;
}

/* Primaire buttons - rood/roze en dikgedrukt */
body.theme-f .btn--theme,
body.theme-f .hover--theme:hover {
  background-color: #dc445b !important;
  border-color: #dc445b !important;
  color: white !important;
  font-weight: 700 !important;
}

body.theme-f .btn--theme:hover {
  background-color: #c13a4e !important;
  border-color: #c13a4e !important;
}

/* Secundaire/pink buttons worden ook rood/roze en dikgedrukt */
body.theme-f .btn--pink,
body.theme-f .btn--tra-pink,
body.theme-f .hover--pink:hover,
body.theme-f .btn--violet-red {
  background-color: #dc445b !important;
  border-color: #dc445b !important;
  font-weight: 700 !important;
}

body.theme-f .btn--pink:hover,
body.theme-f .btn--tra-pink:hover,
body.theme-f .btn--violet-red:hover {
  background-color: #c13a4e !important;
  border-color: #c13a4e !important;
}

/* Tekst kleuren - rood/roze */
body.theme-f .color--theme,
body.theme-f .color--pink,
body.theme-f .color--violet-red {
  color: #dc445b !important;
}

body.theme-f .color--theme-2 {
  color: #dc445b !important;
}

/* Achtergrondkleuren - zacht roze tinten (238, 198, 197) */
/* Alle bg--whitesmoke elementen - zacht roze met 70% transparantie */
body.theme-f .bg--whitesmoke {
  background-color: rgba(238, 198, 197, 0.7) !important;
  background-image: none !important;
}

/* Sectie 2 (Voorbeelden) - achtergrond van de hele sectie - zacht roze */
body.theme-f .features-5.features-section {
  background-color: rgb(238, 198, 197) !important;
  margin-top: 80px !important;
}

/* Sectie 2 - content naar boven binnen de sectie */
body.theme-f .features-5.features-section .fbox-5-wrapper {
  padding-top: 20px !important;
  margin-top: -40px !important;
}

/* Sectie 2 - fbox-5-wrapper transparantie forceren met alle mogelijke selectors */
body.theme-f .fbox-5-wrapper.bg--whitesmoke.r-24,
body.theme-f .container .fbox-5-wrapper,
body.theme-f div.fbox-5-wrapper {
  background: rgba(238, 198, 197, 0.7) !important;
  background-color: rgba(238, 198, 197, 0.7) !important;
}

/* Sectie 3 (Hoe het werkt) - achtergrond naar zacht groen-grijs met 60% transparantie */
body.theme-f #hoe-het-werkt,
body.theme-f .ct-01.content-section {
  background-color: rgba(238, 240, 230, 0.6) !important;
  margin-bottom: 0 !important;
  padding-bottom: 100px !important;
}

/* Verwijder witruimte tussen sectie 3 en 4 */
body.theme-f .features-5.bg--whitesmoke {
  margin-top: 0 !important;
  padding-top: 100px !important;
}

/* Cards binnen voorbeelden sectie - wit */
body.theme-f .bg--whitesmoke .bg--white {
  background-color: #ffffff !important;
}

body.theme-f .bg--lavender {
  background-color: #eec6c5 !important;
}

body.theme-f .bg--lightblue {
  background-color: #f3d4d3 !important;
}

body.theme-f .bg--magnolia {
  background-color: #f8e5e4 !important;
}

body.theme-f .bg--white {
  background-color: #ffffff !important;
}

body.theme-f .bg--pink {
  background-color: #dc445b !important;
}

body.theme-f .bg--theme {
  background-color: #dc445b !important;
}

/* Stap nummers bij Hoe het werkt - rood/roze */
body.theme-f .bg--theme-2 {
  background-color: #dc445b !important;
}

/* Verwijder hover effect voor stap nummers */
body.theme-f .cbox-1:hover .cbox-1-ico.bg--theme-2 {
  background-color: #dc445b !important;
  color: white !important;
  border-color: #dc445b !important;
}

/* Icon kleuren - rood/roze */
body.theme-f .icon-pink,
body.theme-f .ico-50.color--pink,
body.theme-f .ico-45.color--pink,
body.theme-f .ico-40.color--pink {
  color: #dc445b !important;
}

/* Border kleuren - rood/roze */
body.theme-f .border--pink,
body.theme-f .border--theme {
  border-color: #dc445b !important;
}

/* Gradient aanpassingen - zacht roze gradient */
body.theme-f .gr--whitesmoke {
  background-image: linear-gradient(180deg, rgba(238, 198, 197, 0.8) 50%, rgba(238, 198, 197, 0.05) 100%);
}

/* Link hover effecten - rood/roze */
body.theme-f a:hover {
  color: #dc445b;
}

body.theme-f .tra-link:hover {
  color: #dc445b !important;
}

/* Footer aanpassingen */
body.theme-f .footer a:hover {
  color: #dc445b !important;
}

/* Pricing en card hover states - rood/roze */
body.theme-f .pricing-plan:hover,
body.theme-f .fbox:hover {
  border-color: #dc445b;
}

/* Populair badge en card - blauw */
body.theme-f .popular-card {
  border-color: rgb(62, 143, 252) !important;
}

body.theme-f .popular-badge {
  background-color: rgb(62, 143, 252) !important;
}


/* Form focus states - rood/roze */
body.theme-f input:focus,
body.theme-f textarea:focus,
body.theme-f select:focus {
  border-color: #dc445b !important;
  box-shadow: 0 0 0 3px rgba(220, 68, 91, 0.15) !important;
}

/* Checkmarks en success indicators - rood/roze */
body.theme-f .color--green,
body.theme-f .ico-15.color--green {
  color: #dc445b !important;
}

/* Hero sectie - zelfde kleur als sectie 3 */
body.theme-f .hero-section,
body.theme-f #hero-11 {
  background-color: rgba(238, 240, 230, 0.6) !important;
  background-image: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 80px !important;
}

/* Privacy pagina - zelfde achtergrondkleur als hero */
body.theme-f #privacy-page {
  background-color: rgba(238, 240, 230, 0.6) !important;
}

/* Voorwaarden pagina - zelfde achtergrondkleur als hero */
body.theme-f #terms-page {
  background-color: rgba(238, 240, 230, 0.6) !important;
}

/* Witruimte tussen hero en sectie 2 opvullen */
body.theme-f .features-5.features-section {
  margin-top: 0 !important;
}

/* Sectie 4 (Jij kiest de beelden) - zacht roze zonder transparantie */
body.theme-f .features-5.bg--whitesmoke {
  background-color: rgb(238, 198, 197) !important;
  background-image: none !important;
}

/* Sectie 6 (Testimonials) - verwijder het gekleurde vlak achter de cards */
body.theme-f .reviews-3-wrapper:after {
  display: none !important;
}

/* Sectie 6 (Wat anderen zeggen) - oranje met 50% transparantie */
body.theme-f #reviews,
body.theme-f #reviews.bg--whitesmoke,
body.theme-f .reviews-3.reviews-section,
body.theme-f .reviews-3.reviews-section.bg--whitesmoke {
  background-color: rgba(224, 94, 42, 0.5) !important;
}

/* Navigatie - meer ruimte tussen laatste menu-item en CTA-knop */
body.theme-f .wsmenu > .wsmenu-list > li:last-child {
  margin-left: 20px !important;
}

/* Logo groter maken en uitlijnen met menu items */
body.theme-f .desktoplogo img,
body.theme-f .desktoplogo .logo-black img,
body.theme-f .desktoplogo .logo-white img,
body.theme-f .logo-black img,
body.theme-f .logo-white img {
  height: 70px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  position: relative !important;
  top: -1px !important;
}

/* Header wrapper uitlijnen met Bootstrap container */
body.theme-f .wsmainwp {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Navigatiebalk - volledig transparant */
body.theme-f header,
body.theme-f .wsmainfull,
body.theme-f .header-wrapper {
  background-color: transparent !important;
}

/* Logo kleiner op kleinere schermen */
@media (max-width: 1200px) {
  body.theme-f .desktoplogo img,
  body.theme-f .logo-black img,
  body.theme-f .logo-white img {
    height: 50px !important;
  }
}

@media (max-width: 992px) {
  body.theme-f .desktoplogo img,
  body.theme-f .logo-black img,
  body.theme-f .logo-white img {
    height: 40px !important;
  }
}

/* Mobile logo */
body.theme-f .smllogo img {
  height: 45px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
}

/* Sectie 5 (Waarom Song2Give) - zacht groen-grijs met 60% transparantie */
body.theme-f #features,
body.theme-f .features-1.features-section {
  background-color: rgba(238, 240, 230, 0.6) !important;
}

/* FAQ sectie - zelfde achtergrond als Waarom Song2Give */
body.theme-f #faqs,
body.theme-f .faqs-1.faqs-section {
  background-color: rgba(238, 240, 230, 0.6) !important;
}

/* Iconen achtergrond bij Waarom Song2Give - volledig transparant */
body.theme-f .shape-ico svg path {
  fill: transparent !important;
}

/* Dropdown menu items - geen kleurverandering bij hover */
body.theme-f .wsmenu > .wsmenu-list > li > .wsmenu-submenu li a:hover,
body.theme-f .wsmenu > .wsmenu-list > li > .wsmenu-submenu li a:focus,
body.theme-f .wsmenu .sub-menu li a:hover,
body.theme-f .wsmenu .sub-menu li a:focus {
  color: inherit !important;
}

/* Footer - donkergrijze achtergrond met witte tekst */
body.theme-f .footer {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
}

body.theme-f .footer h6,
body.theme-f .footer .d-title,
body.theme-f .footer .m-title,
body.theme-f .footer p,
body.theme-f .footer a,
body.theme-f .footer .foo-links li p,
body.theme-f .footer .foo-links li a,
body.theme-f .footer .footer-copyright p,
body.theme-f .footer .footer-connect h6,
body.theme-f .footer .footer-connect p,
body.theme-f .footer .footer-connect a {
  color: #ffffff !important;
}

body.theme-f .footer a:hover {
  color: #cccccc !important;
}

body.theme-f .footer hr {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.theme-f .footer .footer-socials a {
  color: #ffffff !important;
}

body.theme-f .footer .footer-socials a:hover {
  color: #cccccc !important;
}