/* ============================================================
   ABOTRIX APPLICATION EXPERIENCE V23.6
   ============================================================ */

.application-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 116px;
    padding-bottom: 120px;

    background:
        radial-gradient(
            circle at 9% 15%,
            rgba(52, 208, 240, 0.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 77%,
            rgba(72, 110, 241, 0.08),
            transparent 29%
        );
}

.application-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(102, 197, 234, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(102, 197, 234, 0.022) 1px,
            transparent 1px
        );

    background-size: 76px 76px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 8%,
            black 92%,
            transparent
        );
}

.application-introduction {
    max-width: 870px;
}

.application-introduction h2 {
    color: #f4faff;
    text-wrap: balance;
}

.application-introduction p {
    color: #9dbdd2;
}

/* ------------------------------------------------------------
   MAIN LAYOUT
   ------------------------------------------------------------ */

.application-layout {
    align-items: start;
    gap: 25px;
}

.application-form {
    position: relative;
    overflow: hidden;
    padding: 31px;

    border: 1px solid rgba(102, 201, 237, 0.17);
    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 57, 82, 0.97),
            rgba(8, 35, 57, 0.98)
        );

    box-shadow:
        0 34px 90px rgba(0, 6, 23, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.application-form::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76, 220, 248, 0.52),
            transparent
        );
}

/* ------------------------------------------------------------
   COMPLETION BAR
   ------------------------------------------------------------ */

.abotrix-application-completion {
    margin-bottom: 24px;
    padding: 16px 18px;

    border: 1px solid rgba(106, 202, 238, 0.13);
    border-radius: 15px;

    background: rgba(17, 61, 87, 0.56);
}

.abotrix-completion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.abotrix-completion-header span {
    color: #a9c8da;
    font-size: 10px;
    font-weight: 750;
}

.abotrix-completion-header strong {
    color: #54d9f3;
    font-size: 11px;
}

.abotrix-completion-track {
    height: 6px;
    overflow: hidden;

    border-radius: 999px;
    background: rgba(89, 164, 197, 0.13);
}

.abotrix-completion-track i {
    display: block;
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #37c1e6,
            #61e1f3
        );

    box-shadow:
        0 0 18px rgba(55, 208, 239, 0.2);

    transition:
        width 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------
   PROGRESS TRACKER
   ------------------------------------------------------------ */

.application-progress {
    padding: 18px 20px;
    margin-bottom: 31px;

    border: 1px solid rgba(104, 200, 236, 0.13);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 70, 96, 0.58),
            rgba(12, 46, 70, 0.68)
        );
}

.application-progress-item {
    position: relative;
    min-width: 0;
}

.application-progress-item span {
    border-color: rgba(103, 200, 236, 0.2);
    color: #8fb4c9;
    background: rgba(16, 56, 81, 0.78);

    transition:
        color 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease;
}

.application-progress-item strong {
    color: #7fa4ba;

    transition: color 190ms ease;
}

.application-progress-item.active span {
    color: #031925;
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #6be7f7,
            #42c9eb
        );

    box-shadow:
        0 10px 25px rgba(45, 194, 231, 0.22);
}

.application-progress-item.active strong {
    color: #eaf8ff;
}

.application-progress-item.abotrix-completed span {
    color: #042019;
    border-color: rgba(65, 226, 174, 0.32);
    background: #58e0b3;
}

.application-progress > i {
    background:
        linear-gradient(
            90deg,
            rgba(78, 214, 242, 0.15),
            rgba(78, 214, 242, 0.35),
            rgba(78, 214, 242, 0.15)
        );
}

/* ------------------------------------------------------------
   FORM STEP
   ------------------------------------------------------------ */

.application-form-step.active {
    animation:
        abotrixApplicationStepEnter 400ms
        cubic-bezier(0.2, 0.7, 0.2, 1)
        both;
}

@keyframes abotrixApplicationStepEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.application-step-heading {
    margin-bottom: 27px;
}

.application-step-heading > span {
    color: #4cd9f4;
}

.application-step-heading h3 {
    color: #f0f8fd;
    font-size: clamp(25px, 3vw, 34px);
    letter-spacing: -0.04em;
}

.application-step-heading p {
    max-width: 650px;
    color: #96b7cc;
    line-height: 1.65;
}

/* ------------------------------------------------------------
   FORM FIELDS
   ------------------------------------------------------------ */

.application-field {
    position: relative;
}

.application-field > span,
.application-field legend {
    color: #c8deea;
    font-weight: 750;
}

.application-field input,
.application-field select,
.application-field textarea {
    min-height: 51px;

    border: 1px solid rgba(105, 199, 235, 0.16);
    border-radius: 13px;

    color: #e8f6fc;
    background:
        linear-gradient(
            145deg,
            rgba(12, 47, 71, 0.93),
            rgba(10, 40, 63, 0.96)
        );

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

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.application-field input::placeholder,
.application-field textarea::placeholder {
    color: #668ba2;
}

.application-field input:hover,
.application-field select:hover,
.application-field textarea:hover {
    border-color: rgba(83, 216, 245, 0.28);
}

.application-field input:focus,
.application-field select:focus,
.application-field textarea:focus {
    border-color: rgba(72, 220, 247, 0.68);
    outline: none;

    box-shadow:
        0 0 0 4px rgba(49, 202, 236, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.application-field.abotrix-field-valid input,
.application-field.abotrix-field-valid select,
.application-field.abotrix-field-valid textarea {
    padding-right: 43px;
    border-color: rgba(73, 224, 177, 0.36);
}

.application-field.abotrix-field-valid::after {
    content: "✓";
    position: absolute;
    right: 14px;
    bottom: 16px;

    width: 21px;
    height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #06251c;
    background: #59e0b3;

    font-size: 10px;
    font-weight: 900;

    box-shadow:
        0 0 16px rgba(66, 224, 175, 0.13);
}

.application-field.abotrix-field-valid:has(textarea)::after {
    bottom: 20px;
}

.application-field.abotrix-field-invalid input,
.application-field.abotrix-field-invalid select,
.application-field.abotrix-field-invalid textarea {
    border-color: rgba(255, 111, 120, 0.56);
}

.field-error {
    color: #ff939b;
}

/* ------------------------------------------------------------
   OPTION CARDS
   ------------------------------------------------------------ */

.application-form input[type="radio"] + *,
.application-form input[type="checkbox"] + * {
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.application-form label:has(input[type="radio"]),
.application-form label:has(input[type="checkbox"]) {
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.application-form label:has(input[type="radio"]):hover,
.application-form label:has(input[type="checkbox"]):hover {
    transform: translateY(-2px);
}

.application-form label:has(input[type="radio"]:checked),
.application-form label:has(input[type="checkbox"]:checked) {
    border-color: rgba(67, 220, 247, 0.43);

    background:
        linear-gradient(
            145deg,
            rgba(25, 83, 108, 0.69),
            rgba(13, 51, 75, 0.78)
        );

    box-shadow:
        0 13px 30px rgba(0, 7, 22, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.application-form-actions {
    margin-top: 31px;
    padding-top: 22px;

    border-top: 1px solid rgba(106, 200, 236, 0.1);
}

.application-form-actions .button {
    min-height: 49px;
    border-radius: 13px;
}

.application-form-actions .button:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   APPLICATION SIDEBAR
   ------------------------------------------------------------ */

.application-sidebar {
    position: sticky;
    top: 105px;
}

.application-summary-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(100, 201, 237, 0.18);
    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 59, 85, 0.97),
            rgba(8, 36, 58, 0.98)
        );

    box-shadow:
        0 29px 78px rgba(0, 6, 22, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.application-summary-card::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;
    right: -185px;
    top: -185px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(63, 219, 247, 0.18),
            transparent 69%
        );
}

.application-summary-card > * {
    position: relative;
    z-index: 2;
}

.application-summary-header {
    border-bottom-color: rgba(105, 200, 236, 0.11);
}

.application-summary-header span {
    color: #4bd9f4;
}

.application-summary-header strong {
    color: #eef9fe;
}

.application-summary-list > div {
    border-bottom-color: rgba(105, 199, 235, 0.09);
}

.application-summary-list span {
    color: #87aabe;
}

.application-summary-list strong {
    color: #dceef7;
}

.application-summary-modules > span {
    color: #87aabe;
}

.application-summary-modules small,
.application-summary-modules b {
    border-color: rgba(103, 200, 236, 0.13);
    color: #b6d2e1;
    background: rgba(17, 61, 86, 0.58);
}

/* ------------------------------------------------------------
   DYNAMIC SOLUTION PROFILE
   ------------------------------------------------------------ */

.abotrix-solution-profile {
    margin-top: 17px;
    padding-top: 17px;

    border-top: 1px solid rgba(105, 200, 236, 0.1);
}

.abotrix-solution-profile > span {
    display: block;
    margin-bottom: 10px;

    color: #87aabe;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.abotrix-solution-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.abotrix-solution-modules small {
    padding: 7px 9px;

    border: 1px solid rgba(103, 200, 236, 0.13);
    border-radius: 999px;

    color: #b8d5e4;
    background: rgba(18, 63, 88, 0.61);

    font-size: 8px;
    font-weight: 750;
}

.abotrix-project-insights {
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.abotrix-project-insights div {
    padding: 11px;

    border: 1px solid rgba(102, 199, 235, 0.11);
    border-radius: 11px;

    background: rgba(13, 49, 73, 0.53);
}

.abotrix-project-insights span {
    display: block;
    color: #7499af;
    font-size: 8px;
}

.abotrix-project-insights strong {
    display: block;
    margin-top: 4px;

    color: #d8edf7;
    font-size: 10px;
}

/* ------------------------------------------------------------
   CONSULTATION PANEL
   ------------------------------------------------------------ */

.abotrix-consultation-card {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    padding: 20px;

    border: 1px solid rgba(73, 220, 247, 0.2);
    border-radius: 18px;

    background:
        linear-gradient(
            140deg,
            rgba(24, 77, 102, 0.88),
            rgba(9, 40, 63, 0.94)
        );

    box-shadow:
        0 22px 58px rgba(0, 7, 23, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.abotrix-consultation-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -135px;
    top: -145px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65, 220, 247, 0.2),
            transparent 69%
        );
}

.abotrix-consultation-card > * {
    position: relative;
    z-index: 2;
}

.abotrix-consultation-label {
    color: #52dcf5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.abotrix-consultation-card h4 {
    margin: 8px 0 7px;
    color: #edf9fe;
    font-size: 17px;
}

.abotrix-consultation-card p {
    margin: 0;
    color: #9dbed2;
    font-size: 10px;
    line-height: 1.6;
}

.abotrix-consultation-list {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.abotrix-consultation-list span {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #bcd6e4;
    font-size: 9px;
}

.abotrix-consultation-list span::before {
    content: "✓";

    width: 17px;
    height: 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #06231b;
    background: #57dfb1;

    font-size: 8px;
    font-weight: 900;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 1020px) {
    .application-sidebar {
        position: static;
    }
}

@media (max-width: 760px) {
    .application-section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .application-form {
        padding: 24px 20px;
    }

    .application-progress {
        padding: 15px 12px;
    }

    .application-progress-item strong {
        font-size: 9px;
    }
}

@media (max-width: 520px) {
    .application-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .application-progress {
        align-items: flex-start;
    }

    .application-progress-item {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .application-progress > i {
        margin-top: 16px;
    }

    .application-form-actions,
    .application-form-actions-end {
        display: grid;
        grid-template-columns: 1fr;
    }

    .application-form-actions .button {
        width: 100%;
    }

    .abotrix-project-insights {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .application-form-step,
    .application-field input,
    .application-field select,
    .application-field textarea,
    .application-form-actions .button,
    .abotrix-completion-track i {
        animation: none !important;
        transition: none !important;
    }
}