@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

.kcgf-wrap {
    --navy:      #0f2156;
    --navy-mid:  #1a3580;
    --navy-lt:   #e8edf8;
    --gold:      #b8922e;
    --gold-lt:   #f5e9cc;
    --ivory:     #faf8f5;
    --white:     #ffffff;
    --border:    #dde2ee;
    --text:      #0e1b3d;
    --text-mid:  #4a5880;
    --text-lt:   #8a94b0;
    --red:       #c0392b;
    --green:     #16803c;
    --green-bg:  #dcfce7;
    --err-bg:    #fff0f0;
    --wa-blue:   #9eb8ff;
    --r:         10px;
    --rsm:       6px;
    --sh:        0 2px 16px rgba(15,33,86,.08);
    --ease:      .2s cubic-bezier(.4,0,.2,1);
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    max-width: 820px;
    margin: 0 auto 60px;
    padding: 0 16px;
}


/* ══════════════════════════════════════════════════════
   KCGF FORM — HARD RESET for theme override resistance
   Targets every interactive element inside .kcgf-wrap
   with !important to beat theme reset.css files.
══════════════════════════════════════════════════════ */
.kcgf-wrap button,
.kcgf-wrap input,
.kcgf-wrap select,
.kcgf-wrap textarea {
    box-sizing: border-box !important;
    font-family: 'DM Sans', sans-serif !important;
}
/* Kill theme text-transform on buttons */
.kcgf-wrap button {
    text-transform: none !important;
    overflow: visible !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: normal !important;
}
/* Kill theme styling on inputs */
.kcgf-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ── Progress bar ─────────────────────────── */
.kcgf-progress-bar { display:flex; align-items:center; margin-bottom:36px; padding-top:24px; }
.kcgf-step-indicator { display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.kcgf-step-bubble { width:36px; height:36px; border-radius:50%; border:2px solid var(--border); background:var(--white); color:var(--text-lt); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; transition:all var(--ease); font-family:'DM Sans',sans-serif; }
.kcgf-step-label { font-size:11px; font-weight:500; color:var(--text-lt); letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; transition:color var(--ease); }
.kcgf-step-line { flex:1; height:2px; background:var(--border); margin:0 8px 22px; border-radius:1px; transition:background var(--ease); }
.kcgf-step-indicator.is-active .kcgf-step-bubble { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 0 0 4px rgba(15,33,86,.12); }
.kcgf-step-indicator.is-active .kcgf-step-label  { color:var(--navy); font-weight:600; }
.kcgf-step-indicator.is-done  .kcgf-step-bubble  { background:var(--gold); border-color:var(--gold); color:#fff; }
.kcgf-step-indicator.is-done  .kcgf-step-label   { color:var(--gold); }
.kcgf-step-line.is-done { background:var(--gold); }

/* ── Alert ───────────────────────────────── */
.kcgf-alert { padding:16px 20px; border-radius:var(--rsm); font-size:14px; line-height:1.6; margin-bottom:24px; font-weight:500; }
.kcgf-alert.success { background:var(--green-bg); color:var(--green); border:1px solid #bbf7d0; }
.kcgf-alert.error   { background:var(--err-bg);   color:var(--red);   border:1px solid #fecaca; }

/* ── Step cards ──────────────────────────── */
.kcgf-form-step { display:none; background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:32px 36px 28px; box-shadow:var(--sh); animation:kcgf-in .28s ease; }
.kcgf-form-step.is-active { display:block; }
@keyframes kcgf-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.kcgf-step-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.kcgf-step-icon { font-size:28px; line-height:1; flex-shrink:0; margin-top:2px; }
.kcgf-step-header h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:700; color:var(--navy); margin:0 0 4px; line-height:1.2; }
.kcgf-step-header p  { font-size:13px; color:var(--text-mid); margin:0; line-height:1.5; }

/* ── Fields grid ─────────────────────────── */
.kcgf-fields-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px 20px; margin-bottom:8px; }
.kcgf-field { display:flex; flex-direction:column; gap:5px; }
.kcgf-field--full          { grid-column:span 12; }
.kcgf-field--half          { grid-column:span 6; }
.kcgf-field--third         { grid-column:span 4; }
.kcgf-field--quarter       { grid-column:span 3; }
.kcgf-field--three-quarter { grid-column:span 9; }

/* Labels — sentence case, NOT uppercase */
.kcgf-field label {
    font-size:13px;
    font-weight:600;
    color:var(--text-mid);
    /* deliberately no text-transform */
}
.kcgf-req { color:var(--gold); margin-left:2px; font-size:13px; }

.kcgf-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.kcgf-field select,
.kcgf-field textarea {
    padding: 10px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--rsm) !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    color: var(--text) !important;
    background: var(--ivory) !important;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    margin: 0 !important;
}
.kcgf-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5880' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.kcgf-field textarea { resize:vertical; min-height:88px; line-height:1.6; }
.kcgf-field input:not([type="checkbox"]):not([type="radio"]):focus,
.kcgf-field select:focus,
.kcgf-field textarea:focus {
    outline: none !important;
    border-color: var(--navy-mid) !important;
    box-shadow: 0 0 0 3px rgba(26,53,128,.1) !important;
    background: var(--white) !important;
}
.kcgf-field input.has-error,.kcgf-field select.has-error,.kcgf-field textarea.has-error { border-color:var(--red); box-shadow:0 0 0 3px rgba(192,57,43,.1); }
.kcgf-field-error { font-size:11px; color:var(--red); min-height:14px; font-weight:500; }

.kcgf-forgot-membership {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--rsm);
    background: var(--ivory);
}
.kcgf-forgot-membership h3 {
    margin: 0 0 6px !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--navy);
}
.kcgf-forgot-membership p {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    line-height: 1.6;
    color: var(--text-mid);
}
.kcgf-forgot-membership-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
}
.kcgf-forgot-membership label {
	display: none;
}
.kcgf-forgot-membership-submit {
    margin-top: 23px !important !important;
    min-height: 42px !important;
    white-space: nowrap !important;
}
.kcgf-forgot-membership .kcgf-field-error {
    min-height: 0;
}
.kcgf-forgot-membership-result {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--rsm);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}
.kcgf-forgot-membership-result.success {
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid #bbf7d0;
}
.kcgf-forgot-membership-result.error {
    color: var(--red);
    background: var(--err-bg);
    border: 1px solid #fecaca;
}

/* ── Photo upload ─────────────────────────
   Layout: [circle preview] [Choose / Remove buttons]
────────────────────────────────────────── */
.kcgf-photo-section {
    margin-top:24px;
    padding-top:22px;
    border-top:1px dashed var(--border);
}
.kcgf-photo-section-label {
    font-size:13px;
    font-weight:600;
    color:var(--text-mid);
    margin-bottom:12px;
}
.kcgf-photo-section-hint {
    font-size:12px;
    font-weight:400;
    color:var(--text-lt);
    margin-left:8px;
}
.kcgf-photo-area {
    display:flex;
    align-items:center;
    gap:20px;
}
/* Circle drop zone */
.kcgf-photo-drop {
    flex-shrink:0;
    position:relative;
    width:100px; height:100px;
    border:2px dashed var(--border);
    border-radius:50%;
    background:var(--ivory);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:border-color var(--ease), background var(--ease);
}
.kcgf-photo-drop:hover { border-color:var(--navy-mid); background:var(--navy-lt); }
.kcgf-photo-placeholder {
    display:flex; flex-direction:column; align-items:center;
    gap:5px; color:var(--text-lt); font-size:10px;
    text-align:center; padding:8px; pointer-events:none;
}
.kcgf-photo-placeholder svg { width:28px; height:28px; }
#kcgf-photo-preview-img { width:100%; height:100%; object-fit:cover; }

/* Action buttons beside the circle */
.kcgf-photo-actions { display:flex; flex-direction:column; gap:8px; }
.kcgf-photo-btn {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    box-sizing: border-box !important; padding: 8px 16px !important;
    border-radius: var(--rsm) !important;
    font-size: 13px !important; font-weight: 600 !important; font-family: 'DM Sans',sans-serif !important;
    cursor: pointer !important; transition: all var(--ease) !important;
    white-space: nowrap !important; text-transform: none !important;
    overflow: visible !important; line-height: 1.4 !important;
}
.kcgf-photo-btn svg { width:15px; height:15px; flex-shrink:0; }

.kcgf-photo-btn--choose {
    background:var(--navy-lt);
    color:var(--navy);
    border:1.5px solid var(--navy-mid);
}
.kcgf-photo-btn--choose:hover { background:var(--navy); color:#fff; }

.kcgf-photo-btn--remove {
    background:#fff0f0;
    color:var(--red);
    border:1.5px solid #fca5a5;
}
.kcgf-photo-btn--remove:hover { background:var(--red); color:#fff; border-color:var(--red); }

/* ── WhatsApp widget ──────────────────────
   [+91 ▾ | WhatsApp number input…]
────────────────────────────────────────── */
.kcgf-whatsapp-widget label {
    display:block;
    font-size:13px; font-weight:600;
    color:var(--text-mid);
    margin-bottom:5px;
}

.kcgf-wa-row {
    position:relative;
    display:flex;
    align-items:stretch;
    height:44px;
    border:1.5px solid var(--border);
    border-radius:var(--rsm);
    background:var(--ivory);
    transition:border-color var(--ease), box-shadow var(--ease);
    overflow:visible;
}
.kcgf-wa-row:focus-within {
    border-color:var(--navy-mid);
    box-shadow:0 0 0 3px rgba(26,53,128,.1);
    background:var(--white);
}

/* Trigger button */
.kcgf-wa-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 8px 0 13px !important;
    margin: 0 !important;
    height: 100% !important;
    border: none !important;
    border-right: 1.5px solid var(--border) !important;
    border-radius: calc(var(--rsm) - 1px) 0 0 calc(var(--rsm) - 1px) !important;
    background-color: var(--wa-blue) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background var(--ease) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: none !important;
    overflow: visible !important;
    line-height: 1 !important;
    font-family: 'DM Sans', sans-serif !important;
}
.kcgf-wa-trigger:hover { background-color:#8aaaf5; }
.kcgf-wa-trigger:focus { outline:2px solid var(--navy-mid); outline-offset:-2px; }

.kcgf-wa-trigger-code {
    font-family:'DM Sans',sans-serif;
    font-size:14px; font-weight:700;
    color:var(--navy);
    min-width:36px;
    text-align:left;
}
.kcgf-wa-trigger-arrow {
    width:9px; height:9px; flex-shrink:0;
    color:var(--navy-mid);
    transition:transform var(--ease);
}
.kcgf-wa-trigger.is-open .kcgf-wa-trigger-arrow { transform:rotate(180deg); }

/* Number input */
.kcgf-wa-number {
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    color: var(--text) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 calc(var(--rsm) - 1px) calc(var(--rsm) - 1px) 0 !important;
    min-width: 0 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    height: 100% !important;
}
.kcgf-wa-number::placeholder { color:var(--text-lt); }
.kcgf-wa-number:focus { outline:none; }

/* Dropdown panel */
.kcgf-wa-dropdown {
    display:none;
    position:absolute;
    top:calc(100% + 5px); left:0;
    z-index:9999;
    width:270px;
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:var(--rsm);
    box-shadow:0 8px 28px rgba(15,33,86,.15);
    overflow:hidden;
}
.kcgf-wa-dropdown.is-open { display:block; }

.kcgf-wa-search-wrap { padding:8px 8px 6px; border-bottom:1px solid var(--border); background:var(--ivory); }
.kcgf-wa-search {
    display:block; width:100%; box-sizing:border-box;
    padding:7px 10px;
    border:1.5px solid var(--border); border-radius:var(--rsm);
    font-size:13px; font-family:'DM Sans',sans-serif;
    color:var(--text); background:var(--white);
    outline:none; transition:border-color var(--ease);
}
.kcgf-wa-search:focus { border-color:var(--navy-mid); }
.kcgf-wa-search::placeholder { color:var(--text-lt); }

.kcgf-wa-list { list-style:none; margin:0; padding:0; max-height:210px; overflow-y:auto; overscroll-behavior:contain; }
.kcgf-wa-list::-webkit-scrollbar { width:4px; }
.kcgf-wa-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.kcgf-wa-opt { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; cursor:pointer; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--text); transition:background .1s; border-bottom:1px solid #f3f4f8; }
.kcgf-wa-opt:last-child { border-bottom:none; }
.kcgf-wa-opt:hover { background:var(--navy-lt); }
.kcgf-wa-opt.is-selected { background:var(--navy-lt); font-weight:600; }
.kcgf-wa-opt-name { flex:1; }
.kcgf-wa-opt-code { color:var(--text-mid); font-size:12px; margin-left:8px; flex-shrink:0; font-weight:600; }
.kcgf-wa-divider  { height:1px; background:var(--border); margin:0; pointer-events:none; }

/* Join checkbox row */
.kcgf-wa-join-label {
    display: flex !important;
    align-items: center !important;   /* vertically centre checkbox with text */
    gap: 9px !important;
    margin-top: 8px !important;
    padding: 10px 13px !important;
    background: #f8f5ef !important;
    border: 1px solid #e5d9c0 !important;
    border-radius: var(--rsm) !important;
    cursor: pointer !important;
    transition: background var(--ease) !important;
    line-height: 1 !important;        /* prevent label from stretching */
}
.kcgf-wa-join-label:hover { background: #f2ece0 !important; }

/* Checkbox — force native checkbox appearance, resist theme overrides */
.kcgf-wa-join-check {
    flex-shrink: 0 !important;
    /* Kill any theme input sizing */
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    /* Force native checkbox rendering */
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    accent-color: var(--navy) !important;
    cursor: pointer !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
.kcgf-wa-join-text { font-size:13px; font-weight:400; color:var(--text); line-height:1.5; text-transform:none; letter-spacing:0; }
.kcgf-wa-join-text strong { color:var(--navy); font-weight:600; }

/* ── Family table ────────────────────────── */
.kcgf-family-outer {}
.kcgf-family-scroll { overflow-x:auto; }
.kcgf-family-table  { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; min-width:580px; }
.kcgf-family-table thead th { background:var(--navy); color:#fff; font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; padding:10px 12px; text-align:left; white-space:nowrap; }
.kcgf-family-table thead th:last-child { width:40px; }
.kcgf-family-table tbody tr { background:var(--white); }
.kcgf-family-table tbody tr:nth-child(even) { background:var(--ivory); }
.kcgf-family-table tbody td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.kcgf-family-table input,
.kcgf-family-table select {
    width: 100% !important; padding: 7px 10px !important;
    border: 1.5px solid var(--border) !important; border-radius: var(--rsm) !important;
    font-size: 13px !important; font-family: 'DM Sans',sans-serif !important;
    color: var(--text) !important; background: transparent !important;
    box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
    text-transform: none !important; margin: 0 !important;
}
.kcgf-family-table select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5880' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; padding-right:26px; }
.kcgf-family-table input:focus,.kcgf-family-table select:focus { outline:none; border-color:var(--navy-mid); background:var(--white); }
.kcgf-remove-family {
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important; width:28px !important; height:28px !important;
    border-radius: 50% !important; border: 1.5px solid #fecaca !important;
    background: none !important; color: var(--red) !important;
    cursor: pointer !important; padding: 0 !important; margin: auto !important;
    transition: all var(--ease) !important; text-transform: none !important; overflow: visible !important;
}
.kcgf-remove-family svg { width:14px; height:14px; }
.kcgf-remove-family:hover { background:var(--red); color:#fff; border-color:var(--red); }
.kcgf-btn-add-row {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    box-sizing: border-box !important; background: var(--navy-lt) !important;
    border: 1.5px dashed var(--navy-mid) !important; color: var(--navy-mid) !important;
    padding: 8px 16px !important; border-radius: var(--rsm) !important;
    font-size: 13px !important; font-weight: 600 !important; font-family: 'DM Sans',sans-serif !important;
    cursor: pointer !important; transition: all var(--ease) !important;
    text-transform: none !important; overflow: visible !important; line-height: 1.4 !important;
}
.kcgf-btn-add-row svg { width:16px; height:16px; }
.kcgf-btn-add-row:hover { background:var(--navy); color:#fff; border-color:var(--navy); border-style:solid; }

/* ── Review box ──────────────────────────── */
.kcgf-review-box { background:var(--ivory); border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:var(--rsm); padding:20px 22px; margin-top:24px; }
.kcgf-review-heading { display:flex; align-items:center; gap:8px; font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.kcgf-review-heading svg { width:18px; height:18px; color:var(--gold); flex-shrink:0; }
.kcgf-review-note { font-size:13px; color:var(--text-mid); margin:0 0 16px; line-height:1.6; }
.kcgf-review-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; font-size:13px; }
.kcgf-review-item { display:flex; flex-direction:column; gap:1px; }
.kcgf-review-key  { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-lt); }
.kcgf-review-val  { color:var(--text); font-weight:500; }

/* ── Navigation ──────────────────────────── */
.kcgf-step-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
.kcgf-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 11px 28px !important; border-radius: var(--rsm) !important;
    font-size: 14px !important; font-weight: 600 !important; font-family: 'DM Sans',sans-serif !important;
    cursor: pointer !important; border: none !important; transition: all var(--ease) !important;
    letter-spacing: .2px !important; text-transform: none !important;
    overflow: visible !important; line-height: 1.4 !important; text-decoration: none !important;
}
.kcgf-btn-primary {
    background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%) !important;
    color: #fff !important; box-shadow: 0 3px 12px rgba(15,33,86,.25) !important;
}
.kcgf-btn-primary:hover { box-shadow:0 6px 20px rgba(15,33,86,.35); transform:translateY(-1px); }
.kcgf-btn-primary:active { transform:translateY(0); }
.kcgf-btn-submit {
    padding: 13px 40px !important; font-size: 15px !important;
    background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%) !important;
    color: #fff !important; box-shadow: 0 3px 12px rgba(15,33,86,.25) !important;
}
.kcgf-btn-submit:hover { box-shadow:0 6px 20px rgba(15,33,86,.35); transform:translateY(-1px); }
.kcgf-btn-submit:active { transform:translateY(0); }
.kcgf-btn-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.kcgf-btn-ghost { background: none !important; color: var(--text-mid) !important; border: 1.5px solid var(--border) !important; }
.kcgf-btn-ghost:hover { border-color:var(--navy-mid); color:var(--navy); background:var(--navy-lt); }
.kcgf-arrow { transition:transform var(--ease); }
.kcgf-btn-primary:hover .kcgf-arrow { transform:translateX(3px); }
.kcgf-spin { width:18px; height:18px; animation:kcgf-spin .7s linear infinite; }
@keyframes kcgf-spin { to{transform:rotate(360deg)} }

/* ── Responsive ──────────────────────────── */
@media (max-width:640px) {
    .kcgf-form-step { padding:22px 18px 20px; }
    .kcgf-field--half,.kcgf-field--third,.kcgf-field--quarter,.kcgf-field--three-quarter { grid-column:span 12; }
    .kcgf-step-label { display:none; }
    .kcgf-step-header h2 { font-size:21px; }
    .kcgf-forgot-membership { padding:16px 14px; }
    .kcgf-forgot-membership-row { grid-template-columns:1fr; }
    .kcgf-forgot-membership-submit { justify-content:center; margin-top:0 !important; width:100%; }
    .kcgf-wa-dropdown { width:calc(100vw - 60px); }
}

/* ══════════════════════════════════════════════════════
   SURNAME AUTOCOMPLETE
   A sleek floating dropdown that appears below the
   Last Name field as the user types.
══════════════════════════════════════════════════════ */

/* Wrapper — needed for absolute positioning of dropdown */
[data-role="surname"] { position:relative; }

.kcgf-surname-dropdown {
    position:absolute;
    top:calc(100% + 2px);
    left:0; right:0;
    z-index:8888;
    background:var(--white);
    border:1.5px solid var(--navy-mid);
    border-radius:var(--rsm);
    box-shadow:0 8px 24px rgba(15,33,86,.13);
    overflow:hidden;
    /* Animate in */
    animation:kcgf-dropdown-in .15s ease;
}
@keyframes kcgf-dropdown-in {
    from { opacity:0; transform:translateY(-4px); }
    to   { opacity:1; transform:translateY(0); }
}

.kcgf-surname-list {
    list-style:none;
    margin:0; padding:4px 0;
    max-height:220px;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.kcgf-surname-list::-webkit-scrollbar { width:4px; }
.kcgf-surname-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.kcgf-surname-item {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:9px 14px;
    cursor:pointer;
    font-size:14px;
    font-family:'DM Sans',sans-serif;
    color:var(--text);
    transition:background .1s;
    border-bottom:1px solid #f3f4f8;
}
.kcgf-surname-item:last-child { border-bottom:none; }
.kcgf-surname-item:hover,
.kcgf-surname-item.is-active { background:var(--navy-lt); }

/* Bold the matched portion */
.kcgf-surname-item mark {
    background:none;
    color:var(--navy);
    font-weight:700;
}

.kcgf-surname-item-gotram {
    font-size:11px;
    color:var(--text-lt);
    margin-left:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:55%;
    text-align:right;
}

/* ══════════════════════════════════════════════════════
   GOTHRAM SUGGESTION BOX
   Compact hint that appears below the Gothram field.
   Disappears when user moves to another field.
══════════════════════════════════════════════════════ */
.kcgf-gothram-hint {
    margin-top:6px;
    padding:10px 13px;
    border-radius:var(--rsm);
    border:1px solid #d4daf0;
    background:#f5f7ff;
    animation:kcgf-dropdown-in .18s ease;
}

.kcgf-gothram-hint-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-mid) !important;
    margin-bottom: 7px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.kcgf-gothram-hint-label strong {
    color:var(--navy);
}

/* Pills */
.kcgf-gothram-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.kcgf-gothram-pill {
    /* Explicit reset — no all:unset (unreliable vs theme reset.css) */
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 3px 11px !important;
    margin: 0 !important;
    background: var(--white) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'DM Sans', sans-serif !important;
    color: var(--text-mid) !important;
    cursor: pointer !important;
    transition: all var(--ease) !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    outline: none !important;
    vertical-align: middle !important;
}
.kcgf-gothram-pill:hover {
    border-color: var(--navy-mid) !important;
    color: var(--navy) !important;
    background: var(--navy-lt) !important;
}
.kcgf-gothram-pill--selected,
.kcgf-gothram-pill--selected:hover {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--navy) !important;
}

/* "Nothing found" state */
.kcgf-gothram-hint-none {
    font-size:12px;
    color:var(--text-lt);
    font-style:italic;
}