/* Ensure full height for the registration wrapper */
#findamateApp {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

.hidden {
    display: none;
}

/* Flatpickr calendar adjustments */
#findamateApp .flatpickr-calendar {
    position: absolute !important; /* Ensure it's absolute for proper positioning */
    top: auto !important;          /* Let Flatpickr decide the best top value */
    left: auto !important;         /* Let Flatpickr decide the best left value */
    z-index: 9999;
    margin-top: 5px;
}

/* Header styles */
#findamateApp header {
    background: #fff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}

#findamateApp .logo-container {
    height: 40px;
}

#findamateApp .hidden-input {
    display: none;
    visibility: hidden;
    position: absolute;
    z-index: -1;
}

/* Registration form container */
#findamateApp #findamate-registration {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: var(--main-bg);
    height: 100%;
}

/* Title section */
#findamateApp #findamate-registration .title-section {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    align-items: center;
    position: relative;
}

/* Subtitle section */

#findamateApp #findamate-registration .title-section .back-btn {
    position: absolute;
    left: 0;
    visibility: hidden;
}

#findamateApp #findamate-registration .title-section .back-btn i {
    font-size: 24px;
}

#findamateApp #findamate-registration .title-section .back-btn.visible {
    visibility: visible;
}

/* Warning messages */
#findamateApp #age-warning {
    color: red !important;
    padding: 10px 20px;
    margin-top: 40px;
    border-radius: 4px;
}

#findamateApp #age-confirmation {
    color: var(--blue-500);
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
}

/* Headings */
#findamateApp #findamate-registration h2 {
    color: var(--font-color);
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    line-height: 35px;
}

#findamateApp #findamate-registration .title-section h2 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#findamateApp #findamate-registration h3 {
    color: var(--font-color);
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 12px;
    text-align: center;
    font-weight: 700;
}

#findamateApp #findamate-registration h4 {
    color: var(--font-color);
    font-size: 18px;
    margin-top: 20px  !important;
    margin-bottom: 20px !important;
    text-align: center;
}

/* Navigation bar */
#findamateApp #findamate-registration .navigation-bar {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Main registration container */
#findamateApp .registration-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#findamateApp .registration-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    margin-top: 0 !important;
}

#findamateApp .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#findamateApp .logo-container {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

#findamateApp #findamate-registration .step-subtitle {
 font-size: 16px;
 margin-bottom: 5px;
}

/* Progress bar container */
#findamateApp .progress-bar-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 0 20px; /* Added padding for better responsiveness */
}

#findamateApp #image-preview {
    margin: 20px 0px;
}

/* Progress bar track */
#findamateApp #findamate-registration .progress-bar {
    display: flex;
    width: 100%;
    height: 10px;
    background-color: var(--white);
    border-radius: 4px;
    overflow: hidden;
    margin: 20px 0px; /* Adjusted margin for more spacing */
    position: relative;
    background: var(--border-color);
}

/* Progress bar fill */
#findamateApp #findamate-registration .progress-bar-fill {
    height: 100%;
    background-color: var(--blue-500); /* Updated fill color */
    width: 0; /* Start with 0 width */
    transition: width 0.3s ease-in-out; /* Smooth transition on width change */
    border-radius: 4px; /* Maintain border-radius for smooth fill */
    box-shadow: var(--card-shadow); /* Added subtle shadow for depth */
    flex-grow: 1;
}

/* Form container */
#findamateApp #findamate-registration .form-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px !important;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 630px;
    width: 100%;
    margin: 0 auto !important;
    margin-top: 85px !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow);
}

#findamateApp #multi-step-form {
    width: 100%;
}

#findamateApp .form-step {
    display: none;
    width: 100%;
}

#findamateApp .form-step.active {
    display: block;
}

/* Button styles */
#findamateApp .next-button {
    margin-top: 20px !important;
}

#findamateApp #findamate-registration .gender-selection,
#findamateApp #findamate-registration .interest-selection,
#findamateApp #findamate-registration .additional-gender-selection,
#findamateApp #findamate-registration .additional-interest-selection,
#findamateApp #findamate-registration .date-inputs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

#findamateApp #findamate-registration .gender-selection, #findamateApp #findamate-registration .interest-selection {
    flex-wrap: wrap;
}

#findamateApp #findamate-registration .date-inputs input {
    width: calc(100% - 20px); /* Full width minus padding */
    text-align: center;
    background-color: var(--white);
    border: 1px solid #ccc;
    border-radius: 4px !important;
    font-size: 20px !important;
    color: var(--font-color);
    cursor: pointer;
    transition: border-color 0.3s;
    margin-bottom: 5px;
    padding: 10px 15px 10px 50px !important;
}

.dropdown-trigger {
    width: calc(100% - 5px) !important;
    padding: 0 !important;
}

#findamateApp .date-inputs input:hover,
#findamateApp .date-inputs input:focus {
    border-color: var(--blue-500);
    outline: none;
}

#findamateApp .measurement-selection {
    display: flex;
}

#findamateApp .measurement-selection button:hover {
    background-color: var(--blue-500);
}

#findamateApp .gender-button,
#findamateApp .interest-button,
#findamateApp .gender-option-button,
#findamateApp .interest-option-button,
#findamateApp .next-button,
#findamateApp .back-button,
#findamateApp .submit-button,
#findamateApp .measurement-button, .form-group select, .resend-otp-button, #findamateApp #findamate-registration .selection .select2-selection, #findamateApp .looking-for-button {
    width: 100%;
    padding: 15px;
    background-color: var(--white);
    color: var(--font-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s, border-color 0.3s;
    font-weight: bold;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

#findamateApp #findamate-registration .selection .select2-selection {
    margin: 0 !important;
}

#findamateApp .gender-button,
#findamateApp .interest-button,
#findamateApp .gender-option-button,
#findamateApp .interest-option-button,
#findamateApp .looking-for-button{
    border: 1px solid var(--border-color);
    color: var(--font-color);
}

#findamateApp .gender-button:hover,
#findamateApp .interest-button:hover,
#findamateApp .gender-option-button:hover,
#findamateApp .interest-option-button:hover,
#findamateApp .looking-for-button:hover {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
}

#findamateApp #findamate-registration .selection .select2-selection {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0 ;
}

#findamateApp #findamate-registration .gender_selection_container .selection .select2-selection {
    margin: 11px 0 0;
}


#findamateApp .gender-button, #findamateApp .interest-button {
    width: 25%
}

#findamateApp .select2-selection__arrow {
    height: 100%;
}

#findamateApp .select2-results__option {
    cursor: pointer;
}

.resend-otp-button {
    margin-top: 20px;
    width: auto;
    display: inline-flex;
}


#findamateApp .submit-button {
    margin-top: 40px !important;
}

#select2-country-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

#findamateApp #findamate-registration  .select2-selection__choice {
    padding: 10px 30px;
    background: var(--blue-500);
    margin: 5px 10px;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex;
    flex-flow: row-reverse;
    position: relative;
    justify-content: center;
    width: auto !important;
    font-weight: bold;
}

#findamate-registration  .select2-selection__choice__remove {
    position: absolute;
    right: 10px;
    font-size: 20px;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
}

#findamateApp #findamate-registration .select2-selection--multiple ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#findamateApp #findamate-registration .select2-selection--multiple li {
    list-style: none;
    width: 100%;
}

#findamateApp #findamate-registration .select2-search__field {
    width: 100% !important;
    margin-top: 20px;
}

#findamateApp .gender-button.active,
#findamateApp .interest-button.active,
#findamateApp .gender-option-button.active,
#findamateApp .interest-option-button.active,
#findamateApp .measurement-button.active,
#findamateApp .looking-for-button.active
{
    background-color: var(--blue-500);
    color: #fff;
    border-color: var(--blue-500);
}

#findamateApp .next-button {
    max-width: 600px;
}

#findamateApp .next-button:disabled,
#findamateApp .submit-button:disabled {
    background-color: var(--gray-300);
    border-color: var(--gray-300);
    color: var(--font-color);
    cursor: not-allowed;
    transform: unset;
}

#findamateApp .next-button,
#findamateApp .submit-button {
    background-color: var(--blue-500);
    color: var(--white);
}

#findamateApp button:hover {
    background-color: var(--pink-500);
    border-color: var(--pink-500);
    color: var(--font-active-color);
    transform: var(--card-transform);
}

/* Footer content */
#findamateApp #findamate-registration .footer-content {
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

#findamateApp #findamate-registration .date-input label {
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
    text-align: left;
    color: var(--font-color);
}

#findamateApp #findamate-registration .date-input {
    width: 30%;
}

    /* Progress Bar Sections */
#findamateApp .progress-bar {
    display: flex;
    justify-content: space-between;
    height: 10px;
    background-color: var(--white);
    border-radius: 4px;
    overflow: hidden;
}

#findamateApp .progress-bar .progress-bar-empty {
    flex-grow: 1;
    height: 100%;
    background-color: var(--white);
}

/* Styles specifically for Step 3 input fields */
#findamateApp #findamate-registration .form-group {
    display: flex;
    justify-content: space-around;
    width: 90%;
    max-width: 550px;
    flex-direction: column;
    text-align: left;
    position: relative; /* Required to position icons inside input fields */
    margin: 10px auto 15px;
}

#findamateApp #findamate-registration .form-group label {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--font-color);
}

#findamateApp #findamate-registration .form-group input {
    width: 100%;
    padding: 10px 35px 10px 45px; /* Adjust padding to make space for the icon */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px !important;
    font-size: 20px;
    color: var(--font-color);
    transition: border-color 0.3s;
    margin-bottom: 5px;
}

#findamateApp #findamate-registration .form-group textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 35px 10px 45px; /* Adjust padding to make space for the icon */
    background-color: var(--white);
    border: 1px solid #ccc;
    border-radius: 4px !important;
    font-size: 16px;
    color: var(--font-color);
    transition: border-color 0.3s;
    margin-bottom: 5px;
}

#findamateApp #findamate-registration .otp-inputs {
    flex-flow: row;
    justify-content: center;
    margin-top: 20px;
}

#findamateApp #findamate-registration .otp-inputs input {
    padding: 12px;
    margin: 5px;
    text-align: center;
}

#findamateApp #findamate-registration .form-group .input-icon {
    position: relative;
}

#findamateApp #findamate-registration .form-group .input-icon i {
    position: absolute;
    left: 20px;
    top: 45%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--pink-500);
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 100;
}

#findamateApp #findamate-registration .form-group .input-icon .fa-pen {
    top: 24%;
    height: auto;
}



#findamateApp #findamate-registration .form-group .input-icon input {
    padding-left: 50px; /* Ensure the input text does not overlap the icon */
}

#findamateApp #findamate-registration .form-group .input-icon .toggle-password {
    position: absolute;
    right: 20px;
    left: initial;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #999;
}

/* Password strength meter */
#findamateApp #findamate-registration #password-strength-indicator {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

#findamateApp #findamate-registration #password-strength-indicator span {
    display: block;
    width: 25%;
    height: 5px;
    background-color: #e0e0e0; /* Default background color */
    transition: background-color 0.3s;
    margin: 0px 2px;
}

#otp-error {
    background: #0add0a;display: inline-flex;padding: 10px 20px;border-radius: 4px;color: #fff;
}

#findamateApp #findamate-registration #password-strength-indicator.very-weak span:nth-child(-n+1) {
    background-color: red;
}

#findamateApp #findamate-registration #password-strength-indicator.weak span:nth-child(-n+2) {
    background-color: orange;
}

#findamateApp #findamate-registration #password-strength-indicator.so-so span:nth-child(-n+3) {
    background-color: yellow;
}

#findamateApp #findamate-registration #password-strength-indicator.good span:nth-child(-n+4) {
    background-color: lightgreen;
}

#findamateApp #findamate-registration #password-strength-indicator.strong span {
    background-color: #0add0a;
}

/* OTP input styles */
.otp-inputs {
    display: flex;
    justify-content: space-between;
    max-width: 300px;
    margin: 0 auto 20px auto;
}

.otp-input {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--white);
    margin: 0 5px;
}

.otp-input:focus {
    border-color: var(--blue-500);
    outline: none;
}

/* Styles for Range Sliders */
.range-slider-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.range-slider {
    width: 100%;
    -webkit-appearance: none;
    background: transparent;
    position: relative;
}

.range-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: #ddd;
    border-radius: 4px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--blue-500);
    border-radius: 50%;
    cursor: pointer;
}

.range-slider::-moz-range-track {
    height: 4px;
    background: #ddd;
    border-radius: 4px;
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--blue-500);
    border-radius: 50%;
    cursor: pointer;
}

.range-slider-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.range-slider-info span {
    font-size: 16px;
    color: var(--font-color);
}

/* Adjustments for toggle icon */
.toggle-icon {
    cursor: pointer;
    margin-left: 10px;
    font-size: 14px;
}

.range-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.range-slider-info {
    font-size: 24px;
    font-weight: bold;
}

.form-step-4 label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 18px;
}

#locating-status-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.location {
    margin: 0 auto;
    background: white;
    height: 5em;
    width: 5em;
    border-radius: 50% 50% 0% 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.location i {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 1;
    transition: color 0.3s ease;
}

.location:before {
    content: '';
    width: 1.25em;
    height: 1.25em;
    background: white;
    display: block;
    border-radius: 50%;
    border: 1em solid var(--blue-500);
    position: absolute;
    z-index: 1;
    transition: border-color 0.3s ease;
}

@keyframes ping {
    0% { transform: scale(0, 0); opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { transform: scale(1.1, 1.1); opacity: 0.0; }
}

.location:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5em;
    height: 5em;
    margin-top: -2.5em;
    margin-left: -2.5em;
    border-radius: 50%;
    border: 2px solid var(--blue-500);
    opacity: 0;
    animation: ping 2s ease-out infinite;
    transition: border-color 0.3s ease, animation 0.3s ease;
}

.success .location {
    background: #28a745; /* Green background */
    border-color: #28a745; /* Green border */
}

.success .location i {
    color: white; /* White icon color */
}

.success .location:before {
    border-color: #28a745; /* Green inner border */
}

.success .location:after {
    animation: none; /* Stop ping animation */
    border-color: #28a745; /* Green outer border */
    opacity: 0;
}

/* Styles for error state */
.error .location {
    background: #dc3545; /* Red background */
    border-color: #dc3545; /* Red border */
}

.error .location i {
    color: white; /* White icon color */
}

.error .location:before {
    border-color: #dc3545; /* Red inner border */
}

.error .location:after {
    animation: none; /* Stop ping animation */
    border-color: #dc3545; /* Red outer border */
    opacity: 0;
}

/* Styles for valid state */
.form-group select.valid {
    border-color: var(--blue-500); /* Blue border for valid state */
    background-color: #e0f7ff; /* Light blue background to indicate valid selection */
}

/* Styles for invalid state */
.form-group select.invalid {
    border-color: #dc3545; /* Red border for invalid state */
    background-color: #ffe0e0; /* Light red background to indicate invalid selection */
}

#findamateApp #findamate-registration .drag-drop-area {
    width: 100%;
    max-width: 530px;
    max-height: 200px;
    min-height: 25vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    border-radius: var(--border-radius);
    border: 4px dashed var(--gray-500);
}

#findamateApp #findamate-registration .drag-drop-area i {
    font-size: 6em;
}

#findamateApp #findamate-registration .drag-drop-area span {
    font-weight: bold;
    color: var(--font-color);
    position: relative;
    bottom: 70px;
}

#findamateApp #findamate-registration #profile_photos {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    text-align-last: center;
}

#findamateApp .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

#findamateApp .img-flag {
    width: 20px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}

#findamateApp .spi-picker-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
}

#findamateApp .slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-direction: column;
}

#findamateApp .slider-track {
    width: 100%;
    height: 2px;
    background-color: #ddd;
    position: relative;
    margin-top: 20px;
}

#findamateApp .slider-thumb {
    position: absolute;
    width: 10px;
    height: 50px;
    background-color: #6A0DAD;
    border-radius: 2px;
    cursor: pointer;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
}

#findamateApp .slider-markers {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 60px;
    font-size: 14px;
    color: #888;
}

#findamateApp .slider-marker {
    position: relative;
    text-align: center;
    padding: 20px !important;
}

#findamateApp .slider-marker::after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 4px;
    border-radius: 2px;
    background-color: #0253a5 !important;
    height: 20px;
}

#findamateApp .slider-marker.tall-marker::after {
    height: 40px;
    background-color: #0253a5 !important;
}

#findamateApp .slider-value {
    position: absolute;
    top: 0;
    font-size: 36px;
    font-weight: bold;
    color: #6A0DAD;
    text-align: center;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#findamateApp .unit-label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

#findamateApp .toggle-unit {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#findamateApp .toggle-unit button {
    background-color: #ddd;
    color: #333;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

#findamateApp .toggle-unit button.active {
    background-color: #6A0DAD;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #findamateApp .slider-wrapper {
        max-width: 100%;
    }

    #findamateApp .slider-value {
        top: -10px;
        font-size: 24px;
    }

    #findamateApp .slider-marker {
        font-size: 12px;
        padding: 20px !important;
        display: flex;
        align-items: start;
        justify-content: center;
    }

    #findamateApp .slider-marker::after {
        height: 8px;
    }

    #findamateApp .slider-marker.tall-marker::after {
        height: 16px;
    }

    #findamateApp .slider-thumb {
        width: 8px;
        height: 40px;
        top: -18px;
    }

    #findamateApp .toggle-unit button {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Overlay background */
#findamateApp #findamate-registration .modal-overlay {
    background-color: rgba(0, 0, 0, 0.39); /* Semi-transparent black overlay */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002; /* Just below the modal */
}

/* Center the modal */
#findamateApp #findamate-registration .modal.datepicker-modal {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px; /* Adjust width as needed */
    max-width: 100%;
    background-color: white; /* White background */
    border-radius: var(--border-radius); /* Optional: rounded corners */
    padding: 16px;
    height: auto; /* Automatic height */
    max-height: 90%; /* Optional: set a max-height to avoid overflow */
    overflow-y: auto; /* Enable scrolling if content exceeds max-height */
}

/* Modal content */
#findamateApp #findamate-registration .modal-content.datepicker-container {
    background-color: white !important;
    padding: 0;
}

/* Date display section */
#findamateApp #findamate-registration .datepicker-date-display {
    background-color: var(--white); /* Accent color */
    color: var(--font-color);
    padding: 8px;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
}

/* Day buttons */
#findamateApp #findamate-registration .datepicker-day-button {
    color: var(--font-color); /* Accent color for day buttons */
}

#findamateApp #findamate-registration .datepicker-day-button:hover {
    background-color: var(--blue-500); /* Accent color on hover */
    color: white;
}

/* Selected day */
#findamateApp #findamate-registration .datepicker-table td.is-selected button {
    background-color: var(--blue-500); /* Accent color for selected day */
    color: white;
}

/* Today highlight */
#findamateApp #findamate-registration .datepicker-table td.is-today button {
    background-color: #e0e0e0; /* Light gray for today's date */
    color: var(--blue-500); /* Accent color for today's date text */
}

/* Footer buttons */
#findamateApp #findamate-registration .datepicker-footer .btn-flat {
    color: var(--font-active-color); /* Accent color for footer buttons */
    background: var(--blue-500);
    border: 2px solid var(--blue-500);
    border-radius: var(--border-radius);
    font-size: 18px;
    margin: 5px;
    display: flex;
    align-items: center;
}

#findamateApp #findamate-registration .datepicker-footer .btn-flat:hover {
    background-color: var(--pink-500);
    border: 2px solid var(--pink-500);
    transform: var(--card-transform);
    transition: var(--card-transition) !important;
}

.confirmation-btns {
    display: flex;
    justify-content: end;
}

.datepicker-footer {
    width: 100% !important;
}

#findamateApp #findamate-registration #basic-info .form-group-container {
    display: flex;
    padding: 20px;
}

#findamateApp #findamate-registration #basic-info .form-container {
    display: flex;
    background: #fff;
    box-shadow: 0px 0px 50px rgba(0,0,0,0.39);
}

#findamateApp #findamate-registration .input-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

#findamateApp #findamate-registration #basic-info input {
    padding: 10px !important;
    width: 80px !important;
    text-align: center !important;
}

#findamateApp #findamate-registration #basic-info  .form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
    margin: 20px;
}

#findamateApp #findamate-registration #basic-info .form-group span {
    padding-left: 10px;
}

#findamateApp #otp-error, #findamateApp #email-error {
    color: red;
    background: lightpink;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 10px;
}

#findamateApp #otp-success {
    color: green;
    background: lightgreen;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 20px;
}

#email-checkmark {
    position: absolute;
    right: 20px !important;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: green;
}

.username-container {
    position: relative;
    display: inline-block;
}

.error-icon {
    color: red;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hidden by default */
}

input.invalid + .error-icon {
    display: inline; /* Show error icon when input is invalid */
}

#email-error {
    margin-bottom: 20px;
}

.wrapper .form-input {
    position: relative;
}

.wrapper input, .wrapper textarea {
    outline: none;
    width: 100%;
    cursor: text;
    font-size: 1rem;
    position: relative;
    border-radius: .4rem;
    padding: .4rem 1.8rem;
    color: rgb(0 0 0 / 80%);
    transition: all .3s ease-in-out;
    border: 2px solid rgb(0 0 0 / 20%);
}

.wrapper input:focus, .wrapper textarea:focus,
.wrapper input:valid, .wrapper textarea:valid {
    border: 2px solid var(--blue-500);
}

.wrapper input::placeholder, .wrapper textarea::placeholder {
    font-weight: 500;
    color: rgb(0 0 0 / 40%);
}

.wrapper .form-input i {
    top: 50%;
    left: 6%;
    z-index: 1;
    position: absolute;
    padding-left: .1rem;
    padding-right: .2rem;
    color: rgb(0 0 0 / 20%);
    transform: translate(-50%, -50%);
}

#findamateApp input, #findamateApp textarea {
    font-size: 20px !important;
}

#findamateApp .wrapper .counter {
    color: var(--font-color) !important;
    margin-top: 2px;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: bold;
    right: 0;
    z-index: 1;
    position: absolute;
}

.wrapper input:valid ~ i, .wrapper textarea:valid ~ i {
    color: var(--blue-500);
}

.wrapper input:valid ~ span, .wrapper textarea:valid ~ span {
    color: var(--blue-500);
}

.otp-message {
    margin-top: 12px !important;
}

.loading-text {
    margin-top: 12px !important;
}

.step-title {
    margin-top: 12px !important;
}

.dropdown-content li>a, .dropdown-content li>span {
    color: var(--font-color) !important;
}

.datepicker-controls {
    margin-top: 10px !important;
    width: 100% !important;
}

.datepicker-controls button {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selects-container {
    margin-bottom: 40px;
}

.selects-container input {
    margin-bottom: 0 !important;
}

.select2-results li:hover {
    background: rgb(0 115 230 / 39%);
}

.select2 {
    width: 100% !important;
}

.fa-star.active {
    color: white;
    background-color: rgb(0, 115, 230);
}

#registration-row { 
    width: 100% !important; 
}

.recommended-hobbies { 
    margin-top: 10px;
}

#findamate-registration .recommended-hobby-tag:before, #findamateApp #findamate-registration .common-ethnicity-tag:before {
    content: "\f067"; /* Unicode for Font Awesome "plus" icon */
    font-family: "Font Awesome 5 Free"; /* Use Font Awesome font family */
    font-weight: 900; /* Font weight for solid icons (Font Awesome) */
    margin-right: 5px; /* Space between icon and text */
    display: inline-block; /* Ensures the icon is properly aligned */
}

#findamateApp #findamate-registration .recommended-hobby-tag, #findamateApp #findamate-registration .common-ethnicity-tag {
    display: inline-block;
    padding: 4px 8px;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 4px;
    cursor: pointer;
}

.looking-for-selection {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

@media only screen and (min-width: 600px) {
    .looking-for-button {
        width: 48% !important;
    }
}

.form-group-inner {
    width: 100% !important;
}

.accordion-button {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Tooltip Customization */
.material-tooltip {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    max-width: 250px !important;
    overflow: visible !important;
    padding: 10px 15px;
}

/* Tooltip Arrow (Caret) */
.material-tooltip:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -11px;
    border-width: 11px;
    border-style: solid;
    border-color: transparent transparent var(--border-color) transparent;
}

.material-tooltip:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

.material-tooltip span,
.material-tooltip .tooltip-content,
.material-tooltip * {
    color: #000000 !important;
    font-size: 16px;
    line-height: 1.4;
}

@media (max-width: 600px) {
    #findamateApp #findamate-registration .date-input {
        width: 32%;
    }

    #findamateApp #findamate-registration .form-group {
        width: 100%;
    }

    #findamateApp #findamate-registration .progress-bar {
        margin: 0px 0px;
    }

    #findamateApp #findamate-registration .form-group small {
        max-width: 240px;
    }

    #findamateApp #findamate-registration .date-inputs input {
        padding: 10px 15px 10px 40px !important;
    }

    #findamateApp .gender-button, 
    #findamateApp .interest-button {
        width: 100% !important;
    }

    #findamateApp .step-indicator {
        display: block;
        font-size: 16px;
        margin-top: 5px;
    }
}