/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/



.opening-hours--card {

  padding: 26px 28px 18px;


  letter-spacing: 0.01em;
}

.opening-hours__title {
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  font-weight: 400;
}

.opening-hours__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opening-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border: 0;
  font-size: 17px;
  flex-wrap: wrap;
  border-bottom: 1px white solid;
}

.opening-hours__row--today {
  color: #d1581b;
  font-weight: 700;
}

.opening-hours__status {
  text-align: left;
}

.opening-hours__status--closed {
  color: #d1581b;
}

.opening-hours__day {
  flex: 0 0 auto;
  padding-right: 0;
}

.opening-hours__status {
  flex: 0 0 auto;
  min-width: 0;
}

@media (max-width: 480px) {
  .opening-hours--card {
    padding: 22px 18px;
  }

  .opening-hours__row {
    font-size: 14px;
  }
}

/* Image border accent: draw ring on parent .hover-wrap-inner when child img has .image-border */
.hover-wrap-inner:has(> img.image-border) {
  position: relative;
  overflow: visible;
}

img.image-border {
  display: block;
  position: relative;
  z-index: 1;
}

.hover-wrap-inner:has(> img.image-border)::before {
  content: "";
  position: absolute;
  width: 95%;
  height: 95%;
  border: 12px solid #CE1531;
  border-radius: 15px;
  bottom: -30px;
  right: -30px;
  z-index: 0;
  pointer-events: none;
}

/* Diensten grid */
.diensten-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 20px 0;
}

.dienst-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px);
  animation: dienstFadeUp 0.35s ease-out forwards;
  animation-delay: calc(var(--i) * 70ms);
}

.dienst-check::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #2ca24c;
  border-radius: 50%;
  line-height: 1;
  margin-top: 2px;
}

.dienst-label {
  display: inline-block;
}

@keyframes dienstFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 640px) {
  .diensten-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .diensten-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .diensten-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dienst-hidden {
  display: none;
}

.diensten-wrapper.is-mobile.is-expanded .dienst-hidden {
  display: flex;
}

.diensten-wrapper:not(.is-mobile) .dienst-hidden {
  display: flex;
}

.diensten-toggle {
  margin-top: 14px;
  background: transparent;
  border: none;
  color: #2ca24c;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}

.diensten-toggle.is-hidden {
  display: none;
}

/* Red border for columns */
.red-border {
  position: relative;
  overflow: visible;
}

.red-border::before {
  content: "";
  position: absolute;
  width: 95%;
  height: 95%;
  border: 12px solid #CE1531;
  border-radius: 15px;
  bottom: -30px;
  right: -30px;
  z-index: 0;
  pointer-events: none;
}


/* contact form */
/* 1. Reset van thema-haakjes en witruimte */
.form-section .wpcf7-form-control-wrap,
.form-section .wpcf7-form-control-wrap::before,
.form-section .wpcf7-form-control-wrap::after {
  content: none !important;
  border: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Lay-out van de rij (Geboortedatum + Telefoon) */
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  width: 100%;
}

.form-col {
  flex: 1;
}

.form-col-2 {
  flex: 2;
}

/* 3. Velden styling */
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-date,
.wpcf7-textarea {
  width: 100% !important;
  border: 1px solid #ccc !important;
  padding: 10px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* 4. Ruimte tussen Titels en Checkboxen verkleinen */
.form-section label:first-child {
  display: block !important;
  color: #b22222 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  margin-top: 20px !important;
  margin-bottom: 5px !important;
  /* Verkleind van 10px naar 5px */
}

/* De container van de checkboxen zelf strakker op de titel zetten */
.form-section .wpcf7-checkbox,
.form-section .wpcf7-radio {
  display: block !important;
  margin-top: -25px !important;
  /* Trekt de groep omhoog naar de titel */
}

/* 5. Checkbox & Radio styling */
.wpcf7-list-item {
  display: inline-flex !important;
  align-items: center !important;
  margin: 5px 20px 5px 0 !important;
  /* Verticale marge verkleind */
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #c42128 !important;
  margin-right: 8px !important;
}

.wpcf7-submit {
  margin-top: 20px;
}

/* 6. Mobiel: Alles onder elkaar */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-col,
  .form-col-2 {
    width: 100% !important;
  }
}