/* ==========================================================================
   Hardware Academy Checkout Pages
   Tokens match academy.html / index.html on predictabledesigns.com.
   Selectors under "MemberPress form" target classes MemberPress prints itself.
   ========================================================================== */
:root{
  --orange:#F97211;
  --orange-2:#FE8F3B;
  --navy:#1A3C66;
  --dark:#2B3037;
  --light:#F6F7F9;
  --ink:#313131;
  --muted:#5b6373;
  --line:#E3E6EC;
  --field-line:#C9CFD8;
}
body.hwa-checkout{margin:0;padding:0;font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:18px;line-height:1.6;color:var(--ink);background:var(--light)}
body.hwa-checkout *{box-sizing:border-box}
body.hwa-checkout img{max-width:100%;height:auto}
body.hwa-checkout a{color:#1667c9}
body.hwa-checkout a:focus-visible,body.hwa-checkout button:focus-visible,body.hwa-checkout input:focus-visible{outline:3px solid rgba(249,114,17,.5);outline-offset:2px}
body.hwa-checkout strong{font-weight:700}

/* ---------- header ---------- */
.hwa-checkout .site-header{background:#fff;border-bottom:1px solid var(--line);padding:16px 0 14px}
.hwa-checkout .site-header .hwrap{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hwa-checkout .site-header .logo{display:block;line-height:0}
.hwa-checkout .site-header .logo img{width:200px;height:auto;display:block}
.hwa-checkout .secure{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:0;white-space:nowrap}
.hwa-checkout .secure svg{width:16px;height:16px;flex:none}

/* ---------- page grid ---------- */
.hwa-checkout .checkout{max-width:1240px;margin:0 auto;padding:44px 24px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head form" "detail form";grid-template-rows:auto 1fr;gap:0 52px;align-items:start}
.hwa-checkout .plan-head{grid-area:head}
.hwa-checkout .plan-detail{grid-area:detail}
.hwa-checkout .form-card{grid-area:form}

/* ---------- left column ---------- */
.hwa-checkout .plan h1{font-family:'IBM Plex Sans','Open Sans',sans-serif;font-weight:600;font-size:clamp(30px,3vw,40px);line-height:1.22;color:var(--navy);margin:0 0 10px;padding:0;background:none}
.hwa-checkout .plan .lede{font-size:19px;line-height:1.55;margin:0 0 30px;color:var(--ink)}
.hwa-checkout .quote{border-left:5px solid var(--orange);padding:6px 0 6px 20px;margin:0 0 30px;background:none}
.hwa-checkout .quote p{margin:0;font-style:italic;font-size:22px;line-height:1.45;color:var(--dark)}
.hwa-checkout .quote cite{display:block;font-style:normal;font-size:15.5px;color:var(--muted);margin-top:8px}
.hwa-checkout .plan h2{font-family:'IBM Plex Sans','Open Sans',sans-serif;font-weight:600;font-size:22px;line-height:1.3;color:var(--navy);margin:0 0 14px;padding:0}
.hwa-checkout .includes{list-style:none;margin:0 0 28px;padding:0}
.hwa-checkout .includes li{position:relative;padding:0 0 0 32px;margin:0 0 12px;font-size:17px;line-height:1.5;list-style:none;text-wrap:balance}
.hwa-checkout .plan .lede,.hwa-checkout .quote p,.hwa-checkout .confidential,.hwa-checkout .note-inner p{text-wrap:pretty}
.hwa-checkout .includes li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--orange) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15.5 6.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/20px no-repeat}
.hwa-checkout .confidential{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:10px}
.hwa-checkout .confidential strong{color:var(--navy);font-weight:700}

/* ---------- form card ---------- */
.hwa-checkout .form-card{background:#fff;border:1px solid var(--line);border-top:6px solid var(--orange);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.10);padding:30px 34px 32px}
.hwa-checkout .form-card .form-title{font-family:'IBM Plex Sans','Open Sans',sans-serif;font-weight:600;font-size:22px;color:var(--navy);margin:0 0 16px;padding:0}

/* payment choice */
.hwa-checkout .pay-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px}
.hwa-checkout .pay-choice.single{grid-template-columns:1fr}
.hwa-checkout .pay-choice .opt{display:block;width:100%;font:inherit;text-align:left;appearance:none;-webkit-appearance:none;border:2px solid var(--line);border-radius:10px;padding:14px 16px 14px 44px;position:relative;text-decoration:none;color:var(--ink);background:#fff;cursor:pointer;margin:0}
.hwa-checkout .pay-choice .opt::before{content:"";position:absolute;left:15px;top:19px;width:18px;height:18px;border-radius:50%;border:2px solid #A6AEBB;background:#fff}
.hwa-checkout .pay-choice .opt.selected{border-color:var(--orange);background:#FFF8F3}
.hwa-checkout .pay-choice .opt.selected::before{border-color:var(--orange);background:radial-gradient(circle,var(--orange) 0 5px,#fff 6px)}
.hwa-checkout .pay-choice .opt:hover{border-color:#A6AEBB}
.hwa-checkout .pay-choice .opt.selected:hover{border-color:var(--orange)}
.hwa-checkout .pay-choice.single .opt{padding-left:16px;cursor:default}
.hwa-checkout .pay-choice.single .opt::before{display:none}
.hwa-checkout .pay-choice .opt .name{display:block;font-weight:700;font-size:16px;line-height:1.3}
.hwa-checkout .pay-choice .opt .amt{display:block;font-family:'IBM Plex Sans','Open Sans',sans-serif;font-weight:700;font-size:26px;line-height:1.2;color:var(--navy);margin-top:4px;white-space:nowrap}
.hwa-checkout .pay-choice .opt .sub{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:4px}
.hwa-checkout .pay-choice .opt .badge{position:absolute;top:-11px;right:12px;background:var(--navy);color:#fff;font-family:'IBM Plex Sans','Open Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;line-height:1;padding:5px 10px;border-radius:999px;white-space:nowrap}

/* stacked layout: one option per row, amount on the right, room for a descriptive sub line */
.hwa-checkout .pay-choice.stack{grid-template-columns:1fr;gap:10px}
.hwa-checkout .pay-choice.stack .opt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name amt" "sub amt";column-gap:14px;align-items:center;padding:14px 16px 14px 44px}
.hwa-checkout .pay-choice.stack .opt .name{grid-area:name}
.hwa-checkout .pay-choice.stack .opt .amt{grid-area:amt;margin:0;text-align:right;font-size:24px;align-self:center}
.hwa-checkout .pay-choice.stack .opt .sub{grid-area:sub;margin-top:3px;font-size:14px;line-height:1.45;text-wrap:pretty}
.hwa-checkout .pay-choice.stack .opt::before{top:17px}

/* after the form */
.hwa-checkout .guarantee{text-align:center;font-size:15.5px;line-height:1.5;margin:14px 0 0;color:var(--ink);white-space:nowrap}
.hwa-checkout .trust{display:flex;justify-content:center;align-items:center;gap:8px;font-size:13.5px;line-height:1.45;color:var(--muted);margin:22px 0 -8px}
.hwa-checkout .trust svg{width:14px;height:14px;flex:none}
.hwa-checkout .next{margin:22px 0 0;padding:16px 18px;background:var(--light);border-radius:10px;font-size:15.5px;line-height:1.55}
.hwa-checkout .next strong{display:block;color:var(--navy);margin-bottom:2px}
.hwa-checkout .next p{margin:0}

/* ---------- MemberPress form ----------
   Every selector targets markup MemberPress prints. !important is used where
   MemberPress's theme.css / signup.css set the same property. */
.hwa-checkout .form-card .mp_wrapper{margin:0;padding:0}
.hwa-checkout .form-card .mepr-signup-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:0;padding:0}
.hwa-checkout .form-card .mepr-signup-form > *{grid-column:1 / -1;min-width:0}
.hwa-checkout .form-card .mepr-signup-form > .mp-form-row.mepr_first_name,
.hwa-checkout .form-card .mepr-signup-form > .mp-form-row.mepr_last_name{grid-column:auto}

/* rows MemberPress prints that this layout does not use */
.hwa-checkout .form-card .mepr_price,
.hwa-checkout .form-card .mepr-order-bumps-notice,
.hwa-checkout .form-card .mepr-payment-methods-icons,
.hwa-checkout .form-card .mepr-payment-methods-wrapper hr,
.hwa-checkout .form-card .mepr_spacer{display:none !important}
.hwa-checkout .form-card .mepr-hidden,
.hwa-checkout .form-card .mepr-visuallyhidden{display:none !important}
/* validation messages: hidden until MemberPress's script shows them */
.hwa-checkout .form-card .cc-error{display:none;color:#c62828;font-size:13px;font-weight:400;margin-left:8px}
.hwa-checkout .form-card .mepr-form-has-errors{display:none;color:#c62828;font-size:14px;margin:8px 0 0}
.hwa-checkout .form-card .mepr_error,
.hwa-checkout .form-card .mepr-form-errors{background:#FDECEC;border:1px solid #F5C2C2;border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:15px;line-height:1.5;color:#8a1c1c}
.hwa-checkout .form-card .mepr_error ul{margin:0;padding:0 0 0 18px}

/* text fields */
.hwa-checkout .form-card .mp-form-row{margin:0 0 14px !important;padding:0}
.hwa-checkout .form-card .mp-form-label{margin:0}
.hwa-checkout .form-card .mp-form-label label{display:block;font-size:14.5px;font-weight:600;color:var(--dark);margin:0 0 5px;padding:0}
.hwa-checkout .form-card input.mepr-form-input[type=text],
.hwa-checkout .form-card input.mepr-form-input[type=email],
.hwa-checkout .form-card input.mepr-form-input[type=password],
.hwa-checkout .form-card input.mepr-form-input[type=tel],
.hwa-checkout .form-card select.mepr-form-input{width:100% !important;max-width:none !important;font:inherit;font-size:16px !important;line-height:1.4;padding:11px 13px !important;margin:0 !important;border:1px solid var(--field-line) !important;border-radius:8px !important;background:#fff !important;color:var(--ink) !important;box-shadow:none !important;height:auto !important}
.hwa-checkout .form-card input.mepr-form-input:focus{border-color:var(--orange) !important;outline:none;box-shadow:0 0 0 3px rgba(249,114,17,.18) !important}

/* payment method */
.hwa-checkout .form-card fieldset.mepr-payment-methods-wrapper{border:0;padding:0;margin:6px 0 16px;min-width:0;background:none}
.hwa-checkout .form-card .mepr-payment-methods-wrapper legend{font-size:14.5px;font-weight:600;color:var(--dark);padding:0;margin:0 0 8px;width:auto}
.hwa-checkout .form-card .mepr-payment-methods-radios{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 12px}
.hwa-checkout .form-card .mepr-payment-option-label{display:flex !important;align-items:center;gap:8px;font-size:16px;font-weight:400;line-height:1.3;cursor:pointer;margin:0 !important;padding:0}
.hwa-checkout .form-card .mepr-form-radio{width:18px !important;height:18px !important;accent-color:var(--orange);margin:0 !important}
.hwa-checkout .form-card .mepr-payment-method-desc-text{margin:0;padding:0}
.hwa-checkout .form-card .mepr-payment-method-paypalcommerce p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.hwa-checkout .form-card .mepr-stripe-elements{margin:0}
.hwa-checkout .form-card .mepr-stripe-card-element{padding:0;border:0;background:transparent;box-shadow:none}
.hwa-checkout .form-card .mepr-stripe-card-errors,
.hwa-checkout .form-card .mepr-paypal-card-errors{color:#c62828;font-size:14px;margin:6px 0 0}
.hwa-checkout .form-card .mepr-stripe-card-errors:empty,
.hwa-checkout .form-card .mepr-paypal-card-errors:empty{display:none}
.hwa-checkout .form-card .mepr_nojs{font-size:14px;color:#c62828}

/* terms (row rebuilt by hwa_checkout_fix_terms; classes below are ours)
   The checkbox is taken out of the text flow and pinned to the left edge, so the gap between it
   and the text is set by the label padding alone and cannot be widened by MemberPress's checkbox CSS. */
.hwa-checkout .form-card .mp-form-row.mepr_tos{padding:0 !important;margin:0 0 14px !important;text-indent:0}
.hwa-checkout .form-card .hwa-terms-label{position:relative !important;display:block !important;width:auto;min-height:24px;padding:0 0 0 30px !important;margin:0 !important;text-indent:0 !important;border:0;background:none;font-weight:400 !important;color:var(--ink);cursor:pointer}
.hwa-checkout .form-card .hwa-terms-label input[type=checkbox]{position:absolute !important;left:0 !important;top:2px !important;right:auto !important;float:none !important;display:block !important;width:20px !important;height:20px !important;min-width:0 !important;margin:0 !important;padding:0 !important;transform:none !important;accent-color:var(--orange)}
.hwa-checkout .form-card .hwa-terms-text{display:block;font-size:15px !important;line-height:1.5 !important;font-weight:400 !important;text-indent:0 !important;margin:0 !important;padding:0 !important;white-space:normal !important;overflow-wrap:anywhere}
.hwa-checkout .form-card .hwa-terms-text a{color:#1667c9 !important;text-decoration:underline !important;font-size:inherit !important}
/* fallback if the row could not be rebuilt */
.hwa-checkout .form-card .mepr_tos:not(.hwa-terms) label{display:block;font-size:15px;line-height:1.5;font-weight:400;white-space:normal !important}
.hwa-checkout .form-card .mepr_tos:not(.hwa-terms) input[type=checkbox]{width:20px !important;height:20px !important;margin:0 10px 0 0 !important;vertical-align:-4px}
.hwa-checkout .form-card .mepr_tos:not(.hwa-terms) a{white-space:normal !important}

/* submit */
.hwa-checkout .form-card .mp-form-submit{margin:20px 0 0 !important;padding:0;text-align:center}
.hwa-checkout .form-card input.mepr-submit{display:block;width:100% !important;border:0 !important;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0 !important;font-family:'IBM Plex Sans','Open Sans',sans-serif !important;font-size:18px !important;font-weight:700 !important;letter-spacing:2px !important;text-transform:uppercase;color:#fff !important;background:linear-gradient(180deg,var(--orange-2),var(--orange)) !important;padding:18px 30px !important;border-radius:10px !important;text-align:center;line-height:1.2 !important;box-shadow:none !important}
.hwa-checkout .form-card input.mepr-submit:hover{filter:brightness(1.04)}
.hwa-checkout .form-card .mepr-loading-gif{display:none;margin:10px auto 0}

/* ---------- personal note (left column, under the confidentiality box) ---------- */
.hwa-checkout .note{margin:22px 0 0}
.hwa-checkout .note-inner{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.hwa-checkout .note-inner .photo{flex:none;width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans','Open Sans',sans-serif;font-weight:600;font-size:22px;letter-spacing:1px;overflow:hidden}
.hwa-checkout .note-inner .photo img{width:100%;height:100%;object-fit:cover;display:block}
.hwa-checkout .note-inner p{margin:0 0 8px;font-size:16px;line-height:1.55}
.hwa-checkout .note-inner p:last-child{margin:0}
.hwa-checkout .note-inner .sig{font-size:15px;line-height:1.4;color:var(--muted)}
.hwa-checkout .note-inner .sig strong{display:block;color:var(--ink)}
.hwa-checkout .note-inner .sig .role{display:block;font-size:14px}

/* ---------- footer ---------- */
/* The site's footer-scripts block prints its own copyright paragraph on every page; this template has a styled one. */
.hwa-checkout p[align="center"][style*="font-size"]{display:none !important}
.hwa-checkout .site-footer{background:#fff;border-top:1px solid var(--line);padding:22px 24px;text-align:center;font-size:14px;color:var(--muted)}
.hwa-checkout .site-footer a{color:var(--muted)}
.hwa-checkout .site-footer span{margin:0 6px}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .hwa-checkout .checkout{gap:0 40px}
  .hwa-checkout .form-card{padding:28px 26px 30px}
  .hwa-checkout .guarantee{font-size:14.5px}
}
@media (max-width:1099px){
  .hwa-checkout .checkout{grid-template-columns:1fr;grid-template-areas:"head" "form" "detail";grid-template-rows:auto;gap:0;padding:34px 20px 48px;max-width:760px}
  .hwa-checkout .plan h1{font-size:32px}
  .hwa-checkout .plan .lede{margin-bottom:22px}
  .hwa-checkout .form-card{margin-bottom:36px}
}
@media (max-width:600px){
  .hwa-checkout .site-header .logo img{width:170px}
  .hwa-checkout .secure span{display:none}
  .hwa-checkout .pay-choice{grid-template-columns:1fr}
  .hwa-checkout .pay-choice.stack .opt .amt{font-size:21px}
  .hwa-checkout .form-card{padding:22px 18px 24px}
  .hwa-checkout .form-card .mepr-signup-form{grid-template-columns:1fr}
  .hwa-checkout .form-card .mepr-signup-form > .mp-form-row.mepr_first_name,
  .hwa-checkout .form-card .mepr-signup-form > .mp-form-row.mepr_last_name{grid-column:1 / -1}
  .hwa-checkout .form-card input.mepr-submit{font-size:17px !important;letter-spacing:1.5px !important;padding:17px 20px !important}
  .hwa-checkout .guarantee{white-space:normal}
  .hwa-checkout .quote p{font-size:20px}
  .hwa-checkout .note-inner{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px}
}
@media (max-width:360px){
  .hwa-checkout .includes li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){body.hwa-checkout *{transition:none !important}}