/*
 * Het uploadvak en de adresaanvulling van het projectformulier.
 * Enkel binnen .pc-formulier, zodat andere formulieren op de site
 * hun eigen opmaak houden.
 */

/* ---- het uploadvak ---- */

/* WPForms levert een eigen witte stijl mee die later laadt; vandaar de
   nadruk op deze regels. */
.pc-formulier .wpforms-container .wpforms-uploader {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px dashed rgba(201, 169, 110, .45) !important;
  border-radius: 3px !important;
  padding: 30px 20px !important;
  min-height: 0 !important;
  transition: border-color .25s ease, background .25s ease;
  cursor: pointer;
}

.pc-formulier .wpforms-container .wpforms-uploader:hover,
.pc-formulier .wpforms-container .wpforms-uploader.dz-drag-hover {
  border-color: #c9a96e !important;
  background: rgba(201, 169, 110, .07) !important;
}

.pc-formulier .wpforms-container .wpforms-uploader .dz-message {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: rgba(231, 221, 201, .9) !important;
}

.pc-formulier .wpforms-uploader .dz-message svg {
  width: 26px;
  height: 26px;
  color: #c9a96e;
  opacity: .85;
}

/* de eigen teksten van WPForms in onze typografie */
.pc-formulier .wpforms-container .wpforms-uploader .dz-message * { color: inherit !important; }

.pc-formulier .wpforms-uploader .dz-message .modern-title,
.pc-formulier .wpforms-uploader .dz-message > span,
.pc-formulier .wpforms-uploader .dz-message p {
  color: rgba(231, 221, 201, .9);
  font-size: 13.5px;
  letter-spacing: .01em;
  line-height: 1.6;
  margin: 0;
}

.pc-formulier .wpforms-uploader .dz-message .modern-hint,
.pc-formulier .wpforms-uploader .dz-message small {
  color: rgba(231, 221, 201, .55);
  font-size: 11.5px;
  letter-spacing: .04em;
}

.pc-formulier .wpforms-uploader .dz-message a,
.pc-formulier .wpforms-uploader .dz-message .modern-title a {
  color: #c9a96e;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 110, .5);
}

/* de bestanden die al gekozen zijn */
.pc-formulier .wpforms-uploader .dz-preview {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(201, 169, 110, .25);
  border-radius: 3px;
  color: rgba(231, 221, 201, .9);
}

.pc-formulier .wpforms-uploader .dz-preview .dz-filename,
.pc-formulier .wpforms-uploader .dz-preview .dz-size {
  color: rgba(231, 221, 201, .8);
}

.pc-formulier .wpforms-uploader .dz-preview .dz-remove { color: #c9a96e; }

/* ---- de tijdsloten ---- */

/* Met vijfentwintig sloten onder elkaar wordt de stap op een telefoon
   eindeloos lang; twee kolommen houdt ze overzichtelijk. */
@media (max-width: 700px) {
  /* realisatie.css zet hier repeat(auto-fit, minmax(210px, 1fr)) met !important
     en een zwaardere selector; die moeten we dus evenaren. */
  .pc-formulier div.wpforms-container .wpforms-form .mcs-uur ul,
  .pc-formulier .mcs-uur ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .pc-formulier .mcs-uur ul li { margin: 0 !important; }
  .pc-formulier .mcs-uur ul li label { padding-left: 34px; }
}

/* ---- adresaanvulling ---- */

.pc-formulier .mcs-suggestie-huis { position: relative; }

.pc-formulier .mcs-suggesties {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #241f18;
  border: 1px solid rgba(201, 169, 110, .35);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  max-height: 280px;
  overflow-y: auto;
}

.pc-formulier .mcs-suggesties li {
  padding: 9px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(231, 221, 201, .88);
  cursor: pointer;
}

.pc-formulier .mcs-suggesties li:hover,
.pc-formulier .mcs-suggesties li.aan {
  background: rgba(201, 169, 110, .16);
  color: #fdfaf4;
}

.pc-formulier .mcs-suggesties li b { font-weight: 500; color: #fdfaf4; }
.pc-formulier .mcs-suggesties li span { color: rgba(231, 221, 201, .55); }

.pc-formulier .mcs-bezig::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border: 1.5px solid rgba(201, 169, 110, .3);
  border-top-color: #c9a96e;
  border-radius: 50%;
  animation: mcs-draai .7s linear infinite;
}

@keyframes mcs-draai { to { transform: rotate(360deg); } }

/* De hulptekst in een leeg veld stond te donker om te lezen. */
.pc-formulier input::placeholder,
.pc-formulier textarea::placeholder {
  color: rgba(231, 221, 201, .6) !important;
  opacity: 1;
}

.pc-formulier .wpforms-field-date-time input {
  color: #f3ece0;
  cursor: pointer;
}

/* ---- de kalender bij de afspraakdatum ---- */

.flatpickr-calendar {
  background: #241f18 !important;
  border: 1px solid rgba(201, 169, 110, .35) !important;
  border-radius: 3px !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5) !important;
  font-family: inherit;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: #241f18 !important; }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: #241f18 !important; }

.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: #fdfaf4 !important;
  fill: #fdfaf4 !important;
}

/* De uitklaplijst van de maanden tekent het besturingssysteem zelf, met een
   witte grond. Lichte letters vallen daar weg, dus die zetten we donker. */
.flatpickr-current-month .flatpickr-monthDropdown-months option,
.flatpickr-monthDropdown-months option {
  background: #fff !important;
  color: #241f18 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #c9a96e !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #fdfaf4 !important; }

.flatpickr-weekdays { background: transparent !important; }

span.flatpickr-weekday {
  background: transparent !important;
  color: rgba(231, 221, 201, .6) !important;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.flatpickr-day {
  color: #f3ece0 !important;
  background: rgba(255, 255, 255, .04);
  border-radius: 2px;
  border-color: transparent;
  font-weight: 500;
}

.flatpickr-day:hover {
  background: rgba(201, 169, 110, .3) !important;
  border-color: transparent;
  color: #fff !important;
}

.flatpickr-day.today { border-color: rgba(201, 169, 110, .7); }

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #c9a96e !important;
  border-color: #c9a96e !important;
  color: #1d1a15 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(231, 221, 201, .28) !important;
  background: transparent !important;
  text-decoration: line-through;
  text-decoration-color: rgba(231, 221, 201, .18);
}

.numInputWrapper span.arrowUp::after { border-bottom-color: #c9a96e; }
.numInputWrapper span.arrowDown::after { border-top-color: #c9a96e; }
.numInputWrapper:hover { background: rgba(201, 169, 110, .12); }
/* Het jaartal is een invoerveld. Bij klikken selecteert de browser de tekst,
   en met een lichte selectiekleur op lichte letters zag je niets meer. */
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .numInputWrapper input {
  color: #fdfaf4 !important;
  background: transparent !important;
  -webkit-text-fill-color: #fdfaf4;
}

.flatpickr-current-month input.cur-year::selection { background: #c9a96e; color: #1d1a15; }
.flatpickr-current-month input.cur-year::-moz-selection { background: #c9a96e; color: #1d1a15; }

/* het landveld als keuzelijst in dezelfde stijl als de rest */
.pc-formulier select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #c9a96e 50%), linear-gradient(135deg, #c9a96e 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}