/* =========================
   FONTS & VARIABLES
========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --font-primary: 'Poppins', Arial;
    --color-primary: #ffed00;
    --color-primary-dark: #2a375;
    --color-primary-medium: #e8e7da;
    --color-primary-light: #7699a9;
    --color-primary-20: #ffed0033;
}


/* =========================
   BUTTONS — Bas
   Alla primära knappar och wizard-actions
   delar samma utseende: gul bakgrund,
   mörkgrå text, font-weight 700.
========================= */
.btn-primary,
.btn-secondary,
.wizard > .actions > ul li:first-of-type a,
.wizard > .actions > ul li:not(:first-of-type) a {
    font-weight: 700;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #333;
}

/* =========================
   BUTTONS — Hover
   Alla knappar behåller gul bakgrund på hover,
   precis som primary-knappen. Ingen färgändring.
========================= */
.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover,
.wizard > .actions > ul li:first-of-type a:hover,
.wizard > .actions > ul li:not(:first-of-type) a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #333;
}

/* =========================
   BUTTONS — Active / Focus / Disabled
========================= */
.btn-primary.dropdown-toggle:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle.dropdown-toggle:focus,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle:not(:disabled):not(.disabled):active:focus,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle.dropdown-toggle:focus,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled).active,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled).active:focus,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled):active,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:not(:disabled):not(.disabled):active:focus,
.wizard > .actions > ul li:not(:first-of-type) a.dropdown-toggle:focus,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled).active,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled).active:focus,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled):active,
.wizard > .actions > ul li:not(:first-of-type) a:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 .2rem var(--color-primary-dark);
}

/* =========================
   BUTTONS — Globala färgfix
   Säkerställer att text aldrig blir vit
   mot gul bakgrund.
========================= */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.show > .btn-primary.dropdown-toggle,
.show > .btn-primary.dropdown-toggle.disabled,
.show > .btn-primary.dropdown-toggle:disabled,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle.disabled,
.wizard > .actions > ul li:not(:first-of-type) .show > a.dropdown-toggle:disabled,
.wizard > .actions > ul li:not(:first-of-type) a,
.wizard > .actions > ul li:not(:first-of-type) a.disabled,
.wizard > .actions > ul li:not(:first-of-type) a:disabled {
    color: #333;
}

.btn-secondary:focus,
.btn-secondary:hover,
.wizard > .actions > ul li:first-of-type a:focus,
.wizard > .actions > ul li:first-of-type a:hover,
a.btn-secondary:focus,
a.btn-secondary:hover {
    color: #333;
}

.btn:not(:disabled):not(.disabled) {
    color: #333;
}

.btn-tertiary:not(:disabled):not(.disabled).active,
.btn-tertiary:not(:disabled):not(.disabled):active {
    color: #333;
}

/* Specialfall: hämta fler fakturor */
#buttonGetMoreInvoices {
    color: black !important;
}


/* =========================
   NAVBAR & LOGO
========================= */
.page-xs .logo {
    height: 6.875em;
}

.navbar-logo {
    height: 6.875em;
}

.navbar {
    height: 9.5em;
}


/* =========================
   TYPOGRAFI
========================= */
.font-weight-bold {
    color: #333;
}


/* =========================
   LÄNKAR
========================= */
a {
    color: #333;
}

.link-count {
    color: #333;
}


/* =========================
   BAKGRUNDER
========================= */
.bg-gray-alabaster {
    background-color: #fff;
}


/* =========================
   KOMPONENTER
========================= */
.link-count,
.spinner > span {
    background-color: #2a3751;
    color: #fff;
}

.object-position-right {
    object-position: center;
}

button.year-button.selected,
button.year-button.selected:hover {
    background-color: #2a3751;
}

.btn-tertiary:not(:disabled):not(.disabled).active img[src$=".svg"],
.btn-tertiary:not(:disabled):not(.disabled):active img[src$=".svg"] {
    filter: invert(0%);
}


/* =========================
   HIGHCHARTS — Generellt
========================= */
.highcharts-point-select {
    fill: var(--color-primary-dark) !important;
    stroke: var(--color-primary-dark) !important;
}

/* =========================
   HIGHCHARTS — Färger (Falbygdens energi)
========================= */
.highcharts-color-vat {
    fill: var(--color-gray-dusty);
    stroke: var(--color-gray-dusty);
}

.highcharts-color-energy-tax {
    fill: var(--color-gray-boulder);
    stroke: var(--color-gray-boulder);
}

.highcharts-color-power-fee,
.highcharts-color-fix-fee {
    fill: var(--color-primary);
    stroke: var(--color-primary);
}

.highcharts-color-consumption-fee {
    fill: var(--color-primary-medium);
    stroke: var(--color-primary-medium);
}

.highcharts-color-sum {
    display: none;
}

/* =========================
   HIGHCHARTS — Årsjämförelse
========================= */
.highcharts-color-compare-consumption-year-4,
.highcharts-color-year-compare-consumption.highcharts-series-3 {
    fill: green !important;
    stroke: green !important;
}


/* =========================
   WIZARD — Steg-navigation
========================= */
.wizard > .steps a {
    color: #333;
}

.wizard > .steps ul li:not(:last-child).done a:before {
    filter: invert(0);
}


/* =========================
   SELECT2
========================= */
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    color: #333;
}


/* =========================
   INLOGGNING / EXTERN INLOGGNING
========================= */
#tabExternalLogin {
    background: #fff;
    color: var(--color-primary);
    text-decoration: underline;
    border: none;
}

#literalExternalLoginHtml {
    text-align: center;
}

#tabExternalLogin.active {
    color: inherit;
    text-decoration: none;
    border: none;
    cursor: default;
}


/* =========================
   COOKIE — Consent-knappar
========================= */
#cc--main button#s-rall-bn,
#cc--main button#c-s-bn,
#cc--main button#s-sv-bn,
#cc--main button#c-p-bn,
#cc--main button#s-all-bn,
#cc--main button#s-rall-bn {
    color: var(--color-black);
    background-color: var(--color-primary);
    border-radius: 6.25em;
    border: 2px solid var(--color-primary);
    border-style: solid;
}

#cc--main button#c-p-bn:hover,
#cc--main button#s-all-bn:hover,
#cc--main button#s-rall-bn:hover {
    background-color: var(--color-primary-dark);
    border-radius: 6.25em;
    border-color: var(--color-primary-dark);
}

/* =========================
   COOKIE — Banner (global override)
========================= */
#cc--main button {
    color: var(--color-black);
    background-color: var(--color-primary);
    border-radius: 999px;
    border: 2px solid var(--color-primary);
}

#cc--main button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-black);
}


/* =========================
   STARTKORT — Card footer-layout
   Flex-layout med understruken text till
   vänster och gul pil-box till höger.
========================= */
.start-cards .card-footer {
    background: #fff !important;
    border-top: 1px solid #e6e6e6;
    padding: 0 !important;
    overflow: hidden;
}

.start-cards .card-footer .stretched-link {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
    padding: 0 !important;
    text-decoration: none;
    overflow: hidden;
    gap: 0;
    border: 0 !important;
}

/* Text till vänster */
.start-cards .card-footer .stretched-link > span {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-weight: 700;
    text-decoration: underline;
    color: #1d1d1d;
}

/* Gul pil-box till höger */
.start-cards .card-footer .btn-chevron-right {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
    position: relative;
    right: -1px;
    bottom: -1px;
    background-color: #ffe600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 14H20' stroke='%23111' stroke-width='4' stroke-linecap='square'/%3E%3Cpath d='M14 8L20 14L14 20' fill='none' stroke='%23111' stroke-width='4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
}

/* Dölj gamla ikoner inuti knappen */
.start-cards .card-footer .btn-chevron-right i,
.start-cards .card-footer .btn-chevron-right svg,
.start-cards .card-footer .btn-chevron-right::marker {
    display: none !important;
}

/* Ta bort gamla pseudo-element */
.start-cards .card-footer .btn-chevron-right::before,
.start-cards .card-footer .btn-chevron-right::after {
    content: none;
}

/* Nollställ kant/skugga på länken i footern */
.start-cards .card-footer a {
    border: 0 !important;
    box-shadow: none !important;
}


/* =========================
   BANNER — ms-banner
========================= */
.ms-banner {
    background: #fff;
    border: 1px solid #eee;
}

.ms-banner__content {
    min-height: 100%;
    background: #fff;
    color: #1d1d1d;
}

.ms-banner__accent {
    width: 8px;
    height: 40px;
    background: #ffed00;
    display: block;
    margin-bottom: 1rem;
}

.ms-banner__title {
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 700;
    color: #222;
}

.ms-banner__title em {
    font-style: italic;
    font-weight: 700;
}

.ms-banner__text {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    max-width: 42rem;
}

.ms-banner__btn {
    background: #ffed00;
    color: #222;
    font-weight: 700;
    border-radius: 0;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
}

.ms-banner__btn:hover,
.ms-banner__btn:focus {
    background: #f1de00;
    color: #222;
    text-decoration: none;
}

.ms-banner__figure {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.ms-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
}

/* =========================
   BANNER — Responsivt (< 992px)
========================= */
@media (max-width: 991.98px) {
    .ms-banner__figure {
        min-height: 280px;
    }

    .ms-banner__content {
        padding-bottom: 2rem !important;
    }

    .ms-banner__title {
        font-size: 1.75rem;
    }
}