:root {
    --blue: #0052cc; --blue-dark: #003d99; --gray-text: #374151; --gray-light: #6b7280;
    --bg: #f9fafb; --card: #ffffff; --border: #e5e7eb; --radius: 12px;
    --low: #ef4444; --mid: #f59e0b; --high: #10b981; --info: #3b82f6; --user: #6366f1;
    --shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* Loading animation for spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fx-marketing-budget-calculator {
    padding: var(--s12) 0;
}
.fx-marketing-budget-calculator * { box-sizing: border-box; }
.fx-marketing-budget-calculator h5.section-title {
    color: var(--Primary-Blue, #207DE9);
    margin-bottom: 24px;
}
.fx-marketing-budget-calculator .fx-marketing-budget-calculator-inner {
    border-radius: var(--s2, 16px);
    border: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);
    background: linear-gradient(0deg, rgba(204, 228, 255, 0.25) 0%, rgba(204, 228, 255, 0.25) 100%), #FFF;
}
.fx-marketing-budget-calculator .header-container {
    border-bottom: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);
    display: flex;
    flex-direction: column;
    padding: var(--s3, 24px) var(--s4, 32px);
}
.fx-marketing-budget-calculator .header-container h4 {
    margin-bottom: var(--s1);
}
.fx-marketing-budget-calculator .header-container p:last-child {
    margin-bottom: 0;
}
.fx-marketing-budget-calculator .body-container {
    width: 100%; max-width: 100%;
    display: flex; flex-direction: row; gap: 0;
    position: relative;
}
.fx-marketing-budget-calculator .results-container {
    display: flex; flex-direction: column; gap: 0; flex: 64%; width: 100%; max-width: 64%;
}
.fx-marketing-budget-calculator .form-container, .fx-marketing-budget-calculator .results-container {
    padding: 32px 32px 40px 32px;
}
.fx-marketing-budget-calculator .results-container .section-container { gap: 0px;}
.fx-marketing-budget-calculator .results-container .allocation-container .section-title {margin-top: 32px;}
.fx-marketing-budget-calculator .form-container { border-right: 1px solid var(--Primary-Blue-Lightest, #CCE4FF); align-self: stretch; display: flex; flex-direction: column; gap: 0; flex: 36%; width: 100%; max-width: 36%; }
.fx-marketing-budget-calculator h1 { margin: 0 0 0.5rem; font-size: 1.75rem; font-weight: 700; text-align: left; }
.fx-marketing-budget-calculator h2 { margin: 2rem 0 1.5rem; font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem;}
.fx-marketing-budget-calculator .form-intro { font-size: 1rem; color: var(--gray-light); margin-bottom: 2rem; }
.fx-marketing-budget-calculator .section-container { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--Primary-Blue-Lightest, #CCE4FF); }
.fx-marketing-budget-calculator form label {
    color: var(--Primary-Darkest-Gray, #222);
    font-family: var(--font-inter);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.067px;
    margin-top: 0px;
    margin-bottom: 8px;
}
.fx-marketing-budget-calculator .label-with-tooltip { display: flex; align-items: center; gap: 0.5rem; }
.fx-marketing-budget-calculator .tooltip-marker {
    display: inline-block; text-align: center; border-radius: 50%; font-weight: 600; cursor: help; position: relative; background: #84B9F5; color: white; width: 24px; height: 24px; font-size: 18px; line-height: 24px; }
.fx-marketing-budget-calculator .tooltip-text {
    visibility: hidden; width: 250px; background-color: #374151; color: #fff; text-align: left;
    border-radius: 6px; padding: 8px 12px; position: absolute; z-index: 10;
    bottom: 125%; left: 50%; margin-left: -125px; opacity: 0; transition: opacity 0.3s;
    font-weight: 400; font-size: 0.85rem; line-height: 1.4; pointer-events: none;
}
.fx-marketing-budget-calculator .tooltip-marker:hover .tooltip-text { visibility: visible; opacity: 1; }
.fx-marketing-budget-calculator input[type=text]::placeholder, .fx-marketing-budget-calculator input[type=number]::placeholder{
    color: var(--Primary-Light-Gray, #CED4DA);
    font-family: var(--font-inter);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px; /* 233.333% */
}
.fx-marketing-budget-calculator select, .fx-marketing-budget-calculator input[type=text], .fx-marketing-budget-calculator input[type=number] {
    border-radius: var(--s1, 8px);
    background: var(--White, #FFF);
    padding: var(--s1, 8px) var(--s2, 16px);
    color: var(--Primary-Darkest-Gray, #222);
    font-family: var(--font-inter);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: -0.067px;
    margin-top: 0px;
    outline: none;
    border: none;
    width: 100%;
}

/* Input group styles removed - using budget-display divs instead */
.fx-marketing-budget-calculator .optional-label { color: var(--gray-light); font-weight: 400; margin-left: 0.5rem; }
.fx-marketing-budget-calculator .radio-group { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.fx-marketing-budget-calculator .radio-group label {
    margin: 0; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px;
    text-align: left; cursor: pointer; font-weight: 500; transition: all 0.2s ease;
    position: relative; padding-left: 2.2rem; flex: 1;
}
.fx-marketing-budget-calculator .radio-group label::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}
.fx-marketing-budget-calculator .radio-group input { 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fx-marketing-budget-calculator .radio-group label { border-radius: var(--s1, 8px); background: var(--White, #FFF); color: var(--Primary-Light-Gray, #CED4DA); font-family: var(--font-inter); font-size: 14px; font-style: normal; font-weight: 600; line-height: 30px; letter-spacing: -0.067px; padding: 8px 16px 8px 44px; }
.fx-marketing-budget-calculator .radio-group input:checked + label { color: var(--Primary-Darkest-Gray, #222); }
.fx-marketing-budget-calculator .radio-group input:checked + label::before {
    border-color: transparent;
    background: #207DE9;
}
.fx-marketing-budget-calculator .radio-group input:checked + label::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}
.fx-marketing-budget-calculator .advanced-toggle { 
    margin-top: 32px; margin-bottom: 24px; cursor: pointer; display: inline-block; border-radius: var(--s1, 8px); 
    background: rgba(204, 228, 255, 0.30); padding: 16px 48px; width: 100%; text-align: center; 
    color: var(--Primary-Blue, #207DE9); font-family: var(--font-inter); font-size: 18px; 
    font-style: normal; font-weight: 800; line-height: 24px; letter-spacing: 0.54px; 
    text-transform: uppercase; position: relative;
}

.fx-marketing-budget-calculator .advanced-toggle::after {
    content: "\e900";
    font-family: 'ic-hdr' !important;
    font-size: 24px;
    color: var(--Primary-Blue, #207DE9);
    line-height: 24px;
    margin-left: 12px;
    transition: transform 0.2s ease;
    position: absolute;
}

.fx-marketing-budget-calculator .advanced-toggle.open::after {
    transform: rotate(-180deg);
}
.fx-marketing-budget-calculator #advanced-options { display: none; border-bottom: none; }
.fx-marketing-budget-calculator .results-header .explain { text-align: center; font-size: 1rem; color: var(--gray-light); max-width: 600px; margin: 0.5rem auto 1rem; }
.fx-marketing-budget-calculator .benchmark { display: flex; gap: 0.75rem; margin-top: 0px; border-radius: 8px; background: rgba(204, 228, 255, 0.35); padding: 8px 16px; }
.fx-marketing-budget-calculator .badge { padding: 0.25rem 0.75rem; border-radius: 99px; font-weight: 600; font-size: 0.8rem; color: #fff; }
.fx-marketing-budget-calculator .badge.low { background-color: var(--low); } 
.fx-marketing-budget-calculator .badge.mid { background-color: var(--mid); } 
.fx-marketing-budget-calculator .badge.high { background-color: var(--high); }
.fx-marketing-budget-calculator .chart-container { display: flex; gap: 32px; align-items: center; }
.fx-marketing-budget-calculator .chart-wrapper { position: relative; height: 376px; width: 38%; display: flex; align-content: center; justify-content: center; align-items: center;padding-bottom: 56px;}
.fx-marketing-budget-calculator .summary-table { width: calc(62% - 32px); min-width: 360px; }
.fx-marketing-budget-calculator .chart-wrapper .total-budget-wrapper {position: absolute;width: 50%;height: 20%;display: flex;justify-content: center;align-items: center;flex-direction: column;margin: 0 auto;}
.fx-marketing-budget-calculator .chart-wrapper .total-budget-wrapper .value {width: 100%;text-align: center;color: #222;text-align: center;font-family: Inter;font-size: 20px;font-style: normal;font-weight: 600;line-height: 31.644px;letter-spacing: -0.09px;word-break: break-all;}
.fx-marketing-budget-calculator .chart-wrapper .total-budget-wrapper .label {width: 100%;text-align: center;color: var(--Primary-Gray, #A9B4BC);text-align: center;font-family: Inter;font-size: 16px;font-style: normal;font-weight: 600;line-height: 16.783px;}
.fx-marketing-budget-calculator .allocation-header { display: flex; justify-content: space-between; align-items: center;gap: 16px; }
.fx-marketing-budget-calculator .allocation-header h3 {color: #000;font-family: Inter;font-size: 15px;font-style: normal;font-weight: 600;line-height: 28px;letter-spacing: -0.067px;display: flex;width: auto;margin-bottom: 0px;text-wrap: nowrap;}
.fx-marketing-budget-calculator .allocation-header .select2, .fx-marketing-budget-calculator .allocation-header select {display: flex; width: 100%; flex-grow: 1;}
.fx-marketing-budget-calculator .allocation-header .select2 .selection {width: 100%;}
.fx-marketing-budget-calculator .quick-model-select { font-size: 0.9rem; padding: 0.4rem 0.6rem; margin-top: 0; }

/* Flex-based allocation table styles */
.fx-marketing-budget-calculator .allocation-table { 
    width: 100%; 
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    border-radius: 8px;
    border: 0.825px solid var(--Primary-Blue-Lightest, #CCE4FF);
    background: #FFF;
    padding: 24px 16px;
    gap: 16px;
}

.fx-marketing-budget-calculator .allocation-table .allocation-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fx-marketing-budget-calculator .allocation-header-row,
.fx-marketing-budget-calculator .allocation-row,
.fx-marketing-budget-calculator .allocation-footer-row {
    display: flex;
    align-items: center;
}

.fx-marketing-budget-calculator .allocation-header-row .allocation-cell {
    padding: 0px 13.2px;
}

.fx-marketing-budget-calculator .allocation-row {
    transition: background-color 0.2s ease;
}

.fx-marketing-budget-calculator .allocation-footer-row {
    border-top: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);
}

.fx-marketing-budget-calculator .allocation-footer-row .allocation-cell {
    padding: 0;
}

.fx-marketing-budget-calculator .allocation-cell {
    display: flex;
    justify-content: flex-start;
    color: var(--Primary-Darkest-Gray, #222);
    text-align: left;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14.85px;
    padding: 9.9px 13.2px;
    word-break: break-all;
    align-content: center;
}

.fx-marketing-budget-calculator .allocation-cell-channel {
    flex: 1;
    min-width: 0;
    max-width: 50%;
    align-content: center;
    gap: 8px;
    word-break: break-word;
}

.fx-marketing-budget-calculator .allocation-cell-channel .legend {
    width: 16.5px;
    height: 16.5px;
    min-width: 16.5px;
    border-radius: 3.3px;
}

.fx-marketing-budget-calculator .allocation-cell-channel .tooltip-marker {
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    background: #A9B4BC;
    min-width: 16px;
}

.fx-marketing-budget-calculator .allocation-cell-budget {
    width: 100%;
    flex-shrink: 0;
    max-width: 28%;
}

.fx-marketing-budget-calculator .allocation-body .allocation-cell-budget {
    border-radius: 8px;
    background: var(--Vivid-Blue-vivid-000, #F5F8FF);
    padding: 0px;
}

.fx-marketing-budget-calculator .allocation-cell-percent {
    width: auto;
    flex-shrink: 0;
    color: var(--Primary-Gray, #A9B4BC);
    text-align: left;
    font-family: var(--font-inter);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 14.85px; /* 148.5% */
    max-width: 22%;
}

.fx-marketing-budget-calculator .allocation-why-row {
    display: none;
    border-bottom: 1px solid var(--border);
    background-color: rgba(32, 125, 233, 0.02);
}

.fx-marketing-budget-calculator .allocation-why-content {
    padding: 0;
    width: 100%;
}

.fx-marketing-budget-calculator .budget-display { 
    width: 100%; 
    color: var(--Primary-Darkest-Gray, #222);
    display: flex;
    align-items: center;
    text-align: center;
    font-family: var(--font-inter);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    word-break: break-all;
}

.fx-marketing-budget-calculator .budget-display .budget-input {
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    outline: none;
    word-break: inherit;
    padding: 0;
    margin: 0;
    min-height: 0px;
    height: auto;
    padding: 9.9px 13.2px;
}

.fx-marketing-budget-calculator .percent-display { 
    width: 100%; 
    display: flex;
    align-items: center;
    text-align: left;
    font-family: var(--font-inter);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 14.85px;
    color: var(--Primary-Gray, #A9B4BC);
}

.fx-marketing-budget-calculator .percent-display .percent-input {
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    outline: none;
    padding: 0;
    margin: 0;
    min-height: 0px;
    height: auto;
    padding: 9.9px 13.2px;
    cursor: default;
}

.fx-marketing-budget-calculator .help-toggle { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #e0e0e0; color: var(--gray-light); font-weight: 600; cursor: pointer; margin-left: 8px; font-style: normal; }
.fx-marketing-budget-calculator .why-text { display: none; font-weight: 400; font-size: 0.9rem; color: var(--gray-light); padding: 0.5rem 0.8rem; }
.fx-marketing-budget-calculator .total-row .allocation-cell { font-weight: 700;padding: 16px 13.2px; }
.fx-marketing-budget-calculator .total-row .budget-display { padding: 0; }
.fx-marketing-budget-calculator .total-row .budget-display .budget-input { 
    font-weight: 700; 
    cursor: default;
}

.fx-marketing-budget-calculator .total-row .percent-display { 
    padding: 0; 
}

.fx-marketing-budget-calculator .total-row .percent-display .percent-input { 
    font-weight: 700; 
    cursor: default;
}

.fx-marketing-budget-calculator .total-warning { color: var(--low); }
.fx-marketing-budget-calculator .total-warning .percent-input { color: var(--low); }
.fx-marketing-budget-calculator .chart-wrapper .rebalance-container { 
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: auto;
}
.fx-marketing-budget-calculator #rebalance-btn { 
    background: #207DE9; 
    border: none; 
    padding: 0.4rem 0.8rem; 
    cursor: pointer; 
    transition: all 0.2s ease;
    border-radius: 4px;
    color: var(--Primary-White, #FFF);
    padding: var(--s1, 8px) var(--s2, 16px);
    width: 100%;    
    text-align: center;
    font-family: var(--font-inter);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.fx-marketing-budget-calculator #rebalance-btn:hover:not(:disabled) { 
    background: #116FDA; 
}
.fx-marketing-budget-calculator #rebalance-btn:disabled { 
    background: var(--Primary-Dark-Gray, #6E7B81);
}
.fx-marketing-budget-calculator .cta-button { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 0.8rem 1.5rem; border-radius: 6px; font-weight: 600; transition: background 0.2s ease; }
.fx-marketing-budget-calculator .cta-button:hover { background: var(--blue-dark); }
.fx-marketing-budget-calculator .cta-button[disabled] { 
    background: var(--Primary-Dark-Gray, #6E7B81); 
    color: #ccc; 
    cursor: not-allowed; 
    pointer-events: none; 
    opacity: 0.6;
}
.fx-marketing-budget-calculator .cta-button[disabled]:hover { 
    background: var(--Primary-Dark-Gray, #6E7B81); 
}
.fx-marketing-budget-calculator .cta-button.disabled { 
    background: var(--Primary-Dark-Gray, #6E7B81) !important; 
    color: #ccc !important; 
    cursor: not-allowed !important; 
    pointer-events: none !important; 
    opacity: 0.6 !important;
}
.fx-marketing-budget-calculator .cta-button.disabled:hover { 
    background: var(--Primary-Dark-Gray, #6E7B81) !important; 
}
.fx-marketing-budget-calculator .data-source { text-align: center; font-size: 0.8rem; color: #9ca3af; margin-top: 2.5rem; }
.fx-marketing-budget-calculator .budget-spectrum-wrapper {border-radius: var(--s1, 8px);border: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);background: var(--White, #FFF);display: flex;padding: var(--s2, 16px) var(--s3, 24px); flex-direction: column;}
.fx-marketing-budget-calculator .budget-spectrum-wrapper .explain {color: var(--Primary-Darkest-Gray, #222);font-family: Inter;font-size: 15px;font-style: normal;font-weight: 400;line-height: 155%; margin-bottom: var(--s4);}
.fx-marketing-budget-calculator .budget-spectrum-container { position: relative; }
.fx-marketing-budget-calculator .spectrum-track { width: 100%; height: 10px; border-radius: 5px; background: var(--Primary-Gray, #A9B4BC); position: relative; margin-bottom: 80px; }
.fx-marketing-budget-calculator .spectrum-track-highlight { position: absolute; top: 0; height: 100%; background: linear-gradient(90deg, #F7941D 0%, #FFD12D 50%, #41D48C 100%); transition: all 0.4s ease; }
.fx-marketing-budget-calculator .spectrum-point { position: absolute; top: 50%; border-radius: 50%; width: 32px; height: 32px; border: 4px solid #fff; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: left 0.4s ease; }
.fx-marketing-budget-calculator .label-container { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; transition: top 0.3s ease, bottom 0.3s ease; }
.fx-marketing-budget-calculator .label-container.label-above { bottom: 20px; }
.fx-marketing-budget-calculator .label-container.label-above::before { top: 100%; height: 15px; }
.fx-marketing-budget-calculator .label-container.label-below { top: 20px; }
.fx-marketing-budget-calculator .label-container.label-below::before { bottom: 100%; height: 15px; }
.fx-marketing-budget-calculator .label-container .label { text-align: center; font-family: var(--font-inter); font-size: 12px; font-style: normal; font-weight: 600; line-height: 155%; margin-top: 12px; display: block; }
.fx-marketing-budget-calculator .label-container .amount { color: var(--Primary-Darkest-Gray, #222); text-align: center; font-family: var(--font-inter); font-size: 15px; font-style: normal; font-weight: 400; line-height: 155%; margin-top: 4px; display: block; }
.fx-marketing-budget-calculator .spectrum-point.low { background-color: #F7941D; } 
.fx-marketing-budget-calculator .spectrum-point.low .label { color: #F7941D; }
.fx-marketing-budget-calculator .spectrum-point.mid { background-color: #FFD12D; } 
.fx-marketing-budget-calculator .spectrum-point.mid .label { color: #FFD12D; }
.fx-marketing-budget-calculator .spectrum-point.high { background-color: #41D48C; }
.fx-marketing-budget-calculator .spectrum-point.high .label { color: #41D48C; }
.fx-marketing-budget-calculator .spectrum-point.user { background-color: #207DE9; z-index: 5; }
.fx-marketing-budget-calculator .spectrum-point.user .label-container { align-items: center;justify-content: center;display: flex;flex-direction: column; top: -65px;}
.fx-marketing-budget-calculator .spectrum-point.user .label-container .amount {margin-top: 2px;}
.fx-marketing-budget-calculator .spectrum-point.user .label { color: #207DE9; border-radius: 5px; border: 1px solid var(--Primary-Blue-Lightest, #CCE4FF); background: linear-gradient(0deg, rgba(204, 228, 255, 0.35) 0%, rgba(204, 228, 255, 0.35) 100%), #FFF; width: fit-content; padding: 0px 4px;}

.fx-marketing-budget-calculator .next-steps {border-radius: 8px; border: 1px solid var(--Primary-Blue-Lightest, #CCE4FF); background: #FFF;padding: var(--s3, 24px) var(--s2, 16px); margin-top: 32px;}
.fx-marketing-budget-calculator .next-steps .next-steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.fx-marketing-budget-calculator .next-steps .next-steps-header .content p {    
    color: #222;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.045px;
    margin-bottom: 0px;
}

.fx-marketing-budget-calculator .next-steps .next-steps-header .content p:last-child {
    margin-bottom: 16px;
}

.fx-marketing-budget-calculator .next-steps .next-steps-header .featured-image {
    max-width: 123px;
    margin-bottom: -10px;
    margin-right: 25px;
}

.fx-marketing-budget-calculator .next-steps a {
    margin-bottom: 16px;
    width: 100%;
    border-radius: 4px;
    background: var(--Primary-Blue, #207DE9);
    padding: var(--s2, 16px) var(--s3, 24px);
    text-align: center;
}

.fx-marketing-budget-calculator .next-steps a:hover {
    color: #fff;
    background: #116FDA
}

.fx-marketing-budget-calculator .next-steps a img {
    max-width: 16px;
    line-height: 16px;
    display: inline;
    margin-bottom: -4px;
    margin-right: 8px;
}

.fx-marketing-budget-calculator .next-steps .next-steps-footer p {
    color: var(--Primary-Dark-Gray, #6E7B81);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 155%;
    margin-bottom: 0px;
}

/* Select2 Custom Styling */
.fx-marketing-budget-calculator .select2-container {
    display: block;
}

.fx-marketing-budget-calculator .select2-container .select2-selection--single {
    border-radius: var(--s1, 8px);
    background: var(--White, #FFF);
    padding: var(--s1, 8px) var(--s2, 16px);
    color: var(--Primary-Darkest-Gray, #222);
    font-family: var(--font-inter);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: -0.067px;
    border: none;
    height: auto;
    min-height: 51px;
    display: flex;
    align-items: center;
}

.fx-marketing-budget-calculator .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--Primary-Darkest-Gray, #222);
    padding: 0;
    line-height: inherit;
}

.fx-marketing-budget-calculator .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--Primary-Light-Gray, #CED4DA);
}

.fx-marketing-budget-calculator .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 16px;
    top: 0;
}

.fx-marketing-budget-calculator .select2-container .select2-selection--single .select2-selection__arrow b {
    border: none;
    height: auto;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
    position: absolute;
    top: calc(50% - 13px);
    width: auto;
}

.fx-marketing-budget-calculator .select2-container .select2-selection--single .select2-selection__arrow b:before {
    content: "\e900";
    font-family: 'ic-hdr' !important;
    font-size: 24px;
    color: var(--Primary-Darkest-Gray, #222);
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    transition: transform 0.2s ease;
}

.fx-marketing-budget-calculator .select2-container--open .select2-selection--single .select2-selection__arrow b:before {
    transform: rotate(-180deg);
}

.fx-marketing-budget-calculator .select2-dropdown {
    border: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);
    border-radius: var(--s1, 8px);
    background: var(--White, #FFF);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fx-marketing-budget-calculator .select2-results__option {
    padding: 12px 16px;
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 600;
    color: var(--Primary-Darkest-Gray, #222);
    transition: all 0.2s ease;
}

.fx-marketing-budget-calculator .select2-results__option--highlighted {
    background-color: var(--Vivid-Blue-vivid-000, #F5F8FF) !important;
    color: var(--Primary-Darkest-Gray, #222) !important;
}

.fx-marketing-budget-calculator .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--Vivid-Blue-vivid-000, #F5F8FF);
    color: var(--Primary-Darkest-Gray, #222) !important;
}

.fx-marketing-budget-calculator .select2-search--dropdown {
    padding: 8px;
}

.fx-marketing-budget-calculator .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);
    border-radius: var(--s1, 8px);
    padding: 8px 12px;
    font-family: var(--font-inter);
    font-size: 14px;
    outline: none;
}

.fx-marketing-budget-calculator .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--Primary-Blue, #207DE9);
    box-shadow: 0 0 0 2px rgba(32, 125, 233, 0.2);
}

/* Select2 container focus state */
.fx-marketing-budget-calculator .select2-container--focus .select2-selection--single {
    outline: none;
}

/* Select2 Clear button styling */
.fx-marketing-budget-calculator .select2-selection__clear {
    color: var(--Primary-Light-Gray, #CED4DA);
    float: right;
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
    margin-top: 5px;
}

.fx-marketing-budget-calculator .select2-selection__clear:hover {
    color: var(--Primary-Darkest-Gray, #222);
}

@media (max-width: 1200px) { 
    .fx-marketing-budget-calculator .container { grid-template-columns: 1fr; } 
    .fx-marketing-budget-calculator .form-container { margin-bottom: 2rem; } 
}
/* Stack layout when screen is too small for comfortable side-by-side display */
@media (max-width: 1024px) {
    .fx-marketing-budget-calculator .chart-container { 
        flex-direction: column; 
        gap: 2.5rem; 
    }
    .fx-marketing-budget-calculator .summary-table { 
        width: 100%; 
        min-width: 300px; 
    }
    .fx-marketing-budget-calculator .chart-wrapper { 
        width: 100%; 
        max-width: 500px; 
        margin: 0 auto; 
    }

    .fx-marketing-budget-calculator .next-steps .next-steps-header .featured-image {
        display: none;
    }
}

@media (min-width: 1201px) {
    .fx-marketing-budget-calculator .mobile-spectrum-labels {
        display: none;
    }
    .fx-marketing-budget-calculator .spectrum-track.include-user-point {margin-top: 80px;}
}

@media (max-width: 768px) { 
    .fx-marketing-budget-calculator .body-container { 
        flex-direction: column; 
    }
    .fx-marketing-budget-calculator .form-container, 
    .fx-marketing-budget-calculator .results-container { 
        padding: 1.5rem; 
        flex: none; 
        width: 100%; 
        max-width: 100%; 
    }
    .fx-marketing-budget-calculator .form-container { 
        border-right: none; 
        border-bottom: 1px solid var(--Primary-Blue-Lightest, #CCE4FF); 
    }
    .fx-marketing-budget-calculator .chart-container { flex-direction: column; gap: 2.5rem; } 
    .fx-marketing-budget-calculator h1 { font-size: 1.5rem; } 
    .fx-marketing-budget-calculator h2 { font-size: 1.25rem; } 
    .fx-marketing-budget-calculator .chart-container {
        flex-direction: column-reverse;
    }

    .fx-marketing-budget-calculator .allocation-table .allocation-body .percent-display .percent-input {
        padding-right: 0px;
    }
    
    .fx-marketing-budget-calculator .total-row .budget-display .budget-input {
        padding: 0px;
    }

}

@media (max-width: 1200px) {
    .fx-marketing-budget-calculator .spectrum-track {
        margin-bottom: 32px;
    }

    .fx-marketing-budget-calculator .spectrum-track .label-container {
        display: none!important;
    }

    .fx-marketing-budget-calculator .mobile-spectrum-labels {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        gap: 10px 8px;
        margin-bottom: 32px;
        justify-content: center;
        align-items: center;
    }

    .fx-marketing-budget-calculator .mobile-spectrum-labels .spectrum-point {
        background: none;
        box-shadow: none;
        border: 0px;
        position: relative;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        transform: none;
        border-radius: 0px;
        display: flex;
        transition: none;
        flex: 1;
    }

    .fx-marketing-budget-calculator .mobile-spectrum-labels .spectrum-point .label-container {
        top: 0px;
        position: relative;
        left: 0px;
        transform: none;
        white-space: normal;
        width: 100%;
    }
}

@media (min-width: 414px) and (max-width: 768px) { 
    .fx-marketing-budget-calculator .total-row .percent-display .percent-input {
        padding: 0px;
    }
}

@media (max-width: 500px) { 
    .fx-marketing-budget-calculator .allocation-table {padding: 24px 8px;}
    .fx-marketing-budget-calculator .allocation-cell {padding: 9.9px 8px; font-size: 11px;}
}

@media (max-width: 413px) {
    .fx-marketing-budget-calculator .summary-table {
        width: 100%;
        min-width: auto;
    }
    
    .fx-marketing-budget-calculator .allocation-table {
        padding: 16px 8px;
        gap: 8px;
    }
    
    .fx-marketing-budget-calculator .allocation-header-row {
        display: none;
    }
    
    .fx-marketing-budget-calculator .allocation-row,
    .fx-marketing-budget-calculator .allocation-footer-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 0px;
        padding: 12px 8px;
        border-radius: 0px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .fx-marketing-budget-calculator .allocation-footer-row {
        border-top: 1px solid var(--Primary-Blue-Lightest, #CCE4FF);
        font-weight: 600;
        border-radius: 0px;
    }
    
    .fx-marketing-budget-calculator .allocation-cell {
        width: 100%;
        padding: 4px 0;
        font-size: 11px;
        line-height: 1.3;
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .fx-marketing-budget-calculator .allocation-cell-channel {
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
        margin-bottom: 0px;
        font-weight: 600;
        padding-bottom: 0px;
    }

    .fx-marketing-budget-calculator .allocation-cell-channel::before,
    .fx-marketing-budget-calculator .allocation-cell-budget::before,
    .fx-marketing-budget-calculator .allocation-cell-percent::before {
        display: inline-block;
        width: 40%;
        color: var(--Primary-Darkest-Gray, #222);
        font-family: var(--font-inter);
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 14.85px; /* 123.75% */
    }
    
    .fx-marketing-budget-calculator .allocation-cell-channel::before {
        content: "Channel: ";
    }
    
    .fx-marketing-budget-calculator .allocation-cell-budget::before {
        content: "Budget: ";
    }
    
    .fx-marketing-budget-calculator .allocation-cell-percent::before {
        content: "Percentage: ";
    }
    
    .fx-marketing-budget-calculator .allocation-cell-budget,
    .fx-marketing-budget-calculator .allocation-cell-percent {
        flex: 1 1 100%;
        max-width: none;
        justify-content: flex-start;
    }

    .fx-marketing-budget-calculator .budget-display {
        width: auto;
    }

    .fx-marketing-budget-calculator .allocation-table .allocation-body {
        gap: 0px;
    }

    .fx-marketing-budget-calculator .allocation-body .allocation-cell-budget {
        border-radius: 0px;
        background: transparent;
    }

    .fx-marketing-budget-calculator .allocation-footer-row .allocation-cell {
        padding: 4px 0px;
    }

    .fx-marketing-budget-calculator .allocation-footer-row .allocation-cell-channel {
        display: none;
    }
    
    .fx-marketing-budget-calculator .allocation-body .allocation-row:nth-child(even) {
        background: var(--Vivid-Blue-vivid-000, #F5F8FF);
    }

    .fx-marketing-budget-calculator .allocation-cell-channel .legend {
        margin-left: -8px;
    }

    .fx-marketing-budget-calculator .budget-display .budget-input {
        text-align: left;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .fx-marketing-budget-calculator .allocation-cell-percent {
        padding: 0px;
    }

    .fx-marketing-budget-calculator .percent-display .percent-input {
        padding-left: 35px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .fx-marketing-budget-calculator .allocation-footer-row .allocation-cell-budget {
        padding-bottom: 0px;
    }

    .fx-marketing-budget-calculator .allocation-footer-row .allocation-cell-percent {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .fx-marketing-budget-calculator .header-container p {
        color: var(--Primary-Darkest-Gray, #222);
        font-family: var(--font-inter);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px; /* 155.556% */
        letter-spacing: -0.081px;
    }
    .fx-marketing-budget-calculator .advanced-toggle {
        color: var(--Primary-Blue, #207DE9);
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; /* 138.462% */
    }

    .fx-marketing-budget-calculator .allocation-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Popup Modal Styles */
.budget-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.budget-popup-wrapper {
    position: relative;
    max-width: 600px;
    width: 100%;
}

.budget-popup-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border-radius: var(--s2, 16px);
    background: #FFF;
    box-shadow: 0 4px 32px 0 rgba(34, 34, 34, 0.15);
    max-height: inherit;
}

.budget-popup-close {
    position: absolute;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
    top: -35px;
    right: -35px;
    width: 32px;
    height: 32px;
    color: #222;
    font-size: 21px;
    line-height: 32px;
    font-family: var(--font-inter);
    box-shadow: none;
    border: 0;
    padding: 0px;
}

.budget-popup-body {
    padding: var(--s7, 56px) var(--s8, 64px) var(--s8, 64px) var(--s8, 64px);
}

.budget-popup-body .gform_wrapper {padding: 0px;}

.budget-popup-body .gform_wrapper form {padding: 0px; width: 100%; max-width: 100%;}
.budget-popup-body .gform_wrapper form .gfield--type-html h3 {color: var(--Primary-Darkest-Gray, #222); text-align: center; font-family: var(--font-inter); font-size: 32px; font-style: normal; font-weight: 800; line-height: 40px; letter-spacing: -1.152px; margin-bottom: 8px;}
.budget-popup-body .gform_wrapper form .gfield--type-html p {color: var(--Primary-Dark-Gray, #6E7B81); text-align: center; font-family: var(--font-inter); font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; letter-spacing: -0.081px; margin-bottom: 0px;} 
.budget-popup-body .gform_wrapper form .gfield--type-email,
.budget-popup-body .gform_wrapper form .gfield--type-text {padding: 0px!important; margin-bottom: 0px!important;}
.budget-popup-body .gform_wrapper form .gfield--type-email label,
.budget-popup-body .gform_wrapper form .gfield--type-text label {display: none;}
.budget-popup-body .gform_wrapper form .gfield--type-email input,
.budget-popup-body .gform_wrapper form .gfield--type-text input {
    font-family: var(--font-inter);
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    display: flex;
    height: var(--s8, 64px);
    padding: var(--s1, 8px) var(--s2, 16px);
    border-radius: 4px;
    background: var(--White, #FFF);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15) inset;
    border: 0px!important;
}

.budget-popup-body .gform_wrapper form .gfield--type-email input::placeholder,
.budget-popup-body .gform_wrapper form .gfield--type-text input::placeholder {
    color: var(--Primary-Gray, #A9B4BC)!important;
    font-size: 21px;
}

.budget-popup-body .gform_wrapper.gravity-theme .gform_footer {
    margin: 0px;
    padding-bottom: 0px;
}

.budget-popup-body .gform_wrapper form input[type="submit"] {
    margin-bottom: 0px;
}

.budget-popup-body .gform_confirmation_message p {
    margin-bottom: 0px;
    color: var(--Primary-Darkest-Gray, #222);
    text-align: center;
    font-family: var(--font-inter);
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    margin-bottom: 0px;
}

.budget-popup-body .gform_confirmation_message a {
    color: var(--Primary-Blue, #207DE9);
    font-family: Inter;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.budget-popup-body .gform_confirmation_message hr {
    border-color: var(--Primary-Blue-Lightest, #CCE4FF);
    margin-top: 60px;
    margin-bottom: 60px;
}

.budget-popup-body .gform_confirmation_message .response-header h3 {
    margin-bottom: 16px;
    text-align: center;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header-container {
    max-width: 1700px;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--Vivid-Blue-vivid-09, #00316A);
    padding: 80px 15% 160px 15%;
    position: relative;
    z-index: -1;
    overflow: hidden;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 173px;
    height: 128px;
    background-image: url('/wp-content/themes/fx/assets/img/blocks/innerpage/marketing-budget-calculator/half-blue-circle.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 101px;
    height: 94px;
    background-image: url('/wp-content/themes/fx/assets/img/blocks/innerpage/marketing-budget-calculator/bg-dots.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header .bg-dots {
    max-width: 163px;
    position: absolute;
    bottom: 0;
    left: 5%;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header h1 {
    color: #FFF;
    text-align: center;
    font-family: var(--font-inter);
    font-size: 72px;
    font-style: normal;
    font-weight: 800;
    line-height: 78px;
    letter-spacing: -2.592px;
    margin-bottom: 40px;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header ul {
    margin: 0px;
    display: flex;
    list-style: none;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header p,
.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header ul li {
    color: var(--White, #FFF);
    text-align: center;
    font-family: var(--font-inter);
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header ul li {
    padding: 0px;
    display: flex;
    gap: 8px;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-header ul li::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url('/wp-content/themes/fx/assets/img/blocks/general/marketing-budget-calculator/check-circle-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.fx-marketing-budget-calculator .fx-marketing-budget-calculator-container {
    margin-top: -100px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .budget-popup-wrapper {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .budget-popup-content {
        max-height: 95vh;
    }
    
    .budget-popup-close {
        top: -10px;
        right: -10px;
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    
    .budget-popup-body {
        padding: 20px;
    }

    .budget-popup-body .gform_confirmation_message hr {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .fx-marketing-budget-calculator .fx-marketing-budget-calculator-header {
        padding: var(--s6, 48px) var(--s3, 24px) var(--s12, 96px) var(--s3, 24px);
    }

    .fx-marketing-budget-calculator .fx-marketing-budget-calculator-header ul {
        justify-content: flex-start;
    }

    .fx-marketing-budget-calculator .fx-marketing-budget-calculator-header h1 { 
        color: var(--White, #FFF);
        font-family: var(--font-inter);
        font-size: 36px;
        font-style: normal;
        font-weight: 800;
        line-height: 46px; /* 127.778% */
        letter-spacing: -1.296px;
        text-align: left;
    }

    .fx-marketing-budget-calculator .fx-marketing-budget-calculator-header p {
        text-align: left;
    }

    .fx-marketing-budget-calculator .fx-marketing-budget-calculator-inner {
        margin-top: 40px;
    }
}