body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f7f8fa; color: #111; margin: 0; }
.container { max-width: 520px; margin: 5vh auto; padding: 32px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); position: relative; }
h1 { font-size: 20px; text-align: center; margin: 0 0 18px; color: #111; font-weight: 600; }
label { display: block; margin: 12px 0 6px; font-size: 13px; color: #333; font-weight: 500; }
input, select, .iti input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-size: 14px; box-sizing: border-box; }
input::placeholder { color: #9b9b9b; }
select:invalid { color: #9b9b9b; }
select option { color: #111; }
select option:first-child { color: #9b9b9b; }
option:not(:first-child) { color: #111; }
input:focus, select:focus, .iti input:focus { border-color: #00b686; outline: none; box-shadow: 0 0 0 3px rgba(0, 182, 134, 0.08); }

/* ---------- DOB Group ---------- */
.dob-group { display: flex; gap: 10px; margin-top: 6px; }
.dob-group select { border-radius: 8px; padding: 10px 12px; border: 1px solid #ddd; background: #fff; font-size: 14px; box-sizing: border-box; color: #9b9b9b; }
.dob-group select:valid { color: #111; }
.dob-group select option:not(:first-child) { color: #111; }
.dob-group select:nth-child(1), .dob-group select:nth-child(3) { flex: 0 0 84px; }
.dob-group select:nth-child(2) { flex: 1 1 auto; min-width: 130px; }
.dob-label { color: #333; font-size: 13px; font-weight: 500; margin: 12px 0 6px; display: block; }

/* ---------- Phone Input ---------- */
.phone-frame { display: flex; flex-direction: column; align-items: flex-start; padding: 0px; gap: 4px; width: 100%; height: 56px; }
.phone-input-wrapper { display: flex; align-items: center; width: 100%; height: 100%; position: relative; }
#phone { flex: 1; height: 100%; padding: 10px 12px 10px 70px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px; box-sizing: border-box; background: #fff; color: #111; }
.iti { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; width: 100%; }
.iti .iti__flag-container, .iti .iti__selected-flag { height: 100%; border-radius: 8px 0 0 8px; border-right: 1px solid #ddd; padding: 0 8px; display: flex; align-items: center; justify-content: center; background: #fff; }
.iti__selected-flag { background: transparent !important; border: none !important; }
.iti__selected-flag .iti__flag { width: 22px; height: 16px; border-radius: 2px; }
.iti input { border: none; box-shadow: none; height: 100%; padding: 0 8px; font-size: 14px; }
.iti__country-list { background: #fff; color: #111; border: 1px solid #e6e6e6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); max-height: 280px; overflow-y: auto; border-radius: 8px; }
.iti__country:hover { background: #f5f5f5; }
.iti__dial-code, .iti__divider { color: #666; }
.iti__flag-box { margin-right: 6px; }

/* ---------- Country Dropdown ---------- */
.country-select { position: relative; width: 100%; display: flex; align-items: center; }
.country-select input { width: 100%; padding: 10px 12px 10px 52px !important; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-size: 14px; color: #111; box-sizing: border-box; line-height: 1.5; cursor: pointer; height: 44px; }
.country-select input:focus { border-color: #00b686; outline: none; box-shadow: 0 0 0 3px rgba(0,182,134,0.08); }
.country-select input::placeholder { color: #9b9b9b; }
.country-select .flag-dropdown { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); height: 24px; width: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; z-index: 2; pointer-events: none; }
.country-select .selected-flag { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: transparent !important; border: none !important; padding: 0; margin: 0; }
.country-select .selected-flag .iti__flag { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px #ddd; }
.country-select .country-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: #fff; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); border: 1px solid #e6e6e6; max-height: 280px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.country-select .country { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.country-select .country:hover { background-color: #f5f5f5; }
.country-select .country .country-name { white-space: normal; font-size: 14px; color: #111; }
label[for="country"] { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #333; }


/* ---------- Custom Dropdowns ---------- */
.custom-dropdown { position: relative; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.dropdown-header { padding: 10px 12px; font-size: 14px; color: #9b9b9b; cursor: pointer; }
.dropdown-options { display: none; flex-direction: column; max-height: 160px; overflow-y: auto; padding: 8px 12px; border-top: 1px solid #eee; }
.custom-dropdown.open .dropdown-header { color: #111; }
.custom-dropdown.open .dropdown-options { display: flex; }
.dropdown-options label { font-size: 14px; color: #111; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dropdown-options input[type="radio"] { accent-color: #00b686; width: 16px; height: 16px; }
#volumeDropdown { margin-bottom: 16px; }

/* ---------- Buttons ---------- */
button { width: 100%; padding: 12px; border: 0; border-radius: 8px; font-weight: 600; background: #00b686; color: #fff; cursor: pointer; font-size: 15px; transition: background 0.18s; }
button:hover { background: #00966c; }

/* ---------- Footer ---------- */
.footer-text { text-align: center; margin-top: 14px; font-size: 13px; color: #080808; font-weight: 600; }
.footer-text a { color: #00b686; text-decoration: none; font-weight: 600; }
.footer-text a:hover { text-decoration: underline; }

/* ---------- Close Button ---------- */
.close-btn { position: absolute; width: 22px; height: 22px; right: 20px; top: 20px; background: none; border: none; font-size: 26px; cursor: pointer; color: #181616; font-weight: bold; line-height: 1; }
.close-btn:hover { color: #111111; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) { 
  .container { padding: 20px; margin: 4vh auto; } 
  input, select { font-size: 13px; } 
  button { width: 100%; font-size: 14px; padding: 10px; } 
}