:root { --color-gray-50:#f9fafb; --color-gray-100:#f3f4f6; --color-gray-300:#d1d5db; --color-gray-400:#9ca3af; --color-gray-500:#6b7280; --color-gray-600:#4b5563; --color-gray-700:#374151; --color-gray-800:#1f2937; --color-teal-50:#f0fdfa; --color-teal-500:#14b8a6; --color-teal-600:#0d9488; --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }
body { font-family:var(--font-sans); background-color:var(--color-gray-50); margin:0; color:var(--color-gray-800); }
.container-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.form-container { max-width:28rem; width:100%; background-color:white; border-radius:1rem; box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); padding:2rem; position:relative; }
.close-btn { position:absolute; top:1rem; right:1rem; color:var(--color-gray-400); font-size:1.5rem; font-weight:bold; line-height:1; background:none; border:none; cursor:pointer; transition:color .2s; }
.close-btn:hover { color:var(--color-gray-700); }
.form-title { font-size:1.25rem; font-weight:700; text-align:center; margin-bottom:1.5rem; }
.input-group { margin-bottom:1rem; position:relative; }
.select-group { margin-bottom:1rem; position:relative; }
.custom-select-wrapper { margin-bottom:1rem; position:relative; }
.input-label { display:block; font-size:0.875rem; font-weight:600; color:var(--color-black-700); margin-bottom:0.375rem; }
.input-field { width:100%; height:42px; font-size:0.875rem; background-color:white; border:1px solid var(--color-gray-300); border-radius:0.5rem; padding:0.625rem 0.75rem; transition:border-color .2s, box-shadow .2s; box-sizing:border-box; text-align:left; }
.input-field::placeholder,.select-field:invalid { color:var(--color-gray-400);}
.select-field { width:100%; height:42px; font-size:0.875rem; background-color:white; border:1px solid var(--color-gray-300); border-radius:0.5rem; padding:0.625rem 0.75rem; transition:border-color .2s, box-shadow .2s; box-sizing:border-box; text-align:left; appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position:right 0.5rem center; background-repeat:no-repeat; background-size:1.5em 1.5em; padding-right:2.5rem; }
.select-field:invalid { color:var(--color-gray-400); }
.select-field:valid { color: var(--color-gray-800);}
.input-field:focus { outline:none; border-color:var(--color-teal-500); box-shadow:0 0 0 3px rgba(20,184,166,0.2); }
.select-field:focus { outline:none; border-color:var(--color-teal-500); box-shadow:0 0 0 3px rgba(20,184,166,0.2); }
.dob-group { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.submit-btn { width:100%; margin-top:0.5rem; padding:0.75rem; background-color:#28997e; color:white; font-weight:700; border-radius:0.5rem; border:none; cursor:pointer; transition:background-color .2s; }
.submit-btn:hover { background-color:#24856e; }
.submit-btn:focus { outline:none; box-shadow:0 0 0 2px white,0 0 0 4px var(--color-teal-500); }
.footer-text { text-align:center; font-size:1.10rem; margin-top:1rem; font-weight:600; color:var(--color-black-600); }
.footer-text a { color:var(--color-teal-600); font-weight:700; text-decoration:none; }
.footer-text a:hover { text-decoration:underline; }
.custom-select { position:relative; }
.custom-select-btn { display:flex; justify-content:space-between; align-items:center; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.custom-select-btn .placeholder { color:var(--color-gray-400); }
.custom-select-btn.is-open { border-color:var(--color-teal-500); box-shadow:0 0 0 3px rgba(20,184,166,0.2); }
.custom-select-btn svg { width:1.25rem; height:1.25rem; color:var(--color-gray-500); transition:transform 0.2s; flex-shrink:0; }
.custom-select-btn.is-open svg { transform:rotate(180deg); }
.custom-select-options { display:none; position:absolute; z-index:10; width:100%; margin-top:0.25rem; background-color:white; border:1px solid #e5e7eb; border-radius:0.5rem; box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); max-height:15rem; overflow-y:auto; padding:0.75rem; box-sizing:border-box; }
.custom-select.is-open .custom-select-options { display:block; }
.dropdown-title { color:var(--color-gray-500); font-size:0.875rem; margin-bottom:0.75rem; padding:0 0.25rem; }
.radio-option-dropdown { display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; color:var(--color-gray-800); cursor:pointer; padding:0.5rem; border-radius:0.375rem; transition:background-color 0.2s;font-weight: 600; }
.radio-option-dropdown:hover { background-color:var(--color-gray-100); }
.radio-option-dropdown input[type="radio"] { display:none; }
.radio-custom { display:inline-block; width:1rem; height:1rem; border-radius:50%; border:2px solid var(--color-gray-300); position:relative; flex-shrink:0; transition:border-color .2s; }
.radio-option-dropdown input[type="radio"]:checked + .radio-custom { border-color:var(--color-teal-500); }
.radio-option-dropdown input[type="radio"]:checked + .radio-custom::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0.5rem; height:0.5rem; border-radius:50%; background-color:var(--color-teal-500); }
.iti { width:100%; }
.iti__country-list { z-index:11; box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); border-radius:0.5rem; margin-top:0.25rem; border:1px solid #e5e7eb; padding:0.5rem; box-sizing:border-box; }
/* START: PHONE INPUT STYLES (Applies to both phone and whatsapp) */
.phone-input-container { margin-bottom:1rem; position:relative; }
.phone-input-container .iti { display:flex; gap:0.5rem; align-items: flex-end; }
.phone-input-container .iti__flag-container { position:static; width:auto; }
.phone-input-container .iti__selected-flag { height:42px; padding:0 2.5rem 0 0.75rem; border-radius:0.5rem; border:1px solid var(--color-gray-300); background-color:white; transition:border-color .2s, box-shadow .2s; display:flex; align-items:center; position:relative; cursor:pointer; }
.phone-input-container .iti__arrow { display:none; }
.phone-input-container .iti__selected-flag::after { content:''; position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); width:1.5em; height:1.5em; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position:center; background-repeat:no-repeat; background-size:contain; transition:transform 0.2s; pointer-events:none; }
.phone-input-container .iti--show-dropdown .iti__selected-flag::after { transform:translateY(-50%) rotate(180deg); }
.phone-input-container .iti--show-dropdown .iti__selected-flag { border-color:var(--color-teal-500); box-shadow:0 0 0 3px rgba(20,184,166,0.2); outline:none; }
.phone-input-container .iti--separate-dial-code .iti__selected-dial-code { margin-left:0.5rem; color:var(--color-gray-400); }
.phone-input-container .input-field { flex-grow:1; padding-left:0.75rem !important; width:auto; height: 42px; }
/* END: PHONE INPUT STYLES */
.country-selector .custom-select-btn .btn-text { display:flex; align-items:center; gap:0.75rem; overflow:hidden; }
.country-selector .custom-select-btn .country-name { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.country-selector .custom-select-options { padding:0.5rem; display:none; flex-direction:column; gap:0.25rem; }
.custom-select.is-open .country-selector .custom-select-options { display:flex; }
.country-search-input { width:100%; padding:0.5rem 0.75rem; border:1px solid var(--color-gray-300); border-radius:0.375rem; font-size:0.875rem; box-sizing:border-box; margin-bottom:0.5rem; }
.country-search-input:focus { outline:none; border-color:var(--color-teal-500); box-shadow:0 0 0 2px rgba(20,184,166,0.2); }
.country-list-items { list-style:none; padding:0; margin:0; max-height:12rem; overflow-y:auto; }
.country-option { display:flex; align-items:center; gap:0.75rem; padding:0.5rem; border-radius:0.375rem; cursor:pointer; font-size:0.875rem; color:var(--color-gray-800); transition:background-color 0.2s; font-weight: 600; }
.country-option:hover { background-color:var(--color-gray-100); }
/* NEW STYLES FOR CHECKBOXES */
.checkbox-group { display: flex; align-items: center; margin-bottom: 1rem; margin-top: 1rem;}
.checkbox-group label { display: flex; align-items: center; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--color-gray-700); }
.checkbox-group input[type="checkbox"] {width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--color-gray-300);  cursor: pointer; flex-shrink: 0; margin-right: 0.5rem; accent-color: var(--color-teal-500); }
/* NEW STYLE FOR INVALID INPUTS */
.input-field.is-invalid {
    border-color: red !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2) !important;
}