/* ============================================================
   SEN DARAL
   INSCRIPTION VÉTÉRINAIRE — ULTRA PREMIUM
============================================================ */

:root {

    --vet-primary: #0d4f45;
    --vet-primary-dark: #083a34;
    --vet-primary-deep: #062f2b;

    --vet-accent: #19b96b;
    --vet-accent-dark: #119453;

    --vet-gold: #d8a62a;
    --vet-gold-soft: #fff5d9;

    --vet-white: #ffffff;

    --vet-bg: #f5f8f8;
    --vet-surface: #ffffff;

    --vet-text: #172033;
    --vet-text-soft: #68778a;
    --vet-text-muted: #93a0ae;

    --vet-border: #e6ebef;

    --vet-success: #159c62;
    --vet-danger: #d64d5c;

    --vet-shadow-sm:
        0 8px 25px rgba(13, 79, 69, .055);

    --vet-shadow-md:
        0 18px 50px rgba(13, 79, 69, .095);

    --vet-shadow-lg:
        0 30px 90px rgba(8, 58, 52, .14);

    --vet-radius-sm: 12px;
    --vet-radius-md: 18px;
    --vet-radius-lg: 28px;

    --vet-transition:
        .28s cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   PAGE
============================================================ */

.vet-register-page {

    position: relative;

    min-height: 100vh;

    padding:
        54px 0 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(25,185,107,.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(13,79,69,.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbfb 0%,
            #f3f7f7 100%
        );

}


/* ============================================================
   BACKGROUND ORBS
============================================================ */

.vet-register-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

}

.vet-register-orb-one {

    width: 520px;
    height: 520px;

    top: -240px;
    left: -220px;

    background:
        radial-gradient(
            circle,
            rgba(25,185,107,.10),
            rgba(25,185,107,0) 70%
        );

}

.vet-register-orb-two {

    width: 580px;
    height: 580px;

    right: -280px;
    bottom: -280px;

    background:
        radial-gradient(
            circle,
            rgba(13,79,69,.10),
            rgba(13,79,69,0) 70%
        );

}


/* ============================================================
   HEADER
============================================================ */

.vet-register-header {

    position: relative;

    max-width: 900px;

    margin:
        0 auto 44px;

    text-align: center;

}


.vet-register-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(13,79,69,.10);

    border-radius: 999px;

    background:
        rgba(255,255,255,.74);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    color:
        var(--vet-primary);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.1px;

    box-shadow:
        0 8px 22px
        rgba(13,79,69,.045);

}


.vet-register-kicker-icon {

    width: 27px;
    height: 27px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(25,185,107,.10);

    color:
        var(--vet-primary);

    font-size: 11px;

}


.vet-register-header h1 {

    margin:
        19px 0 12px;

    color:
        var(--vet-text);

    font-size:
        clamp(34px, 4vw, 52px);

    font-weight: 900;

    letter-spacing: -1.8px;

    line-height: 1.02;

}


.vet-register-header h1 span {

    display: inline-block;

    color:
        var(--vet-primary);

}


.vet-register-header p {

    max-width: 720px;

    margin:
        0 auto;

    color:
        var(--vet-text-soft);

    font-size: 14px;

    font-weight: 450;

    line-height: 1.75;

}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.vet-register-layout {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(290px, .82fr)
        minmax(0, 1.55fr);

    gap: 26px;

    max-width: 1220px;

    margin: 0 auto;

    align-items: start;

}


/* ============================================================
   INTRO PANEL
============================================================ */

.vet-register-intro {

    position: sticky;

    top: 28px;

    padding: 31px;

    overflow: hidden;

    border-radius:
        var(--vet-radius-lg);

    background:
        linear-gradient(
            145deg,
            #0d5a4f 0%,
            #0a4c43 50%,
            #073a35 100%
        );

    color: #fff;

    box-shadow:
        var(--vet-shadow-lg);

}


.vet-register-intro::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            rgba(255,255,255,0) 70%
        );

}


.vet-register-intro::after {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: -130px;
    bottom: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(25,185,107,.17),
            rgba(25,185,107,0) 70%
        );

}


.vet-register-intro-top {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;

    z-index: 2;

}


.vet-register-intro-icon {

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 20px;

    background:
        rgba(255,255,255,.10);

    backdrop-filter:
        blur(12px);

    font-size: 26px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.10);

}


.vet-register-intro-top span {

    display: inline-block;

    color:
        rgba(255,255,255,.65);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

}


.vet-register-intro h2 {

    position: relative;

    z-index: 2;

    margin:
        24px 0 12px;

    color: #fff;

    font-size: 29px;

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -.8px;

}


.vet-register-intro > p {

    position: relative;

    z-index: 2;

    margin: 0;

    color:
        rgba(255,255,255,.72);

    font-size: 11px;

    line-height: 1.75;

}


/* ============================================================
   BENEFITS
============================================================ */

.vet-register-benefits {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 27px;

}


.vet-register-benefit {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding:
        13px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background:
        rgba(255,255,255,.06);

    transition:
        transform var(--vet-transition),
        background-color var(--vet-transition),
        border-color var(--vet-transition);

}


.vet-register-benefit:hover {

    transform:
        translateX(3px);

    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,255,255,.13);

}


.vet-register-benefit > span {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color:
        #9be7bd;

    background:
        rgba(25,185,107,.13);

    font-size: 14px;

}


.vet-register-benefit div {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.vet-register-benefit strong {

    color: #fff;

    font-size: 10px;

    font-weight: 800;

}


.vet-register-benefit small {

    margin-top: 3px;

    color:
        rgba(255,255,255,.59);

    font-size: 9px;

    line-height: 1.45;

}


/* ============================================================
   VERIFICATION
============================================================ */

.vet-register-verification {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 24px;

    padding: 14px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 16px;

    background:
        rgba(255,255,255,.08);

}


.vet-register-verification-icon {

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(25,185,107,.14);

    color:
        #96e8bb;

    font-size: 14px;

}


.vet-register-verification div:last-child {

    min-width: 0;

}


.vet-register-verification strong {

    display: block;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

}


.vet-register-verification p {

    margin:
        4px 0 0;

    color:
        rgba(255,255,255,.57);

    font-size: 8.5px;

    line-height: 1.5;

}


/* ============================================================
   FORM CARD
============================================================ */

.vet-register-card {

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(13,79,69,.07);

    border-radius:
        var(--vet-radius-lg);

    background:
        rgba(255,255,255,.96);

    box-shadow:
        var(--vet-shadow-md);

}


.vet-register-card::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--vet-primary),
            var(--vet-accent)
        );

}


/* ============================================================
   STEPPER
============================================================ */

.vet-register-stepper {

    display: flex;

    align-items: center;

    padding:
        28px 30px 24px;

    border-bottom:
        1px solid
        #edf1f2;

}


.vet-register-step {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

}


.vet-register-step > span {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        #dfe7e7;

    border-radius: 11px;

    background:
        #f8faf9;

    color:
        #8d9b9b;

    font-size: 8px;

    font-weight: 850;

    transition:
        all var(--vet-transition);

}


.vet-register-step div {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.vet-register-step strong {

    color:
        #79878b;

    font-size: 9px;

    font-weight: 800;

}


.vet-register-step small {

    margin-top: 2px;

    color:
        #a2adb1;

    font-size: 7.5px;

}


.vet-register-step.active > span {

    border-color:
        transparent;

    background:
        var(--vet-primary);

    color: #fff;

    box-shadow:
        0 7px 18px
        rgba(13,79,69,.18);

}


.vet-register-step.active strong {

    color:
        var(--vet-primary);

}


.vet-register-step.completed > span {

    border-color:
        var(--vet-accent);

    background:
        var(--vet-accent);

    color: #fff;

}


.vet-register-step.completed strong {

    color:
        var(--vet-primary);

}


.vet-register-step-line {

    height: 1px;

    flex: 1;

    min-width: 20px;

    margin:
        0 13px;

    background:
        #e9eeee;

}


/* ============================================================
   FORM
============================================================ */

.vet-register-form {

    padding:
        32px 30px 28px;

}


.vet-register-panel {

    display: none;

}


.vet-register-panel.active {

    display: block;

    animation:
        vetPanelIn .38s cubic-bezier(.22,.61,.36,1);

}


@keyframes vetPanelIn {

    from {

        opacity: 0;

        transform:
            translateY(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   PANEL HEADER
============================================================ */

.vet-register-panel-header {

    margin-bottom: 27px;

}


.vet-register-panel-header > span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--vet-accent-dark);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1px;

}


.vet-register-panel-header h2 {

    margin: 0 0 7px;

    color:
        var(--vet-text);

    font-size: 24px;

    font-weight: 900;

    letter-spacing: -.55px;

}


.vet-register-panel-header p {

    max-width: 650px;

    margin: 0;

    color:
        var(--vet-text-soft);

    font-size: 10px;

    line-height: 1.65;

}


/* ============================================================
   FORM LABEL
============================================================ */

.vet-form-label {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 8px;

    color:
        #2d3949;

    font-size: 9px;

    font-weight: 800;

}


.vet-form-label span {

    color:
        var(--vet-danger);

}


.vet-form-label small {

    margin-left: auto;

    color:
        #9aa7b2;

    font-size: 7.5px;

    font-weight: 600;

}


/* ============================================================
   INPUTS
============================================================ */

.vet-form-control {

    min-height: 46px;

    padding:
        11px 13px;

    border:
        1px solid
        #dde5e6;

    border-radius:
        13px;

    background:
        #fbfcfc;

    color:
        var(--vet-text);

    font-size: 10px;

    box-shadow: none;

    transition:
        border-color var(--vet-transition),
        background-color var(--vet-transition),
        box-shadow var(--vet-transition),
        transform var(--vet-transition);

}


.vet-form-control::placeholder {

    color:
        #adb7bf;

}


.vet-form-control:hover {

    border-color:
        #cbd8d9;

}


.vet-form-control:focus {

    border-color:
        rgba(13,79,69,.46);

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(13,79,69,.07);

    outline: none;

}


/* ============================================================
   SELECT
============================================================ */

select.vet-form-control,
.vet-register-card select.form-select {

    min-height: 46px;

    padding-right: 34px;

    cursor: pointer;

}


/* ============================================================
   TEXTAREA
============================================================ */

.vet-textarea {

    min-height: 130px;

    resize: vertical;

    line-height: 1.6;

}


/* ============================================================
   PASSWORD
============================================================ */

.vet-password-field {

    position: relative;

}


.vet-password-field
.vet-form-control {

    padding-right: 45px;

}


.vet-password-toggle {

    position: absolute;

    top: 50%;
    right: 8px;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 9px;

    background:
        transparent;

    color:
        #91a0a5;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}


.vet-password-toggle:hover {

    background:
        rgba(13,79,69,.06);

    color:
        var(--vet-primary);

}


/* ============================================================
   INPUT SUFFIX
============================================================ */

.vet-input-suffix {

    position: relative;

}


.vet-input-suffix
.vet-form-control {

    padding-right: 70px;

}


.vet-input-suffix > span {

    position: absolute;

    top: 50%;
    right: 14px;

    transform:
        translateY(-50%);

    color:
        #8c999f;

    font-size: 8px;

    font-weight: 750;

}


/* ============================================================
   SERVICES
============================================================ */

.vet-options-title {

    margin-bottom: 11px;

    color:
        var(--vet-text);

    font-size: 10px;

    font-weight: 850;

}


.vet-options-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;

}


.vet-option-card {

    position: relative;

    min-height: 120px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;

    padding: 13px;

    border:
        1px solid
        #e3e9ea;

    border-radius: 15px;

    background:
        #fbfcfc;

    cursor: pointer;

    transition:
        border-color var(--vet-transition),
        background-color var(--vet-transition),
        transform var(--vet-transition),
        box-shadow var(--vet-transition);

}


.vet-option-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(13,79,69,.19);

    box-shadow:
        var(--vet-shadow-sm);

}


.vet-option-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.vet-option-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(13,79,69,.07);

    color:
        var(--vet-primary);

    font-size: 13px;

}


.vet-option-card > span:nth-child(3) {

    display: flex;

    flex-direction: column;

}


.vet-option-card strong {

    color:
        var(--vet-text);

    font-size: 9px;

    font-weight: 800;

}


.vet-option-card small {

    margin-top: 3px;

    color:
        var(--vet-text-muted);

    font-size: 7.5px;

    line-height: 1.45;

}


.vet-option-check {

    position: absolute;

    top: 12px;
    right: 12px;

    opacity: 0;

    color:
        var(--vet-accent);

    font-size: 13px;

    transform:
        scale(.75);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.vet-option-card:has(input:checked) {

    border-color:
        rgba(13,79,69,.28);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f1f8f5 100%
        );

    box-shadow:
        0 10px 26px
        rgba(13,79,69,.07);

}


.vet-option-card:has(input:checked)
.vet-option-icon {

    background:
        rgba(25,185,107,.12);

    color:
        var(--vet-primary);

}


.vet-option-card:has(input:checked)
.vet-option-check {

    opacity: 1;

    transform:
        scale(1);

}


/* ============================================================
   FORM SECTIONS
============================================================ */

.vet-form-section {

    margin-top: 29px;

    padding-top: 26px;

    border-top:
        1px solid
        #edf1f2;

}


.vet-section-heading {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 15px;

}


.vet-section-heading-icon {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(13,79,69,.065);

    color:
        var(--vet-primary);

    font-size: 14px;

}


.vet-section-heading div:last-child {

    display: flex;

    flex-direction: column;

}


.vet-section-heading strong {

    color:
        var(--vet-text);

    font-size: 10px;

    font-weight: 850;

}


.vet-section-heading span {

    margin-top: 3px;

    color:
        var(--vet-text-muted);

    font-size: 8px;

}


/* ============================================================
   SPECIALTIES
============================================================ */

.vet-specialties-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

}


.vet-specialty-card {

    position: relative;

    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 14px;

    border:
        1px solid
        #e3e9ea;

    border-radius: 15px;

    background:
        #fbfcfc;

    cursor: pointer;

    transition:
        border-color var(--vet-transition),
        background-color var(--vet-transition),
        transform var(--vet-transition),
        box-shadow var(--vet-transition);

}


.vet-specialty-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(13,79,69,.18);

    box-shadow:
        var(--vet-shadow-sm);

}


.vet-specialty-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.vet-specialty-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        rgba(13,79,69,.06);

    color:
        var(--vet-primary);

    font-size: 14px;

}


.vet-specialty-card img {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    object-fit: cover;

    border-radius: 12px;

}


.vet-specialty-content {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding-right: 18px;

}


.vet-specialty-content strong {

    color:
        var(--vet-text);

    font-size: 9px;

    font-weight: 800;

}


.vet-specialty-content small {

    margin-top: 3px;

    color:
        var(--vet-text-muted);

    font-size: 7px;

    line-height: 1.45;

}


.vet-specialty-check {

    position: absolute;

    top: 11px;
    right: 11px;

    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        #d6dfe0;

    border-radius: 6px;

    background: #fff;

    color: #fff;

    font-size: 8px;

    transition:
        all .2s ease;

}


.vet-specialty-card:has(input:checked) {

    border-color:
        rgba(13,79,69,.27);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8f5
        );

    box-shadow:
        0 10px 28px
        rgba(13,79,69,.075);

}


.vet-specialty-card:has(input:checked)
.vet-specialty-check {

    border-color:
        var(--vet-primary);

    background:
        var(--vet-primary);

}


/* ============================================================
   SERVICE AREA
============================================================ */

.vet-service-area {

    padding: 15px;

    border:
        1px solid
        #e7ecec;

    border-radius: 16px;

    background:
        #fbfcfc;

}


.vet-area-note {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin-top: 9px;

    color:
        #8b989e;

    font-size: 7.5px;

    line-height: 1.55;

}


.vet-area-note i {

    margin-top: 1px;

    color:
        var(--vet-primary);

}


/* ============================================================
   FINAL CONFIRMATION
============================================================ */

.vet-final-confirmation {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 27px;

    padding: 15px;

    border:
        1px solid
        rgba(25,156,98,.15);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #f4fbf7,
            #eef8f4
        );

}


.vet-final-confirmation-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(25,156,98,.10);

    color:
        var(--vet-success);

    font-size: 15px;

}


.vet-final-confirmation strong {

    display: block;

    color:
        #194f3f;

    font-size: 9.5px;

    font-weight: 850;

}


.vet-final-confirmation p {

    margin:
        4px 0 0;

    color:
        #739087;

    font-size: 8px;

    line-height: 1.55;

}


/* ============================================================
   NAVIGATION
============================================================ */

.vet-register-navigation {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 30px;

}


.vet-next-button,
.vet-submit-button,
.vet-back-button {

    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;

    text-decoration: none;

    transition:
        transform var(--vet-transition),
        box-shadow var(--vet-transition),
        background-color var(--vet-transition),
        border-color var(--vet-transition),
        color var(--vet-transition);

}


.vet-next-button,
.vet-submit-button {

    margin-left: auto;

    border:
        1px solid
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--vet-primary),
            #0b6154
        );

    color: #fff;

    box-shadow:
        0 10px 25px
        rgba(13,79,69,.17);

}


.vet-next-button:hover,
.vet-submit-button:hover {

    transform:
        translateY(-2px);

    color: #fff;

    box-shadow:
        0 16px 34px
        rgba(13,79,69,.23);

}


.vet-back-button {

    border:
        1px solid
        #e1e7e8;

    background:
        #fff;

    color:
        #65747b;

}


.vet-back-button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(13,79,69,.18);

    background:
        #f7faf9;

    color:
        var(--vet-primary);

}


/* ============================================================
   CARD FOOTER
============================================================ */

.vet-register-card-footer {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 54px;

    padding:
        14px 24px;

    border-top:
        1px solid
        #edf1f2;

    background:
        #fbfcfc;

    color:
        #97a3a9;

    font-size: 7.5px;

    text-align: center;

}


.vet-register-card-footer i {

    color:
        var(--vet-primary);

}


/* ============================================================
   LOGIN
============================================================ */

.vet-register-login {

    position: relative;

    max-width: 1220px;

    margin:
        25px auto 0;

    text-align: center;

    color:
        #8b979d;

    font-size: 9px;

}


.vet-register-login a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-left: 4px;

    color:
        var(--vet-primary);

    font-weight: 800;

    text-decoration: none;

    transition:
        color .2s ease;

}


.vet-register-login a:hover {

    color:
        var(--vet-accent-dark);

}


/* ============================================================
   VALIDATION BOOTSTRAP
============================================================ */

.vet-register-card
.is-invalid {

    border-color:
        rgba(214,77,92,.55) !important;

    box-shadow:
        0 0 0 4px
        rgba(214,77,92,.06) !important;

}


.vet-register-card
.is-valid {

    border-color:
        rgba(21,156,98,.45) !important;

}


.vet-register-card
.invalid-feedback {

    margin-top: 5px;

    color:
        var(--vet-danger);

    font-size: 7.5px;

}


/* ============================================================
   HOVER IMAGE / FOCUS
============================================================ */

.vet-register-card button:focus-visible,
.vet-register-card a:focus-visible,
.vet-register-card input:focus-visible,
.vet-register-card select:focus-visible,
.vet-register-card textarea:focus-visible {

    outline:
        3px solid
        rgba(13,79,69,.13);

    outline-offset:
        2px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1099.98px) {

    .vet-register-layout {

        grid-template-columns:
            1fr;

        max-width: 900px;

    }

    .vet-register-intro {

        position: relative;

        top: auto;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .vet-register-page {

        padding:
            32px 0 48px;

    }

    .vet-register-header {

        margin-bottom: 30px;

    }

    .vet-register-header h1 {

        font-size: 34px;

        letter-spacing: -1.2px;

    }

    .vet-register-header p {

        max-width: 92%;

        font-size: 12px;

        line-height: 1.65;

    }

    .vet-register-intro {

        padding: 24px;

        border-radius: 22px;

    }

    .vet-register-intro h2 {

        font-size: 24px;

    }

    .vet-register-card {

        border-radius: 22px;

    }

    .vet-register-stepper {

        padding:
            19px 18px;

        overflow-x: auto;

        scrollbar-width: none;

    }

    .vet-register-stepper::-webkit-scrollbar {

        display: none;

    }

    .vet-register-step {

        flex: 0 0 auto;

    }

    .vet-register-step div {

        display: none;

    }

    .vet-register-step-line {

        min-width: 24px;

        margin:
            0 9px;

    }

    .vet-register-form {

        padding:
            25px 18px 22px;

    }

    .vet-register-panel-header h2 {

        font-size: 21px;

    }

    .vet-options-grid {

        grid-template-columns: 1fr;

    }

    .vet-specialties-grid {

        grid-template-columns: 1fr;

    }

    .vet-register-navigation {

        flex-direction: column-reverse;

        align-items: stretch;

    }

    .vet-next-button,
    .vet-submit-button,
    .vet-back-button {

        width: 100%;

        margin-left: 0;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vet-register-header h1 {

        font-size: 29px;

    }

    .vet-register-kicker {

        font-size: 8px;

    }

    .vet-register-intro-top span {

        font-size: 7px;

    }

    .vet-register-benefit {

        padding: 11px;

    }

    .vet-register-card-footer {

        padding:
            13px 16px;

        line-height: 1.45;

    }

}


/* ============================================================
   VALIDATION INLINE
============================================================ */

.vet-field-error,
.vet-validation-message {

    margin-top: 6px;

    color:
        var(--vet-danger);

    font-size: 8px;

    font-weight: 600;

    line-height: 1.45;

}


.vet-validation-message {

    width: 100%;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(214,77,92,.12);

    border-radius: 10px;

    background:
        rgba(214,77,92,.045);

}


/* ============================================================
   CHAMP INVALIDE
============================================================ */

.vet-form-control.is-invalid {

    border-color:
        rgba(214,77,92,.55) !important;

    background:
        rgba(214,77,92,.02);

    box-shadow:
        0 0 0 4px
        rgba(214,77,92,.055) !important;

}


/* ============================================================
   STEP COMPLETED
============================================================ */

.vet-register-step.completed > span {

    position: relative;

}


.vet-register-step.completed > span::after {

    content:
        "\f26b";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family:
        "bootstrap-icons";

    font-size: 10px;

}


.vet-register-step.completed > span {

    font-size: 0;

}


/* ============================================================
   SUBMIT LOADING
============================================================ */

.vet-submit-button.is-loading {

    cursor:
        wait;

    opacity:
        .78;

}


.vet-submit-button:disabled {

    cursor:
        not-allowed;

}


.vet-submit-button
.spinner-border {

    width: 13px;

    height: 13px;

    border-width: 2px;

}


/* ============================================================
   ZONE D'INTERVENTION
============================================================ */

.vet-service-area {

    position: relative;

}


.vet-service-area
.vet-form-control {

    width: 100%;

}


/* ============================================================
   SPECIALTÉS — MESSAGE VIDE
============================================================ */

.vet-specialties-grid
.vet-validation-message {

    grid-column:
        1 / -1;

}


/* ============================================================
   DISABLED SELECTS
============================================================ */

.vet-register-card
select:disabled {

    opacity: .60;

    cursor:
        not-allowed;

    background-color:
        #f4f6f6;

}


/* ============================================================
   FOCUS ACCESSIBLE
============================================================ */

.vet-register-card
button:focus-visible,
.vet-register-card
input:focus-visible,
.vet-register-card
select:focus-visible,
.vet-register-card
textarea:focus-visible {

    outline:
        3px solid
        rgba(13,79,69,.12);

    outline-offset:
        2px;

}


/* ============================================================
   PETITE AMÉLIORATION MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .vet-field-error,
    .vet-validation-message {

        font-size: 8px;

    }

}

/* ============================================================
   DOCUMENTS VÉTÉRINAIRES
============================================================ */

.vet-document-intro {

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    margin-bottom:22px;

    border:
        1px solid
        rgba(13,79,69,.10);

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(13,79,69,.045),
            rgba(13,79,69,.015)
        );

}


.vet-document-intro-icon {

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:
        rgba(13,79,69,.08);

    color:
        var(--vet-primary);

    font-size:17px;

}


.vet-document-intro div:last-child {

    min-width:0;

}


.vet-document-intro strong {

    display:block;

    color:
        var(--vet-text);

    font-size:10px;

    font-weight:800;

}


.vet-document-intro p {

    margin:4px 0 0;

    color:
        var(--vet-text-muted);

    font-size:8px;

    line-height:1.5;

}


/* ============================================================
   GRILLE
============================================================ */

.vet-document-grid {

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;

}


/* ============================================================
   CARTE DOCUMENT
============================================================ */

.vet-document-card {

    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr)
        auto;

    align-items:center;

    gap:12px;

    padding:15px;

    min-width:0;

    border:
        1px solid
        #e4ebea;

    border-radius:18px;

    background:
        #fbfcfc;

    transition:
        .28s ease;

}


.vet-document-card:hover {

    border-color:
        rgba(13,79,69,.20);

    background:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(8,57,50,.07);

}


.vet-document-card.has-error {

    border-color:
        rgba(214,77,92,.35);

    background:
        rgba(214,77,92,.018);

}


/* ============================================================
   ICÔNE
============================================================ */

.vet-document-icon {

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:
        rgba(13,79,69,.075);

    color:
        var(--vet-primary);

    font-size:16px;

}


/* ============================================================
   CONTENU
============================================================ */

.vet-document-content {

    min-width:0;

    display:flex;

    flex-direction:column;

}


.vet-document-content strong {

    color:
        var(--vet-text);

    font-size:9px;

    font-weight:800;

    line-height:1.3;

}


.vet-document-content small {

    margin-top:3px;

    color:
        var(--vet-text-muted);

    font-size:7.5px;

    line-height:1.45;

}


/* ============================================================
   BOUTON UPLOAD
============================================================ */

.vet-document-upload {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-height:34px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(13,79,69,.14);

    border-radius:10px;

    background:
        #ffffff;

    color:
        var(--vet-primary);

    font-size:8px;

    font-weight:800;

    cursor:pointer;

    white-space:nowrap;

    transition:
        .22s ease;

}


.vet-document-upload:hover {

    background:
        rgba(13,79,69,.05);

    border-color:
        rgba(13,79,69,.24);

    transform:
        translateY(-1px);

}


.vet-document-upload i {

    font-size:11px;

}


.vet-document-upload input {

    display:none;

}


/* ============================================================
   FICHIER SÉLECTIONNÉ
============================================================ */

.vet-document-file {

    grid-column:
        1 / -1;

    display:none;

    align-items:center;

    gap:8px;

    min-width:0;

    padding:
        9px 11px;

    border-radius:11px;

    background:
        #f0f7f4;

    color:
        var(--vet-primary);

}


.vet-document-file.is-visible {

    display:flex;

}


.vet-document-file > i {

    flex:0 0 auto;

    font-size:14px;

}


.vet-document-file span {

    min-width:0;

    display:flex;

    flex-direction:column;

}


.vet-document-file strong {

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:
        var(--vet-text);

    font-size:7.5px;

    font-weight:750;

}


.vet-document-file small {

    margin-top:2px;

    color:
        var(--vet-text-muted);

    font-size:7px;

}


/* ============================================================
   ERREUR DOCUMENT
============================================================ */

.vet-document-error {

    grid-column:
        1 / -1;

    min-height:0;

    color:
        var(--vet-danger);

    font-size:7.5px;

    font-weight:650;

    line-height:1.4;

}


.vet-document-card.has-error
.vet-document-upload {

    border-color:
        rgba(214,77,92,.35);

    color:
        var(--vet-danger);

}


/* ============================================================
   SPINNER BOUTON
============================================================ */

.vet-submit-button.is-loading {

    cursor:
        wait;

    opacity:
        .78;

}


.vet-submit-button:disabled {

    cursor:
        not-allowed;

}


.vet-submit-button
.spinner-border {

    width:13px;

    height:13px;

    border-width:2px;

}


/* ============================================================
   ÉTAPE 4 — RESPONSIVE
============================================================ */

@media (
    max-width: 767.98px
) {

    .vet-document-grid {

        grid-template-columns:
            1fr;

    }


    .vet-document-card {

        grid-template-columns:
            auto minmax(0,1fr);

    }


    .vet-document-upload {

        grid-column:
            1 / -1;

        width:100%;

    }


    .vet-document-intro {

        align-items:flex-start;

    }

}


@media (
    max-width: 480px
) {

    .vet-document-card {

        padding:13px;

    }


    .vet-document-icon {

        width:38px;

        height:38px;

        flex-basis:38px;

    }

}