/* ============================================================
   Hondenhuisjes (Torvi & Abby) - stijl voor de boekingspagina
   (huisje.php). Afgestemd op www.hondenhuisjes.be: licht/wit en
   luchtig, met een zacht blauw accent.
   Overschrijft waar nodig de gedeelde Dirty Dogz-stijl (style8.css).
   ============================================================ */

#afspraak-maken {
    --torvi-accent: #6fa8c7;        /* zacht blauw, zoals de titels op huisjetorvi.be */
    --torvi-accent-donker: #4f87a6;
    --torvi-accent-licht: #eaf3fa;
    /* lettertype van huisjetorvi.be: Brandon Grotesque Light (Monotype, betaald);
       Montserrat is de gratis fallback zodat het er ook zonder die kit goed uitziet */
    --torvi-font: 'brandon-grot-w01-light', 'brandon-grot-w05-light', 'Montserrat', sans-serif;
}

/* lettertype op de hele boekingssectie */
#afspraak-maken,
#afspraak-maken .form-control,
#afspraak-maken .btn,
#afspraak-maken .nav-link {
    font-family: var(--torvi-font);
}

/* ----- Boekingspaneel: licht/wit (geen beige) ----- */
#afspraak-maken .bg-secondary {
    background-color: #f4f6f8 !important;   /* subtiel lichter dan de witte sectie-achtergrond */
    color: #555;
    border: 1px solid #e3e8ec;
    border-radius: 0;   /* rechte hoeken */
}

/* ----- Koppen: licht lettertype in het zachte blauw ----- */
#afspraak-maken .section-title h2,
#afspraak-maken h3,
#afspraak-maken h4,
#afspraak-maken h5 {
    font-family: var(--torvi-font);
    color: var(--torvi-accent);
    font-weight: 300;
    letter-spacing: .4px;
}
#afspraak-maken .section-title h2::after,
#afspraak-maken .section-title h2::before {
    background-color: var(--torvi-accent) !important;
}

/* ----- Tabs ----- */
#afspraak-maken .nav-tabs .nav-link { color: #8a8a8a; background-color: #ffffff; }
#afspraak-maken .nav-tabs .nav-link.active {
    color: var(--torvi-accent);
    background-color: #ffffff;
    border-color: transparent;
    border-bottom: 3px solid var(--torvi-accent);
    font-weight: 600;
}

/* ----- Knoppen (zacht blauw accent) -----
   !important omdat style8.css (#e17648 oranje) anders kan doorschemeren */
#afspraak-maken .btn-outline-primary {
    color: var(--torvi-accent) !important;
    border-color: var(--torvi-accent) !important;
    background-color: transparent !important;
    border-radius: 6px;
}
#afspraak-maken .btn-outline-primary:hover,
#afspraak-maken .btn-outline-primary:focus,
#afspraak-maken .btn-outline-primary:not(.disabled):active {
    color: #fff !important;
    background-color: var(--torvi-accent) !important;
    border-color: var(--torvi-accent) !important;
    box-shadow: none !important;
}
#afspraak-maken .btn-outline-primary:disabled,
#afspraak-maken .btn-outline-primary.disabled {
    color: var(--torvi-accent) !important;
    background-color: transparent !important;
    opacity: .55;
}
#afspraak-maken .btn-link { color: var(--torvi-accent) !important; }

/* ----- Links & accenttekst ----- */
#afspraak-maken a { color: var(--torvi-accent) !important; }
#afspraak-maken a:hover { color: var(--torvi-accent-donker) !important; }
#afspraak-maken .text-primary { color: var(--torvi-accent-donker) !important; }

/* footer + cookiemelding van deze pagina ook in het accent (staan buiten #afspraak-maken,
   dus de CSS-variabele geldt hier niet -> letterlijke hex) */
#footer a,
.cookiealert a { color: #6fa8c7 !important; }

/* ----- Formuliervelden ----- */
#afspraak-maken .form-control:focus {
    border-color: var(--torvi-accent);
    box-shadow: 0 0 0 .2rem rgba(111, 168, 199, .18);
}

/* ----- Prijssamenvatting ----- */
#afspraak-maken #berekendeprijs strong { color: var(--torvi-accent-donker); }

/* ============================================================
   Boekingswidget: periodekeuze + kalenderkleuren
   (verhuisd uit de inline <style> van huisje.php)
   ============================================================ */

/* ----- Stap 1: keuze van het huisje (Torvi / Abby) ----- */
.huisjekaart {
    background: #fff;
    border: 1px solid #e3e8ec;
    padding: 20px 22px;
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.huisjekaart.gekozen {
    border-color: var(--torvi-accent);
    box-shadow: 0 0 0 1px var(--torvi-accent) inset;
}
.huisjekaart h3 { margin-top: 0; margin-bottom: 10px; }
.huisjekaart-kort { font-size: 13px; color: #888; margin-bottom: 16px; }
.huisjekaart-prijzen { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.huisjekaart-prijzen th,
.huisjekaart-prijzen td { padding: 5px 6px; border-bottom: 1px solid #eef1f4; text-align: right; }
.huisjekaart-prijzen th:first-child,
.huisjekaart-prijzen td:first-child { text-align: left; }
.huisjekaart-prijzen th { color: var(--torvi-accent); font-weight: 600; }
.huisjekaart-uren { display: block; font-size: 11px; color: #999; }
.huisjekaart-extra { font-size: 13px; color: #888; margin-top: 8px; }
.huisjekaart-link { font-size: 13px; }
.huisjekaart-nietbeschikbaar {
    background: #fdf3e7;
    border: 1px solid #f2ddc2;
    color: #8a6023;
    padding: 10px 12px;
    font-size: 14px;
}

#divKalender .legende { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 13px; margin-top: 14px; }
#divKalender .legende-item { display: inline-flex; align-items: center; gap: 6px; }

.bol { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid #bbb; }
.bol-kies { background: #AFE1AF; border-color: #9fd6a0; }
.bol-vrij { background: #e9f9ec; border-color: #cdefd3; }
.bol-vol { background: #ffc9c9; }
.bol-gesloten { background: #dee2e6; }
/* wisseldag: ochtend nog bezet, avond vrij */
.bol-wissel {
    background: linear-gradient(to bottom right,
        #ffc9c9 0 calc(50% - 1px), #ffffff calc(50% - 1px) calc(50% + 1px), #AFE1AF calc(50% + 1px) 100%);
    border-color: #cfd8d2;
}

/* De kleuren van één kalenderdag. Ook gebruikt door de diagonale wisseldagen:
   de JavaScript zet --h1 (ochtend, tot 10u) en --h2 (avond, vanaf 17u) op
   var(--dag-vrij), var(--dag-vol) of var(--dag-mijn). */
#afspraak-maken {
    --dag-vrij: #AFE1AF;
    --dag-vol: #ffe3e3;
    --dag-mijn: #5b8c6e;
}

/* één groen voor alle beschikbare / selecteerbare dagen */
.flatpickr-day.huisje-vrij,
.flatpickr-day.huisje-kies { background: var(--dag-vrij); border-color: #9fd6a0; color: #2b6b3f; }
.flatpickr-day.huisje-vrij:hover,
.flatpickr-day.huisje-kies:hover { background: #9fd6a0; }
/* vetter groen voor de dagen die volledig binnen de gekozen periode vallen */
.flatpickr-day.huisje-periode { background: var(--dag-mijn); border-color: #4f7d61; color: #fff; }
.flatpickr-day.huisje-vol { background: var(--dag-vol); border-color: #ffc9c9; color: #c92a2a; }
.flatpickr-day.huisje-gesloten { background: #dee2e6; color: #adb5bd; }
.flatpickr-day.huisje-nietselecteerbaar { background: #f8f9fa; color: #ced4da; }

/* Wisseldag: linksboven de ochtend (tot 10u), rechtsonder de avond (vanaf 17u).
   De dunne witte lijn ertussen maakt de scheiding duidelijk zichtbaar. */
#afspraak-maken .flatpickr-day.huisje-diagonaal {
    background: linear-gradient(to bottom right,
        var(--h1) 0 calc(50% - 1px),
        #ffffff calc(50% - 1px) calc(50% + 1px),
        var(--h2) calc(50% + 1px) 100%) !important;
    border-color: #cfd8d2;
    color: #2b3b2f;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;   /* leesbaar op beide helften */
}

/* Dagen van de vorige/volgende maand: geen beschikbaarheidskleur, zodat ze niet
   ten onrechte als geboekt overkomen. Blader naar die maand om ze te zien. */
#afspraak-maken .flatpickr-day.huisje-anderemaand {
    background: transparent !important;
    border-color: transparent !important;
    color: #d0d0d0 !important;
    cursor: default;
}

/* geen doorstreping op niet-selecteerbare dagen; enkel dagen uit het verleden blijven doorstreept */
#afspraak-maken .flatpickr-day { text-decoration: none !important; }
#afspraak-maken .flatpickr-day.huisje-nietselecteerbaar { text-decoration: line-through !important; }
/* klikken op niet-selecteerbare dagen toelaten zodat we een uitleg kunnen tonen (bv. enkel zondag) */
#afspraak-maken .flatpickr-day.flatpickr-disabled { pointer-events: auto; cursor: pointer; }

/* flatpickr-accenten in het zachte blauw i.p.v. de standaard themekleur */
#afspraak-maken .flatpickr-day.today { border-color: #5b8c6e; }
#afspraak-maken .flatpickr-day.today:hover,
#afspraak-maken .flatpickr-day.today:focus { background: #5b8c6e; border-color: #5b8c6e; color: #fff; }
#afspraak-maken .flatpickr-day.selected,
#afspraak-maken .flatpickr-day.selected:hover,
#afspraak-maken .flatpickr-day.selected:focus { background: #5b8c6e; border-color: #5b8c6e; }
/* kalender-header (maand/jaar + weekdagen) in het blauw van de Torvi-site */
#afspraak-maken .flatpickr-months,
#afspraak-maken .flatpickr-month,
#afspraak-maken .flatpickr-weekdays,
#afspraak-maken .flatpickr-weekdaycontainer { background: #6fa8c7 !important; }
#afspraak-maken .flatpickr-current-month,
#afspraak-maken .flatpickr-current-month input.cur-year,
#afspraak-maken .flatpickr-monthDropdown-months,
#afspraak-maken span.flatpickr-weekday { color: #fff !important; }
#afspraak-maken .flatpickr-monthDropdown-months { background: #6fa8c7 !important; }
#afspraak-maken span.flatpickr-weekday { background: #6fa8c7 !important; }
#afspraak-maken .flatpickr-prev-month svg,
#afspraak-maken .flatpickr-next-month svg { fill: #fff !important; }
#afspraak-maken .flatpickr-prev-month:hover svg,
#afspraak-maken .flatpickr-next-month:hover svg { fill: #eaf3fa !important; }

/* preloader-spinner in het Torvi-blauw i.p.v. het Dirty Dogz-oranje */
#preloader:before { border-color: #6fa8c7 !important; border-top-color: #eaf3fa !important; }

/* kortingregel in het prijsoverzicht */
#afspraak-maken .huisje-kortingregel { color: #2b6b3f; }

/* melding over een uitzonderlijke wisseldag (kerstvakantie) */
#afspraak-maken .huisje-uitzondering {
    background: #fdf3e7;
    border: 1px solid #f2ddc2;
    color: #8a6023;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
    text-align: left;
}
#afspraak-maken .huisje-uitzondering i { margin-right: 5px; }