/* Additional custom styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Animation for alerts */
#alert-container {
    transition: all 0.3s ease-in-out;
}

/* Custom styling for the readonly referral code field */
input[readonly] {
    background-color: #f9fafb;
    cursor: not-allowed;
}

/* Form disabled styling - with !important to ensure it's not overridden */
.form-disabled {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.75 !important;
    border-color: #d1d5db !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Referral status colors */
.text-green-600 {
    color: #059669;
}

.text-red-600 {
    color: #dc2626;
}

.text-yellow-600 {
    color: #d97706;
}

/* Fade in animation for status messages */
#referral-status {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Country code dropdown styling */
#country_code {
    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;
    width: 7.5rem;
}

/* Flag emoji proper sizing */
#country_code option {
    font-size: 15px;
}

/* Mobile number input when combined with country code */
#mobileno {
    min-width: 0;
    flex: 1;
}

/* Form overlay styling */
#form-overlay {
    z-index: 50 !important;
    background-color: rgba(209, 213, 219, 0.8) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;
    backdrop-filter: blur(2px) !important;
}

/* Make overlay message stand out */
#form-overlay div {
    background-color: white !important;
    color: #dc2626 !important;
    font-weight: bold !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
}

/* Invalid notice styling */
#invalid-notice {
    animation: fadeInDown 0.5s ease-in-out;
    margin-bottom: 1rem !important;
}

/* Animation for the notice */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Make form container relative for overlay positioning */
.bg-white.rounded-lg.shadow-md.p-6 {
    position: relative !important;
    overflow: hidden !important;
}

/* Toggle button styles for IC/Passport */
#ic-toggle, #passport-toggle {
    transition: all 0.2s ease-in-out;
}

#ic-toggle:hover, #passport-toggle:hover {
    background-color: #f3f4f6;
}

/* Input validation styles */
.ic-input.border-red-500, .passport-input.border-red-500 {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* Error animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

#idno-error {
    animation: shake 0.6s ease-in-out;
}

/* reCAPTCHA styling */
.g-recaptcha {
    transform-origin: left top;
    margin-bottom: 10px;
}

/* reCAPTCHA responsive adjustments */
@media screen and (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.85);
        margin-bottom: 5px;
    }
}

/* reCAPTCHA error animation */
#recaptcha-error {
    animation: shake 0.6s ease-in-out;
}

/* Additional responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    #country_code {
        width: 6rem;
    }
}

@media (max-width: 480px) {
    #ic-toggle, #passport-toggle {
        font-size: 0.75rem;
        padding: 0.5rem 0.25rem;
    }
}