/* [sikh_id_quick_signup] — Join The Sikh Group card (signup + login) */
.sikh-id-auth {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px;
  background: #0a0a0c;
  border-radius: 24px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.sikh-id-auth-title { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 700; color: #fff; }
.sikh-id-auth-sub { margin: 0 0 36px; color: #9a9a9a; font-size: 14px; }
.sikh-id-auth-loggedin { color: #fff; font-size: 14px; }

.sikh-id-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.sikh-id-auth-col { position: relative; }
.sikh-id-auth-col:first-child::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -28px; width: 1px; background: rgba(255, 255, 255, 0.1);
}

.sikh-id-eyebrow { display: block; margin-bottom: 6px; color: #f5821f; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sikh-id-auth-col-sub { margin: 0 0 20px; color: #9a9a9a; font-size: 13px; }

.sikh-id-hidden { display: none; }

.sikh-id-form { margin: 0; }
.sikh-id-form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #fff; }
.sikh-id-form input,
.sikh-id-form select {
  display: block; width: 100%; margin-top: 6px; padding: 14px 20px;
  background: #fff; color: #111; border: none; border-radius: 999px;
  font-size: 14px; box-sizing: border-box;
}
.sikh-id-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 14px 20px;
  background: #fff; color: #111; border: none; border-radius: 20px;
  font-size: 14px; box-sizing: border-box; font-family: inherit; resize: vertical;
}
.sikh-id-form input::placeholder,
.sikh-id-form textarea::placeholder { color: #999; }
.sikh-id-form input:focus,
.sikh-id-form select:focus,
.sikh-id-form textarea:focus { outline: 2px solid #f5821f; outline-offset: 2px; }

/* [sikh_id_quick_signup] step 2 — the per-site nomination form, shown in
   place of the sign-up/login grid once sign-up succeeds */
#sikh-id-nomination-step { max-width: 480px; margin: 0 auto; }
#sikh-id-nomination-step .sikh-id-auth-col-sub { margin-bottom: 24px; }

/* Phone field: country-code dropdown + number input side by side */
.sikh-id-tel-wrap { display: flex; gap: 8px; margin-top: 6px; }
.sikh-id-tel-wrap .sikh-id-cc-select { flex: 0 0 110px; margin-top: 0; padding-left: 12px; padding-right: 8px; }
.sikh-id-tel-wrap input { flex: 1; margin-top: 0; min-width: 0; }
@media (max-width: 480px) {
  .sikh-id-tel-wrap .sikh-id-cc-select { flex-basis: 90px; }
}

.sikh-id-btn {
  display: block; width: 100%; margin-top: 4px; padding: 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; box-sizing: border-box;
  text-decoration: none;
}
.sikh-id-btn-solid { background: #f5821f; color: #111; border: 2px solid #f5821f; }
.sikh-id-btn-outline { background: transparent; color: #f5821f; border: 2px solid #f5821f; }
.sikh-id-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.sikh-id-forgot-link { display: block; margin-top: 20px; text-align: center; color: #f5821f; font-size: 13px; text-decoration: none; }
.sikh-id-forgot-link:hover { text-decoration: underline; }

.sikh-id-form-message { margin-top: 12px; font-size: 13px; text-align: center; }
.sikh-id-form-message.sikh-id-error { color: #ff6b5e; }
.sikh-id-form-message.sikh-id-success { color: #3ddc97; }

@media (max-width: 640px) {
  .sikh-id-auth { padding: 28px; }
  .sikh-id-auth-grid { grid-template-columns: 1fr; gap: 40px; }
  .sikh-id-auth-col:first-child::after { display: none; }
}

.sikh-id-widget { max-width: 320px; padding: 16px; border: 1px solid #e2e2e2; border-radius: 8px; font-size: 13px; }
.sikh-id-widget-header { margin-bottom: 8px; font-weight: bold; color: #0d1b3d; }
.sikh-id-widget-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.sikh-id-widget-bar-fill { height: 100%; background: #f5821f; }
.sikh-id-widget-cta { display: inline-block; margin-top: 12px; color: #f5821f; font-weight: bold; text-decoration: none; }