.registration-form {
    margin: 5%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.registration-form form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Increased from 10px */
    width: 100%;
    max-width: 600px; /* Added max-width for larger screens */
}

/* Customize the outer toast container */
.custom-toast-container {
    background-color: #f0f0f0;  /* Light background color */
    border-radius: 8px;         /* Rounded corners */
    padding: 16px;              /* Padding around the toast */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow */
  }
  
  /* Customize the inner toast content */
  .custom-toast-body {
    color: #213547;             /* Text color */
    font-family: 'Oswald', sans-serif; /* Custom font family */
    font-size: 16px;            /* Font size */
  }
  
  /* Optional: Add a more subtle close button styling */
  .Toastify__close-button {
    color: #213547;             /* Close button color */
  }
  
.form-row {
    display: flex;
    gap: 50px;
}



/* For older browsers */
.registration-form input::-webkit-input-placeholder,
.registration-form textarea::-webkit-input-placeholder {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #999;
}

.registration-form input::-moz-placeholder,
.registration-form textarea::-moz-placeholder {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #999;
}

.registration-form input:-ms-input-placeholder,
.registration-form textarea:-ms-input-placeholder {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #999;
}


.allergies-form label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px; /* Space between the square and label */
    font-weight: 600; 
    white-space: nowrap;
  }

  .radio-options {
    display: flex;
    gap: 20px;
  }
  
  .radio-options input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Make it square */
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  
  .radio-options input[type="radio"]:checked {
    background-color: #1B529E; /* Blue background when checked */
  }
  
  .radio-options input[type="radio"]:checked::after {
    content: ''; /* Create a pseudo-element for the tick */
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #1B529E; /* Match background color */
  }
  .radio-options input[type="radio"]:checked::after {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='000'><path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/></svg>");
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .form-header {
    margin-left: 3%;
}


.registration-form input,
.registration-form textarea {
    width: 100%;
    padding: 12px; /* Increased from 10px */
    border: 1px solid #bbb;
    border-radius: 10px;
    background-color: white;
    color: #292929;
    margin: 10px 0; /* Added vertical margin */
    font-size: 16px; /* Added font size for text in the input */
}

.registration-form textarea {
    resize: vertical;
    min-height: 120px; /* Increased from 100px */
}


@media (max-width: 1440px) {
    .registration-form input,
    .registration-form textarea {
        max-width: 80%;
        font-size: 14px;
    }

    .form-row {
        gap: 20%;
}
    .form-row > div {
        min-width: 30%;
        max-width: 30%;
    }

    
    .form-row > div > input{
        min-width: 100%;
        max-width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .registration-form {
        justify-content: center;
        margin-left: 5%;
        margin-right: 5%;
    }

    .registration-form label {
        margin-top: 4%;
        font-size: 28px;
    }

    .registration-form input::placeholder,
    .registration-form textarea::placeholder {
        font-size: 22px;
    }


    .radio-options {
        flex-direction: column;
    }


    .registration-form input,
    .registration-form textarea {
        width: 100%;
        font-size: 24px;
        padding: 15px;
        margin-bottom: 20px;
        box-sizing: border-box;
        border-radius: 15px;
    }

    .form-header h1 {
        font-size: 36px;
    }

    .form-header p {
        font-size: 18px;
    }

    .registration-form form {
        width: 100%;
        max-width: none;
    }

    .registration-form .book-appointment-button {
        align-self: center;
        margin-top: 50px;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .form-row > div {
        min-width: 80%;
        max-width: 80%;
    }

}

/* Responsive adjustments */
@media (max-width: 768px) {
    .registration-form {
        flex-direction: column;
    }

    .registration-form input::placeholder,
    .registration-form textarea::placeholder {
        font-size: 16px;
    }

    
    .registration-form input,
    .registration-form textarea {
        font-size: 18px;
    }


    .registration-form form {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }

}


@media (max-width: 480px) {
    
    .form-header {
        width: 85%;
    }

    .form-header h1 {
        font-size: 30px;
    }
    .form-header p {
        font-size: 15px;
    }

    .registration-form form {
        gap: 10px;
    }


    .radio-options label{
        font-size: 10px;
    }

    .registration-form label {
        font-size: 21px;
        margin-top: 10px;
    }

    .registration-form input {
        padding: 15px;
        padding-left: 10px;
        border-radius: 10px;
    }
    .radio-options input[type="radio"] {
        width: 10px;
        height: 10px;
    }

}

/* Styling for date and time icons */

/* Webkit (Chrome, Safari, newer versions of Opera) */
.registration-form input[type="date"]::-webkit-calendar-picker-indicator,
.registration-form input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
}

/* Mozilla Firefox */
.registration-form input[type="date"]::-moz-calendar-picker-indicator,
.registration-form input[type="time"]::-moz-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
}

/* Internet Explorer 10+ */
.registration-form input[type="date"]::-ms-clear,
.registration-form input[type="time"]::-ms-clear {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
}

/* Standard syntax (future-proofing) */
.registration-form input[type="date"]::-calendar-picker-indicator,
.registration-form input[type="time"]::-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
}

/* Additional styling for time inputs */
.registration-form input[type="time"]::-webkit-time-picker-indicator {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
}

.registration-form input[type="time"]::-moz-time-picker-indicator {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
    cursor: pointer;
}

.registration-form input[type="time"]::-ms-time-picker-indicator {
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(95%) contrast(90%);
}