/*
 * Fælles styling til adressefelterne i prisberegnerne:
 *
 * - Bil
 * - Hus
 * - Indbo
 *
 * Denne fil skal indlæses efter:
 * vf-address-autocomplete.css
 */

/* =========================================================
   FÆLLES BEREGNERLAYOUT
   ========================================================= */

.calculations .vf-calculator-row {
    display: grid !important;
    align-items: start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;

    gap: 16px !important;

    box-sizing: border-box !important;
}

/*
 * Bilberegner:
 *
 * 1. Alder
 * 2. Adresse
 * 3. Nummerplade
 * 4. Beregn-knap
 */
.calculations .vf-calculator-row--car {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        136px !important;
}

/*
 * Indboberegner:
 *
 * 1. Adresse
 * 2. Værdi af indbo
 * 3. Alder
 * 4. Beregn-knap
 */
.calculations .vf-calculator-row--home {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        136px !important;
}

/*
 * Husberegner:
 *
 * 1. Adresse
 * 2. Alder
 * 3. Beregn-knap
 *
 * Husberegneren har ét felt mindre end bil og indbo.
 * Derfor begrænses rækkens bredde, så felterne ikke
 * bliver spredt ud over hele beregnerområdet.
 */
.calculations .vf-calculator-row--house {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        136px !important;

    width: calc(100% - 32px) !important;
    max-width: 850px !important;
}


/* =========================================================
   DIREKTE ELEMENTER I BEREGNERRÆKKEN
   ========================================================= */

.calculations
.vf-calculator-row
> .vf-address--calculator,
.calculations
.vf-calculator-row
> input.form-control,
.calculations
.vf-calculator-row
> select.form-control,
.calculations
.vf-calculator-row
> .form-group,
.calculations
.vf-calculator-row
> .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ADRESSEKOMPONENT
   ========================================================= */

.calculations
.vf-calculator-row
> .vf-address--calculator {
    position: relative !important;
    z-index: auto !important;

    display: block !important;

    padding: 0 !important;

    overflow: visible !important;
}

/*
 * Wrapperne omkring det synlige adressefelt må ikke
 * tilføje bredde, margin eller padding.
 */
.calculations
.vf-address--calculator
[data-address-role="autocomplete-content"],
.calculations
.vf-address--calculator
.vf-address__autocomplete {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}

/*
 * Det synlige adressefelt udfylder hele adressekomponenten.
 */
.calculations
.vf-address--calculator
[data-address-role="input"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   FELTHØJDER
   ========================================================= */

/*
 * Alle almindelige felter i beregnerrækken får samme højde.
 */
.calculations
.vf-calculator-row
.form-control {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;

    line-height: 1.5 !important;

    box-sizing: border-box !important;
}

/*
 * Alle Beregn-knapper får samme højde og bredde.
 */
.calculations
.vf-calculator-row
> .btn {
    display: block !important;

    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;

    box-sizing: border-box !important;
}


/* =========================================================
   BILBEREGNER
   ========================================================= */

/*
 * Nummerpladefeltet ligger inde i en form-group.
 */
.calculations
.vf-calculator-row--car
> .form-group {
    position: relative;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/*
 * Nummerpladefeltet udfylder sin kolonne.
 */
.calculations
.vf-calculator-row--car
> .form-group
.form-control {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

/*
 * Linket under nummerpladefeltet skal ikke påvirke
 * rækkens kolonnebredde.
 */
.calculations
.vf-calculator-row--car
.js-plate-toggle {
    display: inline-block;

    margin-top: 0.35rem;
}


/* =========================================================
   HUSBEREGNER
   ========================================================= */

/*
 * Sikrer, at husberegnerens adresse-wrapper,
 * aldersfelt og knap placeres korrekt i grid-layoutet.
 */
.calculations
.vf-calculator-row--house
> .vf-address--calculator {
    grid-column: 1;
}

.calculations
.vf-calculator-row--house
> #house_age {
    grid-column: 2;
}

.calculations
.vf-calculator-row--house
> .btn {
    grid-column: 3;
}


/* =========================================================
   INDBOBEREGNER
   ========================================================= */

/*
 * Sikrer den korrekte rækkefølge i indboberegneren.
 */
.calculations
.vf-calculator-row--home
> .vf-address--calculator {
    grid-column: 1;
}

.calculations
.vf-calculator-row--home
> #home_sum {
    grid-column: 2;
}

.calculations
.vf-calculator-row--home
> #home_age {
    grid-column: 3;
}

.calculations
.vf-calculator-row--home
> .btn {
    grid-column: 4;
}


/* =========================================================
   ADRESSE-DROPDOWN
   ========================================================= */

/*
 * Dropdownen placeres direkte under adressefeltet.
 *
 * På desktop må dropdownen være bredere end inputfeltet,
 * så lange adresser kan vises over flere linjer.
 */
.calculations
.vf-address--calculator
.vf-address__suggestions {
    position: absolute !important;

    top: calc(100% + 2px) !important;
    right: auto !important;
    left: 0 !important;

    z-index: 100 !important;

    display: none;

    width: 520px !important;
    min-width: 100% !important;
    max-width: calc(100vw - 30px) !important;
    max-height: 320px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    color: #212529;
    text-align: left;

    background-color: #fff !important;
    opacity: 1 !important;

    border: 1px solid #ced4da;
    border-radius: 0.25rem;

    box-shadow:
        0 0.5rem 1rem
        rgba(0, 0, 0, 0.15);

    box-sizing: border-box !important;
}


/* =========================================================
   ADRESSEFORSLAG
   ========================================================= */

/*
 * Lange adresseforslag kan fylde flere linjer.
 * Forslagets højde følger automatisk tekstens højde.
 */
.calculations
.vf-address--calculator
.vf-address__option {
    position: relative;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0.65rem 0.75rem !important;

    color: #212529;

    font: inherit;
    line-height: 1.4 !important;

    text-align: left;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    overflow: visible !important;
    text-overflow: clip !important;

    background-color: #fff !important;
    opacity: 1 !important;

    border: 0;
    border-bottom: 1px solid #eee;

    cursor: pointer;

    box-sizing: border-box !important;
}

.calculations
.vf-address--calculator
.vf-address__option:last-child {
    border-bottom: 0;
}

.calculations
.vf-address--calculator
.vf-address__option:hover,
.calculations
.vf-address--calculator
.vf-address__option:focus,
.calculations
.vf-address--calculator
.vf-address__option.is-active {
    color: #212529;

    background-color: #f1f3f5 !important;

    outline: none;
}


/* =========================================================
   STATUSBESKEDER
   ========================================================= */

.calculations
.vf-address--calculator
.vf-address__status {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0.65rem 0.75rem;

    color: #6c757d;

    line-height: 1.4;
    text-align: left;
    white-space: normal;

    background-color: #fff !important;

    box-sizing: border-box;
}


/* =========================================================
   FEJLBESKEDER
   ========================================================= */

/*
 * En tom fejlbesked må ikke optage plads i rækken.
 */
.calculations
.vf-address--calculator
.invalid-feedback:empty {
    display: none !important;
}


/* =========================================================
   FALLBACKFELTER
   ========================================================= */

.calculations
.vf-address--calculator
.vf-address__calculator-fallback {
    display: none;

    width: 100%;

    margin-top: 0.5rem;
}

.calculations
.vf-address--calculator
.vf-address__calculator-fallback
.form-control {
    width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ETAGE OG DØR
   ========================================================= */

/*
 * Etage og dør vælges som en del af den komplette adresse.
 * Felterne må derfor aldrig blive vist separat.
 */
.calculations .vf-address__floor-wrapper,
.calculations .vf-address__floor-wrapper.is-visible,
.calculations .vf-address__door-wrapper,
.calculations .vf-address__door-wrapper.is-visible {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {
    /*
     * Bil og indbo bruger to kolonner på tablet.
     */
    .calculations .vf-calculator-row--car,
    .calculations .vf-calculator-row--home {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

    /*
     * Bilens knap placeres efter nummerpladefeltet.
     */
    .calculations
    .vf-calculator-row--car
    > .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Indboberegnerens knap placeres i fjerde gridcelle.
     */
    .calculations
    .vf-calculator-row--home
    > .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Hus beholder to felter og knap på samme række,
     * så længe der er plads.
     */
    .calculations .vf-calculator-row--house {
        width: calc(100% - 32px) !important;
        max-width: 850px !important;
    }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767.98px) {
    /*
     * Alle beregnere skifter til én kolonne.
     */
    .calculations .vf-calculator-row,
    .calculations .vf-calculator-row--car,
    .calculations .vf-calculator-row--home,
    .calculations .vf-calculator-row--house {
        grid-template-columns:
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-right: 0 !important;
        margin-left: 0 !important;

        gap: 12px !important;
    }

    /*
     * Nulstil eksplicitte grid-kolonner.
     */
    .calculations
    .vf-calculator-row--house
    > .vf-address--calculator,
    .calculations
    .vf-calculator-row--house
    > #house_age,
    .calculations
    .vf-calculator-row--house
    > .btn,
    .calculations
    .vf-calculator-row--home
    > .vf-address--calculator,
    .calculations
    .vf-calculator-row--home
    > #home_sum,
    .calculations
    .vf-calculator-row--home
    > #home_age,
    .calculations
    .vf-calculator-row--home
    > .btn {
        grid-column: auto !important;
    }

    /*
     * Alle direkte elementer fylder hele bredden.
     */
    .calculations
    .vf-calculator-row
    > .vf-address--calculator,
    .calculations
    .vf-calculator-row
    > input.form-control,
    .calculations
    .vf-calculator-row
    > select.form-control,
    .calculations
    .vf-calculator-row
    > .form-group,
    .calculations
    .vf-calculator-row
    > .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    /*
     * Dropdownen må ikke være bredere end adressefeltet
     * på mobil.
     */
    .calculations
    .vf-address--calculator
    .vf-address__suggestions {
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   STACKING OG LOADING
   ========================================================= */

/*
 * Opret et lokalt stacking context omkring prisberegneren.
 * Adressefelt og dropdown kan dermed ikke komme foran
 * hjemmesidens topmenu.
 */
.calculations {
    isolation: isolate;
}

/*
 * Adressekomponenten må ikke ligge foran loading-overlay
 * eller topmenu.
 */
.calculations
.vf-calculator-row
> .vf-address--calculator {
    position: relative !important;
    z-index: auto !important;
}

/*
 * Wrapperne omkring adressefeltet skal heller ikke
 * oprette et selvstændigt højt stacking-lag.
 */
.calculations
.vf-address--calculator
[data-address-role="autocomplete-content"],
.calculations
.vf-address--calculator
.vf-address__autocomplete {
    position: relative !important;
    z-index: auto !important;
}

/*
 * Dropdownen ligger over felterne inde i beregneren,
 * men forbliver inde i beregnerens stacking context.
 */
.calculations
.vf-address--calculator
.vf-address__suggestions {
    z-index: 10 !important;
}

/*
 * Loading-elementet ligger over alle felter og dropdowns
 * inde i prisberegneren.
 *
 * Den eksisterende position og størrelse bevares.
 */
.calculations .loading {
    z-index: 20 !important;
}

/*
 * Hvis det grå lag genereres med et pseudo-element,
 * skal pseudo-elementet have samme lag.
 */
.calculations .loading::before,
.calculations .loading::after {
    z-index: 20 !important;
}

/* =========================================================
   DROPDOWN OVER EFTERFØLGENDE SEKTIONER
   ========================================================= */

/*
 * Prisberegneren skal ligge over efterfølgende sektioner,
 * mens en adresse-dropdown er åben.
 *
 * isolation bevarer lagdelingen inde i beregneren, så
 * adressefeltet ikke kommer foran topmenuen.
 */
.calculations {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate;
    overflow: visible !important;
}

/*
 * Beregnerens indre wrappers må ikke klippe dropdownen.
 */
.calculations .calculations__content,
.calculations #pills-tabContent,
.calculations .tab-pane,
.calculations form,
.calculations .vf-calculator-row,
.calculations .vf-address--calculator,
.calculations .vf-address__autocomplete {
    overflow: visible !important;
}

/*
 * Adresse-wrapperen bruger et normalt lokalt lag.
 */
.calculations .vf-address--calculator {
    position: relative !important;
    z-index: auto !important;
}

/*
 * Dropdownen ligger over alt andet inde i beregneren.
 */
.calculations
.vf-address--calculator
.vf-address__suggestions {
    position: absolute !important;
    z-index: 100 !important;
}

/*
 * Loading-overlayet ligger fortsat over dropdownen,
 * når en beregning er i gang.
 */
.calculations .loading {
    position: absolute;
    z-index: 200 !important;
}