/* =====================================================================
   zap-forms.css — shared styling for the ZapMyTax redesign's lighter pages
   (auth, payment, confirmation) that use _LayoutZapAuth. Consumes the design
   tokens from zap-redesign.css. Kept under Content/zap-redesign/ so it is NOT
   auto-bundled and cannot leak into the live site.

   Loading model:
     • auth pages  -> zap-redesign.css + zap-forms.css        (content in .auth-card)
     • pay pages   -> zap-redesign.css + zap-apply.css + zap-forms.css (content in .zap-apply)
   The pay-only grid/layout additions are scoped under .zap-apply so they extend
   (never conflict with) zap-apply.css.
   ===================================================================== */

/* ---- Page shell: clear the fixed nav, keep short pages tall enough ---- */
.zap-page{
  padding-top:calc(var(--nav-h) + 48px);
  padding-bottom:64px;
  min-height:100vh;
}
.zap-page-narrow{max-width:820px}

/* ---- Section heading for simple pages ---- */
.zap-page-head{text-align:center;margin-bottom:32px}
.zap-page-head h1{font-size:clamp(28px,3.4vw,40px);color:var(--dark-blue-deep);margin-bottom:8px}
.zap-page-head p{color:var(--blue);font-size:16px;max-width:600px;margin:0 auto}

/* ---- Generic content card (confirmation messages, portal tiles, errors) ---- */
.zap-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 12px 40px rgba(17,50,84,.08);padding:32px;
}
.zap-card h2,.zap-card h3{color:var(--dark-blue-deep);margin-bottom:12px}
.zap-card p{color:var(--blue);line-height:1.7;margin-bottom:12px}

/* =====================================================================
   AUTH CARD — login / register / password reset / verification pages
   ===================================================================== */
.auth-wrap{display:flex;justify-content:center}
.auth-card{
  width:100%;max-width:460px;background:var(--white);
  border:1px solid var(--border);border-radius:16px;
  box-shadow:0 12px 40px rgba(17,50,84,.10);
  padding:36px 34px;font-family:var(--font-body);color:var(--black);
}
.auth-card--wide{max-width:560px}
.auth-logo{display:block;height:52px;width:auto;margin:0 auto 20px}
.auth-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--dark-blue-deep);text-align:center;margin-bottom:6px}
.auth-sub{text-align:center;color:var(--blue);font-size:14px;margin-bottom:26px}

.auth-card .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.auth-card label,.auth-card .control-label{font-size:13px;font-weight:600;color:var(--dark-blue-deep)}
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="tel"],
.auth-card input[type="number"],
.auth-card select,
.auth-card textarea,
.auth-card .form-control{
  width:100%;padding:12px 14px;border:1.5px solid var(--gray);border-radius:8px;
  font-family:var(--font-body);font-size:15px;color:var(--black);background:var(--white);
  transition:border-color .2s;outline:none;
}
.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus,.auth-card .form-control:focus{border-color:var(--dark-blue-deep)}

/* checkbox rows (remember me / remember browser) */
.auth-card .checkbox,.auth-card .auth-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--blue);margin:4px 0 18px}
.auth-card .checkbox input,.auth-card .auth-check input[type="checkbox"]{width:auto;margin:0;accent-color:var(--green)}
.auth-card .checkbox label{font-weight:400;color:var(--blue)}

/* full-width primary submit */
.auth-card .btn-primary,.auth-card .auth-submit{
  width:100%;justify-content:center;font-size:16px;padding:14px;margin-top:4px;
}
.auth-card .btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--white);color:var(--dark-blue-deep);font-weight:600;font-size:15px;
  padding:12px;border:2px solid var(--gray);border-radius:50px;cursor:pointer;transition:all .25s ease;
}
.auth-card .btn-secondary:hover{border-color:var(--dark-blue-deep)}

/* helper links under the form */
.auth-links{text-align:center;margin-top:20px;font-size:14px;color:var(--blue)}
.auth-links a{color:var(--dark-blue-deep);font-weight:600}
.auth-links a:hover{color:var(--green)}
.auth-sep{height:1px;background:var(--border);margin:22px 0}

/* tabbed auth (AdvancedLogin: PIN login vs. email login) */
.auth-tabs{display:flex;gap:8px;background:var(--light-blue);border-radius:12px;padding:5px;margin-bottom:24px}
.auth-tab{
  flex:1;text-align:center;padding:10px 12px;border-radius:9px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--blue);background:transparent;transition:all .2s;
}
.auth-tab.is-active{background:var(--white);color:var(--dark-blue-deep);box-shadow:0 4px 12px rgba(17,50,84,.08)}
.auth-panel{display:none}
.auth-panel.is-active{display:block}

/* =====================================================================
   VALIDATION — MVC's unobtrusive-validation output (used on auth + pay)
   ===================================================================== */
.field-validation-error,.text-danger,.auth-card .text-danger{color:#c0392b;font-size:12.5px;font-weight:500}
.input-validation-error,.auth-card .input-validation-error{border-color:#c0392b !important}
.validation-summary-errors{
  background:#fdecec;border:1px solid #f5c2c0;color:#a12622;border-radius:10px;
  padding:12px 16px 12px 34px;margin-bottom:18px;font-size:13.5px;position:relative;
}
.validation-summary-errors::before{content:"!";position:absolute;left:14px;top:12px;font-weight:800;color:#c0392b}
.validation-summary-errors ul{margin:0;padding:0;list-style:none}
.validation-summary-errors li{margin:2px 0}
.validation-summary-valid{display:none}

/* generic alerts on light pages (pay pages' scoped .zap-apply .alert wins where present) */
.zap-alert{border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:14px}
.zap-alert-danger{background:#fdecec;border:1px solid #f5c2c0;color:#a12622}
.zap-alert-success{background:#e8f8ef;border:1px solid #b6e6cb;color:#0a7c47}
.zap-alert-info{background:var(--light-blue);border:1px solid var(--border);color:var(--dark-blue-deep)}

/* =====================================================================
   PAY-PAGE GRID ADDITIONS — extend zap-apply.css's scoped grid with the
   column widths the payment views use but zap-apply.css doesn't define.
   All scoped under .zap-apply so they only apply where that root is present.
   ===================================================================== */
.zap-apply .col-6{flex:0 0 50%;max-width:50%}
.zap-apply .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
.zap-apply .col-md-5{flex:0 0 41.6667%;max-width:41.6667%}
.zap-apply .col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
.zap-apply .col-md-9{flex:0 0 75%;max-width:75%}
.zap-apply .col-md-3{flex:0 0 25%;max-width:25%}
.zap-apply .col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}
.zap-apply .col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}
.zap-apply .col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}
.zap-apply .col-sm-12{flex:0 0 100%;max-width:100%}
@media(max-width:768px){
  .zap-apply .col-6,.zap-apply .col-md-3,.zap-apply .col-md-4,.zap-apply .col-md-5,
  .zap-apply .col-md-8,.zap-apply .col-md-9,.zap-apply .col-lg-5,.zap-apply .col-lg-7,
  .zap-apply .col-sm-4{flex:0 0 100%;max-width:100%}
}

/* ---- Pay-page layout (two-column marketing + form, seal, CTAs) ---- */
.zap-apply .payment-text h1,.zap-apply .payment-form h1,.zap-apply .bottom-content h1{
  font-size:clamp(22px,2.6vw,28px);color:var(--dark-blue-deep);margin-bottom:14px;
}
.zap-apply .cont-left{padding-right:24px}
.zap-apply .payment-text div,.zap-apply .bottom-content div{margin-bottom:12px;font-size:14px;color:var(--blue)}
.zap-apply .payment-text a,.zap-apply .bottom-content a{color:var(--dark-blue-deep);font-weight:600}
.zap-apply .authorizenet{margin:18px 0;text-align:center}
.zap-apply .backtobtn{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.zap-apply .backtobtn h4{font-family:var(--font-body);font-size:14px;color:var(--dark-blue-deep);margin-bottom:8px}
.zap-apply .backtobtn a{display:inline-flex;align-items:center;gap:8px;color:var(--white);background:var(--dark-blue-deep);font-weight:600;font-size:14px;padding:10px 22px;border-radius:50px;border:2px solid var(--dark-blue);transition:all .25s ease}
.zap-apply .backtobtn a:hover{background:var(--blue);color:var(--white);transform:translateY(-1px)}
.zap-apply .bottom-content{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.zap-apply .formnote i{display:block;font-size:11.5px;color:var(--blue);margin-top:4px}
.zap-apply .mobile-input-margin{margin-bottom:6px}
.zap-apply .existing-client p{font-size:13px;color:var(--blue)}

/* ---- Pay success / error blocks ---- */
.zap-apply .paymentsuccess-wrapper,.zap-apply .paymenterror-wrapper{max-width:820px;margin:0 auto}
.zap-apply .paymentsuccess-wrapper p{font-size:15px;color:var(--dark-blue-deep)}
.zap-apply .apply-cta{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.zap-apply .apply-cta a,.zap-apply .paymenterror-wrapper .backtobtn a{
  display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:600;
  padding:12px 26px;border-radius:50px;border:2px solid var(--dark-blue);transition:all .25s ease;
}
.zap-apply .apply-cta a:hover{background:#00a854;color:#fff;transform:translateY(-1px)}
.zap-apply .print-btn{border-radius:50px}
.zap-apply .paymenterror-wrapper h3{color:#a12622}
.zap-apply .paymenterror-body{margin:12px 0}
.zap-apply .paymenterror-wrapper .backtobtn{border-top:none;margin-top:16px;padding-top:0}

/* =====================================================================
   PRINT — never print the fixed nav/footer on light pages (e.g. PaySuccess).
   Pages add .hideprint to on-screen-only controls; we honor that here too.
   ===================================================================== */
@media print{
  .site-nav,.site-footer{display:none !important}
  .zap-page{padding-top:0 !important;padding-bottom:0 !important;min-height:0}
  .hideprint{display:none !important}
  .zap-card,.auth-card{box-shadow:none;border:none}
}

/* ---- responsive ---- */
@media(max-width:768px){
  .auth-card{padding:28px 22px}
  .zap-card{padding:24px}
  .zap-page{padding-top:calc(var(--nav-h) + 28px)}
}