/*=========== GOOGLE IMPORT FONT STYLE =========*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/*======= VARIABLE DECLARATIONS CSS AREA ========*/

:root {
    /* HEADER */
    --header-height: 1rem;
    
    /* FONT */
    --font-family: "Quicksand", serif;
    --font-size-header1: 1.5rem;
    --normal-font-size: .985rem;
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-large: 700;
    --font-style: normal;
    --body-background-color-lightwhite: #fefefe;
    --font-color-white: #fff;
    --font-color-black: black;

    /* BACKGROUND */
    --background-color-dark-orange: #f69542;
    --background-color-dark-blue: #13558d;  
    --background-color-lighter-blue: #4484bb; 
    --background-pure-white: #fff;
    --background-darker-white: #f9f9f9;

    /* Z-INDEX */
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*=========== BASE CSS ==========*/

* {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    list-style-type: none;
    scroll-behavior: smooth;
    text-decoration: none;
    transition: .1s ease;
}

/*=============== REUSABLE CSS CLASSES ===============*/

.container {
    max-width: 1162px;
    margin: 0 auto;
    padding-inline: 1.5rem;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/*====================== BODY ====================*/

body, html {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*====================== FORM CONTAINER ====================*/


.form-container {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--background-color-dark-blue); /* Apply the dark blue background */
    padding: 2rem;
    border-radius: 10px;
    width: 40rem;
    max-width: 90vw; /* Make it responsive */
    margin: 2rem auto;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    color: var(--font-color-white); /* Ensure text is readable on the dark background */
}

/* Form group for aligning First Name, Middle Initial, and Surname in one row */
.form-group-row {
    display: grid;
    grid-template-columns: 1fr 0.25fr 1fr .5fr; /* Adjust column widths */
    gap: 1rem; /* Add spacing between fields */
    align-items: center; /* Vertically align fields */
    margin-bottom: 1rem; /* Add spacing below the row */
}

.form-group-row div {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
}

.form-group-row label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem; /* Add spacing below the label */
    text-align: left; /* Align label text to the left */
}

.form-group-row input {
    height: 2rem;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
    padding: 0.5rem;
    box-shadow: inset -1px -1px 4px -2px rgba(0, 0, 0, 0.75);
}

/* Form group for aligning row number 2*/

/* Form group for aligning row number 2 with 3 columns */
.form-group-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 1rem; /* Add spacing between fields */
    align-items: center; /* Vertically align fields */
    margin-bottom: 1rem; /* Add spacing below the row */
}

.form-group-row-2 div {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
}

.form-group-row-2 label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem; /* Add spacing below the label */
    text-align: left; /* Align label text to the left */
}
.form-group-row-2 select {
    appearance: none; /* Remove default browser styles for the dropdown */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 4 5%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M2 0L0 2h4z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.65rem auto;
    padding-right: 1.5rem; /* Add space for the dropdown arrow */
}

.form-group-row-2 input,
.form-group-row-2 select {
    height: 2rem;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
    padding: 0.5rem;
    box-shadow: inset -1px -1px 4px -2px rgba(0, 0, 0, 0.75);
}

/* Form group for aligning row number 3 with 2 columns */
/* Form group for aligning country code and contact number in one row */
/* Style for the contact-number-group */
.contact-number-group {
    display: flex;
    flex-direction: column; /* Stack label and fields vertically */
    gap: 0.5rem; /* Add spacing between the label and fields */
    margin-bottom: 1rem; /* Add spacing below the group */
}

.contact-number-fields {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Two columns: 1/3 for the dropdown, 2/3 for the input */
    gap: 1rem; /* Add spacing between the dropdown and input */
    align-items: center;;
}

.contact-number-group label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    text-align: left; /* Align label text to the left */
}

.contact-number-fields select,
.contact-number-fields input {
    height: 2rem; /* Ensure consistent height */
    width: 100%; /* Full width for both fields */
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
    padding: 0.5rem;
    box-shadow: inset -1px -1px 4px -2px rgba(0, 0, 0, 0.75);
}

.contact-number-fields select {
    appearance: none; /* Remove default browser styles for the dropdown */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 4 5%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M2 0L0 2h4z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.65rem auto;
    padding-right: 1.5rem; /* Add space for the dropdown arrow */
}

/* Form group for aligning row number 4 */
/* Form group for aligning row number 4 */
/* Form group for aligning row number 4 */
.form-group-row-4 {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    gap: 0.5rem; /* Add spacing between the label and input */
    margin-bottom: 1rem; /* Add spacing below the row */
}

.form-group-row-4 label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    text-align: left; /* Align label text to the left */
}

.form-group-row-4 input {
    height: 2rem;
    width: 100%; /* Full width for the input field */
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
    padding: 0.5rem;
    box-shadow: inset -1px -1px 4px -2px rgba(0, 0, 0, 0.75);
}

/* Form group for aligning row number 5 */
/* Form group for aligning row number 5 */
/* Form group for aligning row number 5 */
.form-group-row-5 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for the labels and inputs */
    gap: 1rem; /* Add spacing between the columns */
    margin-bottom: 1rem; /* Add spacing below the row */
}
.form-group-row-5 div {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
}

.form-group-row-5 label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    text-align: left; /* Align label text to the left */
    margin-bottom: .5rem;;
}

.form-group-row-5 input {
    height: 2rem;
    width: 100%; /* Full width for the input field */
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
    padding: 0.5rem;
    box-shadow: inset -1px -1px 4px -2px rgba(0, 0, 0, 0.75);
    background-color: #f9f9f9;
    color: rgb(111, 107, 107);
    text-align: center; /* Center the text inside the input field */
    display: flex;
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    cursor: pointer; /* Add a pointer cursor for better UX */
}

/* Style for form-group-row-6 */
/* Style for form-group-row-6 */
.form-group-row-6 {
    display: flex;
    justify-content: center; /* Center the button horizontally */
    margin-top: 1rem; /* Add spacing above the button */
}

.form-group-row-6 button {
    height: 2.5rem; /* Adjust button height */
    width: 100%; /* Full width for responsiveness */
    max-width: 200px; /* Limit the button width */
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    color: var(--font-color-white); /* Ensure text is readable */
    background-color: var(--background-color-dark-orange); /* Use the main button color */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 7px 7px 4px -6px rgba(0,0,0,1);
}

.form-group-row-6 button:hover {
    background-color: var(--background-color-lighter-blue); /* Change color on hover */
    transform: translateY(-2px); /* Add a hover effect */
    box-shadow: 7px 7px 4px -2px rgba(0,0,0,1);
}

.form-group-row-6 button:active {
    transform: translateY(0); /* Reset transform on click */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}


/* Style for the dataprotectionmodal */
.dataprotectionmodal {
    display: none; /* Hide the modal by default */
    position: fixed;
    z-index: 1000; /* Ensure it appears above other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    overflow: hidden; /* Prevent overflow */
}

/* Style for the modal content */
.dataprotectionmodal-content {
    background-color: var(--background-pure-white);
    font-family: var(--font-family);
    color: var(--font-color-black);
    margin: 5% auto;
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 80%;
    overflow-y: auto; /* Enable scrolling for overflowing content */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    text-align: justify;
}

/* Close button for the modal */
.dataprotectionmodal .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--font-color-black);
    background: none;
    border: none;
}

/* Style for the disabled button */
.form-group-row-6 button:disabled {
    background-color: #ccc; /* Gray background for disabled state */
    color: #666; /* Dimmed text color */
    cursor: not-allowed; /* Show not-allowed cursor */
    box-shadow: none; /* Remove shadow for disabled state */
    transform: none; /* Remove hover effects */
}

/* Style for the enabled button (on hover) */
.form-group-row-6 button:not(:disabled):hover {
    background-color: var(--background-color-lighter-blue); /* Change color on hover */
    transform: translateY(-2px); /* Add a hover effect */
    box-shadow: 7px 7px 4px -2px rgba(0, 0, 0, 1);
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .dataprotectionmodal-content {
        width: 95%;
        max-height: 85%;
        padding: 1.5rem;
    }

    .dataprotectionmodal .close-btn {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 500px) {
    .dataprotectionmodal-content {
        width: 95%;
        max-height: 90%;
        padding: 1rem;
    }

    .dataprotectionmodal .close-btn {
        font-size: 1rem;
    }
}