/*
 * Bewust minimaal. Alles wat Elementor native kan (kleuren, typografie,
 * randen, afstanden, de geselecteerde staat van een kaart) staat in Elementor
 * en komt uit de globals. Hier staat alleen wat Elementor niet kan.
 */

/* Elementor zet display:flex op containers via een class, en dat wint van de
   browserregel voor [hidden]. Zonder deze regel blijven allebei de tabs staan. */
#ul-calc [hidden],
.ul-calc [hidden] {
    display: none !important;
}

/* Een flex-item wordt standaard niet smaller dan zijn inhoud (min-width auto).
   Zodra het webfont geladen is worden de labels breder en breekt de vijfde
   kaart naar een eigen regel. Elementor kan min-width niet zetten, dus hier. */
#ul-calc .flexy-checkbox-radio__option-box,
.ul-calc .flexy-checkbox-radio__option-box {
    min-width: 0;
}

#ul-calc .flexy-checkbox-radio__label,
.ul-calc .flexy-checkbox-radio__label {
    overflow-wrap: break-word;
}

/* Het prijspaneel loopt op desktop mee tijdens het invullen. Dit gaat bewust
   niet via de sticky-optie van Elementor: die zet de class
   elementor-sticky--effects, waar de header van deze site eigen CSS voor heeft
   met een donkere achtergrond. Het paneel werd daar zwart van. */
@media (min-width: 1025px) {
    #ul-prijs-woning,
    #ul-prijs-bedrijf {
        position: sticky;
        /* De sticky header van de site is 100px hoog zodra hij meeloopt.
           Daar komt 60px lucht bij, anders plakt het paneel tegen de
           onderrand van de header en lijkt het eronder te verdwijnen. */
        top: 160px;
    }
}

/* De actieve tabknop. Inactief is doorzichtig met een groene rand, dat staat
   in Elementor. De actieve staat zet JavaScript met een class, en die kan
   Elementor niet stylen, dus staat hij hier. */
#ul-calc .ul-actief .elementor-button,
.ul-calc .ul-actief .elementor-button {
    background-color: var(--e-global-color-ff2905c);
    border-color: var(--e-global-color-ff2905c);
    color: var(--e-global-color-5362e22);
}

/* De stapkoppen komen uit een html-veld, dus Elementor stijlt ze niet mee.
   Een genummerde bol met een titel, en een lijn erboven die de stappen uit
   elkaar houdt. */
#ul-calc .ul-stap,
.ul-calc .ul-stap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 30px 0 15px;
    padding-top: 30px;
    border-top: 1px solid var(--e-global-color-449da8d);
}

/* Boven de eerste stap hoort geen lijn en geen extra ruimte. */
#ul-calc .ul-stap-eerste,
.ul-calc .ul-stap-eerste {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#ul-calc .ul-stapnummer,
.ul-calc .ul-stapnummer {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--e-global-color-ff2905c);
    color: var(--e-global-color-5362e22);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

#ul-calc .ul-staptitel,
.ul-calc .ul-staptitel {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--e-global-color-0dd69c8);
}

/* ------------------------------------------------------------------ */
/* Indeling van de keuzekaarten.                                       */
/* De plugin kent per formulier maar EEN breedte voor al zijn          */
/* keuzevelden, terwijl de typekaarten en de oppervlaktekaarten een    */
/* andere indeling nodig hebben. Daarom staat dat hier.                */
/* ------------------------------------------------------------------ */

/* Typekaarten: icoon links van de tekst, zoals een rij in een lijst. */
#ul-calc .ul-type .flexy-checkbox-radio__option-box,
.ul-calc .ul-type .flexy-checkbox-radio__option-box {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding-left: 18px;
    padding-right: 18px;
    text-align: left;
}

#ul-calc .ul-type .flexy-checkbox-radio__graphic,
.ul-calc .ul-type .flexy-checkbox-radio__graphic {
    flex: 0 0 auto;
}

#ul-calc .ul-type .flexy-checkbox-radio__label,
.ul-calc .ul-type .flexy-checkbox-radio__label {
    text-align: left;
}

/* Drie woningtypes naast elkaar in plaats van vijf: met vijf werd het krap
   en brak 2-onder-1-kap over twee regels. De 30% is inclusief de tussenruimte
   gekozen; bij 32% past de derde kaart er net niet meer bij. De kaarten mogen
   niet meegroeien, anders wordt de laatste kaart van een halve rij zo breed
   als de hele rij. */
#ul-tab-woning .ul-type .flexy-checkbox-radio__option-box {
    width: 30%;
    flex-grow: 0;
}

/* Vier pandtypes, twee naast elkaar, want met het icoon ernaast past
   Praktijk / Zorg niet in een smalle kaart. */
#ul-tab-bedrijf .ul-type .flexy-checkbox-radio__option-box {
    width: 48%;
    flex-grow: 0;
}

/* De oppervlaktekaarten bevatten maar een regel tekst; de hoogte van de
   typekaarten is daar te ruim voor. */
#ul-calc .ul-oppervlakte .flexy-checkbox-radio__option-box,
.ul-calc .ul-oppervlakte .flexy-checkbox-radio__option-box {
    min-height: 56px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Bij bedrijfspanden drie oppervlaktes naast elkaar. */
#ul-tab-bedrijf .ul-oppervlakte .flexy-checkbox-radio__option-box {
    width: 31%;
    flex-grow: 0;
}

@media (max-width: 767px) {
    /* Typekaarten over de volle breedte: icoon links, tekst ernaast. */
    #ul-calc .ul-type .flexy-checkbox-radio__option-box,
    .ul-calc .ul-type .flexy-checkbox-radio__option-box,
    #ul-tab-woning .ul-type .flexy-checkbox-radio__option-box,
    #ul-tab-bedrijf .ul-type .flexy-checkbox-radio__option-box {
        width: 100%;
    }

    /* Oppervlaktes twee naast elkaar; dat leest strakker dan vijf regels. */
    #ul-calc .ul-oppervlakte .flexy-checkbox-radio__option-box,
    .ul-calc .ul-oppervlakte .flexy-checkbox-radio__option-box {
        width: 47%;
        min-height: 64px;
    }
}

/* Op smalle schermen wordt het paneel een balk onderaan het scherm die
   meeloopt. Bovenaan de pagina zetten werkte niet: dan moet je terugscrollen
   om je prijs te zien nadat je gekozen hebt. De balk verschijnt pas zodra er
   een prijs is, en toont dan de gekozen combinatie en het bedrag. De
   zekerheden eronder vallen weg; die staan verderop op de pagina onder
   "Waarom kiezen voor Utilabel?". */
@media (max-width: 1024px) {
    #ul-prijs-woning,
    #ul-prijs-bedrijf {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        width: auto;
        margin: 0;
        padding: 12px 20px;
        border-radius: 0;
        border-top: 1px solid var(--e-global-color-449da8d);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        background: var(--e-global-color-5362e22);
    }

    /* Pas tonen als er echt een prijs staat. */
    #ul-prijs-woning.ul-heeft-prijs,
    #ul-prijs-bedrijf.ul-heeft-prijs {
        display: flex;
    }

    /* In de balk hoeven de kop en de zekerheden niet. */
    #ul-calc .ul-prijs-kop,
    #ul-calc .ul-prijs-punten {
        display: none;
    }

    #ul-calc .ul-prijs-regel {
        flex: 1 1 auto;
        min-width: 0;
    }

    #ul-calc .ul-prijs-bedrag,
    #ul-calc .ul-prijs-btw {
        flex: 0 0 auto;
        text-align: right;
    }

    /* In een balk is de koptekstmaat te fors; het bedrag mag hier compacter. */
    #ul-calc .ul-prijs-bedrag .elementor-heading-title {
        font-size: 24px;
        line-height: 1.2;
    }

    /* Ruimte onderaan de pagina zodat de balk niets afdekt. */
    body.ul-prijsbalk {
        padding-bottom: 84px;
    }
}