/* ============================================================
   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%;
    overflow-x: hidden;
}

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: auto !important;
}
@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;
        max-width: 100% !important;
        overflow-wrap: break-word !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 hidden -- navigation is via the prev/next arrows only,
       which the page's JS already shows/hides based on overflow. */
    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: minmax(0, 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: minmax(0, 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;
        max-width: 100% !important;
        overflow-wrap: break-word !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 hidden -- navigation is via the prev/next arrows only,
       which the page's JS already shows/hides based on overflow. */
    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: minmax(0, 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: minmax(0, 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;
    }

/* ============================================================
   RESPONSIVE HARDENING PASS
   Design/layout-only additions -- no markup, JS, controller or
   validation logic touched. Appended last so it wins over the
   earlier rules of the same specificity above. Fixes:
   - stepper labels ("Account Credentials", etc.) with no room to
     wrap on small phones, which is what pushed the last step
     toward/off the edge of the screen;
   - category/package carousel items forced to a fixed count (8 / 3)
     regardless of viewport, making them unreadably narrow on phones;
   - the Identity Verification / Credentials 3-column grid jumping
     straight from 3 columns to 1 with nothing in between for tablets;
   - touch targets and a banner sized for desktop on small screens.
   ============================================================ */

/* Tablet: 2-column fallback for the 3-column grid instead of
   staying at 3 columns all the way down to the 700px breakpoint. */
@media (max-width: 900px) and (min-width: 701px) {
    .grid.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* The stepper's connector-line columns (.9fr each) were leaving
       each dot/label column only ~72px wide at this width, which is
       narrower than words like "Information" or "Credentials" at the
       base 13px size -- forcing an awkward mid-word break. Give the
       label columns more of the row and the connectors less, and
       trim the font slightly, so the two-word labels wrap cleanly
       between words instead of inside one. */
    .stepper {
        padding: 0 6px !important;
        grid-template-columns: 1fr .5fr 1fr .5fr 1fr .5fr 1fr !important;
    }

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

@media (max-width: 700px) {
    /* Show fewer category chips / package cards at once so each one
       stays legible -- the existing prev/next arrows and horizontal
       scroll still reveal the rest. */
    .cat-chip {
        flex: 0 0 calc((100% - 16px) / 3) !important;
        max-width: calc((100% - 16px) / 3) !important;
    }

    .pkg-card {
        flex: 0 0 calc((100% - 12px) / 2) !important;
        max-width: calc((100% - 12px) / 2) !important;
    }

    /* Slightly taller, easier to tap on a phone. */
    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control,
    .upload-box {
        height: 42px !important;
        min-height: 42px !important;
    }

    .registration_banner {
        height: 150px !important;
    }

    /* This bottom padding was sized for the desktop layout; on phones
       it just leaves a long blank scroll past the form. */
    body {
        padding-bottom: 60px !important;
    }
}

/* Small phones: give the stepper's dot/label columns more of the row
   and the connector lines less, so two-word labels have room to wrap
   onto a second line instead of crowding the edge of the row. */
@media (max-width: 430px) {
    .stepper {
        padding: 0 2px !important;
        grid-template-columns: 1fr .32fr 1fr .32fr 1fr .32fr 1fr !important;
    }

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

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

    .registration_banner {
        height: 120px !important;
    }
}

/* ============================================================
   Header logo: Bootstrap collapses its column to col-xs-1 (1/12
   width) below the 768px "sm" breakpoint, which is far narrower
   than the wordmark logo needs. Since .logo.img-responsive caps
   the image at max-width:100% of that column, the logo was
   shrinking down to a few px and effectively disappearing. Give
   it an explicit size that ignores the cramped column instead --
   it simply sits within the nav bar's own height (50-80px), same
   as any other row content.
   ============================================================ */
@media (max-width: 767px) {
    .topHeadLogo {
        max-width: none !important;
        width: auto !important;
        height: 32px !important;
        max-height: 32px !important;
    }
}