@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/* Root variables for spacing & fluid typography */
:root {
    --sp-3xs: 0.25rem;
    --sp-2xs: 0.375rem;
    --sp-xs: 0.5rem;
    --sp-sm: 0.75rem;
    --sp-md: 1rem;
    --sp-lg: 1.25rem;
    --sp-xl: 1.5rem;
    --sp-2xl: 2rem;
    --fs-small: clamp(0.8rem, 2vw + 0.4rem, 0.95rem);
    --fs-base: clamp(0.95rem, 2.5vw + 0.45rem, 1.1rem);
    --fs-medium: clamp(1.1rem, 3vw + 0.5rem, 1.25rem);
    --fs-large: clamp(1.25rem, 3.5vw + 0.6rem, 1.5rem);
    --fs-xlarge: clamp(1.5rem, 4vw + 0.7rem, 2rem);
    --fs-xxlarge: clamp(1.875rem, 5vw + 0.8rem, 2.5rem);
    --radius-sm: 0.3125rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
}

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wizard-container {
    max-width: 84.75rem; /* 1356px / 16 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xl);
    padding: var(--sp-xl) 0;
}

.form-content {
    flex: 1;
    min-width: 0;
}

.order-summary {
    flex: 1;
    position: sticky;
    top: var(--sp-sm);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    padding: var(--sp-sm);
    min-width: 18.75rem; /* 300px */
}

.order-summary-mobile {
    order: -1;
    margin-bottom: var(--sp-xl);
    display: none;
}

.wizard-header {
    text-align: center;
    margin-bottom: var(--sp-xl);
}

    .wizard-header h1 {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        color: #343a40;
    }

    .wizard-header p {
        font-size: var(--fs-base);
        color: #6c757d;
    }

.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    margin-bottom: var(--sp-xl);
}

.card-header {
    background-color: #007bff;
    color: white;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-large);
    font-weight: bold;
    text-align: center;
}

.card-body {
    padding: var(--sp-md);
}

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid #ced4da;
    transition: border-color 0.3s;
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-base);
}

    .form-control:focus, .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0.3125rem rgba(0, 123, 255, 0.3);
        outline: none;
    }

.btn-primary {
    background-color: #007bff;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--sp-sm) var(--sp-xl);
    transition: background-color 0.3s;
    font-weight: 500;
    font-size: var(--fs-base);
}

    .btn-primary:hover {
        background-color: #0056b3;
    }

.btn-secondary {
    background-color: #6c757d;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--sp-sm) var(--sp-xl);
    transition: background-color 0.3s;
}

    .btn-secondary:hover {
        background-color: #5a6268;
    }

.btn-danger {
    border-radius: var(--radius-sm);
}

.form-check-input {
    cursor: pointer;
}

.alert {
    border-radius: var(--radius-sm);
}

.manager-card {
    background-color: #ffffff;
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-md);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}


.nav-buttons {
    display: flex;
    gap: var(--sp-xs);
    max-width: 84.75rem;
    margin: var(--sp-md) auto;
    flex-wrap: wrap;
}

.line-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--sp-xs);
    font-size: clamp(0.9rem, 2.5vw, 0.95rem);
}

.total {
    font-weight: bold;
    border-top: 1px solid #dee2e6;
    padding-top: var(--sp-sm);
    margin-top: var(--sp-sm);
    display: flex;
    justify-content: space-between;
    font-size: clamp(1rem, 3vw, 1.1rem);
}

.cart-message {
    color: #adb5bd;
    display: flex;
    font-size: var(--fs-small);
    font-style: italic;
}

.cart-divider {
    border-bottom: 1px solid #dee2e6;
    color: #adb5bd;
    margin-top: var(--sp-2xs);
    margin-bottom: var(--sp-sm);
    display: flex;
}
/* Custom validation styles */
.form-control.is-pending,
.form-select.is-pending {
    border-color: #0d6efd;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d6efd'%3e%3ccircle cx='8' cy='8' r='7' stroke-width='1.5'/%3e%3cline x1='8' y1='4.5' x2='8' y2='9.5' stroke-width='1.5' stroke-linecap='round'/%3e%3ccircle cx='8' cy='12' r='1' fill='%230d6efd' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    box-shadow: inset 0 0 0 .5px #0d6efd;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: #86D19D;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 5.06c-.18-.18-.18-.47 0-.65l.71-.71c.18-.18.47-.18.65 0L3 4.94l3.06-3.06c.18-.18.47-.18.65 0l.71.71c.18.18.18.47 0 .65L3.65 6.73c-.18.18-.47.18-.65 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    box-shadow: inset 0 0 0 .5px #198754;
}

.form-select.is-valid {
    background-size: 1.075em !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    box-shadow: inset 0 0 0 1px #dc3545;
}

.form-control.is-pending:focus,
.form-select.is-pending:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, .25);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, .25);
}
/* Registered Agent Selection (FIS) */
.fis-ra-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fis-ra-option {
    flex: 1;
    min-width: 17.5rem;
    border: 1.5px solid #dee2e6;
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #ffffff;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

    .fis-ra-option input {
        display: none;
    }

    .fis-ra-option:hover {
        border-color: #cbd5e1;
        box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05);
    }

    .fis-ra-option:active {
        transform: translateY(0.0625rem);
    }

.fis-ra-yes.thin {
    padding: var(--sp-3xs) var(--sp-sm);
}

.fis-ra-label {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-weight: 600;
    cursor: pointer;
    color: #2f3439;
}

.fis-ra-yes.active {
    border-color: #86d19b;
    background-color: #f3fbf6;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.08) inset;
}

.fis-ra-no.active {
    border-color: #adb5bd;
    background-color: #f8f9fa;
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.08) inset;
}

.fis-ra-form {
    margin-top: var(--sp-sm);
}

.fis-ra-check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 1.5px solid #cfd6de;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
    background-color: #fff;
    flex-shrink: 0;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

    .fis-ra-check::after {
        content: "✓";
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 120ms ease, transform 120ms ease;
    }

.fis-ra-yes.active .fis-ra-check {
    background-color: #28a745;
    border-color: #28a745;
}

    .fis-ra-yes.active .fis-ra-check::after {
        opacity: 1;
        transform: scale(1);
    }

.fis-ra-no.active .fis-ra-check {
    background-color: #6c757d;
    border-color: #6c757d;
}

    .fis-ra-no.active .fis-ra-check::after {
        opacity: 1;
        transform: scale(1);
    }

.fis-ra-option:disabled,
.fis-ra-option.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(20%);
    box-shadow: none;
}

    .fis-ra-option:disabled:hover {
        box-shadow: none;
    }

    .fis-ra-option:disabled.active {
        opacity: 0.6;
    }

    .fis-ra-option:disabled .fis-ra-check {
        opacity: 0.7;
    }

@keyframes cartSlideDown {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }

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

.section-divider {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    margin: var(--sp-md) 0;
}
/* Additional non-overlapping rules from site.css */
h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.content {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: var(--sp-sm) var(--sp-md);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: var(--sp-sm);
        top: var(--sp-xs);
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,...) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

#header_wrap_notaries {
    margin-bottom: var(--sp-sm);
    border-top: 3px solid #3187dd;
    background: #fff;
    border-bottom: 1px solid #ccc;
    /*overflow: hidden;*/
}

#header_wrap_noa {
    margin-bottom: var(--sp-sm);
    background-color: #3970B4;
}

#header_wrap_fns {
    margin-bottom: var(--sp-sm);
    border-top: 3px solid #526385;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

.remove-icon {
    margin-left: var(--sp-sm);
    padding: var(--sp-3xs) var(--sp-2xs);
    border: 2px solid red;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.form-group {
    margin-top: var(--sp-md);
}
/* Collapsible header */
.collapsible-header {
    background-color: #CFE5FC;
    color: #000;
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-2xs);
}

    .collapsible-header:hover {
        background-color: #B0D3F9;
    }

    .collapsible-header h5 {
        margin: 0;
        font-weight: 600;
    }

    .collapsible-header i {
        transition: transform 0.2s ease;
    }

    .collapsible-header[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

.collapse .card-body {
    border: 1px solid #A3C4F3;
    border-radius: var(--radius-sm);
}

.roboto-slab {
    font-family: 'Roboto Slab', serif;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.shopping-cart-container {
    padding: var(--sp-sm) !important;
    border-radius: var(--radius-sm);
    border: 1px solid #ccc;
}

.header {
    display: flex;
    align-items: center;
}

.logo-text-container {
    display: flex;
    align-items: center;
}

.text-container {
    margin-left: var(--sp-sm);
}

.header-separator {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin-top: var(--sp-sm);
    margin-bottom: 0;
}

.help-icon {
    cursor: pointer;
}

.mud-input-root {
    border-radius: 0.375rem;
}

.mud-input-control {
    background-color: #fff;
}

/* Florida Incorporation Service Header */
.fis-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #004e91;
    color: white;
    padding: 0rem 0;
    border-bottom: 1px solid #003366;
    margin-bottom: 0 !important;
}

    .fis-header .container-fluid.but-fixed {
        max-width: 84.75rem;
        padding-left: var(--sp-md);
        padding-right: var(--sp-md);
        margin: 0 auto;
    }

    .fis-header .logo img {
        max-height: 4.5rem;
        width: auto;
    }

    .fis-header #support {
        font-size: clamp(0.9rem, 2.5vw, 0.95rem);
    }

    .fis-header .phone {
        font-weight: 500;
    }

    .fis-header a {
        color: white;
        text-decoration: none;
    }

        .fis-header a:hover {
            text-decoration: underline;
        }

    .fis-header .livechat {
        font-weight: 500;
    }
     
.fis-nav {
    max-width: 84.75rem;
    margin: 1.875rem auto var(--sp-sm) auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-xl);
}

.fis-nav-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-self: flex-start;
}

.fis-nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-xs);
}

.fis-btn-back {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: clamp(0.9rem, 2.5vw, 0.9375rem);
    font-weight: 500;
    cursor: pointer;
}

    .fis-btn-back:hover {
        color: #343a40;
    }

.fis-btn-next {
    background-color: #28a745;
    border: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    padding: var(--sp-sm) 1.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    min-width: 10rem;
}

    .fis-btn-next:hover {
        background-color: #218838;
    }

.fis-btn-save {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}

    .fis-btn-save:hover {
        color: #343a40;
    }

    .fis-btn-back:disabled,
    .fis-btn-next:disabled,
    .fis-btn-save:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.fis-section-title {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    margin-bottom: var(--sp-sm);
}

.fis-section-desc {
    color: #6c757d;
    max-width: 56.25rem;
    margin-bottom: 1.5625rem;
}

.app-loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.85);
}

.app-loading-content {
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.app-spinner {
    width: 7.5rem;
    height: 7.5rem;
    border: 0.625rem solid rgba(0, 0, 0, 0.1);
    border-top: 0.625rem solid #28a745;
    border-radius: 50%;
    animation: app-spin 1s linear infinite;
}

.app-loading-text {
    font-size: var(--fs-medium);
    font-weight: 600;
    color: #333;
    letter-spacing: 0.03125rem;
}

@keyframes app-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.order-summary-content {
    position: relative;
}

    .order-summary-content.is-updating {
        opacity: 0.55;
    }

.order-summary-centered-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xs);
    z-index: 5;
    pointer-events: none;
    text-align: center;
}

.order-summary-spinner-lg {
    width: 3rem;
    height: 3rem;
    border: 0.375rem solid rgba(0, 0, 0, 0.1);
    border-top: 0.375rem solid #28a745;
    border-radius: 50%;
    animation: app-spin 1s linear infinite;
}

.order-summary-updating-text {
    font-size: clamp(0.9rem, 2.5vw, 0.9375rem);
    font-weight: 600;
    color: #6c757d;
    letter-spacing: 0.01875rem;
}

.fis-dev-steps {
    position: sticky;
    top: 4.5rem;
    z-index: 800;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
}
 
.step-list {
    list-style: none;
    padding: .4rem 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 84.75rem;
    margin: .3rem auto;
    flex-wrap: nowrap;
    /*overflow-x: auto;*/
    gap: var(--sp-xs);
    /*-webkit-overflow-scrolling: touch;*/
    /*scrollbar-width: none;*/
}

/*    .step-list::-webkit-scrollbar {
        display: none;
    }*/

.step-item {
    flex: 1;
    text-align: center;
    min-width: 3.75rem;
}

.step-bubble {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    font-size: var(--fs-small);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: var(--sp-xs);
}

    .step-bubble.completed {
        background-color: #28a745;
    }

    .step-bubble.current {
        background-color: #007bff;
        transform: scale(1.1);
    }

    .step-bubble:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }

.step-title {
    display: none;
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    color: #343a40;
}


.fis-tab-container.no-dev {
    top: 4rem;
}

.fis-tab-container.with-dev {
    top: 9.9rem;
}

.fis-tab-container {
    position: sticky;
    top: 7rem; /* adjusted for header height */
    z-index: 800;
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: .25rem;
}

.fis-tabs {
    max-width: 84.75rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 1.125rem 0 0 0;
}

.fis-tab {
    flex: 1;
    text-align: center;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: 600;
    color: #6c757d;
    padding-bottom: var(--sp-sm);
    cursor: default;
    white-space: nowrap;
}

    .fis-tab.active {
        color: #0d6efd;
    }

.fis-tab-underline {
    max-width: 84.75rem;
    margin: 0 auto;
    padding: 0;
}

.fis-tab-indicator {
    height: 0.25rem;
    width: 33.333%;
    background-color: #0d6efd;
    border-radius: 0.125rem;
    transition: transform 0.35s ease;
}

    .fis-tab-indicator.business {
        transform: translateX(0%);
    }

    .fis-tab-indicator.compliance {
        transform: translateX(100%);
    }

    .fis-tab-indicator.billing {
        transform: translateX(200%);
    }

:root {
    --validation-error-bg: #fdecec;
    --validation-error-border: #f3b4b4;
    --validation-error-text: #8a2e2e;
    --validation-success-border: #8fcfb0;
    --validation-success-check: #3b8f6b;
}

.validation-field {
    position: relative;
}

    .validation-field input,
    .validation-field select {
        padding-right: 2.25rem;
    }

.validation-bubble {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--sp-xs);
    background: var(--validation-error-bg);
    color: var(--validation-error-text);
    padding: var(--sp-2xs) var(--sp-sm) var(--sp-2xs) 0px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 10;
    border: 1px solid var(--validation-error-border);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.06);
    animation: bubbleIn 120ms ease-out;
}

    .validation-bubble::before {
        content: "";
        position: absolute;
        top: -0.375rem;
        left: 0.875rem;
        width: 0.625rem;
        height: 0.625rem;
        background: var(--validation-error-bg);
        border-left: 1px solid var(--validation-error-border);
        border-top: 1px solid var(--validation-error-border);
        transform: rotate(45deg);
    }

input.is-invalid,
select.is-invalid {
    border-color: var(--validation-error-border);
    background-color: #fffafa;
}

input.is-valid,
select.is-valid {
    border-color: var(--validation-success-border);
    background-color: #f6fffb;
}

.validation-check {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.875rem;
    height: 0.5rem;
    transform: translateY(-50%) rotate(-45deg);
    border-left: 2px solid var(--validation-success-check);
    border-bottom: 2px solid var(--validation-success-check);
    pointer-events: none;
    animation: checkFadeIn 120ms ease-out;
}

.validation-bubble {
    animation: bubbleSmoothIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bubbleSmoothIn {
    0% {
        opacity: 0;
        transform: translateY(-0.375rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-row {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    flex-wrap: nowrap;
}

.account-label {
    min-width: 5.625rem;
    white-space: nowrap;
    font-size: clamp(0.9rem, 2.5vw, 0.95rem);
    color: #495057;
    font-weight: 500;
}

.account-value {
    font-size: clamp(0.9rem, 2.5vw, 0.95rem);
    color: #495057;
}

.password-wrapper {
    position: relative;
    min-width: 0;
}

.password-input {
    padding-right: 4rem;
}

.password-peek {
    position: absolute;
    top: 53.5%;
    right: 2.5rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: #adb5bd;
    transition: color 0.15s ease, transform 0.1s ease;
    user-select: none;
    font-size: 1.7rem;
}

    .password-peek:hover {
        color: #6c757d;
    }

    .password-peek:active {
        color: #495057;
        transform: translateY(-50%) scale(1.15);
    }
@keyframes validationShake {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-0.25rem);
    }

    30% {
        transform: translateX(0.25rem);
    }

    45% {
        transform: translateX(-0.1875rem);
    }

    60% {
        transform: translateX(0.1875rem);
    }

    75% {
        transform: translateX(-0.125rem);
    }

    100% {
        transform: translateX(0);
    }
}

.validation-bubble.shake {
    animation: validationShake 420ms ease-in-out;
}

.confirm-page {
    max-width: 56.25rem;
    margin: 0 auto;
    padding-bottom: 2.5rem;
}

    .confirm-page .alert-warning {
        padding-bottom: 0 !important;
    }

.confirm-logo img {
    max-height: 4.375rem;
}

.confirm-read-title {
    font-weight: 700;
    letter-spacing: 0.03125rem;
}

.confirm-alert {
    background: #fff6d8;
    border: 1px solid #f2e2a8;
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-sm);
    font-size: clamp(0.9rem, 2.5vw, 0.95rem);
}

.confirm-client-id {
    font-weight: 700;
    color: #856404;
}

.confirm-body {
    font-size: clamp(0.9rem, 2.5vw, 0.95rem);
    line-height: 1.55;
}

.confirm-contact {
    margin-top: var(--sp-sm);
    font-size: clamp(0.9rem, 2.5vw, 0.95rem);
}

    .confirm-contact a {
        color: #0071c1;
        text-decoration: none;
    }

        .confirm-contact a:hover {
            text-decoration: underline;
        }

.confirm-rating {
    text-align: center;
    color: #495057;
}

.confirm-stars {
    font-size: 1.4rem;
    letter-spacing: 0.375rem;
    color: #ced4da;
}

.confirm-rating-logo img {
    max-height: 2rem;
}

.outlined-floating {
    margin-bottom: 1.25rem;
}

    .outlined-floating input,
    .outlined-floating textarea,
    .outlined-floating select {
        width: 100%;
        padding: 0.6rem 0.75rem 0.5rem;
        border-radius: 0.375rem;
        background: white;
        font-size: 1.1rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

        .outlined-floating input:focus,
        .outlined-floating textarea:focus,
        .outlined-floating select:focus {
            border-color: #0d6efd;
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
        }

    .outlined-floating label {
        position: absolute;
        left: 0.75rem;
        top: 0.68rem;
        padding: 0 0.35rem;
        background: white;
        color: #6c757d;
        font-size: 1.2rem;
        pointer-events: none;
        transform-origin: left top;
        transition: all 0.2s ease;
        opacity: 0;
        z-index: 0;
    }

    .outlined-floating input:focus ~ label,
    .outlined-floating input:not(:placeholder-shown) ~ label,
    .outlined-floating textarea:focus ~ label,
    .outlined-floating textarea:not(:placeholder-shown) ~ label,
    .outlined-floating select:focus ~ label,
    .outlined-floating select:not(:placeholder-shown) ~ label {
        opacity: 1;
        transform: translateY(-1.35rem) scale(0.75);
        color: #0d6efd;
        font-weight: 500;
    }

    .outlined-floating input:not(:placeholder-shown) ~ label,
    .outlined-floating textarea:not(:placeholder-shown) ~ label,
    .outlined-floating select:not(:placeholder-shown) ~ label {
        opacity: 1;
        transform: translateY(-1.35rem) scale(0.75);
    }

    .outlined-floating input.is-valid ~ label,
    .outlined-floating select.is-valid ~ label,
    .outlined-floating textarea.is-valid ~ label {
        color: #0d6efd;
    }

    .outlined-floating input.is-invalid ~ label,
    .outlined-floating select.is-invalid ~ label,
    .outlined-floating textarea.is-invalid ~ label {
        color: #dc3545;
    }

    .outlined-floating input.is-pending ~ label,
    .outlined-floating select.is-pending ~ label,
    .outlined-floating textarea.is-pending ~ label,
    .outlined-floating input:focus ~ label,
    .outlined-floating select:focus ~ label,
    .outlined-floating textarea:focus ~ label {
        color: #0d6efd;
    }

/*html {
    font-size: 100%;
}*/

.product-name {
    min-height: 0;
}

.order-summary {
    display: none;
}

.order-summary-mobile {
    display: block;
    margin-bottom: var(--sp-xs);
}

.contact-info {
    display: none;
}

.indented-input-section {
    margin-left: 1.25rem;
}

/* Mobile mode */
@media (max-width: 991px) {
    html {
        font-size: 55%;
    }

    .indented-input-section {
        margin-left: 0;
    }

    .wizard-container {
        flex-direction: column;
        /*padding-top: .7rem;*/
    }

    .form-content {
        padding: 0;
        min-width: 0;
    }

    .card {
        margin: 0;
        border-radius: 0.5rem;
    }

    .card-header {
        font-size: var(--fs-medium);
        padding: var(--sp-2xs) 0;
    }

    .card-body {
        padding: var(--sp-sm);
    }

    .btn {
        font-size: 0.85rem;
        padding: var(--sp-2xs) var(--sp-sm);
    }

    .progress-bar-container {
        /*padding: var(--sp-2xs) 0;*/
        /*margin-bottom: var(--sp-xs);*/
    }

    .step-list {
        gap: 0.25rem;
        padding: 0.25rem 0.5rem 0;
    }

    .step-item {
        min-width: 2.25rem;
        flex: 0 0 auto;
    }

    .step-bubble {
        width: 1.75rem;
        height: 1.75rem;
        line-height: 1.75rem;
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .step-title {
        font-size: 0.65rem;
        max-width: 3.125rem;
        line-height: 1.1;
    }

    .fis-dev-steps {
        width:100%;
        position: sticky;
        top: 6rem;
        z-index: 800;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .fis-tab-container.no-dev {
        top: 5.5rem;
    }

    .fis-tab-container.with-dev {
        top: 9rem;
    }
 

 

    .fis-nav {
        flex-direction: row;
        align-items: center;
    }

    .fis-nav-left {
        justify-content: flex-start;
    }

    .fis-nav-right {
        align-items: flex-end;
    }

    .fis-btn-next {
        min-width: 8.75rem;
        font-size: 0.9375rem;
        padding: var(--sp-sm) var(--sp-xl);
    }

    .fis-btn-back {
        font-size: 0.875rem;
    }

    .fis-header {
        padding: var(--sp-xs) 0;
        max-height: 6rem;
    }

        .fis-header .logo img {
            max-height: 5rem;
        }

        .fis-header #support {
            font-size: 0.9rem;
            justify-content: flex-end;
        }

        .fis-header .container-fluid.but-fixed {
            padding-left: 1rem;
            padding-right: 1rem;
        }

    .shopping-cart-container {
        min-width: 100%;
    }

    .fis-ra-options {
        flex-direction: column;
        gap: 0.75rem;
    }

    .fis-ra-option {
        min-width: 100%;
    }


}
/* Desktop mode */
@media (min-width: 992px) {
    .order-summary-mobile {
        display: none;
    }

    .wizard-container {
        flex-direction: row;
    }

    .form-content {
        flex: 3;
    }

    .step-bubble {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 1rem;
    }

    .step-title {
        display: block;
        font-size: 0.9rem;
        max-width: 6.25rem;
        margin: 0 auto;
    }
}













.ein-card {
    border-radius: 8px;
}

.ein-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.ein-description {
    max-width: 900px;
}

.ein-section {
    margin-bottom: 1.75rem;
}

.ein-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 220px) 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

    .ein-row label {
        text-align: right;
        font-weight: 500;
    }

    .ein-row small {
        color: #6c757d;
    }

.ein-date-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 260px);
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    grid-template-columns: 1fr;
    width: 50%;
}

.ein-question {
    display: block;
    margin-bottom: 0.5rem;
}

/* Mobile */
@media (max-width: 768px) {
    .ein-row {
        grid-template-columns: 1fr;
    }

        .ein-row label {
            text-align: left;
        }
         
}

.force-left-wrap {
    text-align: left;
    display: inline-block;
}


.stripe-wrapper {
    position: relative; 
    font-size:1.1em;
    border-radius: 0.375rem;
    background: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#card-element {
    padding: 1rem 0.75rem;
    min-height: 3rem;
}

/* Floating label forced on */
.stripe-wrapper label {
    opacity: 1;
    transform: translateY(-1.35rem) scale(0.75);
    color: #6c757d;
    font-weight: 500;
}

/* Focus */
.stripe-wrapper.stripe-focused {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* Invalid */
.stripe-wrapper.stripe-invalid {
    border-color: #dc3545;
    box-shadow: inset 0 0 0 1px #dc3545;
}

.outlined-floating.stripe-wrapper {
    border: 1px solid #0d6efd;
    border-radius: 0.375rem;
    background: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .outlined-floating.stripe-wrapper.stripe-focused {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }

    .outlined-floating.stripe-wrapper.stripe-invalid {
        border-color: #dc3545;
        box-shadow: inset 0 0 0 1px #dc3545;
    }

    .outlined-floating.stripe-wrapper.stripe-valid {
        border-color: #198754;
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, .25);
    }

        /* Optional: green label */
        .outlined-floating.stripe-wrapper.stripe-valid label {
            color: #198754;
        }




.no-wrap-row {
    flex-wrap: nowrap;
}

.zip-fixed {
    width: 8rem;
    flex: 0 0 auto;
}













.checkout-header {
    margin-bottom: 1.25rem;
}

.checkout-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7a7a;
    margin-bottom: 0.25rem;
}

.checkout-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
}

.checkout-name {
    font-weight: 600;
    color: #111827;
}

.section-divider.subtle {
    height: 1px;
    background: linear-gradient( to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02) );
    margin: 1.25rem 0;
}