
/* =========================================================
   JCCHT application form  ·  jccht-form.css
   Restyles the stock wizard form to match the website.
   Scoped to body.jc-form so the rest of the admin is untouched.
   ========================================================= */
body.jc-form{
  --brand:#963094; --brand-text:#7E2A7C; --brand-deep:#7A2578; --brand-soft:#F4EFF4;
  --ink:#191719; --ink-2:#3B383B; --muted:#6A656A;
  --line:#E3E1E3; --line-strong:#C6C2C6;
  --paper:#FCFBFC; --surface:#FFFFFF; --surface-2:#F5F4F5; --plum:#4A1A49;
  background:var(--paper) !important;
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--ink);
  font-size:15.5px;
  line-height:1.6;
}
body.jc-form h1,body.jc-form h2,body.jc-form h3,body.jc-form h4,body.jc-form h5,body.jc-form legend{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;font-weight:500;color:var(--ink);
  letter-spacing:-.01em}

/* page frame */
body.jc-form .jc-form-head{background:var(--plum);color:#fff;padding:26px 0 30px;margin-bottom:28px}
body.jc-form .jc-form-head .jc-form-wrap{display:flex;align-items:center;gap:16px}
body.jc-form .jc-form-head img{width:52px;height:auto;flex:none}
body.jc-form .jc-form-head .t1{font-family:"Newsreader",Georgia,serif;font-size:20px;line-height:1.25;
  display:block}
body.jc-form .jc-form-head .t2{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);display:block;margin-top:3px}
body.jc-form .jc-form-head a{color:#fff;text-decoration:none}
body.jc-form .jc-form-wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* the card holding the form */
body.jc-form .card,body.jc-form .box{border:1px solid var(--line) !important;border-radius:2px !important;
  box-shadow:0 1px 2px rgba(25,23,25,.05),0 8px 24px -14px rgba(25,23,25,.18) !important;
  background:var(--surface) !important;margin-bottom:24px}
body.jc-form .card-header,body.jc-form .box-header{background:var(--surface-2) !important;
  border-bottom:1px solid var(--line) !important;padding:16px 22px !important}
body.jc-form .card-header h5,body.jc-form .card-header h4,body.jc-form .box-title{
  font-size:19px !important;margin:0 !important}
body.jc-form .card-block,body.jc-form .card-body,body.jc-form .box-body{padding:24px 22px !important}

/* section legends */
body.jc-form fieldset.scheduler-border{border:0 !important;border-top:1px solid var(--line) !important;
  padding:22px 0 4px !important;margin:0 0 8px !important}
body.jc-form legend.scheduler-border,body.jc-form legend{
  width:auto !important;border:0 !important;padding:0 0 4px !important;margin:0 0 12px !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:.13em !important;
  text-transform:uppercase !important;color:var(--brand-text) !important;
  font-family:"Public Sans",sans-serif !important;float:none !important}

/* fields */
body.jc-form .form-group{margin-bottom:18px}
body.jc-form label{font-size:12.5px !important;font-weight:600 !important;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted) !important;margin-bottom:6px !important;display:block}
body.jc-form .form-control,body.jc-form select.form-control,body.jc-form textarea.form-control{
  height:auto !important;font-size:15px !important;padding:11px 13px !important;
  border:1px solid var(--line-strong) !important;border-radius:2px !important;
  background:var(--surface) !important;color:var(--ink) !important;box-shadow:none !important;
  transition:border-color 140ms ease,box-shadow 140ms ease;width:100%}
body.jc-form .form-control:focus{border-color:var(--brand) !important;
  box-shadow:0 0 0 3px var(--brand-soft) !important;outline:none}
body.jc-form .form-control::placeholder{color:#A9A3A9}
body.jc-form input[type="file"].form-control{padding:9px 12px !important;font-size:14px !important}
body.jc-form .invalid-feedback{font-size:12.5px;color:#B3261E}
body.jc-form .is-invalid,body.jc-form .form-control.error{border-color:#B3261E !important}
body.jc-form .text-danger,body.jc-form .required{color:var(--brand-text) !important}

/* buttons */
body.jc-form .btn{font-family:"Public Sans",sans-serif !important;font-size:14.5px !important;
  font-weight:600 !important;padding:12px 24px !important;border-radius:2px !important;
  border:1px solid transparent !important;box-shadow:none !important;
  transition:background-color 160ms ease,transform 120ms ease}
body.jc-form .btn:active{transform:translateY(1px)}
body.jc-form .btn-primary,body.jc-form .btn-success,body.jc-form button[type="submit"]{
  background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important}
body.jc-form .btn-primary:hover,body.jc-form .btn-success:hover,body.jc-form button[type="submit"]:hover{
  background:var(--brand-deep) !important;border-color:var(--brand-deep) !important}
body.jc-form .btn-secondary,body.jc-form .btn-default{background:transparent !important;
  color:var(--ink) !important;border-color:var(--line-strong) !important}

/* the "same address" control */
body.jc-form .jc-same{display:flex;align-items:flex-start;gap:10px;margin:2px 0 6px;
  padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px}
body.jc-form .jc-same input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);flex:none}
body.jc-form .jc-same label{margin:0 !important;text-transform:none !important;font-size:14px !important;
  font-weight:500 !important;color:var(--ink-2) !important;letter-spacing:0 !important;cursor:pointer}
body.jc-form .jc-same small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

/* alerts */
body.jc-form .alert{border-radius:2px !important;border:1px solid var(--line) !important;
  border-left:3px solid var(--brand) !important;background:var(--brand-soft) !important;
  color:var(--ink-2) !important;padding:12px 16px !important}
body.jc-form .alert-danger{border-left-color:#B3261E !important;background:#FDF1F0 !important;
  color:#7A1B15 !important}

/* footer note */
body.jc-form .jc-form-foot{max-width:1000px;margin:0 auto;padding:26px 20px 40px;font-size:13px;
  color:var(--muted)}
body.jc-form .jc-form-foot a{color:var(--brand-text)}

/* mobile */
@media (max-width:760px){
  body.jc-form{font-size:15px}
  body.jc-form .jc-form-wrap{padding:0 16px}
  body.jc-form .card-block,body.jc-form .card-body,body.jc-form .box-body{padding:18px 16px !important}
  body.jc-form .card-header,body.jc-form .box-header{padding:14px 16px !important}
  body.jc-form .jc-form-head{padding:20px 0 22px;margin-bottom:20px}
  body.jc-form .jc-form-head .t1{font-size:17px}
  body.jc-form .btn{width:100%;justify-content:center}
  body.jc-form .form-group{margin-bottom:15px}
  body.jc-form fieldset.scheduler-border{padding-top:18px !important}
}
@media (prefers-reduced-motion:reduce){
  body.jc-form .form-control,body.jc-form .btn{transition:none}
}


/* --- jQuery Steps wizard --- */
body.jc-form .wizard > .steps{padding:0 0 4px}
body.jc-form .wizard > .steps > ul{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;
  list-style:none;width:100%}
body.jc-form .wizard > .steps > ul > li{flex:1 1 0;min-width:150px;width:auto;margin:0}
body.jc-form .wizard > .steps a,
body.jc-form .wizard > .steps a:hover,
body.jc-form .wizard > .steps a:active{
  display:block;margin:0;padding:13px 16px;border-radius:2px;
  background:var(--surface-2) !important;color:var(--muted) !important;
  border:1px solid var(--line) !important;
  font-family:"Public Sans",sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
body.jc-form .wizard > .steps .current a,
body.jc-form .wizard > .steps .current a:hover,
body.jc-form .wizard > .steps .current a:active{
  background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important}
body.jc-form .wizard > .steps .done a,
body.jc-form .wizard > .steps .done a:hover,
body.jc-form .wizard > .steps .done a:active{
  background:var(--brand-soft) !important;border-color:var(--line-strong) !important;
  color:var(--brand-text) !important}
body.jc-form .wizard > .steps .disabled a{opacity:.75}
body.jc-form .wizard > .steps .number{font-variant-numeric:tabular-nums;opacity:.7;margin-right:6px}

body.jc-form .wizard > .content{background:transparent !important;border:0 !important;margin:22px 0 !important;
  min-height:auto !important;overflow:visible !important}
body.jc-form .wizard > .content > .body{width:100% !important;height:auto !important;padding:0 !important;
  position:static !important;float:none !important}

body.jc-form .wizard > .actions{padding-top:18px;border-top:1px solid var(--line);margin-top:8px}
body.jc-form .wizard > .actions > ul{display:flex;justify-content:flex-end;gap:10px;margin:0;padding:0;
  list-style:none}
body.jc-form .wizard > .actions > ul > li{margin:0}
body.jc-form .wizard > .actions a,
body.jc-form .wizard > .actions a:hover,
body.jc-form .wizard > .actions a:active{
  display:inline-block;padding:12px 26px;border-radius:2px;text-decoration:none;
  font-family:"Public Sans",sans-serif;font-size:14.5px;font-weight:600;
  background:var(--brand) !important;color:#fff !important;border:1px solid var(--brand) !important;
  transition:background-color 160ms ease,transform 120ms ease}
body.jc-form .wizard > .actions a:active{transform:translateY(1px)}
body.jc-form .wizard > .actions a:hover{background:var(--brand-deep) !important;
  border-color:var(--brand-deep) !important}
body.jc-form .wizard > .actions .disabled a,
body.jc-form .wizard > .actions .disabled a:hover{
  background:transparent !important;color:var(--muted) !important;
  border-color:var(--line-strong) !important;cursor:not-allowed}

/* the intro block above the wizard */
body.jc-form .wizard-sec-bg{background:var(--surface) !important;border-bottom:1px solid var(--line);
  padding:34px 0 30px !important;margin-bottom:0 !important}
body.jc-form .wizard-sec-bg h1,body.jc-form .wizard-sec-bg h2,body.jc-form .wizard-sec-bg h3{
  font-size:clamp(23px,2.4vw,33px) !important;line-height:1.2;margin-bottom:14px}
body.jc-form .wizard-sec-bg p{color:var(--muted);font-size:15.5px;max-width:70ch;
  margin-left:auto;margin-right:auto}
body.jc-form .wizard-sec-bg img{max-width:88px;height:auto}

@media (max-width:760px){
  body.jc-form .wizard > .steps > ul{gap:6px}
  body.jc-form .wizard > .steps > ul > li{flex:1 1 100%;min-width:0}
  body.jc-form .wizard > .steps a{padding:11px 14px;font-size:13.5px}
  body.jc-form .wizard > .actions > ul{flex-direction:column-reverse}
  body.jc-form .wizard > .actions a{display:block;text-align:center;width:100%}
  body.jc-form .wizard-sec-bg{padding:22px 0 20px !important}
  body.jc-form .wizard-sec-bg img{max-width:60px}
}


/* --- sticky action bar --- */
body.jc-form{padding-bottom:96px}
body.jc-form .wizard > .actions{position:fixed !important;left:0 !important;right:0 !important;
  bottom:0 !important;z-index:60;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -14px rgba(25,23,25,.4);padding:14px 0;margin:0}
body.jc-form .wizard > .actions > ul{max-width:1000px;margin:0 auto;padding:0 20px;
  display:flex;justify-content:flex-end;gap:10px}
@media (max-width:760px){
  body.jc-form{padding-bottom:150px}
  body.jc-form .wizard > .actions{padding:12px 0}
  body.jc-form .wizard > .actions > ul{padding:0 16px;gap:8px}
}


/* --- application header --- */
body.jc-form .page-wrapper > .card{border:0 !important;box-shadow:none !important;
  background:var(--plum) !important;border-radius:0 !important;margin-bottom:0 !important}
body.jc-form .page-wrapper > .card > .card-block{padding:0 !important}
body.jc-form .row.mt-5.mb-5{max-width:1000px;margin:0 auto !important;padding:30px 20px 34px;
  display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
body.jc-form .row.mt-5.mb-5 > .col-sm-2{flex:none;width:auto;max-width:none;padding:0}
body.jc-form .row.mt-5.mb-5 > .col-sm-2:last-child{display:none}
body.jc-form .row.mt-5.mb-5 > .col-sm-2 img{width:56px;height:auto;background:#fff;border-radius:3px;
  padding:5px}
body.jc-form .row.mt-5.mb-5 > .col-sm-8{flex:1 1 auto;max-width:none;text-align:left !important;
  padding:0}
body.jc-form .row.mt-5.mb-5 h2,body.jc-form .row.mt-5.mb-5 h3{color:#fff !important;
  font-size:clamp(20px,2.4vw,27px) !important;line-height:1.2;margin:0 0 8px !important;
  max-width:34ch}
body.jc-form .row.mt-5.mb-5 p{color:rgba(255,255,255,.72) !important;font-size:14px !important;
  line-height:1.6;margin:0 !important;max-width:70ch}
body.jc-form .row.mt-5.mb-5 .inner{text-align:left !important}

/* the wizard sits on the page ground, not inside the dark band */
body.jc-form .wizard-sec-bg{max-width:1000px;margin:0 auto !important;padding:30px 20px 10px !important;
  border-bottom:0 !important;background:transparent !important}
body.jc-form > .main-body,body.jc-form .main-body{background:var(--paper)}

@media (max-width:760px){
  body.jc-form .row.mt-5.mb-5{padding:20px 16px 22px;gap:14px}
  body.jc-form .row.mt-5.mb-5 > .col-sm-2 img{width:44px}
  body.jc-form .wizard-sec-bg{padding:20px 16px 6px !important}
}


/* --- restore the wizard card --- */
body.jc-form .col-sm-12 > .card,body.jc-form .col-md-12 > .card{
  background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:2px !important;
  box-shadow:0 1px 2px rgba(25,23,25,.05),0 8px 24px -14px rgba(25,23,25,.18) !important}
body.jc-form .col-sm-12 > .card > .card-block,body.jc-form .col-md-12 > .card > .card-block{
  padding:24px 22px !important}


/* --- even columns + stacked logo --- */

/* logo above the wording, both left-aligned */
body.jc-form .row.mt-5.mb-5{display:block !important;padding:30px 20px 34px}
body.jc-form .row.mt-5.mb-5 > .col-sm-2{display:block;width:auto;margin-bottom:16px}
body.jc-form .row.mt-5.mb-5 > .col-sm-2 img{width:64px}
body.jc-form .row.mt-5.mb-5 > .col-sm-8{display:block;width:100%}
body.jc-form .row.mt-5.mb-5 h2,body.jc-form .row.mt-5.mb-5 h3{max-width:26ch}

/* every field row becomes an even two-column grid, so nothing is left
   stranded beside an empty half */
body.jc-form fieldset.scheduler-border.row,
body.jc-form .card-block > .row,
body.jc-form .form-step > .row > .col-md-12 > .row{
  display:grid !important;grid-template-columns:1fr 1fr;gap:0 26px;margin-left:0;margin-right:0}
body.jc-form fieldset.scheduler-border.row > legend,
body.jc-form fieldset.scheduler-border.row > .col-md-12,
body.jc-form fieldset.scheduler-border.row > .form-group.col-md-12{grid-column:1 / -1}
body.jc-form fieldset.scheduler-border.row > .form-group,
body.jc-form .card-block > .row > .form-group{
  width:auto !important;max-width:none !important;flex:none !important;
  padding-left:0 !important;padding-right:0 !important;margin-left:0;margin-right:0}

/* the address block spans the full width once "same address" is ticked */
body.jc-form .col-md-6.jc-full{flex:0 0 100% !important;max-width:100% !important;width:100% !important}
body.jc-form .col-md-6.jc-full > fieldset.scheduler-border.row{grid-template-columns:1fr 1fr}

/* the two address columns sit side by side when both are shown */
body.jc-form .form-step .row > .col-md-6{padding-left:0;padding-right:0}
body.jc-form .form-step .row > .col-md-6 + .col-md-6{padding-left:26px}

@media (max-width:760px){
  body.jc-form fieldset.scheduler-border.row,
  body.jc-form .card-block > .row,
  body.jc-form .form-step > .row > .col-md-12 > .row{grid-template-columns:1fr;gap:0}
  body.jc-form .col-md-6.jc-full > fieldset.scheduler-border.row{grid-template-columns:1fr}
  body.jc-form .form-step .row > .col-md-6 + .col-md-6{padding-left:0}
  body.jc-form .row.mt-5.mb-5 > .col-sm-2 img{width:52px}
}


/* --- width fix --- */
body.jc-form .col-sm-12 > .card,body.jc-form .col-md-12 > .card{display:block !important}
body.jc-form .wizard-sec-bg{width:100% !important;flex:1 1 100% !important;
  max-width:1000px !important;margin-left:auto !important;margin-right:auto !important}
body.jc-form .wizard-sec-bg .row{margin-left:0;margin-right:0}
body.jc-form .wizard-sec-bg .col-md-12{padding-left:0;padding-right:0}


/* --- address pairs --- */
/* inside the full-width address block, the two dropdowns share the row and the
   street address spans it */
body.jc-form .col-md-6.jc-full > fieldset.scheduler-border.row > .form-group:has(select){
  grid-column:auto !important}
body.jc-form .col-md-6.jc-full > fieldset.scheduler-border.row > .form-group:has(input[type="text"]),
body.jc-form .col-md-6.jc-full > fieldset.scheduler-border.row > .form-group:has(.jc-same){
  grid-column:1 / -1 !important}
@media (max-width:760px){
  body.jc-form .col-md-6.jc-full > fieldset.scheduler-border.row > .form-group:has(select){
    grid-column:1 / -1 !important}
}


/* --- centred header --- */
body.jc-form .row.mt-5.mb-5{text-align:center;padding:34px 20px 36px}
body.jc-form .row.mt-5.mb-5 > .col-sm-2{margin:0 auto 18px}
body.jc-form .row.mt-5.mb-5 > .col-sm-2 .inner{text-align:center !important}
body.jc-form .row.mt-5.mb-5 > .col-sm-2 img{margin:0 auto}
body.jc-form .row.mt-5.mb-5 > .col-sm-8{text-align:center !important}
body.jc-form .row.mt-5.mb-5 h2,body.jc-form .row.mt-5.mb-5 h3{max-width:22ch;margin-left:auto !important;
  margin-right:auto !important}
body.jc-form .row.mt-5.mb-5 p{max-width:64ch;margin-left:auto !important;margin-right:auto !important}
