/* ============================================================
   REFERENCE REGISTRATION DESIGN
   Visual layer only - existing Razor/controller/JS logic remains.
   ============================================================ */

:root {
    --navy: #102f45;
    --teal: #0aa6a6;
    --teal-dark: #087f82;
    --teal-soft: #e9f8f7;
    --text: #1e3144;
    --muted: #718095;
    --line: #dfe6ec;
    --danger: #ef5350;
    --orange: #ed9a2f;
    --purple: #7054b8;
    --blue: #1389d0;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0 !important;
    /*padding: 0 !important;*/
    /*background: radial-gradient(circle at 8% 12%, rgba(18, 151, 148, .08), transparent 22%), radial-gradient(circle at 92% 88%, rgba(238, 184, 119, .10), transparent 22%), #f4f8fa !important;*/
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    padding-bottom: 400px;
}



/* Main two-column canvas */
.page {
    width: min(100%, 1200px) !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: transparent !important;
    height: 1500px;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 800px !important;
        margin: 30px auto;
    }
}


/* Main white card */
.main {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 30px 20px 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(222, 229, 235, .90) !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 0 10px 35px rgba(25, 50, 65, .10) !important;
}

/* Header */
.main-header {
    min-height: 155px !important;
    padding: 12px 16px 0 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

    .main-header h1 {
        margin: 14px 0 12px !important;
        color: var(--navy) !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: clamp(27px, 3vw, 34px) !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        letter-spacing: -.35px !important;
    }

        .main-header h1 .accent,
        .main-header .accent {
            color: #078d8d !important;
        }

    .main-header p {
        margin: 0 !important;
        color: #56677b !important;
        font-size: 15px !important;
    }

/* Header illustration */
.orgreg2-header-art-wrap {
    width: 145px !important;
    min-width: 145px !important;
    height: 125px !important;
    position: relative !important;
    margin: 0 4px 0 0 !important;
}

.orgreg2-header-glow {
    position: absolute !important;
    inset: 5px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(245, 210, 160, .34), rgba(255,255,255,0) 68%) !important;
}

.header-art {
    width: 130px !important;
    height: 130px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Stepper */
.stepper {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 1fr .9fr 1fr .9fr 1fr .9fr 1fr !important;
    align-items: start !important;
}

.step {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    color: #7c8796 !important;
}

    .step .dot {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        background: #fff !important;
        color: #778291 !important;
        border: 1px solid #d9e0e7 !important;
        box-shadow: 0 3px 8px rgba(24, 50, 68, .10) !important;
    }

        .step .dot svg {
            width: 20px !important;
            height: 20px !important;
        }

    .step span {
        margin-top: 7px !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    .step.active .dot,
    .step.completed .dot {
        background: #10aaa7 !important;
        color: #fff !important;
        border-color: #10aaa7 !important;
    }

    .step.active span,
    .step.completed span {
        color: #087f82 !important;
    }

.step-line {
    height: 2px !important;
    margin-top: 24px !important;
    background: #e2e7ec !important;
}

    .step-line.filled {
        background: #10aaa7 !important;
    }

/* Registration sections */
.section {
    margin: 0 0 9px !important;
    padding: 13px 15px 14px !important;
    border: 1px solid #e4e9ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 9px rgba(30, 55, 70, .035) !important;
}

    .section.tinted {
        background: #f5fcfc !important;
        border-color: #dcefed !important;
    }

    .section.warn {
        background: #fffaf4 !important;
        border-color: #f3e1ca !important;
    }

.section-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 13px !important;
    color: #087f82 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1px !important;
}

    .section-title .ico {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 50% !important;
        background: #eaf8f7 !important;
        color: #079b9b !important;
    }

        .section-title .ico svg {
            width: 18px !important;
            height: 18px !important;
        }

/* Grid */
.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 20px !important;
}

    .grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px 18px !important;
    }

.span-2 {
    grid-column: span 2 !important;
}

/* Fields */
.field {
    min-width: 0 !important;
}

    .field > label:not(.legal-checkbox),
    .field label:not(.legal-checkbox) {
        display: block !important;
        margin: 0 0 5px !important;
        color: #22384d !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

.req {
    color: #ef5350 !important;
    margin-left: 2px !important;
}

.input-wrap {
    position: relative !important;
    width: 100% !important;
}

    .input-wrap .leading {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        width: 17px !important;
        height: 17px !important;
        transform: translateY(-50%) !important;
        color: #8b96a4 !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    width: 100% !important;
    height: 38px !important;
    padding: 7px 11px 7px 37px !important;
    border: 1px solid #d8e0e7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #26384b !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

select.form-control {
    padding-left: 30px !important;
}

.form-control::placeholder {
    color: #a2abb6 !important;
}

.form-control:focus {
    border-color: #66c8c6 !important;
    box-shadow: 0 0 0 3px rgba(16, 170, 167, .09) !important;
    outline: none !important;
}

.phone-field {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
}

.isd-code-wrap .form-control {
    padding: 7px 7px !important;
    text-align: center !important;
}

.number-wrap .form-control {
    padding-left: 37px !important;
}

.all-valid-regform {
    display: block !important;
    min-height: 0 !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Business categories -- a single-row horizontal carousel: chips keep a
   fixed width and never wrap, the row scrolls sideways instead, and the
   prev/next arrows page through it. Works no matter how many categories
   exist -- extra ones are simply revealed by scrolling further. */
.cat-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .cat-grid::-webkit-scrollbar {
        display: none !important;
    }

.cat-chip {
    /* Sized as a share of the row's own width (not a fixed px) so exactly
       8 are always visible regardless of container width -- scrolling
       reveals the 9th and beyond. */
    flex: 0 0 calc((100% - 56px) / 8) !important;
    max-width: calc((100% - 56px) / 8) !important;
    min-height: 67px !important;
    padding: 8px 4px !important;
    border: 1px solid #dfe6eb !important;
    border-radius: 6px !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    color: #314255 !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

    .cat-chip:hover {
        border-color: #8bd2d0 !important;
        transform: translateY(-1px);
    }

    .cat-chip.selected {
        border-color: #12aaa7 !important;
        background: #effafa !important;
        box-shadow: inset 0 0 0 1px rgba(18,170,167,.12) !important;
    }

.cat-ico {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #f3f6f8 !important;
    color: #7d8795 !important;
}

    .cat-ico svg {
        width: 15px !important;
        height: 15px !important;
    }

.cat-chip.selected .cat-ico {
    background: #d8f4f2 !important;
    color: #0a9998 !important;
}

/* Package/payment */
.split-2 {
    display: grid !important;
    grid-template-columns: 1fr .82fr !important;
    gap: 28px !important;
}

.warn-title {
    color: #d98b24 !important;
}

    .warn-title .ico {
        background: #fff0dd !important;
        color: #d98b24 !important;
    }

/* Package cards -- same single-row horizontal carousel as .cat-grid: a
   fixed card width, no wrapping, the row scrolls sideways and the
   prev/next arrows page through it. */
.pkg-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .pkg-row::-webkit-scrollbar {
        display: none !important;
    }

.pkg-card {
    position: relative !important;
    /* Sized as a share of the row's own width (not a fixed px) so exactly
       3 are always visible regardless of container width -- scrolling
       reveals the 4th and beyond. */
    flex: 0 0 calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    min-height: 86px !important;
    padding: 10px 12px !important;
    border: 1px solid #e6dfd5 !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

    .pkg-card.selected {
        border-color: #13aaa8 !important;
        background: #f1fbfa !important;
        box-shadow: 0 2px 8px rgba(18, 170, 167, .08) !important;
    }

.pkg-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pkg-icon {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #fff3e2 !important;
    color: #e49a3c !important;
}

.pkg-card.selected .pkg-icon {
    background: #d7f5f2 !important;
    color: #079b98 !important;
}

.pkg-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.pkg-radio,
.radio-dot {
    width: 13px !important;
    height: 13px !important;
    border: 1px solid #b8c1ca !important;
    border-radius: 50% !important;
    background: #fff !important;
}

.pkg-card.selected .pkg-radio,
.pay-option.selected .radio-dot {
    border-color: #0ba3a2 !important;
    box-shadow: inset 0 0 0 3px #fff !important;
    background: #0ba3a2 !important;
}

.pkg-name {
    margin-top: 5px !important;
    color: #26384b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.pkg-price {
    margin-top: 3px !important;
    color: #6b7683 !important;
    font-size: 10px !important;
}

    .pkg-price b {
        color: #27394d !important;
        font-size: 12px !important;
    }

#payGroup {
    display: grid !important;
    gap: 9px !important;
}

.pay-option {
    min-height: 42px !important;
    padding: 7px 11px !important;
    border: 1px solid #e0e5e9 !important;
    border-radius: 7px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    color: #334558 !important;
    font-size: 12px !important;
}

    .pay-option.selected {
        border-color: #10aaa7 !important;
        background: #f1fbfa !important;
    }

.pay-left {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.pay-ico {
    width: 20px !important;
    height: 20px !important;
    display: grid !important;
    place-items: center !important;
    color: #079c9b !important;
}

    .pay-ico svg {
        width: 14px !important;
        height: 14px !important;
    }

/* Compare plans */
.pkg-info-trigger {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #0b9998 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

    .pkg-info-trigger svg {
        width: 14px !important;
        height: 14px !important;
        vertical-align: -3px !important;
        margin-right: 3px !important;
    }

.pkg-compare-content {
    border-radius: 14px !important;
    border: 0 !important;
    overflow: hidden !important;
}

.pkg-compare-header {
    padding: 17px 20px !important;
    border-bottom: 1px solid #e6ecef !important;
}

.pkg-compare-body {
    padding: 18px !important;
}

.pkg-compare-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
}

.pkg-compare-card {
    border: 1px solid #e1e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.pkg-compare-card-head {
    padding: 14px !important;
    background: #f6fbfb !important;
}

.pkg-compare-name {
    display: block !important;
    font-weight: 700 !important;
    color: #17364a !important;
}

.pkg-compare-price {
    margin-top: 7px !important;
}

.pkg-compare-amount {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.pkg-compare-duration {
    display: block !important;
    color: #778493 !important;
    font-size: 11px !important;
}

.pkg-compare-features {
    padding: 13px !important;
    color: #536477 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

/* Identity upload */
.upload-box {
    height: 38px !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid #d9e1e7 !important;
    border-radius: 7px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 8px !important;
    cursor: pointer !important;
    color: #536476 !important;
    text-align: left !important;
    font-size: 12px !important;
    position: relative !important;
}

    .upload-box > svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        color: #7a5bc3 !important;
    }

    .upload-box .fname {
        color: #6d7886 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .upload-box.has-file .fname {
        color: var(--text, #1e3144) !important;
    }

    .upload-box input[type="file"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

.upload-clear {
    display: none;
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -9px !important;
    border-radius: 50% !important;
    background: #eef2f5 !important;
    color: #52606d !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

    .upload-clear svg {
        width: 10px !important;
        height: 10px !important;
    }

    .upload-clear:hover {
        background: #e2e8ec !important;
        color: var(--danger, #ef5350) !important;
    }

.upload-box.has-file .upload-clear {
    display: flex !important;
}

.upload-box.dragging {
    border-color: #11aaa8 !important;
    background: #effafa !important;
}

/* Credentials */
#regStepSection-3 {
    background: #f5faff !important;
    border-color: #dceaf6 !important;
}

    #regStepSection-3 .section-title {
        color: #1188ce !important;
    }

        #regStepSection-3 .section-title .ico {
            color: #1188ce !important;
            background: #e6f3fd !important;
        }

/* Security */
.section[style*="fdf0ef"] {
    background: #fff5f6 !important;
    border-color: #f3dde0 !important;
}

    .section[style*="fdf0ef"] .section-title {
        color: #d9536b !important;
    }

        .section[style*="fdf0ef"] .section-title .ico {
            background: #ffe5e8 !important;
            color: #d9536b !important;
        }

.security-box {
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.security-left {
    flex: 1 1 auto !important;
}

.cf-box {
    min-width: 250px !important;
    display: flex !important;
    justify-content: flex-start !important;
}

#captcha1 {
    margin: 0 !important;
}

/* Footer buttons */
.form-end {
    padding: 8px 0 0 !important;
}

.button-holder {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

    .button-holder > button {
        min-width: 155px !important;
        height: 34px !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5dd !important;
        background: #fff !important;
        color: #2e4052 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .button-holder > .btnOrgSubmit {
        min-width: 205px !important;
        border-color: #12aaa7 !important;
        background: linear-gradient(90deg, #13aaa7, #20c1b5) !important;
        color: #fff !important;
        box-shadow: 0 4px 9px rgba(18, 170, 167, .20) !important;
    }

    .button-holder a {
        color: inherit !important;
        text-decoration: none !important;
    }

.orgreg2-login-hint {
    margin: 9px 0 0 !important;
    text-align: center !important;
    color: #697687 !important;
    font-size: 11px !important;
}

    .orgreg2-login-hint a {
        color: #078f91 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

/* Keep validation messages readable */
.text-danger {
    color: #e04e58 !important;
}



.ui-menu-item-wrapper {
    padding: 8px 10px !important;
}

/* Responsive */
@media (max-width: 900px) {
    .page {
        width: calc(100% - 20px) !important;
        grid-template-columns: 185px minmax(0, 1fr) !important;
    }

    .sidebar {
        width: 185px !important;
        min-width: 185px !important;
    }

    .main {
        padding: 22px 14px 16px !important;
    }

    .split-2 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

@media (max-width: 700px) {
    .page {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .sidebar {
        display: none !important;
    }

    .main {
        width: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 18px 12px !important;
    }

    .main-header {
        min-height: 120px !important;
        padding: 0 4px !important;
    }

        .main-header h1 {
            font-size: 25px !important;
        }

    .orgreg2-header-art-wrap {
        width: 95px !important;
        min-width: 95px !important;
        height: 90px !important;
    }

    .header-art {
        width: 90px !important;
        height: 90px !important;
    }

    .stepper {
        padding: 0 3px !important;
        grid-template-columns: 1fr .45fr 1fr .45fr 1fr .45fr 1fr !important;
    }

    .step .dot {
        width: 38px !important;
        height: 38px !important;
    }

    .step span {
        font-size: 10px !important;
    }

    .step-line {
        margin-top: 19px !important;
    }

    .grid,
    .grid.cols-3 {
        grid-template-columns: 1fr !important;
    }

    .span-2 {
        grid-column: auto !important;
    }

    .carousel-row {
        padding: 0 30px !important;
    }

    .carousel-arrow {
        width: 28px !important;
        height: 28px !important;
    }

        .carousel-arrow svg {
            width: 14px !important;
            height: 14px !important;
        }

    .security-box {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cf-box {
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    .button-holder {
        flex-direction: column-reverse !important;
    }

        .button-holder > button,
        .button-holder > .btnOrgSubmit {
            width: 100% !important;
            min-width: 0 !important;
        }
}

@media (max-width: 430px) {
    .main-header {
        min-height: 105px !important;
    }

        .main-header p {
            font-size: 12px !important;
        }

    .orgreg2-header-art-wrap {
        display: none !important;
    }

    .step span {
        font-size: 9px !important;
    }

    .section {
        padding: 11px 10px 12px !important;
    }
}

/* ============================================================
        REFERENCE DESIGN OVERRIDES
        Visual/layout changes only. Existing Razor, AJAX, validation,
        package, category, upload and Turnstile logic is unchanged.
        ============================================================ */


/* Main two-column canvas */
.page {
    width: min(100%, 1200px) !important;
    margin: 10px auto 18px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0,1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
}

/* ============================================================
        SIDEBAR
        ============================================================ */
.sidebar {
    width: 220px !important;
    min-width: 220px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px 0 0 16px !important;
    background-color: #ebe5e1 !important;
    background-image: radial-gradient(circle, rgba(255,255,255,.65) 2.5px, transparent 3px) !important;
    background-size: 30px 30px !important;
    background-position: 15px 15px !important;
    box-shadow: 0 10px 35px rgba(25,50,65,.10) !important;
    position: relative !important;
}

.sidebar-reference-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: top center !important;
}

/* ============================================================
        MAIN PANEL
        ============================================================ */
.main {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 30px 20px 18px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(222,229,235,.90) !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 0 10px 35px rgba(25,50,65,.10) !important;
}

/* ============================================================
        HEADER
        ============================================================ */
.main-header {
    min-height: 155px !important;
    padding: 12px 16px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

    .main-header h1 {
        margin: 14px 0 12px !important;
        color: var(--navy) !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: clamp(27px,3vw,34px) !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
        letter-spacing: -.35px !important;
    }

        .main-header h1 .accent,
        .main-header .accent {
            color: #078d8d !important;
        }

    .main-header p {
        margin: 0 !important;
        color: #56677b !important;
        font-size: 15px !important;
    }

.orgreg2-header-art-wrap {
    width: 155px !important;
    min-width: 155px !important;
    height: 135px !important;
    position: relative !important;
    margin: -2px 0 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.orgreg2-header-glow {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(245,210,160,.25), rgba(255,255,255,0) 70%) !important;
}

.header-art-image {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 155px !important;
    height: 108px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
}

/* ============================================================
        STEPPER
        ============================================================ */
.stepper {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 1fr .9fr 1fr .9fr 1fr .9fr 1fr !important;
    align-items: start !important;
}

.step {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    color: #7c8796 !important;
}

    .step .dot {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        background: #fff !important;
        color: #778291 !important;
        border: 1px solid #d9e0e7 !important;
        box-shadow: 0 3px 8px rgba(24,50,68,.10) !important;
    }

        .step .dot svg {
            width: 20px !important;
            height: 20px !important;
        }

    .step span {
        margin-top: 7px !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    .step.active .dot,
    .step.completed .dot {
        background: #10aaa7 !important;
        color: #fff !important;
        border-color: #10aaa7 !important;
    }

    .step.active span,
    .step.completed span {
        color: #087f82 !important;
    }

.step-line {
    height: 2px !important;
    margin-top: 24px !important;
    background: #e2e7ec !important;
}

    .step-line.filled {
        background: #10aaa7 !important;
    }

/* ============================================================
        SECTIONS
        ============================================================ */
.section {
    margin: 0 0 9px !important;
    padding: 13px 15px 14px !important;
    border: 1px solid #e4e9ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 9px rgba(30,55,70,.035) !important;
}

    .section.tinted {
        background: #f5fcfc !important;
        border-color: #dcefed !important;
    }

    .section.warn {
        background: #fffaf4 !important;
        border-color: #f3e1ca !important;
    }

.section-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 13px !important;
    color: #087f82 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

    .section-title .ico {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 50% !important;
        background: #eaf8f7 !important;
        color: #079b9b !important;
    }

        .section-title .ico svg {
            width: 18px !important;
            height: 18px !important;
        }

/* ============================================================
        FIELDS
        ============================================================ */
.grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px 20px !important;
}

    .grid.cols-3 {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 10px 18px !important;
    }

.span-2 {
    grid-column: span 2 !important;
}

.field {
    min-width: 0 !important;
}

    .field > label:not(.legal-checkbox),
    .field label:not(.legal-checkbox) {
        display: block !important;
        margin: 0 0 5px !important;
        color: #22384d !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

.req {
    color: #ef5350 !important;
    margin-left: 2px !important;
}

.input-wrap {
    position: relative !important;
    width: 100% !important;
}

    .input-wrap .leading {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        width: 17px !important;
        height: 17px !important;
        transform: translateY(-50%) !important;
        color: #8b96a4 !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    width: 100% !important;
    height: 38px !important;
    padding: 7px 11px 7px 37px !important;
    border: 1px solid #d8e0e7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #26384b !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

select.form-control {
    padding-left: 30px !important;
}

.form-control::placeholder {
    color: #a2abb6 !important;
}

.form-control:focus {
    border-color: #66c8c6 !important;
    box-shadow: 0 0 0 3px rgba(16,170,167,.09) !important;
    outline: none !important;
}

.phone-field {
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr) !important;
    gap: 8px !important;
}

.isd-code-wrap .form-control {
    padding: 7px !important;
    text-align: center !important;
}

.number-wrap .form-control {
    padding-left: 37px !important;
}

.all-valid-regform {
    display: block !important;
    min-height: 0 !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* ============================================================
        LEGALLY REGISTERED BUSINESS
        Align the checkbox vertically with the ZIP Code field.
        ============================================================ */
.legal-business-field {
    padding-top: 20px !important;
    align-self: start !important;
}

    .legal-business-field .legal-checkbox {
        min-height: 38px !important;
        margin: 0 !important;
        padding: 9px 0 0 25px !important;
        position: relative !important;
        display: block !important;
        color: #26384b !important;
        font-size: 11px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }

        .legal-business-field .legal-checkbox input[type="checkbox"] {
            position: absolute !important;
            left: 0 !important;
            top: 11px !important;
            width: 15px !important;
            height: 15px !important;
            margin: 0 !important;
            /*opacity: 0 !important;*/
            z-index: 2 !important;
            cursor: pointer !important;
        }

    .legal-business-field .legal-checkmark {
        position: absolute !important;
        left: 0 !important;
        top: 10px !important;
        width: 15px !important;
        height: 15px !important;
        border: 1px solid #aeb8c3 !important;
        border-radius: 2px !important;
        background: #fff !important;
    }

    .legal-business-field .legal-checkbox input[type="checkbox"]:checked + .legal-checkmark {
        background: #0aa6a6 !important;
        border-color: #0aa6a6 !important;
    }

        .legal-business-field .legal-checkbox input[type="checkbox"]:checked + .legal-checkmark:after {
            content: "" !important;
            position: absolute !important;
            left: 4px !important;
            top: 1px !important;
            width: 5px !important;
            height: 9px !important;
            border: solid #fff !important;
            border-width: 0 2px 2px 0 !important;
            transform: rotate(45deg) !important;
        }

    .legal-business-field .legalText {
        display: inline !important;
    }

/* ============================================================
        CATEGORIES
        ============================================================ */
.cat-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .cat-grid::-webkit-scrollbar {
        display: none !important;
    }

.cat-chip {
    /* Sized as a share of the row's own width (not a fixed px) so exactly
       8 are always visible regardless of container width -- scrolling
       reveals the 9th and beyond. */
    flex: 0 0 calc((100% - 56px) / 8) !important;
    max-width: calc((100% - 56px) / 8) !important;
    min-height: 67px !important;
    padding: 8px 4px !important;
    border: 1px solid #dfe6eb !important;
    border-radius: 6px !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    color: #314255 !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

    .cat-chip:hover {
        border-color: #8bd2d0 !important;
        transform: translateY(-1px);
    }

    .cat-chip.selected {
        border-color: #12aaa7 !important;
        background: #effafa !important;
        box-shadow: inset 0 0 0 1px rgba(18,170,167,.12) !important;
    }

.cat-ico {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #f3f6f8 !important;
    color: #7d8795 !important;
}

    .cat-ico svg {
        width: 15px !important;
        height: 15px !important;
    }

.cat-chip.selected .cat-ico {
    background: #d8f4f2 !important;
    color: #0a9998 !important;
}
/* Each category gets its own accent colour like the reference design. */
#categoryGrid .cat-chip:nth-child(1) .cat-ico {
    background: #f0f5ff !important;
    color: #7188c8 !important;
}

#categoryGrid .cat-chip:nth-child(2) .cat-ico {
    background: #fff0e8 !important;
    color: #e88a46 !important;
}

#categoryGrid .cat-chip:nth-child(3) .cat-ico {
    background: #eaf9f7 !important;
    color: #1aa79e !important;
}

#categoryGrid .cat-chip:nth-child(4) .cat-ico {
    background: #fff3e5 !important;
    color: #e69b3d !important;
}

#categoryGrid .cat-chip:nth-child(5) .cat-ico {
    background: #f3edff !important;
    color: #846bc1 !important;
}

#categoryGrid .cat-chip:nth-child(6) .cat-ico {
    background: #f3edff !important;
    color: #8964c8 !important;
}

#categoryGrid .cat-chip:nth-child(7) .cat-ico {
    background: #eaf8f8 !important;
    color: #31a6a2 !important;
}

#categoryGrid .cat-chip:nth-child(8) .cat-ico {
    background: #edf3fb !important;
    color: #6682ad !important;
}

/* Keep the selected category clearly selected while retaining its accent. */
#categoryGrid .cat-chip.selected:nth-child(1) .cat-ico {
    background: #e2ecff !important;
    color: #5d78c2 !important;
}

#categoryGrid .cat-chip.selected:nth-child(2) .cat-ico {
    background: #ffe6d8 !important;
    color: #d97835 !important;
}

#categoryGrid .cat-chip.selected:nth-child(3) .cat-ico {
    background: #d8f4f2 !important;
    color: #0a9998 !important;
}

#categoryGrid .cat-chip.selected:nth-child(4) .cat-ico {
    background: #ffe9cd !important;
    color: #d88828 !important;
}

#categoryGrid .cat-chip.selected:nth-child(5) .cat-ico {
    background: #e8ddff !important;
    color: #7656b7 !important;
}

#categoryGrid .cat-chip.selected:nth-child(6) .cat-ico {
    background: #e8ddff !important;
    color: #7656b7 !important;
}

#categoryGrid .cat-chip.selected:nth-child(7) .cat-ico {
    background: #d9f2f1 !important;
    color: #168f8b !important;
}

#categoryGrid .cat-chip.selected:nth-child(8) .cat-ico {
    background: #e1ebf7 !important;
    color: #5b76a0 !important;
}
/* ============================================================
        PACKAGE / PAYMENT
        ============================================================ */
.split-2 {
    display: grid !important;
    grid-template-columns: 1fr .82fr !important;
    gap: 28px !important;
}

.warn-title {
    color: #d98b24 !important;
}

    .warn-title .ico {
        background: #fff0dd !important;
        color: #d98b24 !important;
    }

.pkg-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .pkg-row::-webkit-scrollbar {
        display: none !important;
    }

.pkg-card {
    position: relative !important;
    /* Sized as a share of the row's own width (not a fixed px) so exactly
       3 are always visible regardless of container width -- scrolling
       reveals the 4th and beyond. */
    flex: 0 0 calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    min-height: 86px !important;
    padding: 10px 12px !important;
    border: 1px solid #e6dfd5 !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: .18s ease !important;
}

    .pkg-card.selected {
        border-color: #13aaa8 !important;
        background: #f1fbfa !important;
        box-shadow: 0 2px 8px rgba(18,170,167,.08) !important;
    }

.pkg-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pkg-icon {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #fff3e2 !important;
    color: #e49a3c !important;
}

.pkg-card.selected .pkg-icon {
    background: #d7f5f2 !important;
    color: #079b98 !important;
}

.pkg-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.pkg-radio,
.radio-dot {
    width: 13px !important;
    height: 13px !important;
    border: 1px solid #b8c1ca !important;
    border-radius: 50% !important;
    background: #fff !important;
}

.pkg-card.selected .pkg-radio,
.pay-option.selected .radio-dot {
    border-color: #0ba3a2 !important;
    box-shadow: inset 0 0 0 3px #fff !important;
    background: #0ba3a2 !important;
}

.pkg-name {
    margin-top: 5px !important;
    color: #26384b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.pkg-price {
    margin-top: 3px !important;
    color: #6b7683 !important;
    font-size: 10px !important;
}

    .pkg-price b {
        color: #27394d !important;
        font-size: 12px !important;
    }

#payGroup {
    display: grid !important;
    gap: 9px !important;
}

.pay-option {
    min-height: 42px !important;
    padding: 7px 11px !important;
    border: 1px solid #e0e5e9 !important;
    border-radius: 7px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    color: #334558 !important;
    font-size: 12px !important;
}

    .pay-option.selected {
        border-color: #10aaa7 !important;
        background: #f1fbfa !important;
    }

.pay-left {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.pay-ico {
    width: 20px !important;
    height: 20px !important;
    display: grid !important;
    place-items: center !important;
    color: #079c9b !important;
}

    .pay-ico svg {
        width: 14px !important;
        height: 14px !important;
    }

/* ============================================================
        IDENTITY / UPLOAD
        ============================================================ */
.upload-box {
    height: 38px !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid #d9e1e7 !important;
    border-radius: 7px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 8px !important;
    cursor: pointer !important;
    color: #536476 !important;
    text-align: left !important;
    font-size: 12px !important;
    position: relative !important;
}

    .upload-box > svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        color: #7a5bc3 !important;
    }

    .upload-box .fname {
        color: #6d7886 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .upload-box.has-file .fname {
        color: var(--text, #1e3144) !important;
    }

    .upload-box input[type="file"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

.upload-clear {
    display: none;
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -9px !important;
    border-radius: 50% !important;
    background: #eef2f5 !important;
    color: #52606d !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

    .upload-clear svg {
        width: 10px !important;
        height: 10px !important;
    }

    .upload-clear:hover {
        background: #e2e8ec !important;
        color: var(--danger, #ef5350) !important;
    }

.upload-box.has-file .upload-clear {
    display: flex !important;
}

.upload-box.dragging {
    border-color: #11aaa8 !important;
    background: #effafa !important;
}

/* ============================================================
        CREDENTIALS
        ============================================================ */
#regStepSection-3 {
    background: #f5faff !important;
    border-color: #dceaf6 !important;
}

    #regStepSection-3 .section-title {
        color: #1188ce !important;
    }

        #regStepSection-3 .section-title .ico {
            color: #1188ce !important;
            background: #e6f3fd !important;
        }

/* ============================================================
        PASSWORD EYE ICONS
        The original HTML already contains both .toggle-eye buttons.
        ============================================================ */
#RPassword,
#ConfirmRPassword {
    padding-right: 42px !important;
}

.toggle-eye {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #7b8795 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    box-shadow: none !important;
}

    .toggle-eye:hover,
    .toggle-eye:focus {
        background: transparent !important;
        color: #087f82 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .toggle-eye svg {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        stroke: currentColor !important;
        fill: none !important;
    }

/* ============================================================
        SECURITY / CLOUDFLARE
        The existing Turnstile element/id is unchanged.
        ============================================================ */
.security-box {
    min-height: 68px !important;
    margin-top: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}

.security-left {
    display: none !important;
}

.cf-box {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#captcha1 {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

    #captcha1 iframe {
        max-width: 100% !important;
    }

#captchaError {
    margin-top: 3px !important;
    text-align: center !important;
}

/* ============================================================
        FOOTER
        ============================================================ */
.form-end {
    padding: 8px 0 0 !important;
}

.button-holder {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

    .button-holder > button {
        min-width: 155px !important;
        height: 34px !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5dd !important;
        background: #fff !important;
        color: #2e4052 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .button-holder > .btnOrgSubmit {
        min-width: 205px !important;
        border-color: #12aaa7 !important;
        background: linear-gradient(90deg,#13aaa7,#20c1b5) !important;
        color: #fff !important;
        box-shadow: 0 4px 9px rgba(18,170,167,.20) !important;
    }

    .button-holder a {
        color: inherit !important;
        text-decoration: none !important;
    }

.orgreg2-login-hint {
    margin: 9px 0 0 !important;
    text-align: center !important;
    color: #697687 !important;
    font-size: 11px !important;
}

    .orgreg2-login-hint a {
        color: #078f91 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

/* Autocomplete */
.ui-autocomplete {
    z-index: 99999 !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    border: 1px solid #dce4ea !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(25,50,65,.12) !important;
    font-size: 12px !important;
}

.ui-menu-item-wrapper {
    padding: 8px 10px !important;
}

/* ============================================================
        RESPONSIVE
        ============================================================ */
@media (max-width: 900px) {
    .page {
        width: calc(100% - 20px) !important;
        grid-template-columns: 185px minmax(0,1fr) !important;
    }

    .sidebar {
        width: 185px !important;
        min-width: 185px !important;
    }

    .main {
        padding: 22px 14px 16px !important;
    }

    .split-2 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

@media (max-width: 700px) {
    .page {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .sidebar {
        display: none !important;
    }

    .main {
        width: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 18px 12px !important;
    }

    .main-header {
        min-height: 120px !important;
        padding: 0 4px !important;
    }

        .main-header h1 {
            font-size: 25px !important;
        }

    .orgreg2-header-art-wrap {
        width: 95px !important;
        min-width: 95px !important;
        height: 90px !important;
    }

    .header-art-image {
        width: 95px !important;
        height: 75px !important;
    }

    .stepper {
        padding: 0 3px !important;
        grid-template-columns: 1fr .45fr 1fr .45fr 1fr .45fr 1fr !important;
    }

    .step .dot {
        width: 38px !important;
        height: 38px !important;
    }

    .step span {
        font-size: 10px !important;
    }

    .step-line {
        margin-top: 19px !important;
    }

    .grid,
    .grid.cols-3 {
        grid-template-columns: 1fr !important;
    }

    .span-2 {
        grid-column: auto !important;
    }

    .legal-business-field {
        padding-top: 0 !important;
    }

    .carousel-row {
        padding: 0 30px !important;
    }

    .carousel-arrow {
        width: 28px !important;
        height: 28px !important;
    }

        .carousel-arrow svg {
            width: 14px !important;
            height: 14px !important;
        }

    .security-box {
        min-height: 65px !important;
    }

    .button-holder {
        flex-direction: column-reverse !important;
    }

        .button-holder > button,
        .button-holder > .btnOrgSubmit {
            width: 100% !important;
            min-width: 0 !important;
        }
}

@media (max-width: 430px) {
    .main-header {
        min-height: 105px !important;
    }

        .main-header p {
            font-size: 12px !important;
        }

    .orgreg2-header-art-wrap {
        display: none !important;
    }

    .step span {
        font-size: 9px !important;
    }

    .section {
        padding: 11px 10px 12px !important;
    }
}



/* ============================================================
   FIX 2: Compare plans modal — the title, subtitle, close button
   and feature list had no styling at all (only the outer card/grid
   did), so it rendered as plain unstyled text. Filling in just
   those missing pieces, matching this file's existing palette.
   ============================================================ */
.pkg-compare-title {
    margin: 0 !important;
    color: var(--navy) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}

.pkg-compare-subtitle {
    margin: 4px 0 0 !important;
    color: var(--muted) !important;
    font-size: 12.5px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

.pkg-compare-close {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: grid !important;
    place-items: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: #eef2f5 !important;
    color: #52606d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    margin: 0 !important;
}

    .pkg-compare-close:hover {
        background: #e2e8ec !important;
        color: var(--navy) !important;
    }

.pkg-compare-features ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkg-compare-features li {
    position: relative !important;
    padding: 4px 0 4px 22px !important;
    border: none !important;
}

    .pkg-compare-features li::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 9px !important;
        width: 14px !important;
        height: 14px !important;
        border-radius: 50% !important;
        background-color: var(--teal-soft) !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aa6a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 8px !important;
    }

/* ============================================================
   FIX: too much empty space between the buttons and the bottom
   of the white card on short/empty form states. The sidebar and
   .main are stretched to equal height by the grid, but the form
   content doesn't always reach that height — so the button row
   was left floating with dead space below it. Anchoring the
   button row to the bottom of the card (instead of right after
   the last section) removes that dead gap regardless of how
   tall the form content currently is.
   ============================================================ */
.main {
    display: flex !important;
    flex-direction: column !important;
}

#regForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.form-end {
    margin-top: auto !important;
}

.topHeadLogo {
    padding-top: 5px;
    max-height: 40px;
}

.topHeadSmlLogo {
    display: none;
    max-height: 100%;
}

.topMostNav {
    min-height: 50px;
    max-height: 80px;
    background: rgba(236, 255, 232, 1);
    background: -moz-linear-gradient(to right, #3a3b5e 0%, #101130 64%, #101130 100%);
    background: -webkit-gradient(to right, #3a3b5e 0%, #101130 64%, #101130 100%);
    background: -webkit-linear-gradient(to right, #3a3b5e 0%, #101130 64%, #101130 100%);
    background: -o-linear-gradient(to right, #3a3b5e 0%, #101130 64%, #101130 100%);
    background: -ms-linear-gradient(to right, #3a3b5e 0%, #101130 64%, #101130 100%);
    background: linear-gradient(to right, #3a3b5e 0%, #101130 64%, #101130 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecffe8', endColorstr='#a1cc99', GradientType=1 );
}

.modPaddLeft {
    padding-left: 1px;
}

.topInfoSerchDiv {
    width: 70px;
    margin-right: 1%;
    padding-top: 11px;
    float: right;
    display: none;
}

.topSearchInput {
    position: relative;
    top: 2px;
    left: -16px;
}

#topInfoSearchArea input[type=search] {
    width: 54px;
    color: #4d4d4d;
    cursor: pointer;
    height: 15px;
    border: 0px;
    background: #f6f5f5;
}

#topInfoSearchArea input[type=search] {
    border: solid 1px #ccc;
    padding: 5px 2px 5px 5px;
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

#topInfoSearchArea input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 12px;
}

#topInfoSearchArea input {
    outline: none;
}

.topSearchIcon {
    color: #fff;
}

.registration_banner {
    height: 250px;
}

    .registration_banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-autocomplete {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    /* Width intentionally left unconstrained: jQuery UI sets it inline
       to match the input's own width now that position:absolute above
       is fixed (that's what made its width calc unreliable before). */
    box-sizing: border-box !important;
}

    .ui-autocomplete .ui-menu-item {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ui-autocomplete .divcountrySearchContainMain,
    .ui-autocomplete .divSearchContain,
    .ui-autocomplete .SearchContaintxt {
        display: block !important;
        width: 100% !important;
    }

        .ui-autocomplete .SearchContaintxt a {
            display: block !important;
            padding: 8px 12px !important;
            color: var(--text) !important;
            text-decoration: none !important;
            font-size: 12.5px !important;
            cursor: pointer !important;
        }

    .ui-autocomplete .divEventName {
        color: var(--text) !important;
        width: auto !important;
        white-space: normal !important;
    }

    .ui-autocomplete .ui-menu-item:hover .SearchContaintxt a,
    .ui-autocomplete .ui-menu-item.ui-state-focus .SearchContaintxt a,
    .ui-autocomplete .ui-menu-item.ui-state-active .SearchContaintxt a {
        background: var(--teal-soft) !important;
        color: var(--teal-dark) !important;
    }

/* ============================================================
   State / City autocomplete: small loading spinner shown next
   to the field while the suggestions are being fetched.
   ============================================================ */
.field-loader {
    display: none;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    width: 15px !important;
    height: 15px !important;
    margin-top: -8px !important;
    border: 2px solid #d9e0e7 !important;
    border-top-color: var(--teal, #0aa6a6) !important;
    border-radius: 50% !important;
    animation: orgreg2-spin .7s linear infinite !important;
    pointer-events: none !important;
}

    .field-loader.is-active {
        display: block !important;
    }

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

/* ============================================================
   Section quick-nav arrows flanking Business Categories and
   Select Package. Pure scroll convenience -- next/previous jump
   between the adjacent parts of the form, no effect on the data.
   Sit to the left/right of the row, vertically centered against
   it, carousel-style.
   ============================================================ */
.carousel-row {
    position: relative !important;
    padding: 0 40px !important;
}

.carousel-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #dde5ea !important;
    background: #fff !important;
    color: #52606d !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(30,55,70,.10) !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
    z-index: 3 !important;
}

    .carousel-arrow svg {
        width: 16px !important;
        height: 16px !important;
    }

    .carousel-arrow.carousel-prev {
        left: 0 !important;
    }

    .carousel-arrow.carousel-next {
        right: 0 !important;
    }

    .carousel-arrow:hover {
        background: var(--teal, #0aa6a6) !important;
        border-color: var(--teal, #0aa6a6) !important;
        color: #fff !important;
        box-shadow: 0 4px 14px rgba(10,166,166,.28) !important;
    }

    .carousel-arrow:active {
        transform: translateY(-50%) scale(0.92) !important;
    }