/* ===========================================================================
   offerte.css -- de opmaak van het aanvraagformulier op /offerte
   ===========================================================================

   Alles bouwt op de variabelen uit site.css: --brand-blue (#103856),
   --brand-orange (#f56c20), --text-muted en --bg-light. Geen eigen hexwaarden
   voor de merkkleuren, zodat een wijziging daar hier meteen doorwerkt.

   Geen opmaak in de PHP: dit bestand hoort bij offerte.php en wordt alleen
   daar geladen.
   =========================================================================== */

/* --- de kaart om het formulier -------------------------------------------
   Zelfde beeld als het contactformulier: een witte pagina met daarin één
   lichtgrijs vak zonder rand. Daar stond eerst een witte kaart mét rand op
   een grijze ondergrond -- precies andersom dus.

   De grijstint komt uit Bootstraps --bs-light, dezelfde die .bg-light op
   /contact gebruikt. Zo blijven de twee gelijk als die ooit verandert. */
.hsb-aanvraag {
    background: var(--white, #fff);
}

.hsb-aanvraag__kaart {
    background: rgb(var(--bs-light-rgb, 248 249 250));
    border: 0;
    border-radius: 24px;
    padding: 2rem;
}

@media (min-width: 768px) {
    .hsb-aanvraag__kaart { padding: 2.75rem; }
}

/* --- genummerde stappen -------------------------------------------------- */
.hsb-stap {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.hsb-stap__nr {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-orange, #f56c20);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

.hsb-stap__titel {
    margin: 0;
    font-weight: 700;
    color: var(--brand-blue, #103856);
    font-size: 1.2rem;
}

.hsb-stap__sub {
    margin: .15rem 0 0;
    color: var(--text-muted, #86868b);
    font-size: .93rem;
}

.hsb-stap + .row,
.hsb-stap-blok { margin-bottom: 2.5rem; }

/* --- labels en velden ---------------------------------------------------- */
.hsb-aanvraag label.form-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand-blue, #103856);
    margin-bottom: .35rem;
}

.hsb-aanvraag .form-control,
.hsb-aanvraag .form-select {
    background-color: var(--white, #fff);
    border: 1px solid #dde2e8;
    border-radius: 12px;
    padding: .7rem .9rem;
}

.hsb-aanvraag .form-control:focus,
.hsb-aanvraag .form-select:focus {
    border-color: var(--brand-blue, #103856);
    box-shadow: 0 0 0 3px rgba(16, 56, 86, .12);
}

.hsb-aanvraag .form-text {
    font-size: .85rem;
    color: var(--text-muted, #86868b);
}

/* --- de gekozen persoon -------------------------------------------------- */
.hsb-gekozen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    border-radius: 14px;
    padding: .9rem 1.1rem;
    background: var(--white, #fff);
}

.hsb-gekozen__naam {
    font-weight: 700;
    color: var(--brand-blue, #103856);
    line-height: 1.25;
}

.hsb-gekozen__rol {
    font-size: .85rem;
    color: var(--text-muted, #86868b);
}

.hsb-gekozen__acties {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.hsb-gekozen__wijzig {
    background: none;
    border: 0;
    padding: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand-blue, #103856);
    text-decoration: underline;
    cursor: pointer;
}

/* --- de chips voor meerdere personen ------------------------------------- */
.hsb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.hsb-chips:empty { margin-bottom: 0; }

.hsb-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(16, 56, 86, .07);
    color: var(--brand-blue, #103856);
    border-radius: 999px;
    padding: .4rem .5rem .4rem .9rem;
    font-size: .9rem;
    font-weight: 600;
}

.hsb-chip__weg {
    background: none;
    border: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--brand-blue, #103856);
    opacity: .6;
    cursor: pointer;
    padding: 0 .2rem;
}

.hsb-chip__weg:hover { opacity: 1; }

/* De zoekregel: veld plus knop ernaast. */
.hsb-zoekrij {
    display: flex;
    gap: .6rem;
}

.hsb-zoekrij .form-control { flex: 1 1 auto; }

.hsb-zoekrij .btn {
    flex: 0 0 auto;
    border-radius: 12px;
    border: 1px solid var(--brand-orange, #f56c20);
    color: var(--brand-orange, #f56c20);
    background: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.hsb-zoekrij .btn:hover {
    background: var(--brand-orange, #f56c20);
    color: #fff;
}

/* De lijst met zoekresultaten onder het veld. */
.hsb-zoeklijst {
    position: relative;
}

.hsb-zoeklijst__uit {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: .3rem;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dde2e8;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 56, 86, .12);
    padding: .3rem;
    margin: 0;
    list-style: none;
}

.hsb-zoeklijst__uit[hidden] { display: none; }

.hsb-zoeklijst__uit li button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: .5rem .7rem;
    font-size: .93rem;
    color: var(--text-main, #1d1d1f);
    cursor: pointer;
}

.hsb-zoeklijst__uit li button:hover,
.hsb-zoeklijst__uit li button:focus {
    background: rgba(16, 56, 86, .07);
    color: var(--brand-blue, #103856);
}

.hsb-zoeklijst__rol {
    color: var(--text-muted, #86868b);
    font-size: .85em;
}

.hsb-zoeklijst__leeg {
    padding: .6rem .7rem;
    font-size: .9rem;
    color: var(--text-muted, #86868b);
}

/* --- het blok "nog geen spreker op het oog?" ----------------------------- */
.hsb-tip {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(16, 56, 86, .05);
    border-radius: 18px;
    padding: 1.1rem 1.4rem;
}

.hsb-tip__titel {
    margin: 0 0 .15rem;
    font-weight: 700;
    color: var(--brand-blue, #103856);
    font-size: 1.02rem;
}

.hsb-tip p {
    margin: 0;
    color: var(--text-muted, #86868b);
    font-size: .93rem;
}

/* --- de zijkolom --------------------------------------------------------- */
.hsb-zij {
    /* Zoals de kaarten in de zijkolom van /contact: geen rand, wel een
       zachte schaduw. */
    background: var(--white, #fff);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    padding: 1.6rem;
    margin-bottom: 1.25rem;
}

.hsb-zij__titel {
    font-weight: 700;
    color: var(--brand-blue, #103856);
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
}

.hsb-zij__punt {
    display: flex;
    gap: .8rem;
    margin-bottom: 1rem;
}

.hsb-zij__punt:last-child { margin-bottom: 0; }

.hsb-zij__vink {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(16, 56, 86, .09);
    color: var(--brand-blue, #103856);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}

.hsb-zij__kop {
    font-weight: 700;
    color: var(--brand-blue, #103856);
    font-size: .95rem;
    line-height: 1.3;
}

.hsb-zij__tekst {
    color: var(--text-muted, #86868b);
    font-size: .88rem;
    line-height: 1.45;
    margin: .1rem 0 0;
}

.hsb-zij--bellen { background: rgba(245, 108, 32, .07); }
.hsb-zij--advies { background: rgba(16, 56, 86, .05); }

/* --- het tekstblok onder het formulier ----------------------------------- */
.hsb-uitleg h2 {
    color: var(--brand-blue, #103856);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

.hsb-uitleg h3 {
    color: var(--brand-blue, #103856);
    font-weight: 700;
    font-size: 1.12rem;
    margin: 1.75rem 0 .5rem;
}

.hsb-uitleg p {
    color: var(--text-main, #1d1d1f);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* --- afsluiting onder de verzendknop ------------------------------------- */
.hsb-slot {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-muted, #86868b);
    font-size: .88rem;
}

@media (max-width: 575.98px) {
    .hsb-zoekrij { flex-direction: column; }
    .hsb-zoekrij .btn { width: 100%; }
    .hsb-gekozen { flex-direction: column; align-items: flex-start; }
}

/* --- placeholders ---------------------------------------------------------
   Heel licht, en dat kan hier zonder bezwaar.

   De reden: elk veld heeft een eigen zichtbaar label erboven. De placeholder
   draagt dus geen informatie die je nodig hebt om het formulier in te vullen
   -- het is alleen een voorbeeld. Verdwijnt hij half in de achtergrond, dan
   gaat er niets verloren, en dat is precies wat je wilt: hij hoort niet te
   lijken op iets wat er al staat.

   Dat is anders bij een formulier zonder labels, waar de placeholder het
   enige is dat zegt wat er in het veld moet. Daar zou deze tint te ver gaan.

   Ter vergelijking, contrast op wit:
       #86868b   3,6:1   de grijstint van de site
       #9aa3af   2,6:1   wat hier eerst stond
       #bcc3cd   1,8:1   nu
   Nog lichter dan dit wordt hij op een laptopscherm in de zon onzichtbaar. */
.hsb-aanvraag .form-control::placeholder,
.hsb-aanvraag .form-control::-webkit-input-placeholder {
    color: #bcc3cd;
    opacity: 1;              /* Firefox zet hier standaard een extra waas op. */
}

/* Een keuzelijst waarin nog niets gekozen is krijgt dezelfde tint. Een
   <select> kent geen ::placeholder, dus dat gaat met de klasse .is-leeg, die
   offerte-keuze.js erop zet zolang de waarde leeg is. De opties zelf houden
   de gewone tekstkleur, anders wordt de opengeklapte lijst onleesbaar. */
.hsb-aanvraag .form-select.is-leeg {
    color: #bcc3cd;
}

.hsb-aanvraag .form-select.is-leeg option {
    color: var(--text-main, #1d1d1f);
}