/* ============================================================================
 * The Kids Gate — SIGNUP re-skin (signup-skin.css)
 * Restyles the EXISTING multi-step registration form (form-login.php /
 * trial-form-login.php) into the thekidsgate.com design. Pure CSS — no markup,
 * PHP or JS is changed, so all AJAX/step/add-child/referral logic keeps working.
 * Everything is scoped under .custom_form_wrapper so it can't affect other pages.
 * !important is used deliberately to override the form's inline styles.
 * ============================================================================ */
:root{
  --kg-amber:#F5A623;--kg-amber-deep:#D98C00;--kg-amber-soft:#FDEBC8;
  --kg-red:#E63329;--kg-teal:#2ABFBF;--kg-teal-deep:#1E9E9E;--kg-teal-soft:#D6F4F4;
  --kg-navy:#1C2B3A;--kg-white:#fff;--kg-cream:#FFF8EE;
  --kg-text:#243242;--kg-text-soft:#51606F;
  --kg-fd:'Baloo 2',system-ui,sans-serif;--kg-fb:'Nunito Sans',system-ui,sans-serif;
  --kg-rsm:12px;--kg-rmd:20px;--kg-rlg:28px;
  --kg-sh:0 4px 10px rgba(28,43,58,.08),0 14px 34px rgba(28,43,58,.10);
  --kg-inset:inset 0 2px 0 rgba(255,255,255,.65);
  --kg-pop:cubic-bezier(.34,1.56,.64,1);
}

/* ---- Card + page frame ---- */
.custom_form_wrapper{
  font-family:var(--kg-fb)!important; color:var(--kg-text)!important;
  max-width:640px!important; margin:clamp(24px,5vw,56px) auto!important;
  background:var(--kg-white)!important; border-radius:var(--kg-rlg)!important;
  box-shadow:var(--kg-inset),var(--kg-sh)!important;
  padding:clamp(26px,4vw,44px)!important; position:relative!important; overflow:hidden!important;
}
.custom_form_wrapper *{box-sizing:border-box;}
.custom-register-form-bg-img{display:none!important;} /* drop the old cloud image */

/* ---- Headings ---- */
.custom_form_wrapper .custom-top-title{
  font-family:var(--kg-fd)!important; font-weight:800!important; color:var(--kg-navy)!important;
  font-size:clamp(1.7rem,4vw,2.2rem)!important; text-align:center!important; margin:0 0 6px!important;
}
.custom_form_wrapper .custom-register-steps{
  display:inline-block!important; font-family:var(--kg-fd)!important; font-weight:700!important;
  letter-spacing:.1em!important; text-transform:uppercase!important; font-size:.78rem!important;
  color:var(--kg-teal-deep)!important; background:var(--kg-teal-soft)!important;
  padding:5px 14px!important; border-radius:999px!important; margin-bottom:12px!important;
}
.custom_form_wrapper .custom-subheading{
  display:block!important; font-family:var(--kg-fd)!important; font-weight:800!important;
  color:var(--kg-navy)!important; font-size:clamp(1.6rem,4vw,2.2rem)!important;
  line-height:1.1!important; margin-bottom:8px!important;
}
.custom_form_wrapper .custom-sub-sub-head{
  display:block!important; color:var(--kg-text-soft)!important; font-size:1.02rem!important; margin-bottom:6px!important;
}
.custom_form_wrapper .custom-register-instructions{
  display:block!important; color:var(--kg-text-soft)!important; font-size:.9rem!important; margin-bottom:22px!important;
}
.custom_form_wrapper .custom-last-head{
  font-family:var(--kg-fd)!important; font-weight:800!important; color:var(--kg-navy)!important; font-size:1.25rem!important;
}

/* ---- Text inputs + floating labels ---- */
.custom_form_wrapper .woocommerce-form-row{position:relative!important; margin:0 0 15px!important; padding:0!important;}
.custom_form_wrapper .input-text,
.custom_form_wrapper input[type=text],
.custom_form_wrapper input[type=email],
.custom_form_wrapper input[type=tel],
.custom_form_wrapper input[type=password],
.custom_form_wrapper select{
  width:100%!important; font-family:var(--kg-fb)!important; font-size:1rem!important; font-weight:600!important;
  color:var(--kg-text)!important; background:var(--kg-cream)!important;
  border:2px solid transparent!important; border-radius:var(--kg-rsm)!important;
  padding:15px 16px!important; transition:border-color .18s,box-shadow .18s,background .18s!important; box-shadow:none!important;
}
.custom_form_wrapper .input-text:focus,
.custom_form_wrapper input:focus,
.custom_form_wrapper select:focus{
  outline:0!important; background:#fff!important; border-color:var(--kg-teal)!important;
  box-shadow:0 0 0 4px var(--kg-teal-soft)!important;
}
/* floating label (markup is input then label, placeholder=" ") */
.custom_form_wrapper .woocommerce-form-row > label{
  position:absolute!important; left:14px!important; top:15px!important; margin:0!important;
  color:#9aa7b4!important; font-weight:600!important; pointer-events:none!important;
  background:transparent!important; transition:all .15s ease!important; font-family:var(--kg-fb)!important;
}
.custom_form_wrapper .woocommerce-form-row .input-text:focus + label,
.custom_form_wrapper .woocommerce-form-row .input-text:not(:placeholder-shown) + label{
  top:-9px!important; left:10px!important; font-size:.75rem!important; padding:0 6px!important;
  background:#fff!important; color:var(--kg-teal-deep)!important; border-radius:6px!important;
}
.custom_form_wrapper .custom-select-box{position:relative!important;}
.custom_form_wrapper select{appearance:none!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351606F' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>")!important;
  background-repeat:no-repeat!important; background-position:right 16px center!important; padding-right:44px!important;}
.custom_form_wrapper .required{color:var(--kg-red)!important;}

/* ---- Payment method + referral ---- */
.custom_form_wrapper .payment-mode-label{font-family:var(--kg-fd)!important; font-weight:700!important; color:var(--kg-navy)!important; display:block!important; margin-bottom:10px!important;}
.custom_form_wrapper .payment-mode-options{display:flex!important; flex-direction:column!important; gap:10px!important;}
.custom_form_wrapper .payment-mode-option{
  display:flex!important; align-items:center!important; gap:12px!important; cursor:pointer!important;
  border:2px solid rgba(28,43,58,.12)!important; border-radius:var(--kg-rsm)!important;
  padding:14px 16px!important; font-family:var(--kg-fd)!important; font-weight:700!important; color:var(--kg-navy)!important;
  transition:border-color .18s,background .18s!important;
}
.custom_form_wrapper .payment-mode-option:hover{border-color:var(--kg-teal)!important;}
.custom_form_wrapper .payment-mode-option input{width:20px!important; height:20px!important; accent-color:var(--kg-teal)!important;}
.custom_form_wrapper .custom-ref-code-box .input-text{background:var(--kg-cream)!important;}

/* ---- Child blocks + subjects ---- */
.custom_form_wrapper .custom-register-single-child{
  border:2px dashed rgba(28,43,58,.14)!important; border-radius:var(--kg-rmd)!important;
  padding:20px!important; margin-bottom:16px!important; background:#fff!important; position:relative!important;
}
.custom_form_wrapper .custom-register-number{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  background:var(--kg-teal-soft)!important; color:var(--kg-teal-deep)!important;
  font-family:var(--kg-fd)!important; font-weight:800!important; border-radius:999px!important;
  padding:2px 14px!important; margin-bottom:10px!important;
}
.custom_form_wrapper .custom-register-single-child-subject,
.custom_form_wrapper .custom-register-children-subjects label{
  display:flex!important; align-items:center!important; gap:11px!important;
  border:2px solid rgba(28,43,58,.12)!important; border-radius:var(--kg-rsm)!important;
  padding:12px 16px!important; margin-bottom:10px!important; cursor:pointer!important;
  font-family:var(--kg-fd)!important; font-weight:700!important; color:var(--kg-navy)!important;
}
.custom_form_wrapper .custom-register-single-child-subject input,
.custom_form_wrapper .custom-register-children-subjects input{width:22px!important; height:22px!important; accent-color:var(--kg-teal)!important;}

/* ---- Buttons ---- */
.custom_form_wrapper .custom-register-continue-button,
.custom_form_wrapper .custom-register-main-button,
.custom_form_wrapper .custom-register-confirm-subscription-button,
.custom_form_wrapper .woocommerce-form-register__submit,
.custom_form_wrapper button[type=submit]{
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:10px!important;
  font-family:var(--kg-fd)!important; font-weight:700!important; font-size:1.05rem!important;
  background:var(--kg-amber)!important; color:var(--kg-navy)!important; border:0!important;
  border-radius:999px!important; padding:16px 32px!important; cursor:pointer!important; width:100%!important;
  box-shadow:var(--kg-inset),0 5px 0 var(--kg-amber-deep),0 12px 24px rgba(245,166,35,.35)!important;
  transition:transform .2s var(--kg-pop),background .18s!important; margin-top:8px!important;
}
.custom_form_wrapper .custom-register-continue-button:hover,
.custom_form_wrapper .custom-register-main-button:hover,
.custom_form_wrapper .custom-register-confirm-subscription-button:hover,
.custom_form_wrapper button[type=submit]:hover{background:#FFB23B!important; transform:translateY(-2px)!important;}

.custom_form_wrapper .custom-register-add-child-button{
  display:inline-flex!important; align-items:center!important; gap:8px!important;
  background:var(--kg-teal-soft)!important; color:var(--kg-teal-deep)!important; border:0!important;
  font-family:var(--kg-fd)!important; font-weight:700!important; border-radius:999px!important;
  padding:12px 22px!important; cursor:pointer!important; box-shadow:none!important;
}
.custom_form_wrapper .custom-register-back-button,
.custom_form_wrapper .custom-register-remove-child-button,
.custom_form_wrapper .custom-login-button,
.custom_form_wrapper .custom-register-login-button{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  background:#fff!important; color:var(--kg-navy)!important; border:2px solid rgba(28,43,58,.18)!important;
  font-family:var(--kg-fd)!important; font-weight:700!important; border-radius:999px!important;
  padding:14px 28px!important; cursor:pointer!important; text-decoration:none!important; box-shadow:none!important;
}
.custom_form_wrapper .custom-register-back-button:hover,
.custom_form_wrapper .custom-login-button:hover{background:#FBFDFF!important; border-color:rgba(28,43,58,.35)!important;}
.custom_form_wrapper .custom-register-remove-child-button{border:0!important; color:var(--kg-text-soft)!important; padding:6px!important;}

/* button rows */
.custom_form_wrapper .custom-register-single-step{margin-top:6px!important;}

/* ============================================================================
 * v2 — wizard progress bar + tighter card to match the approved mockup.
 * The bar is injected by the mu-plugin JS and reflects #custom_current_step.
 * ============================================================================ */
body.kg-signup-page{background:linear-gradient(180deg,var(--kg-teal-soft),var(--kg-cream) 60%)!important;}
.custom_form_wrapper{max-width:600px!important;}

/* progress bar */
.kg-wizard-progress{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;margin:0 0 22px!important;}
.kg-wizard-progress .kg-wz{display:flex!important;align-items:center!important;gap:9px!important;}
.kg-wizard-progress .kg-wz__dot{width:34px!important;height:34px!important;border-radius:50%!important;background:#fff!important;color:var(--kg-text-soft)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:var(--kg-fd)!important;font-weight:800!important;box-shadow:var(--kg-inset),0 2px 6px rgba(28,43,58,.10)!important;flex:none!important;transition:all .25s var(--kg-pop)!important;}
.kg-wizard-progress .kg-wz__lbl{font-family:var(--kg-fd)!important;font-weight:700!important;color:var(--kg-text-soft)!important;font-size:.95rem!important;}
.kg-wizard-progress .kg-wz.is-active .kg-wz__dot{background:var(--kg-amber)!important;color:var(--kg-navy)!important;transform:scale(1.08)!important;}
.kg-wizard-progress .kg-wz.is-done .kg-wz__dot{background:var(--kg-teal)!important;color:#fff!important;}
.kg-wizard-progress .kg-wz.is-active .kg-wz__lbl,.kg-wizard-progress .kg-wz.is-done .kg-wz__lbl{color:var(--kg-navy)!important;}
.kg-wizard-progress .kg-wz__line{width:30px!important;height:3px!important;border-radius:2px!important;background:rgba(28,43,58,.14)!important;}
@media(max-width:560px){.kg-wizard-progress .kg-wz__lbl{display:none!important;}.kg-wizard-progress .kg-wz__line{width:18px!important;}}

/* centre the step heading block like the mockup */
.custom_form_wrapper .custom-register-steps{display:block!important;width:max-content!important;margin:0 auto 12px!important;}
.custom_form_wrapper .custom-subheading,.custom_form_wrapper .custom-sub-sub-head,.custom_form_wrapper .custom-register-instructions{text-align:center!important;}
.custom_form_wrapper .custom-register-instructions{margin-bottom:24px!important;}
/* shake used by the form's validation */
.custom-shake{animation:kgShake .4s ease!important;}
@keyframes kgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}