:root {
    --main-pink-color: #ff214f;
    --main-blue-color: #009efb;
    --main-black-color: #2c2b2e;
    --main-dark-grey-color: #54667a;
    --main-light-grey-color: #f2f4f8;

    --border-color-grey: #69717a6e;
    --main-border-radius: 0.25rem;

    --green-500: #1FC16B;
    --green-50: #ECFDF5;
    --green-600: #1DAF61;
    --blue-focus: rgba(0, 158, 251, 0.15);
    --blue-light-bg: #e8f4fe;
}

header {
    z-index: 2;
    background-color: #fff;
}

/* ================================================================
   PAGE HEADER — above the card
   ================================================================ */
.signup-page-header {
    text-align: center;
    margin-bottom: 20px;
}

.signup-page-header h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--main-black-color);
    margin-bottom: 4px;
}

.signup-page-header p.text-muted {
    font-size: 15px;
    color: var(--main-dark-grey-color);
    margin-bottom: 0;
}

/* ================================================================
   SECTIONS — both steps are always visible inside card-body.
   dropCowboy.css provides all .card-body child styling automatically.
   ================================================================ */
.signup-section {
    transition: opacity 0.3s ease;
}

.signup-section.section-locked {
    opacity: 0.45;
    pointer-events: none;
}

.signup-section.section-locked .section-heading-text {
    color: #adb5bd;
}

.signup-section.section-locked .btn.auth-submit-btn {
    background-color: #dee2e6 !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
    box-shadow: none !important;
}

/* ================================================================
   PRIMARY BUTTON — DropCowboy blue, overrides Bootstrap & theme
   ================================================================ */
.btn.auth-submit-btn {
    background-color: var(--main-blue-color) !important;
    border-color: var(--main-blue-color) !important;
    color: #fff !important;
    font-size: 17px;
    padding: 8px 12px;
    width: 100%;
    border-radius: var(--main-border-radius);
}

.btn.auth-submit-btn:hover,
.btn.auth-submit-btn:active {
    background-color: #0089db !important;
    border-color: #0089db !important;
    color: #fff !important;
}

.btn.auth-submit-btn:focus,
.btn.auth-submit-btn.focus {
    box-shadow: 0 0 0 3px var(--blue-focus) !important;
}

/* Section heading row */
.section-heading {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.section-heading-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-black-color);
    margin: 0;
}

/* Step badge — the numbered circle */
.section-step-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dee2e6;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    transition: background 0.25s ease;
}

.section-step-badge.active {
    background: var(--main-blue-color);
}

.section-step-badge.completed {
    background: var(--green-500);
}

/* Disabled fields in completed sections — keep visible for compliance */
.fields-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.fields-disabled .form-control:disabled,
.fields-disabled .form-control[disabled] {
    background-color: #f8f9fa;
    cursor: default;
}

/* Section divider */
.section-divider {
    border-top: 1px solid #e9ecef;
    margin: 24px 0;
}

/* ================================================================
   CONSENT CHECKBOXES — small text, compliance-visible at all times
   ================================================================ */
/* Wrap the per-channel consent group in a light-grey pill so it reads as one
   cohesive block, distinct from the surrounding form fields */
.consent-checkbox-section {
    background-color: var(--main-light-grey-color);
    border-radius: 12px;
    padding: 14px 16px;
}

.consent-checkbox-section .consent-label {
    font-size: 12px;
    line-height: 1.5;
    color: var(--main-dark-grey-color);
    font-weight: 400;
}

/* Override theme's .card-body .checkbox label (15px) so consent statements
   stay the same small size as the group heading and disclaimer */
.card-body .consent-checkbox-section .checkbox label.consent-label {
    font-size: 12px;
    line-height: 1.5;
}

.consent-checkbox-section .consent-label strong {
    font-weight: 600;
}

/* Lay each consent row out with flex so the checkbox aligns to the top of the
   first text line identically whether the label is one line or wraps. Inline
   baseline alignment otherwise nudges single-line rows out of alignment. */
.consent-checkbox-section .checkbox.form-check {
    display: flex;
    align-items: flex-start;
}

.consent-checkbox-section .form-check-input {
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--main-blue-color);
}

.consent-checkbox-section .checkbox.invalid .consent-label {
    color: #dc3545;
}

/* SMS consent notice */
.sms-consent-notice .alert-message {
    font-size: 12px;
    line-height: 1.5;
    color: var(--main-dark-grey-color);
}

/* The shared error area reserves 38px (theme min-height on
   .auth-container .card-body .error-message-div), which left an oversized gap
   under the consent pill. Let it collapse when empty — validation errors still
   render and expand it on demand. */
.auth-container .card-body .error-message-div {
    min-height: 0;
}

/* Verified indicator shown after phone is verified */
.verified-indicator {
    font-size: 13px;
    font-weight: 600;
    color: var(--green-600);
    margin-top: 4px;
}

.verified-indicator i {
    margin-right: 4px;
}

/* ================================================================
   OTP DIGIT BOXES
   ================================================================ */
.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.otp-digit {
    width: 46px !important;
    height: 54px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    padding: 4px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    transition: border-color 0.2s;
}

.otp-digit:focus {
    border-color: var(--main-blue-color) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--blue-focus) !important;
}

.otp-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}
.otp-actions-divider {
    font-size: 11px;
    margin: 0 6px;
    user-select: none;
}
.resend-link {
    font-size: 11px;
    color: inherit !important;
    padding: 0;
    min-width: 100px;
    text-align: center;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 500;
}

.resend-link:hover:not(:disabled) {
    text-decoration: underline !important;
}
.resend-link:disabled {
    cursor: default;
    text-decoration: none !important;
    opacity: 0.65;
}
.resend-link:focus {
    outline: 2px solid var(--main-blue-color);
    outline-offset: 2px;
}
.resend-success {
    color: #12b76a !important;
}

/* ================================================================
   SELECT DROPDOWNS
   ================================================================ */
.card-body select.form-control {
    color: #495057;
    cursor: pointer;
}

.card-body select.form-control.placeholder-selected {
    color: #6c757d;
}

.card-body select.form-control option {
    color: #495057;
}

.card-body select.form-control option:disabled {
    color: #6c757d;
}

.ng-submitted .card-body select.form-control.ng-invalid {
    border-bottom-color: red;
}

/* ================================================================
   CHARGEBEE CARD FIELDS
   ================================================================ */
.chargebee-fieldset {
    width: 100%;
    height: 100%;
    margin: 5px 15px;
}

.chargebee-field {
    width: 100%;
    height: 100%;
    border: 1px solid #ced4da;
    border-radius: var(--main-border-radius);
    padding: 5px;
}

.chargebee-group {
    width: 100%;
    height: 100%;
    display: flex;
}

.coupon-btn {
    font-size: 9pt;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--main-blue-color);
    width: 100%;
    text-align: center;
    border: none;
    background: none;
}

.coupon-btn:focus {
    outline: 2px solid var(--main-blue-color);
    outline-offset: 2px;
}

.coupon-error {
    font-size: 9pt;
    display: flex;
    color: red;
}

.coupon-info {
    font-size: 9pt;
    color: var(--main-blue-color);
}

.plan-info {
    margin-top: 15px;
    margin-bottom: 0;
}

.plan-subtext {
    font-size: 9pt !important;
    color: rgba(0, 0, 0, 0.62);
}

/* ================================================================
   SIGN-IN FOOTER
   ================================================================ */
.signin-footer p {
    font-size: 14px;
    color: var(--main-dark-grey-color);
    margin: 0;
}

/* ================================================================
   ONBOARDING & WELCOME — Full-page card sections
   ================================================================ */
.onboarding-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
}

.onboarding-page,
.welcome-page {
    animation: sectionFadeIn 0.3s ease-out;
}

.onboarding-page {
    max-width: 600px;
}

.onboarding-page .card-title {
    font-size: 22px;
    font-weight: 600;
}

@keyframes sectionFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.skip-link {
    font-size: 13px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.skip-link:hover {
    text-decoration: underline !important;
}

.skip-link:focus {
    outline: 2px solid var(--main-blue-color);
    outline-offset: 2px;
}

/* Onboarding selects — match theme form-control */
.onboarding-page select.form-control {
    height: 45px;
    font-size: 14px;
}
.onboarding-page select.form-control.placeholder-selected {
    color: #6c757d;
}

/* Intended product multi-select tiles */
.intended-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.intended-product-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border: 1.5px solid #e0e4e8;
    border-radius: 8px;
    background: #fff;
    color: var(--main-dark-grey-color);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    text-align: left;
}

.intended-product-chip:hover {
    border-color: var(--main-blue-color);
    background: #f7fbff;
    color: var(--main-black-color);
    box-shadow: 0 1px 4px rgba(0, 158, 251, 0.10);
}

.intended-product-chip:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--blue-focus);
}

.intended-product-chip.active {
    border-color: var(--main-blue-color);
    background: var(--blue-light-bg);
    color: var(--main-blue-color);
    box-shadow: 0 1px 4px rgba(0, 158, 251, 0.12);
}

.intended-product-chip.active .chip-icon-circle {
    background: var(--main-blue-color);
    color: #fff;
}

.intended-product-chip .chip-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.intended-product-chip .chip-icon {
    font-size: 13px;
    line-height: 1;
}

.intended-product-chip .chip-check {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 11px;
    color: var(--main-blue-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.intended-product-chip.active .chip-check {
    opacity: 1;
}

/* Welcome modal options */
.welcome-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welcome-option {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    gap: 16px;
    background: #fff;
    transition: all 0.18s ease;
    text-align: left;
}

.welcome-option:hover {
    border-color: var(--main-blue-color);
    background: #f0f8ff;
    box-shadow: 0 2px 8px rgba(0, 158, 251, 0.10);
}

.welcome-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue-light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--main-blue-color);
    flex-shrink: 0;
}

.welcome-option-text {
    flex: 1;
}

.welcome-option-text strong {
    font-size: 14px;
    font-weight: 600;
    display: block;
    color: var(--main-black-color);
    margin-bottom: 2px;
}

.welcome-option-text p {
    font-size: 12px;
    color: var(--main-dark-grey-color);
    margin: 0;
}

.welcome-option-arrow {
    font-size: 12px;
    color: #adb5bd;
    flex-shrink: 0;
}

.welcome-page h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--main-black-color);
}

/* ================================================================
   LOADER — position relative to signup-form-container
   ================================================================ */
.signup-form-container {
    position: relative;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 575px) {
    .consent-checkbox-section .consent-label,
    .card-body .consent-checkbox-section .checkbox label.consent-label,
    .sms-consent-notice .alert-message {
        font-size: 11px;
        line-height: 1.4;
    }
    .otp-digit {
        width: 38px !important;
        height: 46px;
        font-size: 18px;
    }
    .otp-inputs {
        gap: 6px;
    }
    .section-heading {
        margin-bottom: 12px;
    }
    .section-divider {
        margin: 18px 0;
    }
    .intended-products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 450px) {
    .forgot-password-modal .modal-dialog .modal-content .modal-body {
        padding: 0 20px 22px;
    }
}

@media (max-width: 400px) {
    .auth-wrapper .auth-toolbar .navbar-collapse .login-header-label {
        display: none;
    }
}

/* Turnstile challenge */
.turnstile-container {
    text-align: center;
    padding: 8px 0;
}
.turnstile-container > div {
    display: inline-block;
}

/* Inline button loading state */
.btn-loading-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.auth-submit-btn[disabled] {
    opacity: 0.85;
    cursor: not-allowed;
}

.shake-highlight {
    animation: shake-invalid 0.5s ease;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.4) !important;
    border-color: #dc3545 !important;
}

@keyframes shake-invalid {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Full-page guard while account creation / SFN polling is in flight */
.signup-in-progress-guard {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.signup-in-progress-guard__panel {
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signup-in-progress-guard__hint {
    margin-top: 12px;
    color: var(--main-dark-grey-color);
    font-size: 14px;
    line-height: 1.4;
}

.signup-in-progress-guard__spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    flex-shrink: 0;
    border: 4px solid #dce3eb;
    border-top-color: var(--main-blue-color, #0066cc);
    border-radius: 50%;
    animation: signup-guard-spin 0.75s linear infinite;
}

@keyframes signup-guard-spin {
    to {
        transform: rotate(360deg);
    }
}