/* 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-outline {
    --button-bg: transparent;
    --button-text: #6654d7;
    --button-bg-state: #e5e3ff;
    --button-text-state: #5845bd;
    border: 2px solid #6654d7;
}

.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;
}

/* Disabled state visibility for controls */
.form-select:disabled,
.form-control:disabled,
select:disabled,
input:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f0f0f5;
}

/* Minimal invalid state styles (for inline validation) */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.1);
}

.invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
}

.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%;
}


/* ===============
       Budget V2
   =============== */

.custom-form {

}

/* Chrome, Safari, Edge, Opera */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.no-spinners[type=number] {
    -moz-appearance: textfield;
}


.text-muted {
    color: #84848C;
}

.fs-12 {
    font-size: 12px;
}

.p-12 {
    padding: 12px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pt-12 {
    padding-top: 12px;
}

.py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.px-12 {
    padding-right: 12px;
    padding-left: 12px;
}
.fs-5-5 {
    font-size: 1.125rem; /* 18px */
}

.mt-12 {
    margin-top: 12px;
}

.mb-12 {
    margin-bottom: 12px;
}

.my-12 {
    margin-top :12px;
    margin-bottom: 12px;
}

.my-20 {
   margin-top: 20px;
   margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}
.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}



.bg-primary-200 {
    background-color: #E5E3FF;
}
.bg-danger-200 {
    background-color: #FFE5E5;
}

.bg-neutral-200 {
   background-color: #f5f7ff;
}

.border-300 {
    border: 1px solid #D5D3FF;
}

.max-width-100 {
    max-width: 100%;
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.icon-wrapper-big {
    background-color: #fff;
    height: 120px;
    width: 120px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories-border {
    border-bottom: 1px solid #e5e5e5;
}

    .categories-border:last-child {
        border-bottom: none;
    }

.switch-button {
    position: relative;
    display: flex;
    width: 240px;
    border: 1px solid #252136;
    border-radius: 30px;
    overflow: hidden;
    font-size: 16px;
    letter-spacing: 1px;
    width: 100%;
}

    .switch-button input[type="radio"] {
        display: none;
    }

.switch-option {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
    z-index: 2;
    position: relative;
    color: #252136;
    transition: color 0.3s;
}

.switch-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #252136;
    border-radius: 30px;
    z-index: 1;
    transition: transform 0.3s;
    pointer-events: none;
}

/* Highlight selected label */
.switch-button input[type="radio"]:checked + .switch-option {
    color: #fff;
}

/* Move background depending on which radio is checked */
.switch-button input[type="radio"]:nth-of-type(1):checked ~ .switch-background {
    transform: translateX(0%);
}

.switch-button input[type="radio"]:nth-of-type(2):checked ~ .switch-background {
    transform: translateX(100%);
}


.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

    .scroll-wrapper .card {
        width: 115px;
    }

/* ======================
   Global Modal Overrides
   (moved from isolated component CSS)
   ====================== */
.modal-backdrop {
    transition: opacity 0.3s ease-out;
}

.modal.fade .modal-dialog {
    transform: translateY(-50px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

body.modal-open {
    overflow: hidden;
}

.modal:not(.show) {
    pointer-events: none !important;
}

.modal-backdrop:not(.show),
.modal-backdrop.fade:not(.show) {
    pointer-events: none !important;
}

/* Force visible without inline style attribute */
.modal.modal-force-show {
    display: block;
}

.text-body--secondary {
    max-width: 65ch;
    color: #6F6F7E;
}