/* Author: Dr Vivek Khare | Mobile: 8095777666 | Email: kharevivek@gmail.com | Date: 01-Oct-2026 | Patch: PIN-first membership form (new file) */
.gkm-page{padding:28px 0 56px;background:#F6F4EF}
.gkm{--gkm-gold:#D59B2D;--gkm-gold-deep:#A9701A;--gkm-navy:#27304B;--gkm-ink:#1B2135;--gkm-muted:#5F6580;--gkm-label:#4E5470;--gkm-line:#D5D8E1;--gkm-lock:#F3F1EB;
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;font-family:Kanchenjunga,"Segoe UI",sans-serif;color:var(--gkm-navy)}
.gkm *{box-sizing:border-box}
.gkm-aside{background:var(--gkm-navy);color:#E7E9F1;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:20px;position:sticky;top:110px}
.gkm-aside-title{margin:0;font-family:Merriweather,serif;font-style:italic;font-size:18px;color:#F2C46D}
.gkm-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.gkm-steps li{display:flex;gap:12px}
.gkm-steps li>div{display:flex;flex-direction:column;gap:2px}
.gkm-steps strong{font-size:14px;color:#fff}
.gkm-steps span{font-size:13px;line-height:1.45;color:#C5C9D8}
.gkm-step-no{flex:none;width:28px;height:28px;border-radius:50%;background:#3A4466;color:#fff !important;font-weight:700;font-size:14px !important;display:flex;align-items:center;justify-content:center}
.gkm-step-no.is-active{background:var(--gkm-gold);color:#1C2238 !important}
.gkm-aside-about{margin:0;font-size:13px;line-height:1.5;color:#C5C9D8}
.gkm-aside-about strong{color:#fff}
.gkm-help{border-top:1px solid #3A4466;padding-top:16px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.gkm-help-title{color:#fff;font-weight:600}
.gkm-help a{color:#C5C9D8;text-decoration:none}
.gkm-help a:hover{color:#F2C46D}

.gkm-card{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(28,34,56,.06),0 8px 24px rgba(28,34,56,.06);padding:22px 26px}
.gkm-card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #EEEAE1}
.gkm-title{margin:0;font-family:Merriweather,serif;font-style:italic;font-weight:800;font-size:22px;line-height:1.3;color:var(--gkm-navy)}
.gkm-title span{color:#B07818}
.gkm-chips{display:flex;gap:8px;flex-wrap:wrap}
.gkm-chip{background:#FBF7EE;border:1px solid #E8DFC9;border-radius:999px;padding:6px 14px;font-size:13px;color:var(--gkm-muted)}
.gkm-chip strong{color:var(--gkm-navy);font-size:15px}
.gkm-alert{background:#FDECEA;border:1px solid #F5C2BC;color:#8C1D18;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px}

.gkm-section{display:flex;flex-direction:column;gap:12px}
.gkm-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gkm-section-head h3{margin:0;font-family:Merriweather,serif;font-style:italic;font-weight:700;font-size:17px;color:var(--gkm-navy)}
.gkm-req-note{font-size:12px;color:var(--gkm-muted)}
.gkm-req{color:#B3261E}
.gkm-optional{font-weight:500;color:var(--gkm-muted)}
.gkm-divider{height:1px;background:#EEEAE1;margin:18px 0}

.gkm-grid{display:grid;gap:14px}
.gkm-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gkm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gkm-span-2{grid-column:span 2}
.gkm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.gkm-field>label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--gkm-label);margin:0}
.gkm-input{width:100%;height:42px;border:1px solid var(--gkm-line);border-radius:8px;background:#fff;padding:0 12px;font:inherit;font-size:14px;color:var(--gkm-ink);outline:none;transition:border-color .15s,box-shadow .15s}
select.gkm-input{appearance:auto}
.gkm-input:focus{border-color:var(--gkm-gold-deep);box-shadow:0 0 0 3px rgba(213,155,45,.22)}
.gkm-input::placeholder{color:#8A8FA3}
.gkm-input.gkm-locked,.gkm-input[readonly]{background:var(--gkm-lock);border-color:#E3DFD4;color:var(--gkm-navy);cursor:not-allowed}
.gkm-input.error{border-color:#B3261E}
.gkm-pin{font-size:17px;font-weight:700;letter-spacing:3px}
.gkm-pin.is-ok{border-color:#1E7A46}
.gkm-pin.is-bad{border-color:#B3261E}
.gkm-pin-status,.gkm-hint{font-size:12px;color:var(--gkm-muted);min-height:16px}
.gkm-pin-status.is-ok{color:#1E7A46}
.gkm-pin-status.is-bad{color:#B3261E}
.gkm-lock-note{font-weight:500;font-size:11.5px;color:#8A7340}
.gkm-lock-wrap{position:relative}
.gkm-lock-wrap .gkm-input{padding-right:34px}
.gkm-lock-icon{position:absolute;right:12px;top:13px;color:#A08A5A;pointer-events:none}
.gkm-country-other{margin-top:8px}
.gkm-error,.gkm label.error{color:#B3261E;font-size:12.5px;font-weight:500;margin:0}
.gkm .iti{display:block !important;width:100%}
.gkm .iti input.gkm-input{padding-left:90px}

.gkm-notice{background:#FCF4E3;border:1px solid #F0DDB4;border-radius:10px;padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:13.5px;line-height:1.45;color:#4A3A12}
.gkm-notice svg{flex:none;color:var(--gkm-gold-deep)}

.gkm-photo{grid-row:span 2;border:1px dashed var(--gkm-line);border-radius:10px;background:#FAFAFC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;position:relative}
.gkm-photo-preview{width:72px;height:72px;border-radius:50%;background:#E9EAF0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gkm-photo-preview i{font-size:34px;color:#8A8FA3}
.gkm-photo-preview img{width:100%;height:100%;object-fit:cover}
.gkm-photo-btn{background:#fff;border:1px solid #C9CCD6;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--gkm-navy);cursor:pointer;margin:0}
.gkm-photo-btn:hover{border-color:var(--gkm-gold-deep)}
.gkm-photo small{font-size:11.5px;color:var(--gkm-muted);line-height:1.35}
.gkm-file{position:absolute;left:50%;bottom:8px;width:1px;height:1px;opacity:0;overflow:hidden}
.gkm-file:focus+small,.gkm-photo:focus-within .gkm-photo-btn{box-shadow:0 0 0 3px rgba(213,155,45,.3)}

.gkm-footer{align-items:end}
.gkm-check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--gkm-navy);min-height:42px;margin:0;cursor:pointer}
.gkm-check input{width:18px;height:18px;accent-color:var(--gkm-gold-deep);margin:0}
.gkm-submit{height:46px;background:var(--gkm-gold-deep);color:#fff;border:none;border-radius:999px;font-family:Merriweather,serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 6px 14px rgba(169,112,26,.28);transition:background .15s}
.gkm-submit:hover,.gkm-submit:focus{background:#8F5E14;color:#fff}
.gkm-disclaimer{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--gkm-muted)}

@media (max-width:1199px){.gkm{grid-template-columns:1fr}.gkm-aside{position:static}.gkm-steps{flex-direction:row;flex-wrap:wrap}.gkm-steps li{flex:1 1 220px}}
@media (max-width:767px){
  .gkm-page{padding:14px 0 32px}
  .gkm-card{padding:18px 14px}
  .gkm-grid-4,.gkm-grid-3{grid-template-columns:1fr}
  .gkm-span-2{grid-column:auto}
  .gkm-photo{grid-row:auto;flex-direction:row;justify-content:flex-start;text-align:left;border-style:solid}
  .gkm-input{height:46px;font-size:16px}
  .gkm-title{font-size:19px}
  .gkm-submit{height:50px;font-size:16px}
  .gkm-steps{flex-direction:column}
}
/* 01-Oct-2026 live fixes: keep the required star next to the label; theme select sizing */
.gkm-field>label{justify-content:flex-start}
.gkm-field>label .gkm-lock-note{margin-left:auto}
.gkm select.gkm-input{font-size:14px !important;height:42px !important;line-height:normal !important;padding:0 12px !important}
.gkm-divider{margin:14px 0}
/* 01-Oct-2026 mobile fix: on tablets/phones the form comes first and the "How it works" panel moves below it;
   steps no longer stretch (flex-basis was acting as height in column layout). */
@media (max-width:1199px){
  .gkm-card{order:1}
  .gkm-aside{order:2;position:static}
  .gkm-steps li{flex:1 1 200px}
}
@media (max-width:767px){
  .gkm-steps{flex-direction:column}
  .gkm-steps li{flex:0 0 auto}
  .gkm-aside{padding:18px;gap:14px}
  .gkm-card-head{padding-bottom:12px;margin-bottom:12px}
}

/* 02-Oct-2026 membership form validation */
.gkm-submit:disabled{opacity:.7;cursor:wait}
.gkm label.error{display:block;margin-top:4px}
.gkm .gkm-photo label.error{text-align:center}
