/* Join V3 — page-only stylesheet
   - Desktop: image left, form right
   - ≤1023px: form on top, image below
   - Hides legacy NATS option/cascade boxes
   - Prevents badge/price overlaps
*/

/* ---------- Base / Reset (minimal) ---------- */
html,body { margin:0; padding:0; }
img { max-width:100%; display:block; border:0; }
*,*::before,*::after { box-sizing:border-box; }
a { text-decoration:none; outline:0; }
ul,ol { list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6,p,form { margin:0; padding:0; font-weight:normal; }
::placeholder { color:#676767; opacity:1; }
input[type="submit"] { -webkit-appearance:none; }

/* Optional: hide field titles (we use placeholders) */
label[for="username_input"],
label[for="password_input"],
label[for="email_input"] { display:none !important; }

/* ---------- Layout ---------- */
.centerwrap{
    width:1308px;            /* V1 wide desktop canvas */
    margin:auto;
    display:flex;
    padding-top:46px;
    justify-content:space-between;
    flex-wrap:wrap;
}

.joinArea{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    width:100%;
}

.joinLeft{ width:603px; float:none !important; clear:none !important; }
.joinRight{ width:634px; display:flex; flex-direction:column; float:none !important; clear:none !important; }
.joinRight #form{ width:100%; }

.joinModel{ margin-bottom:15px; }
.joinModel img{ width:100%; height:auto; }

/* Info block under the image */
.womenHelp{ background:#fbf7f4; padding:15px 10px 15px 15px; display:flex; }
.calltosafety{ width:192px; }
.joinYanks{ border-left:1px solid #dbdbdb; padding-left:15px; width:calc(100% - 192px); }
.joinYanks h2{ font:700 24px Arial, sans-serif; color:#676767; letter-spacing:-.015em; text-align:center; }
.joinYanks p{ font:400 12px/16px Arial, sans-serif; letter-spacing:-.03em; color:#676767; }
.joinYanks a{ color:#676767; text-decoration:underline; }

/* ---------- Headings / logo ---------- */
.joinLogo{ display:flex; justify-content:center; padding-bottom:18px; }
.joinRight h3{ font:700 24px Arial, sans-serif; color:#113A73; padding-bottom:10px; }

/* ---------- Step 1: account ---------- */
.joinFirst{ padding-bottom:10px; }
.twoColumns{ display:flex; justify-content:space-between; gap:2%; padding-bottom:0px; }
.twoColumns .deBox{ width:49%; }
.joinTextBox{
    font:400 14px Arial, sans-serif;
    letter-spacing:-.005em; color:#676767;
    padding:0 15px; border:1px solid #c0c0c0; border-radius:0px;
    height:51px; width:100%;
}
.textInfo{ font-size:12px; line-height:14px; color:#aeafb1; letter-spacing:-.005em; padding-top:4px; }

/* ---------- Step 2: membership ---------- */
.membershipArea{}
/* Keep NATS nodes but hide the legacy grey boxes */
.membershipArea .option.button,
.payvia .option.button{ display:none !important; }

/* Flexible cards — no fixed height to avoid overlaps */
.membershipArea label{
    cursor:pointer;
    border:1px solid #c0c0c0;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:10px 14px 10px 18px;
    margin-bottom:7px;
    min-height:62px;             /* baseline height; grows as needed */
    background:#fff;
    position:relative;
}
.membershipArea label:last-child{ margin-bottom:0; }
.membershipArea label input{ position:absolute; left:-9999px; }

.memberMonths{ font-size:19px; color:#676767; letter-spacing:-.005em; }
.memberMonths span{ display:block; font-size:14px; letter-spacing:-.005em; }

.memberPrice{
    font-size:28px; color:#404040; letter-spacing:-.025em; text-align:center;
}
.memberPrice span{ display:block; font-size:13px; color:#676767; letter-spacing:-.025em; }

/* Badge inline — no absolute positioning (prevents overlaps) */
.mostPopular{
    font-size:15px; color:#fff; background:#b50000;
    line-height:34px; padding:0 12px; text-transform:uppercase;
    margin-left:auto; margin-right:50px;
}

.membershipArea label.active{
    background:#2f3030; border-color:#2f3030;
}
.membershipArea label.active .memberMonths,
.membershipArea label.active .memberPrice,
.membershipArea label.active .memberPrice span{ color:#fff; }

/* ---------- Promo ---------- */
.promoCode{ text-align:right; font-size:15px; letter-spacing:-.005em; padding-top:16px; }
.promoCode a{ color:#103a73; text-decoration:underline; }
.addPromoCode{ position:relative; display:none; margin-top:16px; margin-bottom:5px; }
.promoBox{
    font:400 16px Arial, sans-serif; letter-spacing:-.005em; color:#676767;
    padding:0 100px 0 15px; border:1px solid #c0c0c0; height:51px; width:100%;
}
.applyBtn{
    position:absolute; right:5px; top:5px; height:41px;
    background:rgba(165,202,26,1); color:#fff; border:2px solid rgba(165,202,26,1);
    font:700 16px Arial, sans-serif; text-transform:uppercase; border-radius:7px; cursor:pointer;
}
.applyBtn:hover{ background:#fff; color:rgba(165,202,26,1); }

/* ---------- Step 3: payment (cascades) ---------- */
.payvia{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.payvia label{
    width:90px; height:45px; position:relative;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.payvia label:before{
    content:''; position:absolute; inset:0; border:1px solid #c5c5c5; border-radius:5px;
}
.payvia label:last-child{ margin-right:0; }
.payvia label input{ position:absolute; left:-9999px; }
.payvia label.active:before{ border:3px solid rgba(165,202,26,1); }
.payvia label img.grey{ display:block; padding:1px; }
.payvia label img.color{ display:none; }
.payvia label.active img.color{ display:block; padding:3px; }
.payvia label.active img.grey{ display:none; }

/* Gift card hover bubble (if used) */
.gift-card-span{ position:relative; }
.gift-card-text{
    position:absolute; width:400px; padding:10px;
    background:rgba(165,202,26,1); color:#fff; font-weight:500;
    top:-70px; left:-155px; opacity:0; z-index:-10; transition:opacity .2s;
}
.gift-card-text:after{
    content:''; position:absolute; left:0; right:0; bottom:-10px; margin:0 auto;
    width:0; height:0; border-top:27px solid rgba(165,202,26,1);
    border-left:30px solid transparent; border-right:30px solid transparent; opacity:0;
}
.gift-card-container:hover .gift-card-text,
.gift-card-container:hover .gift-card-text:after{ opacity:1; z-index:10; }

/* ---------- Submit / footer ---------- */
.complete{ margin-top:0; }
.completeBtn{
    width:100%; height:50px;
    background:rgba(165,202,26,1); color:#fff; border:2px solid rgba(165,202,26,1);
    font:700 23px Arial, sans-serif; letter-spacing:-.015em; cursor:pointer;
    text-shadow:0 4px 11px rgba(111,137,12,.3); border-radius:0px;
}
.completeBtn:hover{ background:#fff; color:rgba(165,202,26,1); }

.joinSecond{ padding-bottom:10px; }
.joinThird{ padding-bottom:15px; }

.container-checkbox{
    font-size:13px; letter-spacing:-.005em; margin-bottom:10px;
    display:flex; align-items:center;
}
.container-checkbox input{ width:16px; height:16px; margin-right:5px; cursor:pointer; }

footer{ text-align:center; width:100%; padding-top:75px; padding-bottom:12px; }
footer p{ font:400 13px/19px Arial, sans-serif; color:#676767; padding-bottom:12px; }
.rta{ display:flex; justify-content:center; }
.join_error{ color:#d41051; display:block; padding:0 10px 12px; background:pink; border:1px solid #d41051; border-radius:3px; margin:5px 0; font-size:13px; }

/* Footer “Need Help?” button + simple container (used in your V3 footer) */
.wrap{ width:100%; }
.container{ position:relative; width:80%; margin:auto; }
.row{ margin-right:-15px; margin-left:-15px; }
.joinb .btn.btn-primary{ margin:auto; padding:10px 30px; }
.btn.btn-primary{
    padding:17px 27px 21px;
    background-color:rgba(165,202,26,1);
    border:2px solid rgba(165,202,26,1);
    cursor:pointer; font:700 23px/1 Arial, sans-serif; color:#fff;
    letter-spacing:-.015em; text-shadow:0 4px 11px rgba(111,137,12,.3);
    width:100%; height:50px;
}
.btn.btn-primary:hover{ background:#fff; color:rgba(165,202,26,1); }
.copyright{ font-size:13px; text-align:left; color:gray; }
.copyright p{ padding-top: 20px; text-align:center; }

/* ---------- Responsive ---------- */

/* <=1590 */
@media (max-width:1590px){
    .centerwrap{ width:1250px; }
    .joinRight{ width:624px; }
    .twoColumns .deBox{ width:49%; }
    footer{ padding-top:25px; }
    .payvia label{ width:110px; height:48px; }
}

/* <=1279 : tighten fonts/sizing and use % columns */
@media (max-width:1279px){
    .centerwrap{ width:994px; padding-top:32px; }
    .joinLeft{ width:45%; }
    .joinRight{ width:53%; }
    .joinRight h3{ font-size:20px; }
    .joinLogo{ width:200px; margin:auto; }
    .joinTextBox{ height:46px; font-size:15px; }
    .twoColumns{ padding-bottom:0px; }

    .membershipArea label{ min-height:62px; } /* still flexible */
    .mostPopular{ font-size:14px; margin-right:20px; line-height:30px; }

    .joinYanks h2{ font-size:18px; }
    .calltosafety{ width:150px; padding-right:12px; }
    .joinYanks{ width:calc(100% - 150px); padding-left:12px; }
    .womenHelp{ align-items:center; }
    .memberMonths{ font-size:18px; }
    .memberPrice{ font-size:24px; }

    .completeBtn{ font-size:20px; }
    .promoBox{ height:46px; font-size:15px; }
}

/* <=1023 : stack, and make the canvas fluid to avoid empty side gutter */
@media (max-width:1023px){
    .centerwrap{ width:96%; padding-top:22px; } /* fluid (prevents right empty strip) */
    .joinArea{ flex-direction:column; }
    .joinRight{ order:1; width:100%; padding-bottom:40px; }
    .joinLeft{ order:2; width:100%; }
    .joinFirst{ padding-bottom:10px; }
}

/* <=860 : small tightening (optional breakpoint) */
@media (max-width:860px){
    .mostPopular{ margin-right:10px; }
}

/* <=767 : phone-ish */
@media (max-width:767px){
    .centerwrap{ width:96%; }
    .joinLogo{ width:180px; margin-inline:auto; }
    .joinTextBox{ height:42px; font-size:14px; padding:0 12px; }
    .joinRight h3{ font-size:18px; padding-bottom:6px; }
    .mostPopular{ font-size:13px; line-height:32px; padding:0 10px; }
}

/* <=520 : stack membership card content vertically to guarantee no overlap */
@media (max-width:520px){
    .twoColumns{ flex-wrap:wrap; gap:0; }
    .twoColumns .deBox{ width:100%; padding-bottom:8px; }
    .twoColumns .deBox:last-child{ padding-bottom:0; }

    .membershipArea label{
        flex-direction:column; align-items:center;
        min-height:0; padding:10px;
    }
    .memberMonths{ text-align:center; padding-bottom:8px; }
    .mostPopular{ margin:3px auto 8px; }

    .completeBtn{ font-size:18px; height:42px; }

    .womenHelp{ flex-direction:column; }
    .calltosafety{ padding-right:0; padding-bottom:10px; width:auto; }
    .joinYanks{ padding-top:10px; padding-left:0; width:100%; text-align:center; border-left:0; border-top:1px solid #dbdbdb; }
}