/* Vizco Brand CSS Variables and Components */
@font-face {
    font-family: 'Montserrat VF';
    src: url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat VF';
    src: url('./fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Source Sans 3 VF';
    src: url('./fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans 3 VF';
    src: url('./fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}
/* CSS Variables */

:root, :host {
    /* Font families */
    --font-montserrat: 'Montserrat VF', ui-sans-serif, system-ui, sans-serif;
    --font-source-sans: 'Source Sans 3 VF', ui-sans-serif, system-ui, sans-serif;
    --default-font-family: var(--font-montserrat);
    /* Font weights - using variable font capabilities */
    --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 450; /* Adjusted from 500 to match previous appearance */
    --fw-semibold: 525; /* Custom semi-bold weight */
    --fw-bold: 600;
    --fw-extrabold: 700;
    --fw-black: 800;
    --fw-heavy: 900;
    /* Semantic font weights */
    --fw-body: var(--fw-regular);
    --fw-heading: var(--fw-semibold);
    --fw-button: var(--fw-semibold);
    --fw-label: var(--fw-semibold);
    --fw-accent: var(--fw-bold);
    /* Vizco Brand Colors */
    --color-vz-blue: #00348e; /* Primary Bleu Vizco */
    --color-vz-blue-light: #347cb2; /* Bleu Clair Vizco */
    --color-vz-blue-dark: #00286e; /* Darker Vizco Blue */
    --color-vz-yellow: #EDAA00; /* Secondary - Jaune légèrement foncé */
    --color-vz-yellow-dark: #d99b00; /* Slightly darker Vizco Yellow */
    --color-vz-bg-light: #e6ecf5; /* Very light Vizco Blue for backgrounds */
    --color-vz-border-light: #ccd9eb; /* Light Vizco Blue for borders */
    /* Color aliases for backward compatibility and semantic naming */
    --color-blue-400: #4a8dbd; /* Slightly lighter Vizco Light Blue */
    --color-blue-500: var(--color-vz-blue-light);
    --color-blue-600: var(--color-vz-blue);
    --color-blue-700: var(--color-vz-blue-dark);
    --color-indigo-50: var(--color-vz-bg-light);
    --color-indigo-100: var(--color-vz-border-light);
    --color-indigo-600: var(--color-vz-blue);
    --color-indigo-700: var(--color-vz-blue-dark);
    --color-yellow-500: var(--color-vz-yellow);
    --color-yellow-600: var(--color-vz-yellow-dark);
    /* Legacy color names for existing components */
    --color-vizco-blue: var(--color-vz-blue);
    --color-vizco-blue-light: var(--color-vz-blue-light);
    --color-vizco-yellow: var(--color-vz-yellow);
    --color-vizco-bg-light: var(--color-vz-bg-light);
    /* Spacing system */
    --spacing: 0.25rem;
    --spacing-xs: calc(var(--spacing) * 1); /* 0.25rem / 4px */
    --spacing-sm: calc(var(--spacing) * 2); /* 0.5rem / 8px */
    --spacing-md: calc(var(--spacing) * 4); /* 1rem / 16px */
    --spacing-lg: calc(var(--spacing) * 6); /* 1.5rem / 24px */
    --spacing-xl: calc(var(--spacing) * 8); /* 2rem / 32px */
    /* Typography scale - updated with semantic font weights */
    --text-headline1: 97px;
    --text-headline1--line-height: 1;
    --text-headline1--letter-spacing: -1.5px;
    --text-headline1--font-weight: var(--fw-light);
    --text-headline2: 61px;
    --text-headline2--line-height: 1;
    --text-headline2--letter-spacing: -0.5px;
    --text-headline2--font-weight: var(--fw-light);
    --text-headline3: 48px;
    --text-headline3--line-height: 1;
    --text-headline3--letter-spacing: 0px;
    --text-headline3--font-weight: var(--fw-regular);
    --text-headline4: 34px;
    --text-headline4--line-height: 1;
    --text-headline4--letter-spacing: 0.25px;
    --text-headline4--font-weight: var(--fw-regular);
    --text-headline5: 24px;
    --text-headline5--line-height: 1;
    --text-headline5--letter-spacing: 0px;
    --text-headline5--font-weight: var(--fw-regular);
    --text-headline6: 20px;
    --text-headline6--line-height: 1;
    --text-headline6--letter-spacing: 0.15px;
    --text-headline6--font-weight: var(--fw-semibold);
    --text-subtitle1: 16px;
    --text-subtitle1--line-height: 1.5;
    --text-subtitle1--letter-spacing: 0.15px;
    --text-subtitle1--font-weight: var(--fw-regular);
    /* Additional text sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    /* Border radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    /* Transitions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --transition-fast: 150ms;
    --transition-normal: 200ms;
    --transition-slow: 300ms;
    --default-transition-duration: var(--transition-normal);
    /* Spacing system */
    --spacing: 0.25rem;
    --spacing-xs: calc(var(--spacing) * 1); /* 0.25rem / 4px */
    --spacing-sm: calc(var(--spacing) * 2); /* 0.5rem / 8px */
    --spacing-md: calc(var(--spacing) * 4); /* 1rem / 16px */
    --spacing-lg: calc(var(--spacing) * 6); /* 1.5rem / 24px */
    --spacing-xl: calc(var(--spacing) * 8); /* 2rem / 32px */
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Font weight utility classes */
.fw-thin {
    font-weight: var(--fw-thin);
}

.fw-extralight {
    font-weight: var(--fw-extralight);
}

.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-extrabold {
    font-weight: var(--fw-extrabold);
}

.fw-black {
    font-weight: var(--fw-black);
}

.fw-heavy {
    font-weight: var(--fw-heavy);
}

/* Semantic font weight classes */
.fw-body {
    font-weight: var(--fw-body);
}

.fw-heading {
    font-weight: var(--fw-heading);
}

.fw-button {
    font-weight: var(--fw-button);
}

.fw-label {
    font-weight: var(--fw-label);
}

.fw-accent {
    font-weight: var(--fw-accent);
}



.vz-form-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: var(--font-montserrat);
}

/* Card style matching Vizco design */
.vz-card {
    border-top: 4px solid var(--color-vz-blue);
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.1);
}

.vz-card-header {
    background-color: var(--color-vz-bg-light);
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

    .vz-card-header::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px;
        background-color: var(--color-vz-yellow);
    }


.vz-card-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: var(--color-vz-blue);
    margin: 0;
}

/*.vz-card-title::before {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 5px;*/
/*    height: 20px;*/
/*    background-color: var(--color-vz-yellow);*/
/*    margin-right: 10px;*/
/*}*/

.vz-card-body {
    padding: calc(var(--spacing) * 6);
}

    .vz-card-body .col-12,
    .vz-card-body .col-md-6,
    .vz-card-body .col-md-4,
    .vz-card-body .col-md-8,
    .vz-card-body .col-8,
    .vz-card-body .col-4 {
        margin-bottom: var(--spacing-md); /* 1rem, same as mb-3 */
    }

    .vz-card-body .row > *:last-child {
        margin-bottom: 0;
    }

    /* Add larger spacing between row sections */
    .vz-card-body .row {
        margin-bottom: var(--spacing-lg);
    }

        .vz-card-body .row:last-child {
            margin-bottom: 0;
        }

/* Form styling */
.vz-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-extrabold);
    color: #2d3748; /* Gray-800 equivalent - darker for better contrast */
    margin-bottom: calc(var(--spacing-md) * 1);
    font-family: var(--font-montserrat);
}

.vz-input {
    width: 100%;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border: 2px solid #e2e8f0; /* Gray-300 equivalent */
    border-radius: 0.25rem; /* Squared corners to match Vizco design */
    transition-property: border-color, box-shadow;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);
    font-family: var(--font-source-sans);
}

    .vz-input:focus {
        outline: none;
        border-color: var(--color-vz-blue);
        /*box-shadow: 0 0 0 3px rgba(0, 52, 142, 0.15);*/ /* Vizco blue shadow */
    }

    .vz-input:hover:not(:focus) {
        border-color: #cbd5e0; /* Slightly darker on hover */
    }

.vz-radio {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #e2e8f0;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .vz-radio:hover {
        background-color: #f0f5ff;
    }


    .vz-radio:focus {
        background-color: #f0f5ff;
    }

    .vz-radio:focus-within {
        background-color: #f0f5ff;
        border-color: var(--color-vz-blue);
        box-shadow: 0 0 0 2px rgba(0, 52, 142, 0.15);
    }

    .vz-radio input {
        margin-right: 10px;
        appearance: none;
        background-color: #eee;
        font: inherit;
        color: var(--color-vz-blue);
        width: 1.25rem;
        height: 1.25rem;
        border: none;
        border-radius: 50%;
        transform: translateY(-0.075em);
        position: relative;
    }

        .vz-radio input:checked {
            background-color: var(--color-vz-blue);
        }

            .vz-radio input:checked::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background: var(--color-vz-yellow);
            }

    .vz-radio:has(input:checked) {
        background-color: #f0f5ff !important;
    }

    /* Alternative for older browsers that don't support :has() */
    .vz-radio.selected {
        background-color: #f0f5ff !important;
    }

    .vz-radio label {
        font-weight: 600;
        font-size: 14px;
        margin-left: 1rem;
    }



.vz-select {
    padding-right: 0.5rem;
}

.vz-select:hover {
    cursor: pointer;
}

    .vz-select option:hover {
        background-color: #f0f5ff;
        cursor: pointer;
    }

.vz-checkbox {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
    vertical-align: text-bottom;
}

.vz-checkbox:hover {
    background-color: #f8f9fa; /* Subtle gray instead of blue */
}

/* Only show focus ring on keyboard navigation */
.vz-checkbox:focus-visible {
    outline: 2px solid var(--color-vz-blue);
    outline-offset: 2px;
}

/* Custom checkbox - SIMPLIFIED */
input[type="checkbox"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #cbd5e0; 
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    position: relative;
    transition: all 0.15s ease;
}

input[type="checkbox"]:checked {
    background-color: var(--color-vz-blue);
    border-color: var(--color-vz-blue);
}

/* Simple white checkmark */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*input[type="checkbox"]:focus-visible {*/
/*    outline: 2px solid var(--color-vz-blue);*/
/*    outline-offset: 2px;*/
/*}*/

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-interest-item {
    display: flex;
    align-items: flex-start;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.125rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

    .product-interest-item:hover {
        background-color: #f0f5ff !important;
    }

    .product-interest-item.selected {
        background-color: #f0f5ff !important;
    }

    /* Keep selected checkboxes with blue background */
    .product-interest-item:has(input:checked) {
        background-color: #f0f5ff !important;
    }

    /* Alternative for older browsers that don't support :has() */
    .product-interest-item.selected {
        background-color: #f0f5ff !important;
    }




input[type="radio"].valid.modified {
    outline: none !important;
}

.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
}

    .radio-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.radio-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.radio-container:hover input ~ .radio-checkmark {
    background-color: var(--color-vz-bg-light);
}

.radio-container input:checked ~ .radio-checkmark {
    background-color: var(--color-vz-blue);
}

.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

.radio-container .radio-checkmark:after {
    top: 8px;
    left: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-vz-yellow);
}

.vz-select {
    /* Remove default styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom styling */
    background-color: white;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23347cb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.75rem) center;
    background-size: 1.5rem;
    /* Spacing and sizing */
    padding-right: 3rem; /* Space for custom arrow */
    padding-left: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* Border and visual styling */
    border: 2px solid #e2e8f0;
    border-radius: 0.25rem;
    font-family: var(--font-source-sans);
    font-size: 1rem;
    width: 100%;
    /* Transition */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .vz-select:hover {
        border-color: #cbd5e0;
    }

    .vz-select:focus {
        outline: none;
        border-color: var(--color-vz-blue);
    }

    /* Style the dropdown arrow to change color on hover/focus */
    .vz-select:hover {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300348e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    }

    .vz-select:focus {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300348e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    }

    /* Option styling (limited support in most browsers) */
    .vz-select option {
        background-color: white;
        color: #333;
        padding: 0.5rem;
    }

        .vz-select option:hover,
        .vz-select option:focus {
            background-color: var(--color-vz-bg-light);
            color: var(--color-vz-blue);
        }

    /* Disabled state */
    .vz-select:disabled {
        background-color: #f7fafc;
        border-color: #e2e8f0;
        color: #a0aec0;
        cursor: not-allowed;
    }

/* Optional: Custom wrapper for better styling control */
.vz-select-wrapper {
    position: relative;
}

    .vz-select-wrapper::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        pointer-events: none;
        /* Custom arrow using CSS */
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--color-vz-blue-light);
    }


/* Language selector styling */
.language-selector {
    align-content: end;
    gap: 0.5rem;
}

.language-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-vz-blue);
    background-color: white;
    color: var(--color-vz-blue);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

    .language-btn.active {
        background-color: var(--color-vz-blue);
        color: white;
    }

    .language-btn:hover {
        background-color: var(--color-indigo-50);
    }

    .language-btn.active:hover {
        background-color: var(--color-blue-700);
    }

/* Color utilities */
.text-vz-blue {
    color: var(--color-vz-blue);
}

.text-vz-blue-light {
    color: var(--color-vz-blue-light);
}

.text-vz-yellow {
    color: var(--color-vz-yellow);
}

.bg-vz-blue {
    background-color: var(--color-vz-blue);
}

.bg-vz-blue-light {
    background-color: var(--color-vz-blue-light);
}

.bg-vz-yellow {
    background-color: var(--color-vz-yellow);
}

.bg-vz-light {
    background-color: var(--color-indigo-50);
}

.border-vz-blue {
    border-color: var(--color-vz-blue);
}

.border-vz-blue-light {
    border-color: var(--color-vz-blue-light);
}

/* Font utilities */
.font-montserrat {
    font-family: var(--font-montserrat);
}

.font-source-sans {
    font-family: var(--font-source-sans);
}

/* Typography classes based on Vizco's hierarchy */
.text-headline1 {
    font-size: var(--text-headline1);
    line-height: var(--text-headline1--line-height);
    letter-spacing: var(--text-headline1--letter-spacing);
    font-weight: var(--text-headline1--font-weight);
}

.text-headline2 {
    font-size: var(--text-headline2);
    line-height: var(--text-headline2--line-height);
    letter-spacing: var(--text-headline2--letter-spacing);
    font-weight: var(--text-headline2--font-weight);
}

.text-headline3 {
    font-size: var(--text-headline3);
    line-height: var(--text-headline3--line-height);
    letter-spacing: var(--text-headline3--letter-spacing);
    font-weight: var(--text-headline3--font-weight);
}

.text-headline4 {
    font-size: var(--text-headline4);
    line-height: var(--text-headline4--line-height);
    letter-spacing: var(--text-headline4--letter-spacing);
    font-weight: var(--text-headline4--font-weight);
}

.text-headline5 {
    font-size: var(--text-headline5);
    line-height: var(--text-headline5--line-height);
    letter-spacing: var(--text-headline5--letter-spacing);
    font-weight: var(--text-headline5--font-weight);
}

.text-headline6 {
    font-size: var(--text-headline6);
    line-height: var(--text-headline6--line-height);
    letter-spacing: var(--text-headline6--letter-spacing);
    font-weight: var(--text-headline6--font-weight);
}

.text-subtitle1 {
    font-size: var(--text-subtitle1);
    line-height: var(--text-subtitle1--line-height);
    letter-spacing: var(--text-subtitle1--letter-spacing);
    font-weight: var(--text-subtitle1--font-weight);
}

/* Custom Components */
.vz-btn-group {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Primary button - Vizco blue with proper styling */
.vz-btn-primary {
    background-color: var(--color-vz-blue);
    color: white;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    font-weight: 500;
    transition-property: background-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);
    border: none;
    cursor: pointer;
}

    .vz-btn-primary:hover {
        background-color: #00286e; /* Darker shade of Vizco blue */
    }

/* Secondary button */
.vz-btn-secondary {
    background-color: white;
    color: var(--color-vz-blue);
    border: 1px solid var(--color-vz-blue);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    font-weight: 500;
    transition-property: background-color, color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);
    cursor: pointer;
}

    .vz-btn-secondary:hover {
        background-color: #f0f5ff; /* Very light blue */
    }

.vz-btn-reset {
    display: inline-flex;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-vz-blue);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    color: var(--color-vz-blue);
    background-color: white;
    text-decoration: none;
    transition: background-color 0.2s;
}

    .vz-btn-reset:hover {
        background-color: var(--color-indigo-50);
        color: var(--color-vz-blue);
    }

.vz-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-vz-blue);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    color: white;
    background-color: var(--color-vz-blue);
    text-decoration: none;
    transition: all 0.2s;
}

    .vz-btn-submit:hover {
        background-color: var(--color-blue-700);
        color: white;
    }

.vz-btn-icon {
    height: 1rem;
    width: 1rem;
    margin-left: 0.5rem;
}