/* Colours */
:root {
    --color-violet-100: #f0efff;
    --color-violet-200: #E5E3FF;
    --color-violet-500: #6654d7;
    --color-violet-600: #6654d7;
    --color-background: #F5F7FF;
    --color-surface: #FFFFFF;
    --main-content-bg: #F5F7FF;
    --button-bg: #6654d7;
    --button-text: #fff;
    --button-bg-state: #5845bd;
    --button-text-state: #fff;
}

:root {
    /* Default background color for cards in the component */
    --card-bg: #ffffff;
    --card-title-color: #232133;
    --card-tooltip-color: var(--color-violet-600);
}
/* Base Spacing Variables */
:root {
    --space-0: 0px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 0.75rem;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    /* Responsive spacing for layout */
    --space-responsive-12: var(--space-12);
    --space-responsive-16: var(--space-16);
    --space-responsive-20: var(--space-20);
    --space-responsive-24: var(--space-24);
    --space-responsive-32: var(--space-32);
    --space-responsive-48: var(--space-48);
}

/* Responsive adjustments for tablets */
@media (min-width: 768px) {
    :root {
        --space-responsive-12: var(--space-16);
        --space-responsive-16: var(--space-24);
        --space-responsive-20: var(--space-24);
        --space-responsive-24: var(--space-32);
        --space-responsive-32: var(--space-48);
        --space-responsive-48: calc(var(--space-48) * 1.25);
    }
}

/* Responsive adjustments for desktops */
@media (min-width: 1024px) {
    :root {
        --space-responsive-12: var(--space-16);
        --space-responsive-16: var(--space-32);
        --space-responsive-20: var(--space-32);
        --space-responsive-24: var(--space-48);
        --space-responsive-32: calc(var(--space-48) * 1.25);
        --space-responsive-48: calc(var(--space-48) * 1.5);
    }
}


/* Base Font Variables */
:root {
    --font-size-base: 1rem; /* 16px by default */
    --font-size-xs: clamp(0.625rem, 2vw + 0.5rem, 0.75rem); /* 10px to 12px */
    --font-size-sm: clamp(0.875rem, 1.2vw + 0.5rem, 1rem); /* 14px to 16px */
    --font-size-md: clamp(1rem, 1.5vw + 0.5rem, 1.125rem); /* 16px to 18px */
    --font-size-lg: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); /* 20px to 24px */
    --font-size-xl: clamp(1.5rem, 3vw + 0.5rem, 2rem); /* 24px to 32px */
    --font-size-xxl: clamp(2rem, 4vw + 1rem, 3rem); /* 32px to 48px */
    /* Line height */
    --line-height-sm: 1.2;
    --line-height-md: 1.5;
    --line-height-lg: 1.8;
    /* Font Family */
    --font-family-base: 'Nunito Sans', sans-serif;
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-subheading: 'Nunito Sans', sans-serif;
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-bold: 700;
}

:root {
    /* Z-Index Levels */
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-modal: 200;
    --z-index-tooltip: 300;
    --z-index-header: 400;
}

:root {
    /* Transition Timings */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.4s ease-in-out;
    --transition-slow: 0.6s ease-in-out;
    /* Keyframe Animation Durations */
    --animation-fast: 200ms;
    --animation-medium: 400ms;
    --animation-slow: 600ms;
}

:root {
    /* Box Shadows */
    /* --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    --box-shadow-light: 0px 1px 5px -1px rgba(0, 0, 0, 0.05);
    --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
    --box-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.05);*/
}

:root {
    /* Border Radius */
    --border-radius-xs: 8px;
    --border-radius-sm: 16px;
    --border-radius-md: 20px;
    --border-radius-lg: 32px;
}

:root {
    --sidebar-link-color: #5E6278;
    --sidebar-link-color-active: #5844BE;
    --sidebar-link-bg-active: var(--color-violet-200);
}

/* ===============
    General reset
   =============== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    padding: 0;
    background: none;
}


html {
    scrollbar-gutter: stable;
}


body {
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    font-size: var(--font-size-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    font-family: var(--font-family-base);
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Nunito Sans Normal',sans-serif;
    font-size: 100%;
}

ul[class], ol[class] {
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

input, select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

    h1:focus {
        outline: none;
    }

p {
    margin-bottom: 0;
}

a {
    color: inherit;
}

.truncated-text {
    max-width: 8ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.divider {
    margin: 20px 0px;
    color: #b2b1bf;
}


.text--small {
    font-size: 12px;
}

.text--bold {
    font-weight: 600;
}

.page__title--baloo {
    font-size: clamp(2.25rem, 4vw + 1rem, 2.875rem);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    color: #3b3681;
}

.page__title--highlight--baloo {
    font-weight: 700;
    font-family: 'Baloo 2', sans-serif;
    color: #8d87ed;
}

.max-width-475 {
    width: 475px;
}


.color-primary {
    color: var(--color-violet-600);
}



/* ===============
       Button
   =============== */

.button {
    border-radius: 20px;
    border: none;
    transition: background-color 0.3s,color 0.3s;
    background-color: var(--button-bg, #6654d7);
    color: var(--button-text, #fff);
    font-weight: 600;
    text-decoration: none;
    padding: 8px 32px;
    cursor: pointer;
}

.button--sm {
    font-size: 14px;
    padding: 4px 12px;
    font-weight: var(--font-weight-bold);
}

.button--md {
    font-size: 16px;
    padding: 6px 16px;
}

.button--lg {
    font-size: 18px;
    padding: 12px 32px;
    border-radius: 32px;
    margin: 20px 0;
    font-weight: 700;
}

.button:hover,
.button:active,
.button:focus {
    background: var(--button-bg-state);
    color: var(--button-text-state);
}

.button:disabled,
.button--disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-color: #6c757d;
    color: #fff;
    opacity: 0.6;
}


/* Disable styles for each variant */
.button--primary.disabled,
.button--primary-light.disabled,
.button--secondary.disabled,
.button--tertiary.disabled {
    background-color: #6c757d;
    color: #fff;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.button--primary {
    --button-bg: #6654d7;
    --button-text: #fff;
    --button-bg-state: #5845bd;
    --button-text-state: #fff;
}

.button--primary-light {
    --button-bg: #e5e3ff;
    --button-text: #5845bd;
    --button-bg-state: #dbd9ff;
    --button-text-state: #5845bd;
}

.button--secondary {
    --button-bg: #ace3dc;
    --button-text: #24615f;
    --button-bg-state: #7acec5;
    --button-text-state: #1f4242;
}

.button--tertiary {
    --button-bg: #424159;
    --button-text: #fff;
    --button-bg-state: #2e2c43;
    --button-text-state: #fff;
}

.button--danger {
    --button-bg: #ff2c2c;
    --button-text: #fff;
    --button-bg-state: #f10909;
    --button-text-state: #fff;
}

/* ===============
        Form
   =============== */

select.form__input,
input.form__input,
.form__input {
    background-color: #f5f7ff;
    border-radius: var(--border-radius-lg);
    padding: 8px 16px;
    margin-bottom: 4px;
    border: none;
    resize: none;
    width: 100%;
}


.form__input--password {
    background: #f5f7ff;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 8px 16px;
    margin-bottom: 4px;
    border: none;
    width: 100%;
}

.form__input--password-button {
    background: #f5f7ff;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 8px 16px;
    margin-bottom: 4px;
}

.form__input--password-button i {
    color: var(--violet-500);
}

.form__input--password-button i:hover,
.form__input--password-button i:focus {
    color: var(--violet-600);
}

select:focus, input:focus, textarea:focus {
    outline: 0;
    outline-color: transparent;
    outline-style: none;
}

    .form-control, .form-select {
        display: block;
        width: 100%;
    }

.form__input:focus {
    border-color: #b0b3b8;
    box-shadow: 0 0 5px rgba(176, 179, 184, 0.5);
    background-color: #fff;
    transition: all ease-in 0.2s;
}

.form__input option {
    transition: ease-in 0.1s;
    background-color: #fff;
}

    .form__input option:focus {
        background-color: #fff;
    }


/* ===============
      Checkbox
   =============== */

.checkbox__wrapper .checkbox--toggle {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
}

    .checkbox__wrapper .checkbox--toggle::before {
        bottom: -6px;
        content: "";
        left: -6px;
        position: absolute;
        right: -6px;
        top: -6px;
    }

    .checkbox__wrapper .checkbox--toggle,
    .checkbox__wrapper .checkbox--toggle::after {
        transition: all 100ms ease-out;
    }

        .checkbox__wrapper .checkbox--toggle::after {
            background-color: #fff;
            border-radius: 50%;
            content: "";
            height: 14px;
            left: 3px;
            position: absolute;
            top: 3px;
            width: 14px;
        }

.checkbox__wrapper input[type=checkbox] {
    cursor: default;
}

.checkbox__wrapper .checkbox--toggle:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
}

.checkbox__wrapper .checkbox--toggle:checked {
    background-color: #6654d7;
}

    .checkbox__wrapper .checkbox--toggle:checked::after {
        background-color: #fff;
        left: 13px;
    }

.checkbox__wrapper :focus:not(.focus-visible) {
    outline: 0;
}

.checkbox__wrapper .checkbox--toggle:checked:hover {
    background-color: #5845bd;
}


.checkbox__wrapper .checkbox--toggle:disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-color: #6654d7;
    color: #fff;
    opacity: 0.6;
}


/* ===============
        Badge
   =============== */
.badge {
    border-radius: var(--border-radius-md);
    padding: 6px 8px;
    min-width: 80px;
    font-family: var(--font-family-base);
    font-weight: bold;
}


.badge__status--pending {
    background-color: #FFEAC0;
    color: #B73B06;
}

.badge__status--active {
    background-color: #9dddd8;
    color: #38615f;
}

.badge__status--third-party {
    background-color: #287976;
    color: #fff;
}

.badge__status--closed {
    background-color: #a6abb0;
    color: #fff;
}

/* ===============
        Card
   =============== */
.card--background {
    background-image: url(/img/mountains.jpg);
    background-image: url(/img/mountains.webp);
    background-size: cover;
    background-position: center;
    width: 100%;
}

.card--background-violet {
    background-image: url(/img/mountains-purple.webp);
/*    background-image: url(/img/mountains.webp);*/
    background-size: cover;
    background-position: center;
    width: 100%;
}

.card--transparent {
    background: none;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; /* shadow mimicking 'none' */
}

.card--glass-secondary {
    border: 1px solid rgba(38, 197, 194, 0.10);
    background: linear-gradient(102deg, rgba(15, 172, 163, 0.64) 2.14%, rgba(26, 108, 152, 0.64) 83.86%);
    backdrop-filter: blur(3.299999952316284px);
}

.card--glass-light {
    border: 1px solid rgba(185, 187, 243, 0.10);
    background: linear-gradient(99deg, rgba(130, 141, 227, 0.64) 0%, rgba(229, 227, 255, 0.64) 100%);
    backdrop-filter: blur(3.299999952316284px);
}

.card--glass-light .card__header .card__title {
    color: #fff;
}

    .card--glass-light .card__header .card__subtitle {
        color: #e6e6e6;
    }


@media (min-width: 768px) {
    .grid__item--debt-status .card--background-violet {
        height: 250px;
    }
}

.debt-status__card {
    min-height: 250px;
}

.need-help__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: #fff;
}

.need-help__paragraph {
    max-width: 40ch;
}

.need--help__button {
    width: 200px;
}

.need-help__image {
    width: 150px;
}


 /* ===============
      Animations
   =============== */
    .fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.toggle-button {
    width: 11rem !important;
}

/* ===============
       Header
   =============== */

.header__wrapper {
    padding-bottom: 24px;
}

@media (min-width: 768px) {
    .header__wrapper {
        padding-bottom: 32px;
    }
}


.header__title {
    color: #3c3a54;
    outline: none;
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 700;
    font-family: var(--font-family-heading);
    margin-bottom: 4px;
}


/* ===============
        Card
   =============== */

.card {
    padding: var(--space-16);
    border: none;
    box-shadow: var(--box-shadow-light);
    border-radius: var(--border-radius-sm);
}

.card__header {
}

.card__title {
    font-family: var(--font-family-heading);
    font-size: 18px;
    color: var(--card-title-color);
    margin-bottom: 0;
}

.card__subtitle {
    font-size: 14px;
    font-family: var(--font-family-base);
    color: #737791;
}

.card__body {
}

.card__title {
    font-family: var(--font-family-heading);
    font-size: 18px;
    color: var(--card-title-color);
    margin-bottom: 0;
}

.card__subtitle {
    font-size: 14px;
    font-family: var(--font-family-base);
    color: #737791;
}



/* ===============
        Card
  (Accounts & Payments)
   =============== */


.table-item {
    display: grid;
    width: 100%;
    grid-row-gap: var(--space-16);
}

.table-item--accounts {
    grid-template-columns: 1.5fr 1fr 0.5fr; /* Last column is half the size */
}

.table-item--payments {
    grid-template-columns: 1fr 1fr; /* Last column is half the size */
}

.table-item--enquiries {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (min-width: 992px) {
    .table-item--enquiries {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/*.table-item--payment-history {
    grid-template-columns: 1.5fr 1fr 0.5fr;
}
*/

.table-item--payment-history {
    grid-template-columns: 1fr 1fr;
}


@media (min-width: 992px) {
    .table-item--accounts {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 0.5fr; /* Last column is half the size */
    }
}

    .table-item__header {
        display: contents;
        background-color: transparent;
    }


    .table-item__header__cell {
        font-weight: bold;
        padding: 0 10px;
        text-align: left;
    }

        .table-item__header__cell:first-child {
            padding-left: 16px;
        }


    .table-item__row {
        display: contents;
    }


    .table-item__cell {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 8px;
        background: #fff;
    }

        .table-item__cell:first-child {
            padding-left: var(--space-16);
            border-top-left-radius: var(--border-radius-md);
            border-bottom-left-radius: var(--border-radius-md);
        }

        .table-item__cell:last-child {
            justify-content: end;
            padding-right: var(--space-16);
            border-top-right-radius: var(--border-radius-md);
            border-bottom-right-radius: var(--border-radius-md);
        }

.table-item__cell-title {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 16px;
}



.table-item__cell-reference {
    color: #737791;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 12px;
}

.table-item__cell-amount {
    font-family: var(--font-family-base);
    font-weight: 500;
}

    @media (max-width: 576px) {

        .table-item__cell-title--truncated-text {
            max-width: 12ch;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-item__cell-reference--truncated-text {
            max-width: 12ch;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }


/* ===============
     Breadcrumb
   =============== */

.breadcrumb {
    padding-bottom: 16px;
}

.breadcrumb__item {
    text-decoration: none;
}

.breadcrumb__item--active {
}


/* ===============
      Section
   =============== */

.section__wrapper {
    padding: var(--padding-section-wrapper);
}

.section__content {
    margin: 20px 0px;
}


/* ===============
      Document
   =============== */


.document__heading {
    font-size: clamp(32px, 5vw, 48px);
    font-family: var(--font-family-heading);
    font-weight: 600;
    margin-bottom: 24px;
    color: #3b3681;
}

.document__section-heading {
    font-size: clamp(24px, 5vw, 32px);
    font-family: 'Nunito Sans Normal', sans-serif;
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #6654d7;
}

.document__section-subheading {
    font-size: clamp(18px, 5vw, 20px);
    font-family: var(--font-family-subheading);
    font-weight: 800;
    margin-top: 32px;
    margin-bottom: 20px;
    color: #3b3681;
}

.document__paragraph {
    max-width: 80ch;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 20px;
    padding: 10px 0;
}

.document__list {
    margin-left: 16px;
    padding: 20px 0;
    max-width: 80ch;
}

    .document__list li {
        font-size: 16px;
        line-height: 1.5;
        list-style-type: disc;
        margin: 12px 0;
    }

@media (min-width: 768px) {
    .document__heading {
        margin-bottom: 32px;
    }

    .document__section-heading {
        margin-top: 48px;
    }

    .document__section-subheading {
        margin-top: 36px;
    }

    .document__paragraph {
        margin-bottom: 20px;
    }
}





/* ===============
    Affordability 
    shared styles
   =============== */

.affordability .accordion-item {
    margin-bottom: 16px;
}

.affordability .accordion-button {
    background: #f5f7ff;
    border-radius: var(--border-radius-lg);
    border: none;
}


    .affordability .accordion-button:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    }

.affordability .accordion-item:first-of-type .accordion-button,
.affordability .accordion-item:last-of-type .accordion-button {
    border-radius: var(--border-radius-lg);
}

.affordability .accordion-item:first-of-type .accordion-button,
.affordability .accordion-item:last-of-type .accordion-button {
    border-radius: var(--border-radius-lg);
}

    .affordability .accordion-button:not(.collapsed),
    .affordability .accordion-item:first-of-type .accordion-button:not(.collapsed),
    .affordability .accordion-item:last-of-type .accordion-button:not(.collapsed) {
        color: inherit;
        background: #ebeef4;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

.affordability .accordion-body {
    border: 1px solid #e8e8e8;
    border-top: none;
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
    transition: border-color 0.3s ease, border-width 0.3s ease;
}


.affordability .input-group-text {
    background-color: #f5f7ff;
    border-radius: var(--border-radius-lg);
    padding: .375rem .75rem;
    border: none;
}

.affordability .form-select,
.affordability .form-control {
    background-color: #f5f7ff;
    border-radius: var(--border-radius-lg);
    padding: 8px 16px;
    border: none;
}

    .affordability .form-select:focus,
    .affordability .form-control:focus {
        border-color: #b0b3b8;
        box-shadow: 0 0 5px rgba(176, 179, 184, 0.5);
        background-color: #fff;
        transition: all ease-in 0.2s;
    }

    .affordability .form-select option {
        transition: ease-in 0.1s;
        background-color: #fff;
    }

        .affordability .form-select option:focus {
            background-color: #fff;
        }

.affordability .divider {
    margin: 24px 0;
}

    .affordability .divider:last-of-type {
        display: none;
    }

    .affordability .form-floating > label {
    padding-left: 16px;
    }

.affordability .form-floating > label::after {
    background-color: transparent !important;
}


/* ===============
       Info tile
   =============== */

.info-tile__item {
    background-color: #f5f7ff;
    border-radius: var(--border-radius-lg);
    padding: 12px 16px;
    margin-bottom: 16px;
}

    .info-tile__item:last-child {
        margin-bottom: 0;
    }

.info-tile__icon-wrapper,
.icon-wrapper {
    width: 32px;
    height: 32px;
    background: #6654d7;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper {
    width: 40px;
    height: 40px;
}

.info-tile__icon {
    color: #fff;
}

.info-tile__title {
    font-family: var(--font-family-base);
    font-weight: 500;
}

.info-tile__value {
    font-family: var(--font-family-base);
    font-weight: 500;
}


.qr-code {
    width: 150px;
}


.link--primary {
    text-decoration: none;
    color: #6654D7;
    transition: color 0.3s;
}

.link--primary:hover,
.link--primary:focus {
    color: #5845bd;
}

.background--white {
    background-color: #fff;
}

.affordabilitySummarySideBar {
    position: fixed;
    width: 30%;
}