:root {
    --White: #ffffff;
    --Black: #000000;
    --Grey-100: #f8f9fa;

    --Theme-Primary: #0064ff;
    --Theme-Secondary: #3864ff;
    --Theme-Primary-Hover: #002b8f;
    --Theme-Light: #EBF1FF;
    --Theme-Dark: #1e152a;
    --Theme-Border: #E0E9FF;
    --Alert-Danger-Background: #f8d7da;
    --Alert-Danger-Border: #f5c2c7;
    --Alert-Danger-Text: #842029;

    --Component-Input-Placeholder: #85a9ff;
}

/* Base Styles */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* For Firefox */
}

/* Spacing Utilities */
.m-6 {
    margin: 4rem !important;
}

.mt-6 {
    margin-top: 4rem !important;
}

.mb-6 {
    margin-bottom: 4rem !important;
}

.ms-6 {
    margin-left: 4rem !important;
}

.me-6 {
    margin-right: 4rem !important;
}

.mx-6 {
    margin-left: 4rem !important;
    margin-right: 4rem !important;
}

.my-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.p-6 {
    padding: 4rem !important;
}

.pt-6 {
    padding-top: 4rem !important;
}

.pb-6 {
    padding-bottom: 4rem !important;
}

.ps-6 {
    padding-left: 4rem !important;
}

.pe-6 {
    padding-right: 4rem !important;
}

.px-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}

.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Modal */
.modal-content {
    border-radius: 16px;
    border: 1px solid var(--Theme-Border);
    background: var(--White);
    box-shadow: 0px 16px 48px 0px rgba(56, 100, 255, 0.17);
    overflow: hidden;
}

.modal-header {
    display: flex;
    padding: 23px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: var(--White);
    border-bottom: none;
    position: relative;
}

.modal-header .btn-close {
    background: none;
    opacity: 1;
    padding: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.984 7.87418L15.8083 12.6984C15.8825 12.8097 15.9196 12.9211 15.9196 13.0324C15.9196 13.1808 15.8825 13.255 15.8083 13.3293L14.9547 14.1828C14.8805 14.257 14.7692 14.2941 14.6579 14.2941C14.5094 14.2941 14.3981 14.257 14.3239 14.1828L9.49966 9.35855L4.67545 14.1828C4.56412 14.257 4.45279 14.2941 4.34146 14.2941C4.19302 14.2941 4.1188 14.257 4.04459 14.1828L3.19107 13.3293C3.11685 13.255 3.07974 13.1808 3.07974 13.0324C3.07974 12.9211 3.11685 12.8097 3.19107 12.6984L8.01529 7.87418L3.19107 3.04996C3.11685 2.97574 3.07974 2.86441 3.07974 2.71597C3.07974 2.60464 3.11685 2.49332 3.19107 2.4191L4.04459 1.56558C4.1188 1.49136 4.19302 1.45425 4.34146 1.45425C4.45279 1.45425 4.56412 1.49136 4.67545 1.56558L9.49966 6.3898L14.3239 1.56558C14.3981 1.49136 14.5094 1.45425 14.6579 1.45425C14.7692 1.45425 14.8805 1.49136 14.9547 1.56558L15.8083 2.4191C15.8825 2.49332 15.9196 2.60464 15.9196 2.71597C15.9196 2.86441 15.8825 2.97574 15.8083 3.04996L10.984 7.87418Z' fill='%23000000'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.modal-header .btn-close:hover {
    opacity: 0.8;
}

/* Title */
.modal-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%
}

.modal-body {
    padding-top: 0;
    padding-right: 23px;
    padding-bottom: 23px;
    padding-left: 23px;
}

/*End  Modal */

/* Custom Accordion Styling */
.accordion {
    --bs-accordion-bg: var(--Theme-Light);
    /* Override Bootstrap's background */
}

.accordion-item {
    border: none;
    background-color: var(--White);
    margin-bottom: 8px;
}

.accordion-button {
    color: var(--Theme-Dark);
    background: var(--Theme-Light) !important;
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding: 16px 20px;
    border: none;
    display: flex;
    justify-content: space-between;
}

/* Style the default Bootstrap arrow */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11.5 7.87598L16.125 12.4697C16.2188 12.5322 16.25 12.626 16.25 12.7197C16.25 12.8135 16.2188 12.9072 16.1562 13.001L15.5312 13.626C15.4688 13.6885 15.375 13.7197 15.25 13.7197C15.1562 13.7197 15.0625 13.6885 15 13.626L11.25 9.90723L7.5 13.626C7.4375 13.6885 7.375 13.7197 7.25 13.7197C7.15625 13.7197 7.0625 13.6885 6.96875 13.626L6.34375 13.001C6.28125 12.9072 6.25 12.8135 6.25 12.7197C6.25 12.626 6.28125 12.5322 6.34375 12.4697L10.9688 7.87598C11.0625 7.81348 11.1562 7.78223 11.25 7.78223C11.375 7.78223 11.4688 7.81348 11.5312 7.87598H11.5Z' fill='%23064FFF'/%3E%3C/svg%3E") !important;
    width: 20px;
    height: 20px;
    background-size: 20px;
    transform: rotate(180deg);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
}

/* Collapsed state - all corners rounded */
.accordion-button.collapsed {
    border-radius: 4.8px;
}

/* Expanded state - only top corners rounded */
.accordion-button:not(.collapsed) {
    color: var(--Theme-Dark);
    background: var(--Theme-Light) !important;
    box-shadow: none;
    border-radius: 4.8px 4.8px 0 0;
}

.accordion-body {
    padding: 20px;
    background-color: var(--White);
    border: 1px solid var(--Theme-Border);
}

/* Expanded state styling */
.accordion-collapse.show .accordion-body {
    border-radius: 0 0 4.8px 4.8px;
    border: 1px solid var(--Theme-Border);
}

/* Collapsed state styling */
.accordion-collapse.collapse:not(.show) .accordion-body {
    border-radius: 4.8px;
}

/* Remove double borders between items */
.accordion-item:not(:last-child) .accordion-collapse.show .accordion-body {
    border-bottom: 1px solid var(--Theme-Border);
}

/* End Accordion */

/* Typography */
/* Heading/H4 */
h4,
.h4 {
    font-family: "Space Grotesk";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

h6,
.h6 {
    font-family: "Space Grotesk";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

.body_regular {
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.body_small {
    font-family: "Space Grotesk";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.body_caption {
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


/* Typography Utils */

/* Theme Colors */
.text-theme-primary {
    color: var(--Theme-Primary);
}

.text-theme-secondary {
    color: var(--Theme-Secondary);
}

.text-theme-primary-hover {
    color: var(--Theme-Primary-Hover);
}

.text-theme-light {
    color: var(--Theme-Light);
}

.text-theme-dark {
    color: var(--Theme-Dark);
}

.text-theme-border {
    color: var(--Theme-Border);
}

.text-alert-danger {
    color: var(--Alert-Danger-Text);
}

.text-white {
    color: var(--White);
}

.text-black {
    color: var(--Black);
}

.text-grey-100 {
    color: var(--Grey-100);
}

.text-input-placeholder {
    color: var(--Component-Input-Placeholder);
}

/* Modifiers */

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

/*End  Typography */

/* Buttons */
.btn-primary {
    background: var(--Theme-Primary) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 100px;
    color: var(--White);
    font-size: 14px;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
    line-height: 130%;
}

.btn-primary img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7466%) hue-rotate(62deg) brightness(99%) contrast(110%);
}

.btn-primary:hover {
    background: var(--Theme-Primary-Hover) !important;
}

.btn-lg {
    padding: 12px 23px;
}

.btn-sm {
    padding: 5px 11px;
}

/* End Buttons */