.columnaddress-pricing {
    flex: 1 1 0; /* Grow equally */
    min-width: 0; /* Prevent overflow */
}

.columnaddress.fullwidth {
    flex: 1 1 100%;
}

.columnthefollowheader-intro-pricing {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 20px;
    box-sizing: border-box;
    flex-direction: column;
}

.overlap-2 {
    font-family: "angie-sans", sans-serif, Helvetica;
    position: relative;
    max-width: 742px;
    width: 100%;
    height: 44px;
    background-color: var(--aqua-forest-100);
    border-radius: 100px;
}

.CTA {
    all: unset;
    box-sizing: border-box;
    position: relative;
    max-width: 744px;
    width: 100%;
    height: 44px;
}

.intro-pricing {
    background-color: #f5f3ef;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

    .intro-pricing .know-before-it-shows {
        position: relative;
        top: 0;
        font-family: "angie-sans", sans-serif, Helvetica;
        font-weight: 400;
        color: var(--navy);
        font-size: 48px;
        text-align: center;
        letter-spacing: 0.48px;
        line-height: 48px;
        white-space: normal;
    }

    .intro-pricing .text-wrapper-7-intro-pricing {
        font-family: var(--desktop-headline-1-italic-font-family);
        font-style: var(--desktop-headline-1-italic-font-style);
        letter-spacing: var(--desktop-headline-1-italic-letter-spacing);
        font-weight: var(--desktop-headline-1-italic-font-weight);
        line-height: var(--desktop-headline-1-italic-line-height);
        font-size: var(--desktop-headline-1-italic-font-size);
    }

    .intro-pricing .text-wrapper-8-intro-pricing {
        margin-top: 16px;
        margin-bottom: 4px;
        position: relative;
        max-width: 623px;
        width: 100%;
        left: 0;
        font-family: var(--desktop-body-2-font-family);
        font-weight: var(--desktop-body-2-font-weight);
        color: var(--navy);
        font-size: var(--desktop-body-2-font-size);
        text-align: center;
        letter-spacing: var(--desktop-body-2-letter-spacing);
        line-height: var(--desktop-body-2-line-height);
        font-style: var(--desktop-body-2-font-style);
    }

    .intro-pricing .span-intro-pricing {
        letter-spacing: var(--desktop-headine-1-letter-spacing);
        font-family: var(--desktop-headine-1-font-family);
        font-style: var(--desktop-headine-1-font-style);
        font-weight: var(--desktop-headine-1-font-weight);
        line-height: var(--desktop-headine-1-line-height);
        font-size: var(--desktop-headine-1-font-size);
    }

    .intro-pricing .element-intro-pricing {
        position: relative;
        max-width: 846px;
        width: 100%;
        height: 352px;
        top: 0;
        left: 0;
        background-color: var(--white);
        border-radius: 8px;
    }





.text-wrapper-3-intro-pricing {
    cursor: pointer;
    position: relative;
    top: 14px;
    font-family: var(--buttons-captions-CTA-font-family);
    font-weight: var(--buttons-captions-CTA-font-weight);
    color: var(--navy);
    font-size: var(--buttons-captions-CTA-font-size);
    text-align: center;
    letter-spacing: var(--buttons-captions-CTA-letter-spacing);
    line-height: var(--buttons-captions-CTA-line-height);
    white-space: normal;
    font-style: var(--buttons-captions-CTA-font-style);
}



.intro-pricing .overlap-intro-pricing {
    position: relative;
    max-width: 1143px;
    width: 100%;
    height: 873px;
    top: 328px;
    left: 297px;
}

.intro-pricing .frame-intro-pricing {
    position: relative;
    max-width: 710px;
    width: 100%;
    height: 686px;
    top: 172px;
    left: 433px;
    background-image: url(./assets/img/newui/mask-group.png);
    background-size: 100% 100%;
}

.intro-pricing .input-1-intro-pricing {
    position: relative;
    max-width: 362px;
    width: 100%;
    height: 72px;
    top: 52px;
    left: 52px;
}

.intro-pricing .text-wrapper-intro-pricing {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--buttons-captions-input-font-family);
    font-weight: var(--buttons-captions-input-font-weight);
    color: var(--navy);
    font-size: var(--buttons-captions-input-font-size);
    letter-spacing: var(--buttons-captions-input-letter-spacing);
    line-height: var(--buttons-captions-input-line-height);
    white-space: normal;
    font-style: var(--buttons-captions-input-font-style);
}



.text-wrapper-12-intro-pricing {
    cursor: pointer;
    position: relative;
    font-family: var(--buttons-captions-CTA-font-family);
    font-weight: var(--buttons-captions-CTA-font-weight);
    color: var(--navy);
    font-size: var(--buttons-captions-CTA-font-size);
    text-align: center;
    letter-spacing: var(--buttons-captions-CTA-letter-spacing);
    line-height: var(--buttons-captions-CTA-line-height);
    white-space: normal;
    font-style: var(--buttons-captions-CTA-font-style);
}

.text-wrapper-13-intro-pricing {
    position: relative;
    font-family: var(--buttons-captions-CTA-font-family);
    font-weight: var(--buttons-captions-CTA-font-weight);
    color: var(--white);
    font-size: var(--buttons-captions-CTA-font-size);
    text-align: center;
    letter-spacing: var(--buttons-captions-CTA-letter-spacing);
    line-height: var(--buttons-captions-CTA-line-height);
    white-space: normal;
    font-style: var(--buttons-captions-CTA-font-style);
}


/* Make it responsive */
@media (max-width: 768px) {
    .text-wrapper-12-intro-pricing,
    .text-wrapper-13-intro-pricing {
        font-size: 1rem; /* fallback if vars are large */
        line-height: 1.2;
    }
}





.card.form-row {
    margin-bottom: 0;
    padding-bottom: 44px; /* optional */
}





.card {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1px;
    margin-top: 1px;
}


    .card + .card {
        margin-top: 0px; /* or 0 if you want them flush */
    }



/* Input and label styling */
.lineitem-intro-pricing {
    font-family: "angie-sans", sans-serif, Helvetica;
    display: block;
    margin-bottom: 6px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 0px;
    border-radius: 4px;
}


/* Flex row for buttons */
.cta-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    font-family: "angie-sans", sans-serif, Helvetica;
}

/* Ensure buttons don't overflow */
.CTA-2-intro-pricing {
    position: relative;
    max-width: 362px;
    width: 100%;
    height: 44px;
}

.CTA-3-intro-pricing {
    position: relative;
    max-width: 362px;
    width: 100%;
    height: 44px;
}

.CTA-2-intro-pricing,
.CTA-3-intro-pricing {
    flex: 1 1 45%;
    min-width: 150px;
    max-width: 362px;
    height: 44px;
}

    /* Optional: make text centered */
    .CTA-2-intro-pricing .overlap-group-3 {
        background-color: var(--aqua-forest-100); /* or use what you're already using */
        border-radius: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .CTA-3-intro-pricing .overlap-5 {
        background-color: var(--charcoal-gray-400);
        border-radius: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }



/* Responsive stacking for small screens */
@media (max-width: 768px) {
    .columnaddress-pricing {
        flex: 1 1 100%;
    }
}

.card.charcoal-card {
    margin-top: 8px;
    background-color: var(--charcoal-gray-400); /* rgba(51, 63, 72, 1) */
    font-family: "angie-sans", sans-serif, Helvetica;
    color: #fff;
    border-radius: 8px;
    padding: 32px 24px;
}

.charcoal-card .text-wrapper-4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 16px;
    font-family: var(--desktop-body-1-font-family);
    font-weight: var(--desktop-body-1-font-weight);
    color: var(--white);
    font-size: var(--desktop-body-1-font-size);
    letter-spacing: var(--desktop-body-1-letter-spacing);
    line-height: var(--desktop-body-1-line-height);
    white-space: normal;
    font-style: var(--desktop-body-1-font-style);
}

.charcoal-card .line {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
}

.charcoal-card .element-2,
.charcoal-card .element-3,
.charcoal-card .element-4,
.charcoal-card .element-5,
.charcoal-card .element-6 {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

/* On small screens, reduce the gap */
@media (max-width: 600px) {
    .charcoal-card .element-2,
    .charcoal-card .element-3,
    .charcoal-card .element-4,
    .charcoal-card .element-5,
    .charcoal-card .element-6 {
        gap: 6px;
    }
}

.charcoal-card .vector {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.charcoal-card .p {
    margin: 0;
    font-family: var(--desktop-body-2-font-family);
    font-weight: var(--desktop-body-2-font-weight);
    color: var(--white);
    font-size: var(--desktop-body-2-font-size);
    letter-spacing: var(--desktop-body-2-letter-spacing);
    line-height: var(--desktop-body-2-line-height);
    font-style: var(--desktop-body-2-font-style);
}

.charcoal-card .text-wrapper-5,
.charcoal-card .text-wrapper-6 {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 12px;
    color: #fff;
}

.charcoal-card .text-wrapper-5 {
    font-weight: 500;
}

.charcoal-card .text-wrapper-6 {
    font-style: italic;
}

.overlap-4 {
    position: relative;
    max-width: 846px;
    width: 100%;
    background-color: var(--white);
    border-radius: 8px;
}

.neurogen-gives-you {
    position: relative;
    max-width: 630px;
    width: 100%;
    font-family: "angie-sans", Helvetica;
    font-weight: 400;
    color: var(--navy);
    font-size: 36px;
    text-align: center;
    letter-spacing: 0.36px;
    line-height: 36px;
}

.text-wrapper-11-intro-pricing {
    margin-top: 20px;
    position: relative;
    max-width: 630px;
    width: 100%;
    font-family: var(--desktop-body-3-font-family);
    font-weight: var(--desktop-body-3-font-weight);
    color: var(--navy);
    font-size: var(--desktop-body-3-font-size);
    text-align: center;
    letter-spacing: var(--desktop-body-3-letter-spacing);
    line-height: var(--desktop-body-3-line-height);
    font-style: var(--desktop-body-3-font-style);
}

.text-wrapper-9 {
    letter-spacing: var(--desktop-headline-2-letter-spacing);
    font-family: var(--desktop-headline-2-font-family);
    font-style: var(--desktop-headline-2-font-style);
    font-weight: var(--desktop-headline-2-font-weight);
    line-height: var(--desktop-headline-2-line-height);
    font-size: var(--desktop-headline-2-font-size);
}

.text-wrapper-10 {
    font-family: var(--desktop-headline-2-italic-font-family);
    font-style: var(--desktop-headline-2-italic-font-style);
    letter-spacing: var(--desktop-headline-2-italic-letter-spacing);
    font-weight: var(--desktop-headline-2-italic-font-weight);
    line-height: var(--desktop-headline-2-italic-line-height);
    font-size: var(--desktop-headline-2-italic-font-size);
}

.overlap-group {
    position: relative;
    max-width: 360px;
    width: 100%;
    height: 44px;
    background-color: var(--gray-chateau-100);
    border-radius: 4px;
}

.overlap-group-3 {
    position: relative;
    max-width: 360px;
    width: 100%;
    height: 44px;
    background-color: var(--aqua-forest-100);
    border-radius: 100px;
}


/* End pricing intro */
/* Match custom input styling for DevExtreme Lookup */
.white-lookup .dx-lookup .dx-lookup-field {
    background-color: white !important;
}

.dx-list-item-content {
    font-family: "objektiv-mk1", sans-serif, Helvetica;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: table-cell;
    width: 100%;
}
/* Style the clickable field */
.dx-lookup .dx-lookup-field {
    font-family: "objektiv-mk1", sans-serif, Helvetica;
    background-color: #f2f2f2 !important;
    
    /*height: 42px !important;*/
    line-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    font-size: 16px;
    color: black;
    width: 100%; /* force full width */
    box-sizing: border-box;
}
/* Ensure outer container stretches */
.dx-lookup {
    width: 100% !important;
}


    .dx-lookup .dx-placeholder {
        background: transparent !important;
    }

    .dx-lookup .dx-placeholder {
        color: #777;
    }

    .dx-lookup .dx-dropdowneditor-icon {
        color: #333; /* adjust if needed */
    }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"] {
    background: #f2f2f2 !important;
    background-color: #f2f2f2 !important;
    border-radius: 6px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
}


#dob-wrapper select {
    background-color: #f2f2f2; /* same light blue */
}

    #dob-wrapper select:focus {
        outline: none;
        border-color: #66afe9; /* optional: focus border color */
    }


#applycode.highlight {
    box-shadow: 0 0 0 2px #f0c040;
    transition: box-shadow 0.3s ease;
}

.phebotomytext {
    font-size: 0.9em;
    font-family: "objektiv-mk1", sans-serif, Helvetica;
}

.password-rules .rule {
    border: none;
    font-size: 0.8em;
    font-family: "objektiv-mk1", sans-serif, Helvetica;
    color: #999;
}

    .password-rules .rule.valid {
        color: #28a745; /* green check-style */
    }

.promo-message {
    font-family: "objektiv-mk1", sans-serif, Helvetica;
    margin-left: 1em;
    font-size: 0.9em;
    font-weight: 500;
}

    .promo-message.success {
        color: green;
    }

    .promo-message.warning {
        color: orange;
    }

    .promo-message.error {
        color: red;
        font-size: 1.2em;
    }




.rowneurogenat,
.rowtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}






.heading-lgpayment {
    font-family: "Angie Sans Std", sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #1F292A;
    word-wrap: break-word;
}

.lineitem {
    color: #1F292A;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.lineitemalignright {
    color: #1F292A;
    text-align: right;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.lineitemalignrighttotal {
    color: #1F292A;
    text-align: right;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 125% */
}

.lineitemalignrighttotal2 {
    color: #1F292A;
    text-align: right;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 125% */
}

.lineitemalignrightshipping {
    color: #6D767E;
    text-align: right;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.lineitemalignrightshipping2 {
    color: #6D767E;
    text-align: right;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.addpromocode {
    color: #1F292A;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}





.shipping_one {
    color: #1F292A;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    text-transform: capitalize;
}


.shipping_one_margin_below {
    color: #1F292A;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    text-transform: capitalize;
    margin-bottom: 1.5rem; /* add spacing from title/question if needed */
}

.reviewordertext {
    color: #1F292A;
    font-family: "objektiv-mk1", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 144.444% */
}
.pleaseenternomargin {
    color: #1F292A;
    /* Desktop/Body SM */
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
    margin-top: 0.6rem; /* add spacing from title/question if needed */
    
}

.pleaseenter {
    color: #1F292A;
    /* Desktop/Body SM */
    font-family: "objektiv-mk1", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
    margin-top: 0.6rem; /* add spacing from title/question if needed */
    margin-bottom: 1.5rem; /* add spacing from title/question if needed */
}

.pleaseentersmalltext {
    color: #1F292A;
    /* Desktop/Body SM */
    font-family: "objektiv-mk1", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px; /* 175% */
    margin-top: 0.6rem; /* add spacing from title/question if needed */
    /* margin-bottom: 1.5rem; add spacing from title/question if needed */
}

.columnbillingdetails {
    width: 100%;
}

    .columnbillingdetails input[type="text"] {
        font-family: "objektiv-mk1", sans-serif;
        width: 100%;
        height: 44px;
        padding: 8px 12px;
        border-radius: var(--radius-md, 6px);
        font-size: 16px;
        box-sizing: border-box;
    }

    .columnbillingdetails select {
        width: 100%;
        height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--blue_gray_300, #99a5af);
        border-radius: var(--radius-md, 6px);
        background-color: #f5f3ef;
        font-size: 16px;
        font-family: "objektiv-mk1", sans-serif;
        box-sizing: border-box;
        appearance: none; /* optionally style away default arrow */
    }




/*.chevron {
        height: 44px;
        width: 100%;
        padding: 0 var(--space-md);
        font-size: 16px;
        font-family: "objektiv-mk1", sans-serif;
        border: 1px solid var(--blue_gray_300);
        border-radius: var(--radius-md);
        background-color: var(--white_a700);
        background-image: url(../public/images/img_chevron.svg);
        background-repeat: no-repeat;
        background-position: calc(100% - 20px) center;
        background-size: 16px;
        appearance: none;
        box-sizing: border-box;
        vertical-align: middle;
        }*/
input[type="text"],
select {
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--space-md);
}