/* =============================================
   NUMBER PEOPLE REGISTER FORM
   CSS with brand variables for multi-branding
   ============================================= */

/* -- Brand Variables -- */
:root {
    /* Primary brand color */
    --np-primary: #7c3aed;
    --np-primary-hover: #6d28d9;
    --np-primary-light: #ede9fe;
    --np-primary-rgb: 124, 58, 237;

    /* Secondary / dark brand color */
    --np-secondary: #1e1b4b;
    --np-secondary-light: #312e81;

    /* Success / completed */
    --np-success: #22c55e;
    --np-success-hover: #16a34a;

    /* Error / alert */
    --np-error: #ff763a;
    --np-error-bg: #ffebe2;
    --np-error-light: #fff8f5;

    /* Text hierarchy */
    --np-text-heading: #1e1b4b;
    --np-text-body: #36393b;
    --np-text-muted: #64748b;
    --np-text-light: #94a3b8;
    --np-text-placeholder: #9ca3af;

    /* Backgrounds */
    --np-bg-modal: #f8f7ff;
    --np-bg-overlay: rgba(30, 27, 75, 0.6);
    --np-bg-card: #ffffff;
    --np-bg-input: #fafbfc;
    --np-bg-highlight: #fef9e7;
    --np-bg-loader: rgba(10, 37, 64, 0.8);

    /* Borders */
    --np-border: #e5e7eb;
    --np-border-light: #ede9fe;
    --np-border-input: #d1d5db;

    /* Shadows */
    --np-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --np-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --np-shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.06);
    --np-shadow-primary: 0 4px 14px rgba(var(--np-primary-rgb), 0.3);

    /* Border radius */
    --np-radius-xs: 6px;
    --np-radius-sm: 8px;
    --np-radius-md: 10px;
    --np-radius-lg: 12px;
    --np-radius-xl: 14px;
    --np-radius-2xl: 16px;
    --np-radius-pill: 50px;

    /* Typography */
    --np-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --np-font-heading: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    --np-font-display: 'Roboto Slab', Arial, Helvetica, sans-serif;

    /* Font sizes */
    --np-text-xs: 0.78em;
    --np-text-sm: 0.85em;
    --np-text-base: 14px;
    --np-text-md: 0.92em;
    --np-text-lg: 1.05em;
    --np-text-xl: 1.2em;
    --np-text-2xl: 1.5em;

    /* Step button colors */
    --np-btn-back-bg: #f1f5f9;
    --np-btn-back-text: #334155;
    --np-btn-back-hover: #e2e8f0;
    --np-btn-next-bg: var(--np-primary);
    --np-btn-next-hover: var(--np-primary-hover);

    /* Transitions */
    --np-transition: all 0.2s ease-in-out;
    --np-transition-bounce: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Global polish -- */
.np-modal *,
.np-modal *::before,
.np-modal *::after {
    box-sizing: border-box;
}
.np-modal {
    font-family: var(--np-font);
    color: var(--np-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -- Semantic UI overrides -- */
.np-modal .ui.pointing.label:before, .ui.steps .step:after {
    z-index: 0;
}
.np-modal .ui.tabular.menu .item {
    font-weight: bold;
}
.np-modal .ui.selection.dropdown {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    display: block;
    width: 80%!important;
    border-radius: var(--np-radius-md);
    border: 0;
    box-shadow: var(--np-shadow-sm);
}
.np-modal .ui.selection.dropdown:hover,
.np-modal .ui.selection.dropdown:focus,
.np-modal .ui.selection.dropdown:active {
    box-shadow: var(--np-shadow-md);
}
.np-modal .ui.selection.active.dropdown,
.np-modal .ui.selection.active.dropdown:hover,
.np-modal .ui.selection.active.dropdown:focus,
.np-modal .ui.selection.active.dropdown:active {
    border: 0;
    box-shadow: var(--np-shadow-md);
}
.np-modal .ui.selection.active.dropdown .menu,
.np-modal .ui.selection.active.dropdown:hover .menu,
.np-modal .ui.selection.active.dropdown:focus .menu,
.np-modal .ui.selection.active.dropdown:active .menu {
    border: 0;
    box-shadow: var(--np-shadow-md);
}
.np-modal .ui.search.selection.dropdown > input.search {
    padding: 0.78571429em 2.1em 0.78571429em 1em!important;
}
.np-modal .number-selector-section h2 {
    margin: 5%;
    font-size: var(--np-text-2xl);
}
.np-modal .description p {
    color: white;
}
.np-modal .nsAccordionLabel {
    color: white;
}
.np-modal .nsAccordionLabel i {
    margin-right: 2%;
}
.np-modal .ui.three.cards {
    justify-content: space-evenly;
}
.np-modal .ui.attached.steps .step:first-child {
    border-radius: 0;
}
.np-modal .ui.attached.steps .step:last-child {
    border-radius: 0 2.285714rem 0 0;
}
.np-modal .ui.attached.steps {
    border-radius: 0;
}
.np-modal .ui.message {
    border-radius: 2.285714rem;
}
.np-modal .ui.form {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2%;
}
@media only screen and (max-width: 600px) {
    .np-modal .ui.form {
        max-width: 90%;
    }
}
.np-modal .ui.card.cardhighlight, .ui.cards a.card.cardhighlight:hover {
    box-shadow: 0 0 10px 5px var(--np-primary);
}
.np-modal .modal-backdrop {
    z-index: -1;
}
.np-modal .number-selector-section {
    z-index: 10;
}

/* Circle Steps */
.np-modal .circle-steps {
    max-width: 45em;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Legacy Tabs */
.np-modal .nav-tabs.nav-justified>li>a {
    background-color: #F1F6F9;
    font-weight: bold;
    color: #BBB;
    border-color: white;
    border-width: 5px 3px;
    border-style: solid;
    cursor: pointer;
}
.np-modal .nav-tabs.nav-justified>li.active>a,
.np-modal .nav-tabs.nav-justified>li.active>a:hover,
.np-modal .nav-tabs.nav-justified>li.active>a:focus {
    background-color: var(--tab-body-color);
    border: none;
    border-bottom: 5px solid var(--tab-body-color);
    font-weight: bold;
    color: black;
    cursor: pointer;
}
.np-modal .steps-buttons .btn {
    border: none;
    color: white;
    background-color: var(--secondary-color);
}
.np-modal .steps-buttons .btn-default:hover,
.np-modal .steps-buttons .btn-default:active,
.np-modal .steps-buttons .btn-default:focus,
.np-modal .steps-buttons .btn-default.disabled:hover,
.np-modal .steps-buttons .btn-default.disabled:active,
.np-modal .steps-buttons .btn-default.disabled:focus {
    background: var(--secondary-color);
}
.np-modal .form-shaded {
    display: block;
    background-color: var(--tab-body-color);
    padding: 15px;
    font-size: 1em;
}
.np-modal .voip-type-cards .ui.card,
.np-modal .voip-type-cards a.ui.card:hover,
.np-modal .ui.cards.voip-type-cards>.ui.card>.content {
    color: white;
    border: none;
    background-color: var(--np-primary);
    text-decoration: none;
    text-align: center;
}
.np-modal .sidetext2 {
    background-color: white;
}

/* -- Modal overlay -- */
#selector-modal {
    padding: 10em 1em !important;
    background-color: var(--np-bg-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media only screen and (max-width: 600px) {
    #selector-modal {
        padding: 10px !important;
    }
}

.np-modal .g-recaptcha {
    margin: 20px auto;
}
.np-modal .ui.message .list:not(.ui) li:before {
    position: relative;
}
.np-modal .ui.selection.dropdown .menu > .item {
    font-size: 1.5rem;
}
@media only screen and (max-width: 850px) {
    .np-modal .ui.selection.dropdown .menu > .item {
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 700px) {
    .np-modal .ui.selection.dropdown .menu > .item {
        font-size: 1.1em;
    }
}

/* -- intlTelInput flags -- */
.np-modal .iti__flag {background-image: url("https://content.si-p.co.uk/js/int-tel-input/img/flags.png");}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .np-modal .iti__flag {background-image: url("https://content.si-p.co.uk/js/int-tel-input/img/flags@2x.png");}
}
.np-modal .iti {
    width: 100%;
    color: black;
}
.np-modal .ui.form input.phone-input {
    padding-left: 4em;
}
.np-modal .hide-country .iti__flag-container {
    display: none;
}
.modal { -webkit-overflow-scrolling: touch; }
.np-modal .iti input::placeholder {
    color: rgb(153, 153, 153);
}
/* =============================================
   MODAL STRUCTURE
   ============================================= */
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 1;
}
.modal-open {
    overflow: hidden;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1500!important;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0 auto;
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none;
    border-radius: var(--np-radius-2xl);
    outline: 0;
    box-shadow: var(--np-shadow-lg);
    max-width: 1280px;
    margin: 0 auto;
    overflow: visible;
}
.modal-content .ui.dropdown .menu {
    max-height: 300px;
    overflow-y: auto;
}
.ui.inverted.dimmer {
    border-radius: var(--np-radius-2xl);
    background: var(--np-bg-loader);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ui.text.loader {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
.modal-header {
    min-height: 16.43px;
    padding: 15px;
    border-bottom: 1px solid var(--np-border);
}
.modal-header .close {
    margin-top: -2px;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid var(--np-border);
}
.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px;
}
.modal-footer .btn-group .btn+.btn {
    margin-left: -1px;
}
.modal-footer .btn-block+.btn-block {
    margin-left: 0;
}
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 0 auto;
    }
    .modal-content {
        box-shadow: var(--np-shadow-lg);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}
/* =============================================
   SIGN UP MODAL STYLES
   ============================================= */

/* -- Links -- */
.np-modal a {
    color: var(--np-secondary);
    transition: var(--np-transition);
}
.np-modal a:hover,
.np-modal a:focus,
.np-modal a:active {
    color: var(--np-primary-hover);
}

/* -- Headings -- */
.np-modal h2,
.np-modal h3 {
    line-height: 1.3em;
    color: var(--np-text-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* -- Utility alignment -- */
.np-modal .np-modal-align-center {
    text-align: center;
}
.np-modal .np-modal-margin-above {
    margin-top: 1em;
}
.np-modal .np-modal-margin-below {
    margin-bottom: 1em;
}

/* -- Modal content wrapper -- */
.modal-content.np-modal-sign-up {
    background: var(--np-bg-modal);
    padding: 0;
    font-size: 1rem;
    border-radius: var(--np-radius-2xl);
    border: none;
    box-shadow: var(--np-shadow-lg);
    overflow: visible;
}
@media only screen and (max-width: 550px) {
    .modal-content.np-modal-sign-up {
        padding: 0;
        border-radius: 16px;
    }
}

/* -- Column layout -- */
.modal-colset {
    display: flex;
}
.modal-colset.modal-colset-1 {
    max-width: 1200px;
    margin: 0 auto;
}
.modal-colset.modal-colset-1 .modal-col-1 {
    width: 50%;
    margin: auto 0;
}
.modal-colset.modal-colset-1 .modal-col-2 {
    width: 50%;
    margin: auto 0;
}
@media only screen and (max-width: 720px) {
    .modal-colset,
    .np-rate-checker-colset {
        flex-wrap: wrap;
    }
    .modal-colset.modal-colset-1 .modal-col-1 {
        width: 100%;
        margin-bottom: 30px;
    }
    .modal-colset.modal-colset-1 .modal-col-2 {
        width: 100%;
    }
}
.modal-colset.modal-colset-1 .modal-col-2 img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}

/* -- Main heading -- */
.np-modal-main-heading {
    font-family: var(--np-font-display);
    font-weight: 700;
    font-size: var(--np-text-2xl);
    color: var(--np-text-heading);
    text-align: center;
    margin: 0;
}
.np-modal-area-code {
    font-size: var(--np-text-lg);
    text-align: center;
    margin: 0 0 20px 0;
    display: block;
    color: var(--np-text-heading);
    margin-top: 2%;
}
.ui.huge.search {
    font-size: 1.42857143em!important;
}
@media only screen and (max-width: 850px) {
    .ui.huge.search {
        font-size: 1.2em!important;
    }
}
@media only screen and (max-width: 700px) {
    .ui.huge.search {
        font-size: 1.1em!important;
    }
}

/* =============================================
   BREADCRUMBS / STEPPER
   ============================================= */
.np-modal-breadcrumbs {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    border-radius: 0;
    font-size: 1em;
    gap: 0;
    position: relative;
    overflow-x: auto;
    position: relative;
    z-index: 10;
    margin: 0!important;
    padding: 20px 30px!important;
    background-color: var(--np-primary);
    border-radius: var(--np-radius-2xl) var(--np-radius-2xl) 0 0;
}
.getstartedbox {
    padding: 0;
}
@media only screen and (max-width: 900px) {
    .np-modal-breadcrumbs {
        padding: 16px 16px !important;
        justify-content: flex-start;
    }
}
@media only screen and (max-width: 720px) {
    .np-modal-breadcrumbs {
        padding: 12px 12px !important;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }
}
.np-modal-breadcrumbs li {
    list-style-type: none;
    padding: 8px 14px 8px 36px;
    margin: 0;
    color: var(--np-text-light);
    font-size: var(--np-text-xs);
    position: relative;
    font-weight: 500;
    opacity: 1;
    transition: var(--np-transition);
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--np-radius-sm);
}
.np-modal-breadcrumbs li:hover {
    color: var(--np-text-muted);
}
.np-modal-breadcrumbs li.active {
    color: var(--np-text-muted);
    font-weight: 700;
    background: transparent;
}
.np-modal-breadcrumbs li.completed {
    color: var(--np-success);
}
.np-modal-breadcrumbs li.disabled {
    cursor: default;
}
.np-modal-breadcrumbs li:before {
    content: '';
    display: block;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--np-bg-card);
    border: 2px solid var(--np-border-input);
    border-radius: 50%;
    transition: var(--np-transition);
}
.np-modal-breadcrumbs li.active:before {
    background-color: var(--np-text-muted);
    border-color: var(--np-text-muted);
    box-shadow: 0 0 0 4px rgba(var(--np-primary-rgb), 0.15);
}
.np-modal-breadcrumbs li.completed:before {
    border: 0;
    background-color: var(--np-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.np-modal-breadcrumbs li .step-name {
    white-space: nowrap;
}
@media only screen and (max-width: 800px) {
    .np-modal-breadcrumbs li {
        font-size: 0.8em !important;
        padding: 8px 12px 8px 34px;
    }
}
@media only screen and (max-width: 600px) {
    .np-modal-breadcrumbs li {
        font-size: 0.75em !important;
    }
}
@media only screen and (max-width: 500px) {
    .np-modal-breadcrumbs li {
        font-size: 0.7em !important;
        margin: 2px 0;
        padding: 6px 10px 6px 30px;
    }
    .np-modal-breadcrumbs li:before {
        width: 14px;
        height: 14px;
        left: 8px;
    }
}
/* =============================================
   TABS
   ============================================= */
.np-modal-nav-tabs {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    list-style-type: none;
    padding: 0!important;
}
.np-modal-nav-tabs li {
    list-style-type: none;
    border-radius: 0;
    text-align: center;
    padding: 0;
    flex-grow: 1;
    margin-right: 10px;
    border-bottom: 10px rgba(var(--np-primary-rgb), 0.2) solid;
    overflow: hidden;
}
.np-modal-nav-tabs li:hover,
.np-modal-nav-tabs li:focus,
.np-modal-nav-tabs li:active,
.np-modal-nav-tabs li.active {
    border-bottom: 10px var(--np-primary) solid;
}
@media only screen and (max-width: 500px) {
    .np-modal-nav-tabs li {
        margin-right: 5px;
        border-bottom: 5px transparent solid;
    }
    .np-modal-nav-tabs li:hover,
    .np-modal-nav-tabs li:focus,
    .np-modal-nav-tabs li:active,
    .np-modal-nav-tabs li.active {
        border-bottom: 5px var(--np-primary) solid;
    }
}
.np-modal-nav-tabs li:last-child {
    margin-right: 0;
}
.np-modal-nav-tabs li a {
    background-color: var(--np-bg-card);
    display: block;
    padding: 10px;
    width: 100%;
    color: var(--np-text-heading);
    font-weight: 700;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    border-radius: var(--np-radius-md) var(--np-radius-md) 0 0;
}
@media only screen and (max-width: 850px) {
    .np-modal-nav-tabs li a { font-size: 1.15em; line-height: 1.2em; }
}
@media only screen and (max-width: 600px) {
    .np-modal-nav-tabs li a { font-size: 1em; line-height: 1.2em; }
}
@media only screen and (max-width: 500px) {
    .np-modal-nav-tabs li a { font-size: 0.9em; line-height: 1.2em; }
}
@media only screen and (max-width: 380px) {
    .np-modal-nav-tabs li a { font-size: 0.8em; line-height: 1.2em; }
}

/* -- Tab content -- */
.tab-content {
    background-color: var(--np-bg-card);
    padding: 35px;
    max-width: 1060px;
    margin: 0 auto 20px auto;
    border-radius: 0 0 var(--np-radius-md) var(--np-radius-md);
}
@media only screen and (max-width: 500px) {
    .tab-content {
        padding: 20px;
        max-width: 1200px;
    }
}
.tab-content .ui.basic.segment {
    padding: 0!important;
}

/* -- intlTelInput country list -- */
.np-modal .iti__country-list {
    list-style-type: none!important;
    margin: 0!important;
    padding: 0!important;
    z-index: 100!important;
    font-size: var(--np-text-base)!important;
}
.np-modal .iti__flag-container .iti__selected-flag {
    border-radius: var(--np-radius-pill) 0 0 var(--np-radius-pill)!important;
    overflow: hidden;
}

/* -- Two-field number layout -- */
.np-modal .np-modal-numbers-two-fields {
    display: flex;
    flex-direction: row;
}
.np-modal .np-modal-numbers-two-fields .np-modal-numbers-field {
    flex: 0 1 auto;
    width: 50%;
    margin: 0 5px 10px 5px;
}
@media only screen and (max-width: 750px) {
    .np-modal .np-modal-numbers-two-fields {
        flex-wrap: wrap;
    }
    .np-modal .np-modal-numbers-two-fields .np-modal-numbers-field {
        width: 100%;
    }
}

/* =============================================
   NUMBER CHOICE BUTTON
   ============================================= */
.number-choice-button {
    background-color: var(--np-primary-light);
    border: none;
    font-weight: bold;
    padding: 0;
    margin: 0;
    width: auto;
    float: none;
    color: var(--np-text-heading);
    border-radius: var(--np-radius-md);
    overflow: hidden;
    cursor: pointer;
}
@media only screen and (max-width: 550px) {
    .number-choice-button { font-size: 0.9em; }
}
.number-choice-button div {
    display: inline-block;
    padding: 10px;
    font-size: 16px;
}
.number-choice-button.active-number {
    background-color: var(--np-primary-light);
    border-color: var(--np-primary);
}
.number-choice-button .btn-label {
    background-color: var(--np-secondary);
    border-radius: 0;
    padding: 10px 20px;
    color: #ffffff;
    transition: var(--np-transition);
}
.number-choice-button:hover .btn-label,
.number-choice-button:focus .btn-label,
.number-choice-button:active .btn-label {
    background-color: var(--np-secondary-light);
}
.number-choice-button.active-number .btn-label {
    background-color: var(--np-primary);
}

/* -- Number pagination -- */
.np-numbers-navigation-container {
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}
.np-numbers-navigation-container .np-number-pagination-button {
    width: 50%;
    position: relative;
    color: var(--np-text-body);
    font-weight: 600;
    font-size: var(--np-text-lg);
    display: flex;
    align-items: center;
    transition: var(--np-transition);
}
.np-numbers-navigation-container .np-number-pagination-button:hover,
.np-numbers-navigation-container .np-number-pagination-button:focus,
.np-numbers-navigation-container .np-number-pagination-button:active {
    color: var(--np-text-heading);
}
.np-numbers-navigation-container .np-number-pagination-button-previous {
    justify-content: left;
    padding: 0 15px 0 30px;
}
.np-numbers-navigation-container .np-number-pagination-button-next {
    justify-content: right;
    padding: 0 30px;
}
.np-numbers-navigation-container .np-number-pagination-button-previous:before {
    content: '\f053';
    font-family: Icons;
    font-size: 1.2em;
    color: var(--np-text-heading);
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.np-numbers-navigation-container .np-number-pagination-button-next:before {
    content: '\f054';
    font-family: Icons;
    font-size: 1.2em;
    color: var(--np-text-heading);
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* -- Fullwidth text/link -- */
.np-modal-fullwidth-text {
    display: block;
    color: var(--np-text-body);
    text-align: center;
    font-weight: 400;
    font-size: var(--np-text-lg);
}
.np-modal-fullwidth-link {
    display: block;
    color: #fff!important;
    text-align: center;
    font-weight: 600;
    font-size: var(--np-text-lg);
    background-color: var(--np-secondary);
    padding: 1%;
    border-radius: var(--np-radius-md);
    transition: var(--np-transition);
}
.np-modal-fullwidth-link:hover,
.np-modal-fullwidth-link:focus,
.np-modal-fullwidth-link:active {
    background-color: var(--np-primary);
    color: #fff!important;
}
.np-modal-contact-link {
    margin: 20px 0 0 0;
}

/* =============================================
   STEP BUTTONS (Back / Continue)
   ============================================= */
.np-modal-steps-buttons-container {
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-left: 5em;
    margin-right: 5em;
    margin-bottom: 2em;
}
.np-modal-steps-buttons-container .np-modal-steps-button {
    width: auto;
    position: relative;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.88em;
    letter-spacing: 0.02em;
    transition: var(--np-transition-bounce);
    text-transform: none;
    text-align: center;
    border-radius: var(--np-radius-md);
    padding: 12px 32px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    text-decoration: none;
}
.np-modal-steps-buttons-container .np-modal-steps-button:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
@media only screen and (max-width: 700px) {
    .np-modal-steps-buttons-container {
        margin-left: 1em!important;
        margin-right: 1em!important;
    }
}
@media only screen and (max-width: 500px) {
    .np-modal-steps-buttons-container {
        margin-left: 0;
        margin-right: 0;
        gap: 10px;
    }
    .np-modal-steps-buttons-container .np-modal-steps-button {
        flex: 1 1 0;
        font-size: 0.85em;
        padding: 12px 16px;
    }
}
@media only screen and (max-width: 400px) {
    .np-modal-steps-buttons-container .np-modal-steps-button {
        font-size: 0.82em;
        padding: 11px 12px;
    }
}
.np-modal-steps-buttons-container .np-modal-steps-button-previous {
    background: var(--np-btn-back-bg);
    color: var(--np-btn-back-text);
    box-shadow: none;
}
.np-modal-steps-buttons-container .np-modal-steps-button-previous:hover {
    background: var(--np-btn-back-hover);
    box-shadow: none;
}
.np-modal-steps-buttons-container .np-modal-steps-button-next {
    background: linear-gradient(135deg, var(--np-primary) 0%, var(--np-primary-hover) 100%);
    box-shadow: var(--np-shadow-primary);
    color: #ffffff;
}
.np-modal-steps-buttons-container .np-modal-steps-button-next:hover {
    background: linear-gradient(135deg, var(--np-primary-hover) 0%, var(--np-primary) 100%);
    box-shadow: 0 6px 20px rgba(var(--np-primary-rgb), 0.4);
}
.np-modal-steps-buttons-container .np-modal-steps-button-previous:before {
    content: '\f053';
    font-family: Icons;
    font-size: 0.85em;
    color: var(--np-btn-back-text);
    display: block;
    position: relative;
    left: -6px;
    top: 0;
    transform: none;
}
.np-modal-steps-buttons-container .np-modal-steps-button-next:after {
    content: '\f054';
    font-family: Icons;
    font-size: 0.85em;
    color: #ffffff;
    display: block;
    position: relative;
    right: -6px;
    top: 0;
}
.np-modal-steps-buttons-container .np-modal-steps-button-next:before {
    display: none;
}
.np-modal-steps-buttons-container .np-modal-steps-button.disabled {
    opacity: 0.35;
    cursor: default;
    transform: none !important;
    box-shadow: none !important;
}
.np-modal-steps-buttons-container .np-modal-steps-button.disabled:hover,
.np-modal-steps-buttons-container .np-modal-steps-button.disabled:focus,
.np-modal-steps-buttons-container .np-modal-steps-button.disabled:active {
    background-color: var(--np-border);
}

/* -- Chosen number bar -- */
.np-modal-chosen-number {
    max-width: 1060px;
    margin: 0 auto;
    padding: 12px;
    color: #ffffff;
    background-color: var(--np-primary);
    text-align: center;
    font-weight: 600;
    font-size: 1em;
    border-radius: var(--np-radius-md) var(--np-radius-md) 0 0;
    width: 90%;
    margin-top: 2%;
}

/* -- Title texts -- */
.np-modal-tab-title {
    font-family: var(--np-font-heading);
    font-size: var(--np-text-xl);
    color: var(--np-text-heading);
    font-weight: 700;
    text-align: center;
    margin: 0 0 18px 0;
    padding: 0;
    letter-spacing: -0.02em;
}
.np-modal-large-text {
    font-size: var(--np-text-lg);
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
    color: var(--np-text-muted);
}
.np-modal-medium-text {
    font-size: 1em!important;
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
    color: var(--np-text-muted);
}
.np-modal-tab-heading {
    color: var(--np-text-heading);
    font-size: 1.15em;
    text-align: center;
    margin: 0 0 0.8em 0;
    padding: 0;
}
.np-modal-memorable-numbers-list {
    list-style-type: none!important;
    margin: 0 0 -1em 0!important;
    padding: 0!important;
}
.np-modal-memorable-numbers-list li {
    list-style-type: none!important;
    margin: 0 0 1em 0!important;
    padding: 0!important;
    text-align: center;
}

/* -- Alert -- */
.np-modal .alert {
    background: linear-gradient(135deg, var(--np-error-light), var(--np-error-bg));
    border: 1px solid rgba(255, 118, 58, 0.25);
    padding: 16px 24px;
    border-radius: var(--np-radius-lg);
    text-align: center;
    margin: 0 0 1em 0;
    font-size: 0.95em;
}

/* -- Number search form -- */
.np-modal-number-search-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}
.np-modal .np-modal-number-search-form .input-group {
    display: flex;
    margin-right: 10px;
}
.np-modal .input-group-addon, .np-modal input, .np-modal .input-group-btn {
    white-space: nowrap!important;
    vertical-align: middle!important;
    display: flex!important;
    align-items: center!important;
    font-family: var(--np-font)!important;
    font-size: 1em!important;
    line-height: 1em!important;
    padding: 8px 12px!important;
}
.np-modal .input-group-addon {
    padding: 10px 12px 10px 16px!important;
    border-radius: var(--np-radius-pill) 0 0 var(--np-radius-pill)!important;
    font-size: 16px!important;
    font-weight: 400!important;
    color: var(--np-text-body)!important;
    background-color: var(--np-primary-light)!important;
    border: 1px solid var(--np-primary)!important;
    text-align: center!important;
    width: auto;
}
.np-modal .input-group input {
    padding: 10px 16px 10px 12px!important;
    border-radius: 0 var(--np-radius-pill) var(--np-radius-pill) 0!important;
    font-size: 16px!important;
    font-weight: 400!important;
    color: var(--np-text-body)!important;
    background-color: var(--np-bg-card)!important;
    border: 1px solid var(--np-primary)!important;
    border-left-width: 0!important;
    text-align: left!important;
    width: auto;
}
@media only screen and (max-width: 500px) {
    .np-modal .input-group input::placeholder { font-size: 0.7em; }
}
@media only screen and (max-width: 700px) {
    .np-modal-number-search-form { flex-wrap: wrap; }
    .np-modal .np-modal-number-search-form .input-group { margin-right: 0; margin-bottom: 10px; width: 100%; }
    .np-modal .input-group input { width: 100%; }
}

/* -- Generic modal button -- */
.np-modal .np-modal-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--np-radius-pill);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--np-primary);
    text-align: center;
    text-transform: uppercase;
    transition: var(--np-transition);
}
.np-modal .np-modal-button.np-modal-button-on-blue {
    color: var(--np-primary);
    background-color: var(--np-bg-card);
}
.np-modal .np-modal-button.np-modal-button-on-blue-alt {
    color: var(--np-primary);
    background-color: var(--np-primary-light);
}
.np-modal .np-modal-button.np-modal-button-fullwidth {
    width: 100%;
    display: block;
}
.np-modal .np-modal-button:hover,
.np-modal .np-modal-button:focus,
.np-modal .np-modal-button:active {
    background-color: var(--np-primary-hover);
    color: #ffffff;
}
.np-modal .np-modal-button.np-modal-button-on-blue:hover,
.np-modal .np-modal-button.np-modal-button-on-blue:focus,
.np-modal .np-modal-button.np-modal-button-on-blue:active,
.np-modal .np-modal-button.np-modal-button-on-blue-alt:hover,
.np-modal .np-modal-button.np-modal-button-on-blue-alt:focus,
.np-modal .np-modal-button.np-modal-button-on-blue-alt:active {
    color: #ffffff;
    background-color: var(--np-primary-hover);
}
.np-modal .np-modal-cards .np-modal-card .np-modal-button {
    margin: 0 0 10px 0;
}
.np-modal .np-align-center {
    text-align: center;
}

/* =============================================
   CARDS
   ============================================= */
.np-modal .np-modal-cards {
    display: flex;
    justify-content: center;
    gap: 16px;
}
@media only screen and (max-width: 920px) {
    .np-modal .np-modal-cards { flex-wrap: wrap; }
}
.np-modal .np-modal-cards .np-modal-card {
    background: var(--np-bg-card);
    color: var(--np-text-heading);
    padding: 24px 20px;
    text-align: center;
    border-radius: var(--np-radius-lg);
    cursor: pointer;
    border: 2px solid var(--np-border-light);
    box-shadow: var(--np-shadow-sm);
    transition: var(--np-transition-bounce);
    z-index: 9;
    position: relative;
    margin: 1em;
}
.np-modal .np-modal-cards .np-modal-card:hover,
.np-modal .np-modal-cards .np-modal-card:focus,
.np-modal .np-modal-cards .np-modal-card:active {
    transform: translateY(-2px);
    border-color: var(--np-primary);
    box-shadow: 0 8px 24px rgba(var(--np-primary-rgb), 0.1);
    text-decoration: none;
}
.np-modal .np-modal-cards .np-modal-card.cardhighlight {
    background: var(--np-bg-card);
    color: var(--np-text-heading);
    border-color: var(--np-primary);
    z-index: 10;
    box-shadow: 0 4px 16px rgba(var(--np-primary-rgb), 0.15);
    transform: translateY(-2px);
}
.np-modal .np-modal-cards-three .np-modal-card {
    width: calc(33.33% - 25px);
}
@media only screen and (max-width: 1000px) {
    .np-modal .np-modal-cards-three .np-modal-card { width: calc(33.33% - 15px); }
}
@media only screen and (max-width: 920px) {
    .np-modal .np-modal-cards-three .np-modal-card { width: 100%; margin-bottom: 30px; }
}
.np-modal .np-modal-cards .np-modal-card h3 {
    color: var(--np-primary);
    padding: 0;
    font-size: 1em;
}
.np-modal .np-modal-cards .np-modal-card.cardhighlight h3 {
    color: var(--np-primary);
}
.np-modal .np-modal-cards .np-modal-card h4 {
    color: var(--np-text-body);
    font-family: var(--np-font-heading);
    font-size: 0.95em;
    font-weight: 600;
    padding: 0;
    margin: 8px 0;
}
.np-modal .np-modal-cards .np-modal-card.cardhighlight h4 {
    color: var(--np-text-body);
}
.np-modal .np-modal-cards .np-modal-card h4 span.np-modal-info,
.np-modal .np-modal-cards .np-modal-card span.np-modal-info {
    padding: 0 0 0 24px;
    position: relative;
}
.np-modal .np-modal-cards .np-modal-card h4 span.np-modal-info:before,
.np-modal .np-modal-cards .np-modal-card span.np-modal-info:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='19.375px' height='19.375px' viewBox='0 0 19.375 19.375'%3E%3Cpath fill='%237c3aed' d='M19.375,9.688c0,5.352-4.338,9.688-9.688,9.688S0,15.039,0,9.688C0,4.339,4.337,0,9.688,0 S19.375,4.339,19.375,9.688z M11.875,13.281c0-0.259-0.21-0.469-0.469-0.469h-0.469V8.906c0-0.259-0.21-0.469-0.469-0.469h-2.5 C7.71,8.438,7.5,8.647,7.5,8.906v0.938c0,0.259,0.21,0.469,0.469,0.469h0.469v2.5H7.969c-0.259,0-0.469,0.21-0.469,0.469v0.938 c0,0.259,0.21,0.469,0.469,0.469h3.438c0.259,0,0.469-0.21,0.469-0.469V13.281z M8.047,5.938c0,0.906,0.734,1.641,1.641,1.641 s1.641-0.734,1.641-1.641s-0.734-1.641-1.641-1.641S8.047,5.031,8.047,5.938z'/%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-40%);
}
.np-modal .np-modal-cards .np-modal-card.cardhighlight h4 span.np-modal-info:before,
.np-modal .np-modal-cards .np-modal-card.cardhighlight span.np-modal-info:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='19.375px' height='19.375px' viewBox='0 0 19.375 19.375'%3E%3Cpath fill='%237c3aed' d='M19.375,9.688c0,5.352-4.338,9.688-9.688,9.688S0,15.039,0,9.688C0,4.339,4.337,0,9.688,0 S19.375,4.339,19.375,9.688z M11.875,13.281c0-0.259-0.21-0.469-0.469-0.469h-0.469V8.906c0-0.259-0.21-0.469-0.469-0.469h-2.5 C7.71,8.438,7.5,8.647,7.5,8.906v0.938c0,0.259,0.21,0.469,0.469,0.469h0.469v2.5H7.969c-0.259,0-0.469,0.21-0.469,0.469v0.938 c0,0.259,0.21,0.469,0.469,0.469h3.438c0.259,0,0.469-0.21,0.469-0.469V13.281z M8.047,5.938c0,0.906,0.734,1.641,1.641,1.641 s1.641-0.734,1.641-1.641s-0.734-1.641-1.641-1.641S8.047,5.031,8.047,5.938z'/%3E%3C/svg%3E");
}
.np-modal .np-modal-cards .np-modal-card img.np-modal-card-icon {
    width: 100%;
    padding: 10px 0;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}
.np-modal .np-modal-cards .np-modal-card img.np-modal-card-icon.active { display: none; }
.np-modal .np-modal-cards .np-modal-card img.np-modal-card-icon.inactive { display: block; }
.np-modal .np-modal-cards .np-modal-card.cardhighlight img.np-modal-card-icon.active { display: none; }
.np-modal .np-modal-cards .np-modal-card.cardhighlight img.np-modal-card-icon.inactive { display: block; }
.np-modal .np-modal-cards .np-modal-card .np-modal-card-description {
    font-size: var(--np-text-sm);
    line-height: 1.3em;
    margin-top: 14px;
}
.np-modal .np-modal-cards .np-modal-card .accordion { margin-bottom: 15px; }
.np-modal .np-modal-cards .np-modal-card .accordion .accordionitem { cursor: help; }
.np-modal .np-modal-cards .np-modal-card .accordion p.hiddentext { display: none; }
.np-modal .np-modal-cards .np-modal-card .np-modal-card-highlight {
    border-radius: 30px;
    background-color: var(--np-primary-light);
    padding: 15px;
    font-size: var(--np-text-sm);
    line-height: 1.2em;
    color: var(--np-text-body);
    margin-bottom: 20px;
}
.np-modal .np-modal-cards .np-modal-card .np-modal-card-phone-input {
    padding: 10px 16px 10px 50px!important;
    border-radius: var(--np-radius-pill)!important;
    font-size: 16px!important;
    font-weight: 400!important;
    color: var(--np-text-body)!important;
    background-color: var(--np-bg-card)!important;
    text-align: left!important;
    width: 100%;
    display: block;
}
.np-modal .np-modal-cards .np-modal-card .np-modal-card-number-input-container { margin: 10px 0 15px 0; }
.np-modal .np-modal-cards .np-modal-card .np-modal-rate-table {
    margin: 0 0 20px 0;
    border: 1px solid var(--np-primary);
    background-color: transparent;
    color: var(--np-text-heading);
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
}
.np-modal .np-modal-cards .np-modal-card .np-modal-rate-table td {
    padding: 10px!important;
    border: 0!important;
    border-right: 1px solid var(--np-primary)!important;
}
.np-modal .np-modal-cards .np-modal-card .np-modal-rate-table td:last-child { border-right: 0!important; }
.np-modal .np-modal-cards .np-modal-card > *:last-child,
.np-modal .np-modal-cards .np-modal-card > *:last-child .np-modal-card-highlight:last-child { margin-bottom: 0!important; }
/* =============================================
   SIGN UP FORM
   ============================================= */
.np-modal-sign-up-form {
    background: var(--np-bg-card);
    padding: 28px 32px;
    max-width: 1200px;
    margin: 0 auto 16px auto;
    border-radius: var(--np-radius-xl);
    width: 90%;
    box-shadow: var(--np-shadow-sm);
    border: 1px solid var(--np-border-light);
    transition: box-shadow 0.3s ease;
}
.np-modal-sign-up-form:hover {
    box-shadow: var(--np-shadow-md);
}
.np-modal-sign-up-form.np-modal-sign-up-form-top {
    border-radius: 16px;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container > div {
    margin: 0 0 1em;
    width: calc(50% - 15px);
    text-align: left;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container > div:last-child { margin: 0; }
@media only screen and (max-width: 850px) {
    .np-modal-sign-up-form .np-sign-up-form-fields-container { margin-bottom: 1em; }
    .np-modal-sign-up-form .np-sign-up-form-fields-container:last-child { margin-bottom: 0; }
    .np-modal-sign-up-form .np-sign-up-form-fields-container > div { width: 100%; }
}
.np-modal-sign-up-form .np-sign-up-form-fields-container > div.grouped-fields > div { margin: 0 0 1em; }
.np-modal-sign-up-form .np-sign-up-form-fields-container > .grouped-fields > div:last-child { margin: 0; }

/* Field labels — visible above inputs */
.np-modal-sign-up-form .np-sign-up-form-fields-container label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--np-text-muted);
    margin: 0 0 4px 2px;
    letter-spacing: 0.02em;
    text-align: left;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container .checkbox label,
.np-modal-sign-up-form .np-sign-up-form-fields-container .ui.checkbox label {
    height: auto;
    width: auto;
    overflow: visible;
    font-size: var(--np-text-base);
    line-height: 1.2em;
}

/* -- Input & select -- */
.np-modal-sign-up-form .np-sign-up-form-fields-container input:not([type="checkbox"]):not([type="hidden"]):not([type="tel"]),
.np-modal-sign-up-form .np-sign-up-form-fields-container select {
    padding: 11px 16px !important;
    font-size: var(--np-text-base) !important;
    font-weight: 400 !important;
    color: var(--np-text-heading) !important;
    background-color: var(--np-bg-input) !important;
    text-align: left !important;
    width: 100%!important;
    display: block;
    border: 1.5px solid var(--np-border-input) !important;
    margin-bottom: 0;
    border-radius: var(--np-radius-sm);
    height: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
}
/* intlTelInput phone fields — let the library handle padding for flag icon */
.np-modal-sign-up-form .np-sign-up-form-fields-container .iti input[type="tel"] {
    padding: 11px 16px 11px 52px !important;
    font-size: var(--np-text-base) !important;
    font-weight: 400 !important;
    color: var(--np-text-heading) !important;
    background-color: var(--np-bg-input) !important;
    text-align: left !important;
    width: 100% !important;
    display: block;
    border: 1.5px solid var(--np-border-input) !important;
    margin-bottom: 0;
    border-radius: var(--np-radius-sm);
    height: auto;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container input:focus,
.np-modal-sign-up-form .np-sign-up-form-fields-container select:focus {
    border-color: var(--np-primary) !important;
    background-color: var(--np-bg-card) !important;
    box-shadow: 0 0 0 3px rgba(var(--np-primary-rgb), 0.08) !important;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container input::placeholder {
    color: var(--np-text-placeholder) !important;
}
.np-modal-sign-up-form .ui.checkbox label a {
    position: relative;
    z-index: 4;
}
/* -- Title field select -- */
.np-modal-sign-up-form .np-sign-up-form-fields-container .np-modal-form-title-field select {
    color: var(--np-text-muted)!important;
    appearance: none;
    position: relative;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container .np-modal-select-wrapper {
    position: relative;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container .np-modal-select-wrapper:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 7px 0 7px;
    border-color: var(--np-text-body) transparent transparent transparent;
    pointer-events: none;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container .np-modal-select-wrapper select {
    appearance: none;
    padding-right: 45px!important;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container .np-modal-form-title-field select:not([data-title='Title']) {
    color: var(--np-text-body)!important;
}
.np-modal-sign-up-form .np-sign-up-form-fields-container input.np-modal-card-phone-input {
    padding-left: 50px!important;
}
.np-modal .np-modal-emergency-services-setup {
    margin-bottom: 30px!important;
    font-size: 15px;
}

/* -- Section headings inside forms -- */
.np-modal-sign-up-form h4 {
    font-family: var(--np-font);
    font-size: var(--np-text-md);
    font-weight: 700;
    color: var(--np-text-heading);
    letter-spacing: -0.01em;
    padding: 12px 16px !important;
    border-bottom: none;
    background: var(--np-bg-highlight);
    border-radius: var(--np-radius-sm);
    margin: 20px 0 12px 0 !important;
}
.np-modal-sign-up-form h4:first-child {
    margin-top: 0 !important;
}

/* -- Checkboxes -- */
.np-modal-sign-up-form .ui.checkbox {
    position: relative !important;
    display: block !important;
    text-align: left;
    padding: 6px 0;
    min-height: 20px;
}
.np-modal-sign-up-form .ui.checkbox label {
    display: block !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    padding-left: 28px !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--np-text-body);
    cursor: pointer;
}
.np-modal-sign-up-form .ui.checkbox label:hover {
    color: var(--np-text-heading);
}
.np-modal-sign-up-form .ui.checkbox label::before {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 17px !important;
    height: 17px !important;
    border: 1px solid #3b3b3b !important;
    border-radius: 3px !important;
    display: block !important;
}
.np-modal-sign-up-form .ui.checkbox label::after {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 17px !important;
    height: 17px !important;
}
.np-modal-sign-up-form .ui.checkbox input[type="checkbox"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    z-index: 3 !important;
}
.account-checkboxes {
    text-align: left;
}

/* -- Textarea -- */
.np-modal-sign-up-form textarea {
    resize: vertical;
    min-height: 80px;
    padding: 11px 16px !important;
    font-size: var(--np-text-base) !important;
    background-color: var(--np-bg-input) !important;
    border: 1.5px solid var(--np-border-input) !important;
    border-radius: var(--np-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    width: 100%;
    font-family: inherit;
}
.np-modal-sign-up-form textarea:focus {
    border-color: var(--np-primary) !important;
    background-color: var(--np-bg-card) !important;
    box-shadow: 0 0 0 3px rgba(var(--np-primary-rgb), 0.08) !important;
}

/* -- Info text -- */
.np-modal-sign-up-form p {
    color: var(--np-text-muted);
    line-height: 1.5em;
    font-size: 0.88em;
}

/* -- Recaptcha -- */
.np-modal-sign-up-form #number-selector-recaptcha {
    margin: 16px 0;
    float: none !important;
}
/* =============================================
   RATE CHECKER
   ============================================= */
.np-rate-checker-container {
    background-color: var(--np-error-bg);
}
.np-rate-checker-colset { display: flex; }
.np-rate-checker-colset.np-rate-checker-colset-1 { max-width: 1200px; margin: 0 auto; }
.np-rate-checker-colset.np-rate-checker-colset-1.np-rate-checker-margin-bottom { margin: 0 auto 20px 0; }
.np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-1 { width: 50%; margin: auto 0; }
.np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-2 { width: 50%; margin: auto 0; }
.np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-top-align { margin: 0 0 auto 0; }
@media only screen and (max-width: 850px) {
    .np-rate-checker-colset { flex-wrap: wrap; }
    .np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-1 { width: 100%; margin-bottom: 30px; }
    .np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-2 { width: 100%; }
}
.np-rate-checker-main-heading {
    font-family: var(--np-font-display);
    font-weight: 700;
    font-size: 3em;
    color: var(--np-text-heading);
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
}
.np-rate-checker-intro-text {
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 30px 0;
    display: block;
    color: var(--np-text-body);
}
.np-rate-checker-input-container {
    background-color: var(--np-bg-card);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    border-radius: 30px;
    border: 10px solid var(--np-bg-card);
    box-shadow: var(--np-shadow-md);
}
.np-rate-checker-input-container input {
    white-space: nowrap!important;
    vertical-align: middle!important;
    display: flex!important;
    align-items: center!important;
    font-family: var(--np-font)!important;
    font-size: 1.4em!important;
    line-height: 1em!important;
    padding: 8px 12px!important;
    border: 0!important;
    box-shadow: none!important;
}
.np-rate-checker-input-container .np-rate-checker-country-code-input { width: 15%; }
.np-rate-checker-input-container .np-rate-checker-number-input { width: 60%; }
.np-rate-checker-input-container .np-rate-checker-button {
    width: 25%;
    background-color: var(--np-secondary);
    padding: 5px;
    font-family: var(--np-font)!important;
    font-size: 1.3em;
    line-height: 1em;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    box-shadow: var(--np-shadow-md);
    border-radius: 30px;
    cursor: pointer;
    transition: var(--np-transition);
}
@media only screen and (max-width: 980px) { .np-rate-checker-input-container .np-rate-checker-button { font-size: 1.1em!important; } }
@media only screen and (max-width: 900px) {
    .np-rate-checker-input-container input { font-size: 1.1em!important; }
    .np-rate-checker-input-container .np-rate-checker-button { font-size: 1.1em!important; }
}
@media only screen and (max-width: 850px) {
    .np-rate-checker-input-container input { font-size: 1.4em!important; }
    .np-rate-checker-input-container .np-rate-checker-button { font-size: 1.3em!important; }
}
@media only screen and (max-width: 550px) {
    .np-rate-checker-input-container input { font-size: 1.2em!important; }
    .np-rate-checker-input-container .np-rate-checker-button { font-size: 1.1em!important; }
}
.np-rate-checker-input-container .np-rate-checker-button:hover,
.np-rate-checker-input-container .np-rate-checker-button:focus,
.np-rate-checker-input-container .np-rate-checker-button:active {
    background-color: var(--np-primary);
}
.np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-2 img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}
@media only screen and (max-width: 850px) {
    .np-rate-checker-colset.np-rate-checker-colset-1 .np-rate-checker-col-2 img { max-width: 300px; }
}
.np-rate-checker-table { border: 0!important; border-bottom: 1px solid #ebd9d0!important; border-collapse: collapse!important; margin: 0 0 40px 0!important; font-size: 1em!important; }
@media only screen and (max-width: 850px) { .np-rate-checker-table { font-size: 0.9em!important; } }
.np-rate-checker-table th, .np-rate-checker-table td { padding: 10px!important; }
.np-rate-checker-table th { text-align: center!important; color: var(--np-text-heading)!important; font-weight: 700!important; font-size: 1.2em!important; line-height: 1.2em!important; border: 0!important; }
.np-rate-checker-table td { text-align: center!important; color: var(--np-text-body)!important; font-weight: 500!important; font-size: 1.1em!important; line-height: 1.2em!important; border: 0!important; padding-bottom: 40px!important; }
.np-rate-checker-table td .np-rate-checker-table-column-title { display: none; color: var(--np-text-heading)!important; font-weight: 700!important; font-size: 1em!important; }
@media only screen and (max-width: 650px) {
    .np-rate-checker-table { font-size: 1em!important; }
    .np-rate-checker-table .np-rate-checker-table-headers, .np-rate-checker-table th { display: none!important; }
    .np-rate-checker-table { display: block!important; padding-bottom: 40px!important; }
    .np-rate-checker-table tbody, .np-rate-checker-table tr { display: block!important; }
    .np-rate-checker-table td { display: block!important; font-size: 1.3em!important; padding-bottom: 0!important; }
    .np-rate-checker-table td .np-rate-checker-table-column-title { display: inline!important; }
}
.np-rate-checker-bundles-title { font-family: var(--np-font)!important; color: var(--np-text-heading)!important; font-weight: 700!important; font-size: 1.2em!important; line-height: 1.2em!important; text-align: left!important; padding: 0 30px 0 0!important; margin: 0 0 10px 0!important; }
.np-rate-checker-bundles-type-title { color: var(--np-text-heading)!important; font-weight: 700!important; font-size: 1.4em!important; line-height: 1.2em!important; text-align: left!important; padding: 0!important; margin: 0 0 10px 0!important; }
.np-rate-checker-bundles-list { list-style-type: none!important; margin: 0 0 15px 0!important; padding: 0!important; }
.np-rate-checker-bundles-list li { list-style-type: none!important; margin: 0 0 5px 0!important; padding: 0!important; color: var(--np-text-body)!important; font-weight: 500!important; font-size: 1.1em!important; line-height: 1.2em!important; }
@media only screen and (max-width: 850px) {
    .np-rate-checker-colset-bundles .np-rate-checker-col-1 { margin-bottom: 20px!important; }
    .np-rate-checker-bundles-title { text-align: center!important; padding: 0!important; margin: 0!important; }
    .np-rate-checker-bundles-type-title, .np-rate-checker-bundles-list, .np-rate-checker-bundles-list li { text-align: center!important; }
}

/* =============================================
   MISC & PORTING
   ============================================= */
.businessUseButton {
    width: calc(50% - 8px) !important;
}

/* Chrome, Safari, Edge, Opera Number Input Arrows Removed */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.select-background { font-size: 16px; }

/* -- Postcode Lookup -- */
.hidden-address {}
#postcode_lookup input {
    width: 25%;
    border-radius: var(--np-radius-md) 0 0 var(--np-radius-md);
    border: 1.5px solid var(--np-border-input) !important;
    border-right: none !important;
}
#postcode_lookup button {
    background: linear-gradient(135deg, var(--np-secondary), var(--np-secondary-light));
    color: white;
    text-align: center;
    cursor: pointer;
    border: 0;
    width: 24%;
    border-radius: 0 var(--np-radius-md) var(--np-radius-md) 0;
    transition: var(--np-transition);
    font-weight: 600;
}
#postcode_lookup button:hover {
    background: linear-gradient(135deg, var(--np-secondary-light), var(--np-primary));
}
#getaddress_dropdown { width: 49%; margin-left: 2%; }
div#postcode_lookup { display: flex; flex-wrap: wrap; }
#addressCodes { height: auto; }
#postcode_lookup select { min-width: 49%; width: auto; height: auto; margin-left: auto; }

/* -- SIP Quantity -- */
input.sip-quantity-input-button.sip-quantity-input {
    border: none!important;
    width: 40%!important;
    background-color: var(--np-secondary)!important;
    color: #fff!important;
    font-weight: 900!important;
    justify-content: center;
}
input.quantity-field.sip-quantity-input {
    border: 0!important;
    border-radius: 0!important;
    width: 30%!important;
    text-align: center!important;
}
/* -- VoIP quantity +/- buttons -- */
.np-voip-qty-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    color: var(--np-text-light) !important;
    flex-shrink: 0;
}
.register-form-step .form-group {}
.nsFlexBox { justify-content: center; }

/* -- Port buttons -- */
a.np-modal-card.portButton {
    width: calc(50% - 12px);
    max-width: 220px;
    border-radius: var(--np-radius-xl);
    background: linear-gradient(145deg, var(--np-primary), var(--np-primary-hover)) !important;
    color: #fff !important;
    margin: 1%;
    border: 2px solid transparent;
    padding: 20px;
    transition: var(--np-transition-bounce);
}
a.np-modal-card.portButton:hover {
    border-color: var(--np-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--np-primary-rgb), 0.2);
}
a.np-modal-card.portButton.porthighlight {
    background: linear-gradient(145deg, var(--np-success), var(--np-success-hover)) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
    transform: translateY(-3px);
}
.portingInput { margin-left: auto; margin-right: auto; margin-top: 3%; }

/* -- Register form step -- */
.register-form-step {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    padding: 24px;
    border-radius: 0 0 var(--np-radius-2xl) var(--np-radius-2xl);
    animation: stepFadeIn 0.3s ease-out;
}
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.inputFlex label { margin: 1%; font-size: 1em; }
.register-form-step h2 { color: var(--np-text-heading)!important; }
.sipQuantity { width: 30%; margin-left: auto; margin-right: auto; }
input.button-plus.sip-quantity-input-button.sip-quantity-input { border-radius: 0 var(--np-radius-md) var(--np-radius-md) 0!important; }
input.button-minus.sip-quantity-input-button.sip-quantity-input { border-radius: var(--np-radius-md) 0 0 var(--np-radius-md)!important; }
.portingInputContainer { padding: 2%; }
.register-form-step p { font-size: 1em; margin: 1%; margin-left: auto; margin-right: auto; color: var(--np-text-body); }
.nsDarkBG { background: var(--np-secondary); color: #fff; padding: 2%; border: 2px solid var(--np-secondary); border-radius: 5px; }
.portingContainer { border-top: 2px solid var(--np-secondary); text-align: center; }
.inputFlex { display: flex; justify-content: center; }
input.portingInput { border: 1px solid var(--np-secondary-light)!important; border-radius: var(--np-radius-md)!important; }
.register-form-smaller { font-size: 1em!important; }
.portQuestion { margin-top: 2%; }
#numselec .getstartedbox { background-color: var(--np-primary); }
.freetrialbutton {
    background-color: var(--np-primary);
    color: white!important;
    font-size: 1.3em!important;
    font-weight: 600!important;
    width: 50%;
    margin-top: 0!important;
    line-height: 1em!important;
}
.freetrialCTA { padding: 2%; background-color: var(--np-primary); text-align: center; }
.darkFont { color: var(--np-text-heading); }

/* =============================================
   SCROLLBAR
   ============================================= */
#selector-modal::-webkit-scrollbar { width: 8px; }
#selector-modal::-webkit-scrollbar-track { background: transparent; }
#selector-modal::-webkit-scrollbar-thumb { background: rgba(var(--np-primary-rgb), 0.2); border-radius: 4px; }
#selector-modal::-webkit-scrollbar-thumb:hover { background: rgba(var(--np-primary-rgb), 0.35); }

/* =============================================
   UTILITY CLASSES
   ============================================= */
.np-field-full { width: 100%; }
.np-checkbox-block { display: block; margin-bottom: 10px; }
.np-followup-indent { margin-left: 24px; margin-bottom: 12px; display: block!important;}
.np-helper-text { font-size: var(--np-text-sm); color: var(--np-text-light); margin-bottom: 6px; line-height: 1.4em; }
.np-cards-row-gap { margin-top: 12px; }
.np-cards-small { max-width: 320px; }
.np-hidden-field { display: none; }
.np-list-outside { list-style-position: outside; }
.np-highlight-section {
    background: var(--np-bg-highlight);
    border-radius: var(--np-radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.np-highlight-section h4 {
    margin-top: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
.np-address-preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--np-success) 8%, white);
    border: 1px solid color-mix(in srgb, var(--np-success) 30%, white);
    border-radius: 8px;
    text-align: left;
}
.np-address-preview-tick {
    color: var(--np-success);
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
}
.np-address-preview-text {
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--np-text-heading);
}
.np-postcode-lookup {
    display: flex;
    gap: 10px;
}
button.np-modal-btn.np-modal-btn-sm {
    border-radius: 10px;
    min-width: 12em;
}
.account-checkboxes {
    text-align: left;
}

/* Organisation type card icons */
.np-org-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--np-primary);
}

/* VoIP user configuration */
.np-voip-config-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--np-text-base);
    color: var(--np-primary);
    text-decoration: none;
}
.np-voip-config-toggle:hover {
    text-decoration: underline;
}
.np-voip-config-panel {
    margin-top: 16px;
}
.np-voip-user-card {
    background: var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}
.np-voip-user-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--np-border-light);
}
.np-voip-user-heading {
    margin: 0;
    font-size: var(--np-text-lg);
    color: var(--np-text-heading);
    white-space: nowrap;
}
.np-voip-user-name-field {
    flex: 1;
}
.np-voip-user-name-field input {
    width: 100%;
}
.np-voip-section {
    margin-bottom: 16px;
}
.np-voip-section:last-child {
    margin-bottom: 0;
}
.np-voip-section-label {
    display: block;
    font-weight: 600;
    font-size: var(--np-text-sm);
    color: var(--np-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.np-voip-option-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.np-voip-option-card {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 200px;
    background: var(--np-bg-modal);
    border: 2px solid var(--np-border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
}
.np-voip-option-card:hover {
    border-color: var(--np-primary-light);
    box-shadow: 0 2px 8px rgba(var(--np-primary-rgb), 0.1);
    text-decoration: none;
    color: inherit;
}
.np-voip-option-card.np-voip-option-selected {
    border-color: var(--np-primary);
    background: var(--np-primary-light);
    box-shadow: 0 2px 8px rgba(var(--np-primary-rgb), 0.2);
}
.np-voip-option-name {
    font-weight: 600;
    font-size: var(--np-text-sm);
    color: var(--np-text-heading);
    margin-bottom: 4px;
}
.np-voip-option-selected .np-voip-option-name {
    color: var(--np-primary);
}
.np-voip-option-price {
    font-weight: 700;
    font-size: var(--np-text-lg);
    color: var(--np-text-heading);
}
.np-voip-option-price span {
    font-weight: 400;
    font-size: var(--np-text-xs);
    color: var(--np-text-muted);
}
.np-voip-option-free {
    color: var(--np-success);
}
.np-voip-option-desc {
    font-size: var(--np-text-xs);
    color: var(--np-text-muted);
    margin-top: 4px;
    line-height: 1.3;
}
/* Handset cards */
.np-voip-handset-card {
    min-width: 140px;
}
.np-voip-handset-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
}
.np-voip-handset-placeholder {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    color: var(--np-text-light);
}
.np-voip-option-selected .np-voip-handset-placeholder {
    color: var(--np-primary);
}
/* -- VoIP quantity step -- */
.np-voip-qty-container {
    max-width: 360px;
    margin: 20px auto;
    justify-content: center!important;
}
.np-voip-qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.np-voip-qty-input {
    text-align: center;
    font-size: 1.2em;
    width: 80px;
    flex: 0 0 80px;
}
.np-voip-qty-helper {
    margin-top: 8px;
    text-align: center;
}
.np-voip-pricing-box {
    margin-top: 16px;
    padding: 12px 16px;
}
.np-voip-pricing-box p {
    margin: 0;
}
.np-voip-config-section {
    margin-top: 24px;
}
.np-voip-config-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--np-text-heading);
    margin: 0 0 4px;
}

/* -- Postcode lookup inputs -- */
.np-postcode-lookup .form-control {
    display: inline-block;
    width: auto;
}
/* Responsive: stack cards on mobile */
@media only screen and (max-width: 600px) {
    .np-voip-option-cards {
        flex-direction: column;
    }
    .np-voip-option-card {
        max-width: 100%;
    }
    .np-voip-user-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .np-modal-sign-up-form .np-sign-up-form-fields-container label {
        text-align: center;
    }
}

/* Modal loading placeholder */
#np-modal-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-color: var(--np-bg-overlay, rgba(30, 27, 75, 0.6));
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
}
.np-modal-loader-content {
    background: var(--np-bg-card, #fff);
    border-radius: 16px;
    padding: 48px 64px;
    text-align: center;
    box-shadow: var(--np-shadow-lg, 0 20px 60px rgba(0,0,0,0.15));
}
.np-modal-loader-content p {
    margin: 16px 0 0;
    font-family: var(--np-font, sans-serif);
    font-size: 15px;
    color: var(--np-text-muted, #64748b);
    font-weight: 500;
}
.np-modal-loader-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 4px solid var(--np-border-light, #ede9fe);
    border-top-color: var(--np-primary, #7c3aed);
    border-radius: 50%;
    animation: np-spin 0.7s linear infinite;
}
@keyframes np-spin {
    to { transform: rotate(360deg); }
}
/* Inline display mode */
#number-selector-home.np-inline-mode {
    visibility: visible;
    position: static;
    pointer-events: auto;
}
#number-selector-home.np-inline-mode #selector-modal {
    position: static;
    z-index: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 !important;
    overflow: visible;
}
#number-selector-home.np-inline-mode .modal-content {
    box-shadow: none;
    border: 1px solid var(--np-border);
}
#number-selector-home {
    visibility: hidden;
    position: fixed;
    pointer-events: none;
}
#number-selector-home.np-ready {
    visibility: visible;
    position: static;
    pointer-events: auto;
}
#selector-modal {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* z-index: 10000000000 !important; */
}
.noty_layout {
    z-index: 10000000001 !important;
}
#selector-modal.np-modal-visible {
    opacity: 1;
}
#np-modal-loader {
    opacity: 0;
    transition: opacity 0.3s ease;
}
#np-modal-loader.np-modal-visible {
    opacity: 1;
}
/* Optional Build Features step */
.np-optional-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.np-optional-feature-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--np-border, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--np-bg-card, #fff);
}
.np-optional-feature-card:hover {
    border-color: rgba(var(--np-primary-rgb), 0.4);
    background: rgba(var(--np-primary-rgb), 0.03);
}
.np-optional-feature-selected {
    border-color: var(--np-primary, #7c3aed);
    background: rgba(var(--np-primary-rgb), 0.06);
}
.np-optional-feature-toggle {
    flex-shrink: 0;
    color: var(--np-border, #cbd5e1);
}
.np-optional-feature-selected .np-optional-feature-toggle {
    color: var(--np-primary, #7c3aed);
}
.np-optional-feature-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--np-text, #1e293b);
}
.np-optional-feature-desc {
    font-size: 13px;
    color: var(--np-text-muted, #64748b);
    margin-top: 2px;
}
/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */

/* -- Postcode lookup: stack on mobile -- */
@media only screen and (max-width: 600px) {
    div#postcode_lookup {
        flex-direction: column;
        gap: 8px;
    }
    #postcode_lookup input {
        width: 100% !important;
        border-radius: var(--np-radius-md) !important;
        border-right: 1.5px solid var(--np-border-input) !important;
    }
    #postcode_lookup button {
        width: 100%;
        border-radius: var(--np-radius-md);
        padding: 11px 16px;
    }
    #getaddress_dropdown {
        width: 100%;
        margin-left: 0;
    }
    #postcode_lookup select {
        min-width: 100%;
        margin-left: 0;
    }
}

/* -- SIP quantity: wider on mobile -- */
@media only screen and (max-width: 600px) {
    .sipQuantity {
        width: 60%;
    }
}
@media only screen and (max-width: 400px) {
    .sipQuantity {
        width: 80%;
    }
}

/* -- Port / business-use buttons: stack on narrow screens -- */
@media only screen and (max-width: 480px) {
    a.np-modal-card.portButton {
        width: 100%;
        max-width: 100%;
    }
    .businessUseButton {
        width: 100% !important;
    }
    .inputFlex {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* -- Rate checker: stack on mobile -- */
@media only screen and (max-width: 550px) {
    .np-rate-checker-input-container {
        flex-direction: column;
        border-radius: var(--np-radius-lg);
        border-width: 6px;
        gap: 0;
    }
    .np-rate-checker-input-container .np-rate-checker-country-code-input {
        width: 100%;
        border-radius: var(--np-radius-md) var(--np-radius-md) 0 0;
    }
    .np-rate-checker-input-container .np-rate-checker-number-input {
        width: 100%;
    }
    .np-rate-checker-input-container .np-rate-checker-button {
        width: 100%;
        border-radius: 0 0 var(--np-radius-md) var(--np-radius-md);
        padding: 12px;
    }
    .np-rate-checker-main-heading {
        font-size: 2em;
    }
}

/* -- Optional feature cards: tighter on mobile -- */
@media only screen and (max-width: 600px) {
    .np-optional-feature-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .np-optional-feature-label {
        font-size: 14px;
    }
    .np-optional-feature-desc {
        font-size: 12px;
    }
}

/* -- Breadcrumbs: hide step names on very small screens -- */
@media only screen and (max-width: 420px) {
    .np-modal-breadcrumbs li .step-name {
        display: none;
    }
    .np-modal-breadcrumbs li {
        padding: 6px 10px 6px 26px;
    }
}

/* -- Modal sign-up form: full width + less padding on mobile -- */
@media only screen and (max-width: 550px) {
    .np-modal-sign-up-form {
        width: 100%;
        padding: 16px;
    }
    .register-form-step {
        padding: 16px 12px;
    }
    .tab-content {
        padding: 16px 12px;
    }
    .np-modal-sign-up-form h4 {
        font-size: 0.85em;
        padding: 10px 12px !important;
    }
}

/* -- Number search: ensure inputs don't overflow -- */
@media only screen and (max-width: 480px) {
    .np-modal .np-modal-number-search-form .input-group {
        width: 100%;
    }
    .np-modal .np-modal-number-search-form .input-group input {
        font-size: 0.9em !important;
    }
}

/* -- Number choice buttons: tighter on mobile -- */
@media only screen and (max-width: 500px) {
    .np-modal .np-modal-numbers-two-fields .np-modal-numbers-field {
        margin: 0 0 8px 0;
    }
}

/* -- Postcode lookup flex helper -- */
@media only screen and (max-width: 600px) {
    .np-postcode-lookup {
        flex-direction: column;
    }
}

/* -- Emergency services address section -- */
@media only screen and (max-width: 550px) {
    .np-modal .np-modal-emergency-services-setup {
        font-size: 13px;
    }
    .np-address-preview {
        flex-direction: column;
        gap: 8px;
    }
}

/* -- VoIP quantity controls -- */
@media only screen and (max-width: 500px) {
    .np-voip-qty-container {
        max-width: 100%;
    }
    .np-voip-qty-controls {
        justify-content: center;
    }
}

/* -- Loader: smaller padding on mobile -- */
@media only screen and (max-width: 480px) {
    .np-modal-loader-content {
        padding: 32px 24px;
    }
}
/* -- intlTelInput placeholder fix -- */
.np-modal .iti input,
.np-modal .iti input::placeholder {
    padding-left: 52px !important;
}
/* -- Add-on feature cards -- */
.np-optional-features-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.np-addon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px 16px;
    border: 2px solid var(--np-border);
    border-radius: var(--np-radius-md);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: var(--np-bg-card);
}
.np-addon-card:hover {
    border-color: rgba(var(--np-primary-rgb), 0.4);
    background: rgba(var(--np-primary-rgb), 0.02);
}
.np-addon-card-selected {
    border-color: var(--np-primary);
    background: rgba(var(--np-primary-rgb), 0.06);
    box-shadow: 0 2px 8px rgba(var(--np-primary-rgb), 0.15);
}
.np-addon-card-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--np-border);
    line-height: 0;
}
.np-addon-card-selected .np-addon-card-toggle {
    color: var(--np-primary);
}
.np-addon-card-body {
    width: 100%;
}
.np-addon-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--np-text-heading);
}
.np-addon-card-desc {
    font-size: 13px;
    color: var(--np-text-muted);
    margin-top: 3px;
    line-height: 1.4;
}
.np-addon-card-price {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    color: var(--np-primary);
    white-space: nowrap;
    padding: 4px 10px;
    background: var(--np-primary-light);
    border-radius: var(--np-radius-xs);
    margin-top: 8px;
}
@media only screen and (max-width: 550px) {
    .np-optional-features-cards {
        grid-template-columns: 1fr;
    }
}
/* Error state for inputs */
.np-modal-sign-up-form .np-field-error input,
.np-modal-sign-up-form .np-field-error select,
.np-modal-sign-up-form .np-field-error textarea {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1) !important;
}
.np-modal-sign-up-form .np-field-error label.label {
    color: #e53935;
}