/* ==============================================================
   COACH-ATELIER / SIMPLYBOOK.ME - VOORZICHTIGE CUSTOM CSS
   Gebruik in: Speciale functies > Aangepaste CSS > Instellingen
   - Tab "Booking pages CSS" voor de externe SimplyBook-boekingspagina
   - Tab "Widget CSS" voor de ingesloten booking widget

   Eerst de kleuren invullen via Ontwerpinstellingen (KLEURCODES.txt).
   De selectors hieronder zijn conservatief; sommige verschillen per thema.
   Test altijd op de preview + mobiel. Zet geen CSS in de WP Customizer
   om de inhoud van een cross-origin iframe te veranderen.
   ============================================================== */
:root {
  --ca-accent: #A94F4B;
  --ca-accent-hover: #943F3C;
  --ca-text: #4B3135;
  --ca-background: #F8F4F0;
  --ca-border: #E5D9D2;
}

/* Basisstijl in de beschikbare boekings-UI */
body {
  background-color: var(--ca-background);
  color: var(--ca-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* De hoofdcontainer is opgenomen in officiële SimplyBook-CSS voorbeelden. */
#sb-main-container {
  color: var(--ca-text);
}

/* Knoppen (de thema-UI doet de primaire kleur; dit verfijnt de vorm). */
#sb-main-container .btn,
#sb-main-container button,
#sb-main-container input[type="button"],
#sb-main-container input[type="submit"] {
  border-radius: 10px;
  transition: background-color .16s ease, box-shadow .16s ease;
}

/* Dit richt zich op gangbare Bootstrap-achtige hoofdknoppen.
   Het verandert geen disabled-status of boekingsbeschikbaarheid. */
#sb-main-container .btn-primary,
#sb-main-container .btn-success {
  background-color: var(--ca-accent);
  border-color: var(--ca-accent);
  color: #fff;
}
#sb-main-container .btn-primary:hover,
#sb-main-container .btn-success:hover {
  background-color: var(--ca-accent-hover);
  border-color: var(--ca-accent-hover);
  color: #fff;
}

/* Rustiger invoervelden. */
#sb-main-container input[type="text"],
#sb-main-container input[type="email"],
#sb-main-container input[type="tel"],
#sb-main-container select,
#sb-main-container textarea {
  border-radius: 8px;
  border-color: var(--ca-border);
}

/* Bij toetsenbordnavigatie blijft focus zichtbaar. */
#sb-main-container a:focus-visible,
#sb-main-container button:focus-visible,
#sb-main-container input:focus-visible,
#sb-main-container select:focus-visible {
  outline: 3px solid #71826D;
  outline-offset: 2px;
}

/* OPTIONAL: alleen activeren indien de boekingspagina zélf ook de titel
   en banner van de WordPress-site toont, waardoor het dubbel wordt.
   Dit verbergt ook knoppen in de SimplyBook-banner.



/* Coach-Atelier: titel en ondertitel */

.company-name.company-logo-and-name {
    font-size: 0 !important;
    line-height: 0 !important;
}

.company-name.company-logo-and-name::before {
    content: "Reserveer De Studio";
    display: block;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    color: #4B3135;
    text-align: center;
}

.company-name.company-logo-and-name::after {
    content: "Een fijne plek voor coaching, gesprekken en creatieve sessies.";
    display: block;
    margin-top: 12px;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 400;
    line-height: 1.6;
    color: #705A56;
    text-align: center;
}