/* Yanks.com Join Page v4 — Based on RGC design
   Combined stylesheet with responsive breakpoints
   ================================================ */

/* === Reset & Base === */
header,section,footer,aside,nav,main,article,figure{display:block}
body{margin:0; padding:0; font-family:Arial, sans-serif;}
ol,ul{list-style:none}
blockquote,q{quotes:none}
img{border:none; margin:0; padding:0; max-width:100%; display:block;}
textarea{outline:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
a{text-decoration:none; outline:none;}
h1,h2,h3,h4,h5,h6,ul,p,form,input{margin:0; padding:0; outline:none; font-weight:normal;}
.clear:before,.clear:after{content:" "; display:table;}
.clear:after{clear:both;}
.clear{*zoom:1;}
input[type="submit"],button[type="submit"]{-webkit-appearance:none;}
a, .completeBtn, .applyBtn{-webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in;}
.none{-webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none;}
select{-webkit-appearance:none; -moz-appearance:none; text-indent:1px; text-overflow:'';}
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
::-webkit-input-placeholder{color:#676767; opacity:1;}
::-moz-placeholder{color:#676767; opacity:1;}
:-ms-input-placeholder{color:#676767; opacity:1;}
:-moz-placeholder{color:#676767; opacity:1;}
.noSelect{-webkit-user-select:none; -ms-user-select:none; user-select:none;}

/* === Layout === */
.centerwrap{width:1308px; margin:auto; display:flex; padding-top:46px; padding-bottom:60px; justify-content:space-between; flex-wrap:wrap;}
.joinArea{display:flex; justify-content:space-between; flex-wrap:wrap; width:100%;}
.joinLeft{width:603px;}
.joinModel{margin-bottom:15px;}
.joinModel img{width:100%;}
.joinRight{width:634px; display:flex; flex-direction:column; overflow:hidden;}
.joinLogo{display:flex; justify-content:center; padding-bottom:18px;}
.joinLogo img{max-width:280px; height:auto;}

/* === Mobile Banner === */
.mobile-banner{display:none; margin-bottom:16px; overflow:hidden;}
.mobile-banner img{width:100%; height:auto; border-radius:8px; max-width:100%;}

/* === Charity Section === */
.womenHelp{background-color:#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-size:24px; font-family:Arial, sans-serif; font-weight:700; color:#676767; letter-spacing:-0.015em; text-align:center;}
.joinYanks p{font-size:12px; line-height:16px; font-family:Arial, sans-serif; letter-spacing:-0.03em; color:#676767;}
.joinYanks p a{color:#676767; text-decoration:underline;}
.joinYanks p a:hover{color:#676767; text-decoration:none;}
.charity-link{text-decoration:none; color:inherit; display:block;}
.charity-link:hover{text-decoration:none;}

/* === Form Sections === */
.joinFirst{padding-bottom:32px;}
.joinSecond{padding-bottom:18px;}
.joinThird{padding-bottom:18px;}
.joinRight h3{font-size:24px; font-family:Arial, sans-serif; color:#113A73; font-weight:700; padding-bottom:10px;}
.twoColumns{display:flex; justify-content:space-between; padding-bottom:15px;}
.twoColumns .deBox{width:49%;}
.deBox{margin-bottom:12px;}

/* === Input Fields (Floating Labels) === */
.input-wrap{position:relative; width:100%;}
.input-wrap input[type="text"],
.input-wrap input[type="password"]{
    width:100%; height:51px; padding:0 15px;
    font-family:Arial, sans-serif; font-size:14px; color:#676767;
    border:1px solid #999; background:#f7f7f7;
    outline:none; box-sizing:border-box;
}
.input-wrap input:focus{border-color:#113A73;}
.input-wrap input.has-error{border-color:#d41051; background:#fff5f5;}
.float-label{
    position:absolute; left:10px; top:0;
    transform:translateY(-50%);
    font-size:12px; font-weight:700; color:#676767;
    background:#f7f7f7; padding:0 5px;
    pointer-events:none; z-index:2;
    line-height:1; white-space:nowrap;
}
.input-wrap input:focus ~ .float-label{color:#113A73;}
.input-wrap input.has-error ~ .float-label{color:#d41051;}
.field-helper{font-size:12px; color:#777; padding-top:4px;}

/* === Error Messages === */
.field-error{
    color:#d41051; display:block; padding:4px 10px;
    background:pink; border:1px solid #d41051;
    border-radius:3px; margin-bottom:5px; font-size:13px;
}

/* === Membership Options === */
.membershipArea{}
.option-row{
    height:68px; cursor:pointer; border:1px solid #999; background:#f7f7f7;
    display:flex; position:relative; align-items:center;
    justify-content:space-between;
    padding-left:18px; padding-right:14px; margin-bottom:7px;
    user-select:none; -webkit-user-select:none;
}
.option-row:last-of-type{margin-bottom:0;}
.option-row input[type="radio"],
.option-row .option.button{position:absolute; left:-9999px; top:0;}
.memberMonths{font-size:19px; color:#676767; letter-spacing:-0.005em;}
.memberMonths span{display:block; font-size:14px; letter-spacing:-0.005em;}
.memberPrice{font-size:28px; color:#404040; letter-spacing:-0.025em; text-align:center;}
.memberPrice span{display:block; font-size:13px; color:#404040; letter-spacing:-0.025em;}
.mostPopular{font-size:15px; color:#ffffff; background-color:#b50000; line-height:34px; padding:0 12px; text-transform:uppercase; margin-left:auto; margin-right:50px;}
.option-row.active{background-color:#2f3030; border-color:#2f3030;}
.option-row.active .memberMonths,
.option-row.active .memberPrice,
.option-row.active .memberPrice span{color:#fff;}

/* === Payment Section === */
.payvia{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.payvia label{flex:1 1 28%; min-width:28%; height:56px; position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:6px 12px; border:2px solid #c5c5c5; border-radius:6px; transition:all 200ms ease-in;}
.payvia label.active{border:3px solid rgba(165, 202, 26, 1);}
.payvia label img{height:38px; width:auto; display:block; max-width:100%;}

/* === Promo Code === */
.promoCode{text-align:right; font-size:15px; letter-spacing:-0.005em; padding-top:16px;}
.promoCode a{color:#113A73; text-decoration:underline; font-weight:600;}
.promoCode a:hover{color:#113A73; text-decoration:none;}
.addPromoCode{display:none; margin-top:16px; margin-bottom:5px; position:relative;}
.promoWrap{position:relative; display:inline-block; width:100%;}
.promoBox{font-family:Arial, sans-serif; font-size:16px; letter-spacing:-0.005em; color:#676767; padding:0 100px 0 15px; border:2px solid #999; border-radius:6px; background:#f7f7f7; height:51px; width:100%; box-sizing:border-box; display:block;}
.applyBtn{background-color:rgba(165, 202, 26, 1); color:#fff; height:37px; font-family:Arial, sans-serif; font-size:15px; position:absolute; right:4px; top:50%; transform:translateY(-50%); cursor:pointer; border:2px solid rgba(165, 202, 26, 1); text-transform:uppercase; font-weight:700; padding:0 14px; border-radius:4px; box-sizing:border-box;}
.applyBtn:hover{background-color:#fff; color:rgba(165, 202, 26, 1);}
.closePromo{position:absolute; right:-24px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:22px; color:#999; cursor:pointer; padding:0 5px; line-height:1;}
.closePromo:hover{color:#d41051;}

/* === Submit Button === */
.complete{margin-top:0;}
.completeBtn{background-color:rgba(165, 202, 26, 1); border:2px solid rgba(165, 202, 26, 1); cursor:pointer; font-size:23px; font-weight:700; color:#ffffff; font-family:Arial, sans-serif; letter-spacing:-0.015em; text-shadow:0 4px 11px rgba(111,137,12,0.3); width:100%; height:50px; display:block; text-align:center; line-height:46px;}
.completeBtn:hover{background-color:#fff; color:rgba(165, 202, 26, 1);}
.completeBtn:disabled{opacity:0.4; cursor:not-allowed;}

/* === Checkboxes === */
.container-checkbox{font-size:13px; letter-spacing:-0.005em; margin-bottom:10px; display:flex; align-items:center;}
.container-checkbox input{width:18px; height:18px; margin-right:10px; cursor:pointer; flex-shrink:0;}
.container-checkbox a{color:#103a73; text-decoration:underline; margin-left:3px;}
.container-checkbox a:hover{color:#103a73; text-decoration:none;}

/* === Captcha === */
.captcha-section{margin-bottom:15px;}

/* === Noscript === */
.noscript-options,
.noscript-cascades{padding:10px 0;}

/* === Cross-sells === */
#xsells{margin-top:10px;}

/* === Mail-in Link === */
.mail-in-link{text-align:center; margin-top:15px; font-size:13px;}
.mail-in-link a{font-weight:700; color:#113A73; text-decoration:underline;}
.mail-in-link a:hover{color:#113A73; text-decoration:none;}

/* === Critics Reviews === */
.reviews-block{background:linear-gradient(160deg, #0c1524 0%, #111827 40%, #151f30 100%); color:#fff; padding:56px 28px 64px; position:relative;}
.reviews-block::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(165,202,26,0.3), transparent);}
.reviews-wrap{max-width:1280px; margin:0 auto;}
.reviews-title{font-size:28px; font-weight:800; font-style:italic; color:#fff; text-align:center; margin-bottom:36px; letter-spacing:-0.01em; font-family:Arial, sans-serif;}
.reviews-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.review-card{background:linear-gradient(145deg, rgba(31,41,55,0.9), rgba(17,24,39,0.95)); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:26px 22px; display:flex; flex-direction:column; gap:16px; transition:all 350ms cubic-bezier(0.22, 0.68, 0, 1.1); position:relative; overflow:hidden;}
.review-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #a5ca1a, #b8d930); opacity:0; transition:opacity 300ms;}
.review-card__header{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.review-card__source{font-weight:900; font-size:0.95rem; color:#a5ca1a; letter-spacing:0.03em; text-transform:uppercase;}
.review-card__score{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.review-stars{color:#f59e0b; font-size:0.9rem; letter-spacing:1px;}
.review-grade{font-size:1.4rem; font-weight:900; color:#a5ca1a; line-height:1; text-shadow:0 0 12px rgba(165,202,26,0.3);}
.review-score-label{font-size:0.65rem; color:#6b7280; text-transform:uppercase; letter-spacing:0.05em;}
.review-card__quote{margin:0; font-size:0.88rem; line-height:1.65; color:#d1d5db; font-style:italic; border-left:3px solid #a5ca1a; padding-left:14px; flex-grow:1;}
.review-card__pros{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px;}
.review-card__pros li{font-size:0.8rem; color:#c9cfd8; padding-left:22px; position:relative;}
.review-card__pros li::before{content:'\2713'; position:absolute; left:0; color:#a5ca1a; font-weight:900; font-size:1.15rem;}
.reviews-title-link, .review-card-link{text-decoration:none; color:inherit; display:block;}
.reviews-title-link:hover, .review-card-link:hover{text-decoration:none;}
.review-card-link{border-radius:16px;}
.review-card-link:hover .review-card{border-color:rgba(165,202,26,0.3); transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,0.25), 0 0 20px rgba(165,202,26,0.08);}
.review-card-link:hover .review-card::before{opacity:1;}

/* === Footer === */
footer{background:#060810; color:#888; text-align:center; font-family:Arial, sans-serif; font-size:12px; line-height:1.65;}
.footer-help{padding:32px 28px;}
.help-btn, .help-btn:visited{display:inline-block; padding:12px 36px; background:linear-gradient(135deg, #a5ca1a, #8aaa10); color:#fff; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; border-radius:8px; text-decoration:none; border:2px solid #a5ca1a; transition:all 250ms; box-shadow:0 4px 14px rgba(165,202,26,0.25);}
.help-btn:hover{background:linear-gradient(135deg, #b8d930, #a5ca1a); border-color:#b8d930; color:#fff; box-shadow:0 6px 20px rgba(165,202,26,0.4); transform:translateY(-1px);}
.footer-content{max-width:800px; margin:0 auto; padding:0 28px 24px;}
.footer-content p{margin-bottom:8px; color:#888;}
.footer-content a{color:#aaa; transition:color 200ms;}
.footer-content a:hover{color:#fff;}
.footer-content hr{border:none; border-top:1px solid #222; margin:18px 0;}
.footer-copyright{font-weight:700; margin-bottom:14px; color:#aaa;}
.footer-rta{display:flex; justify-content:center; padding:12px 0 28px;}
.footer-rta img{display:inline-block; border:none;}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media only screen and (max-width:1590px){
    .centerwrap{width:1250px;}
    .joinRight{width:624px;}
    .twoColumns .deBox{width:49%;}
}

@media only screen and (max-width:1279px){
    .centerwrap{width:994px; padding-top:32px;}
    .joinLeft{width:45%;}
    .joinRight{width:53%;}
    .joinRight h3{font-size:20px;}
    .joinLogo img{max-width:260px;}
    .joinTextBox{height:46px; font-size:15px;}
    .input-wrap input[type="text"],
    .input-wrap input[type="password"]{height:46px; font-size:15px;}
    .twoColumns{padding-bottom:10px;}
    .option-row{padding-left:14px; height:62px;}
    .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;}
    .joinFirst{padding-bottom:20px;}
    .memberMonths{font-size:18px;}
    .memberPrice{font-size:24px;}
    .promoCode{font-size:14px; padding-top:8px;}
    .addPromoCode{margin-top:10px;}
    .completeBtn{font-size:20px;}
    .payvia label{height:48px;}
    .promoBox{height:46px; font-size:15px;}
    .applyBtn{height:34px; font-size:14px;}
}

@media only screen and (max-width:1023px){
    .centerwrap{width:748px; padding-top:22px;}
    .joinLeft{order:1; width:100%;}
    .joinRight{width:100%; padding-bottom:40px;}
    .joinModel{display:none;}
    .mobile-banner{display:block;}
    .joinFirst{padding-bottom:32px;}
    .option-row{height:68px;}
    .reviews-grid{grid-template-columns:1fr; max-width:540px; margin:0 auto;}
    .reviews-block{padding:44px 16px;}
    .reviews-title{font-size:23px;}
}

@media only screen and (max-width:767px){
    .centerwrap{width:96%;}
    .payvia label{height:48px;}
    .completeBtn{height:45px;}
    .joinLogo img{max-width:180px;}
    .input-wrap input[type="text"],
    .input-wrap input[type="password"]{height:42px; font-size:14px; padding:0 12px;}
    .joinFirst{padding-bottom:24px;}
    .joinRight h3{font-size:18px; padding-bottom:6px;}
    .mostPopular{font-size:13px; line-height:32px; padding:0 10px; margin-right:10px;}
    .memberMonths span{font-size:13px; letter-spacing:normal;}
    .promoBox{padding-left:12px;}
}

@media only screen and (max-width:479px){
    .centerwrap{width:94%;}
    .joinLogo img{max-width:150px;}
    .twoColumns{flex-wrap:wrap;}
    .twoColumns .deBox{width:100%; padding-bottom:8px;}
    .twoColumns .deBox:last-child{padding-bottom:0;}
    .option-row{height:auto; flex-direction:column; padding:10px; align-items:center;}
    .mostPopular{margin:auto; margin-bottom:8px; margin-top:3px;}
    .memberMonths{text-align:center; padding-bottom:8px;}
    .completeBtn{font-size:18px; height:42px;}
    .womenHelp{flex-direction:column;}
    .calltosafety{padding-right:0; padding-bottom:10px;}
    .joinYanks{padding-top:10px; padding-left:0; width:100%; text-align:center; border-left:0; border-top:1px solid #dbdbdb;}
    .promoBox{letter-spacing:normal;}
    .reviews-title{font-size:20px;}
    .review-card{padding:20px 16px;}
}