/* Font Declarations */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aconchego';
    src: url('../fonts/Aconchego-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CSS Custom Properties (Design Tokens) */
:root {
    /* Colors */
    --color-primary: #0003c9;
    --color-primary-hover: #0d52a5;
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-light: #dcdcdc;
    --color-bg-surface: #ffffff;
    --color-bg-container: #FAFAFA;
    --color-bg-muted: #f8f9fa;
    --color-bg-accent: #F3F7FC;
    --color-required: #0003c9;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;

    /* Typography Scale */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Border Radius Scale */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 100px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(10, 13, 18, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(17, 102, 189, 0.1);

    /* Layout */
    --container-max-width: 1280px;
    --form-input-height: 44px;
    --slider-thumb-size: 24px;
    --slider-track-height: 6px;

    /* Z-index scale */
    --z-index-dropdown: 1000;
    --z-index-modal: 1010;
    --z-index-tooltip: 1020;

    /* Dynamic positioning (set by JavaScript) */
    --slider-position: 73.68;
    --slider-width: 73.68;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-normal);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Headings */
h1 {
    font-family: 'Aconchego', serif;
    font-weight: var(--font-weight-bold);
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-semibold);
}

/* Display utilities */
.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.form-group .radio-group .radio-content .radio-title {
    font-family: 'Inter', sans-serif
}

/* Positioning utilities for dynamic slider values */
.slider-thumb {
    left: calc(var(--slider-position, 0) * 1%);
}

.slider-fill {
    width: calc(var(--slider-width, 0) * 1%);
}

/* State modifiers */
.is-selected {
    background: var(--color-bg-surface);
    border-color: var(--color-primary);
}

.is-dragging {
    cursor: grabbing !important;
    box-shadow: var(--shadow-lg) !important;
}

.is-expanded {
    display: block;
}

.is-collapsed {
    display: none;
}

/* Required asterisk styling */
.required {
    color: var(--color-required);
}

.main-wrapper {
    max-width: var(--container-max-width);
    margin: var(--space-4xl) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Page header section */
.page-header {
    text-align: center;
    padding: 0 var(--space-2xl);
}

.page-header h1 {
    font-family: 'Aconchego', serif;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.page-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Responsive heading sizes */
@media (max-width: 968px) {
    .page-header h1 {
        font-size: 36px;
    }

    .page-subtitle {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 640px) {
    .page-header h1 {
        font-size: 28px;
    }
}

/* Two-column calculator layout */
.calculator-layout {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: var(--space-2xl);
    align-items: start;
    padding: var(--space-lg);
}

.form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.results-column {
    position: sticky;
    top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background-color: #F2F2FF !important;
}

/* Mobile responsive - stack vertically */
@media (max-width: 968px) {
    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .results-column {
        position: static;
    }
}

.incentive-container {
    background: var(--color-bg-container);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Section headings */
.incentive-container h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2xl);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
}

.results-column .estimated-participants-section h2 {
    margin-bottom: 0;   
}

.incentive-container h2 svg {
    flex-shrink: 0;
}

.form-group {
    margin-bottom: var(--space-xl);
    border: 0;
}

.form-group legend {
    margin-bottom: 10px;
}

/* Form labels */
.form-group>label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--space-sm);
    color: #414651;
}

.form-group>label:has(.tooltip-icon) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tooltip-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    cursor: help;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    position: relative;
}

.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    position: relative;
}

.radio-card {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-bg-surface);
}

.radio-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 50%, white);
}

.radio-card.selected {
    border-color: var(--color-primary);
    background: var(--color-bg-surface);
}

.radio-card input {
    position: absolute;
    opacity: 0;
}

/* Radio card content and styling */
.radio-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 28px;
}

.radio-card::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 17px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-surface);
}

.radio-card.selected::before {
    border-color: #0003c9;
    background: radial-gradient(circle at center, white 0%, white 30%, #0003c9 30%, #0003c9 100%);
}

/* Radio card text styles */
.radio-title {

    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-primary);
}

.radio-title .badge {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.radio-desc {
    font-size: var(--font-size-base);
    font-weight: normal;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
    transition: all 0.2s;
    background: var(--color-bg-surface);
    min-height: var(--form-input-height);
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-control::placeholder {
    color: var(--color-text-light);
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Custom Dropdown Styles */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-button {
    width: 100%;
    padding: var(--space-sm) 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    font-size: var(--font-size-lg);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    min-height: var(--form-input-height);
    box-sizing: border-box;
}

.dropdown-button:hover {
    border-color: var(--color-primary);
}

.dropdown-button[aria-expanded="true"] {
    border-color: #0003c9;
    box-shadow: 0 0 0 3px rgba(17, 102, 189, 0.1);
}

.dropdown-button:focus {
    outline: none;
    border-color: #0003c9;
    box-shadow: 0 0 0 3px rgba(17, 102, 189, 0.1);
}

.dropdown-text {
    flex: 1;
    color: var(--color-text-secondary);
}

.dropdown-arrow {
    flex-shrink: 0;
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-index-dropdown);
    list-style: none;
    margin: var(--space-xs) 0 0 0;
    padding: var(--space-xs) 0;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.custom-dropdown[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    padding: var(--space-sm) 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.dropdown-option:hover {
    background-color: var(--color-bg-muted);
}

.dropdown-option.selected {
    background-color: var(--color-bg-container);
    color: var(--color-primary);
}

.dropdown-option .checkmark {
    opacity: 0;
    transition: opacity 0.15s;
}

.dropdown-option.selected .checkmark {
    opacity: 1;
}

/* Placeholder styling for unselected dropdowns */
.dropdown-button .dropdown-text.placeholder {
    color: var(--color-text-light);
}

/* Mobile responsive adjustments for dropdowns */
@media (max-width: 768px) {
    .dropdown-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .dropdown-option {
        padding: 12px 14px;
        font-size: 16px;
    }
}

.input-with-suffix {
    position: relative;
}

.input-with-suffix input {
    padding-right: 65px;
}

.input-suffix {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    pointer-events: none;
}

/* .search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 44px;
} */

.radio-inline {
    display: flex;
    gap: 32px;
}

.form-group:has(.radio-inline) {
    margin-bottom: 0;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    padding-left: 28px;
    min-height: 24px;
}

.radio-option input {
    position: absolute;
    opacity: 0;
}

.radio-mark {
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s;
    background: var(--color-bg-surface);
}

.radio-option:hover .radio-mark {
    border-color: var(--color-primary);
}

.radio-option input:checked+.radio-mark {
    border-color: #0003c9;
    background: radial-gradient(circle at center, white 0%, white 30%, #0003c9 30%, #0003c9 100%);
}

.result-participant-section {
    background: none;
    border: 0;
    box-shadow: none;;
}

.results-column .divider {
    width: 90%;
    margin: 0 auto;
}

.result-section h2 {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

/* Result section styling */
.estimated-participants-section .incentive-pill {
    color: black;
}

.estimated-participants-section .incentive-pill::before {
    content: '';
    display: inline-block;
    width: 19px;
    height: 17px;
    background-image: url('data:image/svg+xml,<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2884 11.6974C15.5017 12.3069 16.5419 13.285 17.3011 14.508C17.4515 14.7502 17.5267 14.8713 17.5527 15.039C17.6055 15.3798 17.3724 15.7988 17.0551 15.9336C16.8989 16 16.7232 16 16.3718 16M12.6218 8.1102C13.8565 7.49657 14.7051 6.22238 14.7051 4.75C14.7051 3.27762 13.8565 2.00343 12.6218 1.3898M10.9551 4.75C10.9551 6.82107 9.27617 8.5 7.20511 8.5C5.13404 8.5 3.45511 6.82107 3.45511 4.75C3.45511 2.67893 5.13404 1 7.20511 1C9.27617 1 10.9551 2.67893 10.9551 4.75ZM1.42113 14.282C2.74972 12.2871 4.84625 11 7.2051 11C9.56396 11 11.6605 12.2871 12.9891 14.282C13.2801 14.719 13.4257 14.9375 13.4089 15.2166C13.3959 15.4339 13.2534 15.7 13.0797 15.8313C12.8567 16 12.55 16 11.9365 16H2.47374C1.86025 16 1.5535 16 1.33047 15.8313C1.15681 15.7 1.01435 15.4339 1.0013 15.2166C0.984545 14.9375 1.13007 14.719 1.42113 14.282Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.participants-note {
    margin-top: 12px;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.suggestive-incentive-section h2::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 13.6667C7.5 14.9553 8.54467 16 9.83333 16H12C13.3807 16 14.5 14.8807 14.5 13.5C14.5 12.1193 13.3807 11 12 11H10C8.61929 11 7.5 9.88071 7.5 8.5C7.5 7.11929 8.61929 6 10 6H12.1667C13.4553 6 14.5 7.04467 14.5 8.33333M11 4.5V6M11 16V17.5M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.incentive-pill {
    display: flex;
    padding: 4px 12px;
    background: rgba(17, 102, 189, 0.05);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    color: #0003c9;
    margin-left: 8px;
        align-items: center;
    gap: 5px;
}

.result-note {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Participant section transitions */
.participant-section {
    transition: all 0.3s ease;
}

.participant-section[data-section="consumers"] {
    opacity: 0;
    transform: translateY(-10px);
}

.participant-section[data-section="consumers"]:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}

/* Incidence Rate Styling */
.form-group>.incidence-label {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 8px;
    display: block;
}

.incidence-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 70px;
    margin-top: 0;
}

/* Slider Container */
.slider-container {
    position: relative;
    margin-bottom: 24px;
    margin-top: 32px;
}

/* Custom Slider */
.custom-slider {
    position: relative;
    height: 6px;
    margin: 40px 0 16px 0;
}

.custom-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    margin: 0;
    padding: 0;
    outline: none;
    /* Completely hide native input to prevent browser bubble */
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    -webkit-tap-highlight-color: transparent;
}

.custom-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid #1166BD;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 4;
}

.custom-slider input[type="range"]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid #1166BD;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 4;
    -moz-appearance: none;
}

.custom-slider input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent;
}

.custom-slider input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent;
}

.slider-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    z-index: 1;
    cursor: pointer;
}

.slider-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.1s ease;
}

/* Slider thumb (the draggable circle on the track) */
.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    background: var(--color-bg-surface);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    cursor: grab;
    z-index: 5;
    transition: left 0.1s ease;
    box-shadow: var(--shadow-md);
}

.slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Floating value bubble above thumb */
.slider-value-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-sm);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px var(--space-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Arrow pseudo-elements removed as requested */

.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--space-sm);
}

/* Reference Guide */
.reference-guide {
    margin-top: 16px;
}

.reference-toggle {
    width: 100%;
    padding: var(--space-md) 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.reference-toggle:hover {
    color: var(--color-primary);
}

.reference-toggle:hover .chevron-icon path {
    stroke: #0003c9;
}

.reference-toggle[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

.chevron-icon {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.reference-content {
    border-radius: var(--radius-lg);
    background: var(--color-bg-accent);
    animation: slideDown 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px var(--space-lg);
}

.reference-content[style*="display: none"] {
    animation: slideUp 0.3s ease;
}

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

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

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.reference-item:last-child {
    margin-bottom: 0;
}

.reference-range {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.reference-examples {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Country Autocomplete Styles */
.country-autocomplete {
    position: relative;
}

.search-input-wrapper {
    position: relative;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    color: var(--color-text-muted);
}

.country-autocomplete .search-input {
    padding-left: 44px;
}

.search-input-wrapper .clear-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: none;
    padding: 4px 8px;
    line-height: 1;
    z-index: 2;
}

.search-input-wrapper .clear-button:hover {
    color: var(--color-text-primary);
}

.search-input:not(:placeholder-shown)~.clear-button {
    display: block;
}

.country-autocomplete .dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-index-dropdown);
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.country-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.country-autocomplete .country-option {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.country-autocomplete .country-option:hover,
.country-autocomplete .country-option.highlighted {
    background-color: var(--color-bg-muted);
    color: var(--color-primary);
}

.country-autocomplete .country-option.selected {
    color: var(--color-primary);
}

/* Highlight matching text */
.country-autocomplete .country-option mark {
    background: color-mix(in srgb, var(--color-primary) 20%, white);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    padding: 0 2px;
    border-radius: 2px;
}

.country-autocomplete .checkmark {
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    margin-left: var(--space-sm);
}

.country-autocomplete .country-option.selected .checkmark {
    opacity: 1;
}

.country-autocomplete .no-results {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

/* Aria live region for screen readers */
.aria-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Dropdown arrow positioning */
.search-input-wrapper .dropdown-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    color: var(--color-text-muted);
}

/* Adjust search input when it has dropdown arrow and clear button */
.search-input-wrapper input.search-input {
    padding-right: 70px;
    /* More space for both arrow and clear button */
}

/* Hide arrow when clear button is visible */
.search-input:not(:placeholder-shown)~.dropdown-arrow {
    display: none;
}

/* Job Function Autocomplete Styles */
.job-function-autocomplete {
    position: relative;
}

.job-function-autocomplete .dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-index-dropdown);
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.job-function-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.job-function-autocomplete .job-function-option {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.job-function-autocomplete .job-function-option:hover,
.job-function-autocomplete .job-function-option.highlighted {
    background-color: var(--color-bg-muted);
}

.job-function-autocomplete .job-function-option.selected {
    color: var(--color-primary);
}

.job-function-autocomplete .job-function-option[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--color-primary) 10%, white);
}

.job-function-autocomplete .job-function-option mark {
    background: color-mix(in srgb, var(--color-primary) 20%, white);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    padding: 0 2px;
    border-radius: 2px;
}

.job-function-autocomplete .checkmark {
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    margin-left: var(--space-sm);
}

.job-function-autocomplete .job-function-option.selected .checkmark {
    opacity: 1;
}

.job-function-autocomplete .no-results {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

/* Factor List Styling */
.factors-list {
    list-style: none;
    margin: var(--space-lg) 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.factor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
}

.factor-item:last-child {
    border-bottom: none;
}

/* Impact symbols styling */
.impact-symbols {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 2px;
    min-width: 80px;
    display: inline-block;
    flex-shrink: 0;
    text-align: right;
}

.impact-symbols.impact-positive {
    color: #17B26A;
}

.impact-symbols.impact-negative {
    color: #ef4444;
}

.impact-symbols.impact-neutral {
    color: var(--color-text-muted);
}

.factor-text {
    color: var(--color-text-primary);
    line-height: 1.4;
    color: #373E4A;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

/* Factor list header styling */
.result-note h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: var(--space-lg) 0 var(--space-md) 0;
}

/* Loading spinner */
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    margin: 0 auto;
}

.loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #0003c9;
    animation: prixClipFix 2s linear infinite;
}

/* Small loader variant for estimated participants */
.loader-small {
    width: 16px;
    height: 16px;
    margin: 0;
}

.loader-small::before {
    border: 2px solid #0003c9;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

/* Loading state container */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) 0;
    gap: var(--space-lg);
}

/* Mobile responsive styles */
@media (max-width: 768px) {

    .form-row,
    .radio-group {
        grid-template-columns: 1fr;
    }

    P .radio-inline {
        flex-direction: column;
        gap: 16px;
    }

    .slider-value {
        font-size: 20px;
    }

    .custom-slider input[type="range"]::-webkit-slider-thumb {
        height: 24px;
        width: 24px;
    }

    .custom-slider input[type="range"]::-moz-range-thumb {
        height: 24px;
        width: 24px;
    }
}

/* ============================================================================
   Industry Autocomplete Component
   ============================================================================ */

.industry-autocomplete {
    position: relative;
}

.industry-autocomplete .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.industry-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.industry-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.industry-option:hover,
.industry-option.highlighted {
    color: var(--color-primary);
}

.industry-option:active {
    background-color: rgba(17, 102, 189, 0.15);
}

.industry-option .checkmark {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.industry-option.selected .checkmark {
    opacity: 1;
}

.industry-option .highlight {
    background-color: rgba(17, 102, 189, 0.2);
    font-weight: 600;
}

.industry-autocomplete .no-results {
    padding: 10px 14px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    list-style: none;
    text-align: center;
}

/* ============================================================================
   Age Autocomplete Component
   ============================================================================ */

.age-autocomplete {
    position: relative;
}

.age-autocomplete .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.age-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.age-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.age-option:hover,
.age-option.highlighted {
    color: var(--color-primary);
}

.age-option:active {
    background-color: rgba(17, 102, 189, 0.15);
}

.age-option .checkmark {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.age-option.selected .checkmark {
    opacity: 1;
}

.age-option .highlight {
    background-color: rgba(17, 102, 189, 0.2);
    font-weight: 600;
}

.age-autocomplete .no-results {
    padding: 10px 14px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    list-style: none;
    text-align: center;
}

/* ============================================================================
   Gender Autocomplete Component
   ============================================================================ */

.gender-autocomplete {
    position: relative;
}

.gender-autocomplete .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.gender-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gender-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.gender-option:hover,
.gender-option.highlighted {
    color: var(--color-primary);
}

.gender-option:active {
    background-color: rgba(17, 102, 189, 0.15);
}

.gender-option .checkmark {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gender-option.selected .checkmark {
    opacity: 1;
}

.gender-option .highlight {
    background-color: rgba(17, 102, 189, 0.2);
    font-weight: 600;
}

.gender-autocomplete .no-results {
    padding: 10px 14px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    list-style: none;
    text-align: center;
}

/* ============================================================================
   Household Income Autocomplete Component
   ============================================================================ */

.household-income-autocomplete {
    position: relative;
}

.household-income-autocomplete .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.household-income-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.household-income-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.household-income-option:hover,
.household-income-option.highlighted {
    color: var(--color-primary);
}

.household-income-option:active {
    background-color: rgba(17, 102, 189, 0.15);
}

.household-income-option .checkmark {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.household-income-option.selected .checkmark {
    opacity: 1;
}

.household-income-option .highlight {
    background-color: rgba(17, 102, 189, 0.2);
    font-weight: 600;
}

.household-income-autocomplete .no-results {
    padding: 10px 14px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    list-style: none;
    text-align: center;
}

/* ============================================================================
   Education Autocomplete Component
   ============================================================================ */

.education-autocomplete {
    position: relative;
}

.education-autocomplete .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.education-autocomplete[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.education-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.education-option:hover,
.education-option.highlighted {
    color: var(--color-primary);
}

.education-option:active {
    background-color: rgba(17, 102, 189, 0.15);
}

.education-option .checkmark {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.education-option.selected .checkmark {
    opacity: 1;
}

.education-option .highlight {
    background-color: rgba(17, 102, 189, 0.2);
    font-weight: 600;
}

.education-autocomplete .no-results {
    padding: 10px 14px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    list-style: none;
    text-align: center;
}

/* ============================================================================
   Job Titles Multi-Select Input Component
   ============================================================================ */

.job-titles-input-container {
    position: relative;
}

.job-titles-input-container .search-input-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: white;
    padding: var(--space-sm) 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.job-titles-input-container .search-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(17, 102, 189, 0.1);
}

.job-titles-input-container .search-icon {
    position: absolute;
    left: 14px;
    pointer-events: none;
    z-index: 1;
}

.job-titles-input-container .job-titles-input {
    flex: 1;
    min-width: 120px;
    border: none;
    padding: 0;
    outline: none;
    background: transparent;
    min-height: 26px;
}

.job-titles-input-container .clear-button {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease;
}

.job-titles-input-container .clear-button:hover {
    color: var(--color-text-primary);
}

.job-titles-input-container .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.job-titles-input-container[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.job-titles-input-container .dropdown-list li {
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.job-titles-input-container .dropdown-list li:hover,
.job-titles-input-container .dropdown-list li.highlighted {
    background-color: var(--color-bg-accent);
}

.job-titles-input-container .dropdown-list li:active {
    background-color: rgba(17, 102, 189, 0.15);
}

/* Loading indicator */
.job-titles-loading {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Feedback messages */
.job-titles-feedback {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    display: none;
}

.job-titles-feedback.success {
    display: block;
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.job-titles-feedback.error {
    display: block;
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Pills container */
.job-titles-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.job-titles-pills:empty {
    display: none;
}

/* Individual job title pill */
.job-title-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    background: #F2F2FF;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: #181D27;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.job-title-pill:hover {
    background: #E8E8FF;
}

.job-title-pill .job-title-name {
    line-height: 1.4;
}

.job-title-pill .remove-job-title {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.job-title-pill .remove-job-title:hover {
    background-color: rgba(17, 102, 189, 0.2);
}

.job-title-pill .remove-job-title svg {
    width: 16px;
    height: 16px;
    color: #A4A7AE;
}

/* ============================================================================
   Skills Multi-Select Input Component
   ============================================================================ */

.skills-input-container {
    position: relative;
}

.skills-input-container .search-input-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: white;
    padding: var(--space-sm) 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.skills-input-container .search-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(17, 102, 189, 0.1);
}

.skills-input-container .skills-input {
    flex: 1;
    min-width: 120px;
    border: none;
    padding: 0;
    outline: none;
    background: transparent;
    min-height: 26px;
}

.skills-input-container .clear-button {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease;
}

.skills-input-container .clear-button:hover {
    color: var(--color-text-primary);
}

.skills-input-container .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.skills-input-container[data-open="true"] .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.skills-input-container .dropdown-list li {
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
}

.skills-input-container .dropdown-list li:hover,
.skills-input-container .dropdown-list li.highlighted {
    background-color: var(--color-bg-accent);
}

.skills-input-container .dropdown-list li:active {
    background-color: rgba(17, 102, 189, 0.15);
}

/* Loading indicator */
.skills-loading {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Feedback messages */
.skills-feedback {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    display: none;
}

.skills-feedback.success {
    display: block;
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.skills-feedback.error {
    display: block;
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Pills container */
.skills-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.skills-pills:empty {
    display: none;
}

/* Individual skill pill */
.skill-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    background: #F2F2FF;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: #181D27;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.skill-pill:hover {
    background: #E8E8FF;
}

.skill-pill .skill-name {
    line-height: 1.4;
}

.skill-pill .remove-skill {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.skill-pill .remove-skill:hover {
    background-color: rgba(17, 102, 189, 0.2);
}

.skill-pill .remove-skill svg {
    width: 16px;
    height: 16px;
    color: #A4A7AE;
}