/* Instance-safe CSS using prefix/attr selectors so any numeric suffix works (4, 5, 6, ...) */

/* Container */
[class^="form-container-"] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 450px; margin: 0 auto; background: #fff; border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0,0,0,.1); overflow: hidden;
}

/* Step indicators */
[class^="step-indicators-"] { display:flex; background:#b3b3b3; padding:15px; justify-content:center; gap:25px; }
[class^="step-indicator-"] {
  width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; border:2px solid #dee2e6; background:#fff; color:#6c757d; transition:all .3s;
}
[class^="step-indicator-"].active { background:#343a40; color:#fff; border-color:#343a40; }
[class^="step-indicator-"].completed { background:#306fdb; color:#fff; border-color:#306fdb; }

/* Steps */
[class^="step-content-"] { display:none; padding:25px; }
[class^="step-content-"].active { display:block; }
[class^="step-content-"] h2 { margin-bottom:18px; color:#343a40; text-align:center; font-size:18px; }

/* Options */
[class^="options-grid-"] { display:grid; gap:10px; margin-bottom:18px; }
[class^="option-card-"] { padding:10px; border:2px solid #9cb0c4; border-radius:6px; cursor:pointer; transition:all .3s; text-align:center; background:#f8f9fa; }
[class^="option-card-"]:hover { border-color:#306fdb; background:#e3f2fd; }
[class^="option-card-"] input[type="radio"] { display:none; }
[class^="option-card-"] input[type="radio"]:checked + [class^="option-text-"] { color:#667eea; font-weight:700; }
[class^="option-card-"]:has(input[type="radio"]:checked) { border-color:#306fdb; background:#e3f2fd; }
[class^="option-text-"] { font-size:16px; color:#000000; }

/* Form groups */
[class^="form-group-"] { margin-bottom:18px; }
[class^="form-group-"] label { display:block; margin-bottom:5px; color:#151522; font-weight:500; }
[class^="form-group-"] input,
[class^="form-group-"] select { width:100%; padding:10px; border:2px solid #9cb0c4 !important; border-radius:6px; font-size:16px; transition:border-color .3s; background-color: #f8f9fa !important;}
[class^="form-group-"] input:focus, [class^="form-group-"] select:focus { outline:none; border-color:#4e67d5 !important; }
[class^="form-group-"] select:disabled { background:#e9ecef; cursor:not-allowed; }

[class^="form-group-"] input,
[class^="form-group-"] select,
[class^="form-group-"] textarea {
  color: #000000;
}

/* Address bits */
[class^="address-note-"] { margin-top:3px; color:#6c757d; font-style:italic; }
[class^="address-details-"] { background:#f8f9fa; padding:12px; border-radius:6px; margin:12px 0; border:2px solid #e9ecef; }
[class^="address-details-"] [class^="form-group-"] { margin-bottom:10px; }
[class^="address-details-"] input[readonly] { background:#e9ecef; color:#495057; cursor:default; }
[class^="manual-address-"] { background:#fff3cd; padding:12px; border-radius:6px; margin:12px 0; border:2px solid #ffeaa7; }
[class^="form-row-"] { display:flex; gap:10px; }
[class^="form-group-"].half-width { flex:1; }
[class^="address-options-"] { text-align:center; margin:12px 0; }

/* Google Places injected classes (global) */
.pac-container { background:#fff; border-radius:6px; box-shadow:0 4px 6px rgba(0,0,0,.1); border:1px solid #dee2e6; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; font-size:12px; z-index:10000; }
.pac-item { padding:8px 12px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.pac-item:hover { background:#f8f9fa; }
.pac-item-query { color:#333; font-weight:500; }

/* Validation states for address input */
[class^="address-validated-"] { border-color:#28a745 !important; background-color:#d4edda !important; }
[class^="address-invalid-"]   { border-color:#dc3545 !important; background-color:#f8d7da !important; }
[class^="address-loading-"] { background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjYuNSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0ibm9uZSIvPgo8cGF0aCBkPSJtOCAyIDYgNiAwIDYgNiAwIiBzdHJva2U9IiM2NjdlZWEiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSJub25lIj4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdHlwZT0icm90YXRlIiBkdXI9IjFzIiBmcm9tPSIwIDggOCIgdG89IjM2MCA4IDgiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CjwvcGF0aD4KPC9zdmc+'); background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; }

/* Phone input */
[class^="phone-input-container-"] { display:flex; gap:8px; }
[class^="country-code-select-"] {
  box-sizing: border-box;
  flex: 0 0 85px;
  width: 85px;
  max-width: 85px;
  height: 58px;
  padding: 8px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[class^="country-code-select-"]:focus { outline:none; border-color:#667eea; }
[class^="phone-input-container-"] input[type="tel"] { flex:1; margin:0; }

/* Buttons */
[class^="button-group-"] { display:flex; gap:10px; justify-content:center; margin-top:18px; }
[class^="btn-"] { padding:8px 20px; border:none; border-radius:6px; font-size:16px; font-weight:600; cursor:pointer; transition:all .3s; min-width:90px; }
[class*="btn-primary-"] { background:#306fdb !important; color:#fff !important; }
[class*="btn-primary-"]:hover { background:#2a5fbc !important; transform:translateY(-2px); }
[class*="btn-secondary-"] { background:#6c757d; color:#fff; }
[class*="btn-secondary-"]:hover { background:#5a6268; transform:translateY(-2px); }
[class*="btn-success-"] { background:#28a745; color:#fff; }
[class*="btn-success-"]:hover { background:#218838; transform:translateY(-2px); }
[class*="btn-link-"] { background:none; color:#667eea; text-decoration:underline; border:none; cursor:pointer; font-size:12px; }

/* OTP */
[class^="otp-section-"] { background:#e3f2fd; padding:12px; border-radius:6px; margin:12px 0; text-align:center; }

/* Loading */
[class^="loading-"] { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1000; }
[class^="spinner-"] { width:30px; height:30px; border:3px solid #f3f3f3; border-top:3px solid #667eea; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[class^="loading-"] p { color:#fff; margin-top:12px; font-size:15px; }

/* Messages */
[class^="error-message-"] { background:#f8d7da; color:#c81325; border:1px solid #f5c6cb; border-radius:6px; padding:8px 12px; margin:10px 0; font-size:12px; display:flex; align-items:center; text-align:center; animation:slideDown .3s ease; }
[class^="error-message-"]::before { content:"⚠️"; margin-right:5px; font-size:13px; }
[class^="success-message-"] { background:#d4edda; color:#155724; border:1px solid #c3e6cb; border-radius:6px; padding:8px 12px; margin:10px 0; font-size:12px; display:flex; align-items:center; text-align:center; animation:slideDown .3s ease; }
[class^="success-message-"]::before { content:"✅"; margin-right:5px; font-size:13px; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* A11y / required */
[class^="required-"] { color:#dc3545; font-weight:700; }

/* Responsive */
@media (max-width: 768px) {
  [class^="form-row-"] { flex-direction:column; gap:8px; }
  .pac-container { font-size:13px; }
}
@media (max-width: 580px) {
  [class^="options-grid-"] { grid-template-columns:1fr; }
  [class^="option-card-"] { padding:6px; }
}
@media (max-width: 540px) {
  [class^="step-indicators-"] { padding:5px 12px; gap:12px; }
  [class^="step-indicator-"] { width:28px; height:28px; font-size:11px; }
  [class^="step-content-"] { padding:12px; }
  [class^="options-grid-"] { gap:6px; }
  [class^="button-group-"] { margin-top:10px; }
  [class^="option-card-"] { padding:5px; }
  [class^="country-code-select-"] { height: 40px !important; }
}

/* Referral select states */
select[class^="form-select-"] {
  width:100%; padding:12px; border:2px solid #dee2e6; border-radius:6px; font-size:13px; background:#fff; cursor:pointer; transition:border-color .3s;
  appearance:none;
  height: 58px !important;
  background-image:url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px;
}
select[class^="form-select-"]:focus { outline:none; border-color:#667eea; }
select[class^="form-select-"]:disabled { background:#e9ecef; cursor:not-allowed; color:#6c757d; }
select[class^="form-select-"].selected { border-color:#28a745; background:#f8fff9; }
select[class^="form-select-"]:invalid { border-color:#dc3545; }
select[class^="form-select-"]:valid   { border-color:#28a745; }

/* Highlight "other" input */
#otherReferralDetail-4, #otherReferralDetail-5 {
  border-color:#ffc107; background:#fffbf0;
}
#otherReferralDetail-4:focus, #otherReferralDetail-5:focus {
  border-color:#e0a800; background:#fff;
}