/* --= HTML ELEMENTS =-- */
        /* Basic reset and typography */
        body {
            font-family: Raleway, Lato, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0e6ff; /* Light purple background */
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
body {
	display: flex;
	flex-direction: column;
	width: 100%;
}
h1 {
	/* 1. LARGER FONT SIZE */
	font-size: 42px;         /* Adjust this to 32px or 36px if preferred */
	font-weight: 200;         /* Makes it extra bold */
	
	/* 2. DIFFERENT COLOR */
	color: #6b2737;
	/*color: #1a237e;           /* Deep navy to match the image theme */
	
	/* 3. ALIGNMENT */
	text-align: center;
	
	/* 4. LESS SPACE BELOW */
	margin-top: 0;            /* Removes space at top of the form */
	margin-bottom: 5px;       /* Tightens the gap to the line below */
	padding-bottom: 0;        /* Ensures no extra padding is hiding there */
	
	/* Optional: Modern font feel */
	/* font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: -0.5px;   /* Slightly tighter letters for a professional look */
}

/* Style for the 'Fill out the form below' text directly under it */
h1 + p {
	text-align: center;
	font-style: italic;
	color: #666;
	margin-top: 0;            /* Removes the gap between H1 and this P */
	font-size: 0.95em;
}

/* Style for section-headers */
h3 {
	font-weight: 400;         /* Makes it extra bold */
	color: #6b2737;
	text-align: left;
	margin-top: 27px;            /* Removes space at top of the form */
	margin-bottom: 9px;       /* Tightens the gap to the line below */
	padding-bottom: 0;        /* Ensures no extra padding is hiding there */
}
h3 + p {
	font-style: italic;
	color: #666;
	margin-top: 0;            /* Removes the gap between H1 and this P */
	font-size: 0.95em;
}

/* Common Styles for all inputs to match the 'Paper' feel */
input, select, textarea {
    background-color: #ffffff; /* Stark white inputs look clean on parchment */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
    color: inherit;
    font-family: inherit;
}

label {
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 4px;
}

/* --= ELEMENT IDs =-- */
#title-info {
    margin-top: 42px;
}

/* --= ELEMENT CLASSES =-- */

/*		GENERAL 'WRAPPER' FOR CENTERED ELEMENTS WITH VERTICAL FLOW */
.tagline {
	color: #6B2737;
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400;
	font-size: 19px;
	
}
.centered {
	display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically (if needed) */
	/* margin-bottom: 30px;     /* Adds space between logo and the form title */
    width: 100%;
	flex-direction: column;
}

/* 		FORM ROW 'WRAPPER' */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

/* 		FORM 'FIELD' (input boxes, etc) */
.field {
    flex: 1; /* Makes fields equal width */
    display: flex;
    flex-direction: column;
}

/*		INFO BADGE 'NOTICE' TO USERS */
.info-badge {
    background-color: #1a237e; /* Dark blue from your image */
	background-color: rgba(26, 35, 126, 0.05); /* 5% opacity blue */
    color: #1a237e;
	border: 2px solid #1a237e;   
    padding: 4px 16px;         /* Top/Bottom and Left/Right spacing */
    border-radius: 3px;       /* Makes it pill-shaped like the image */
    text-align: center;        /* Centers the word inside */
    display: inline-block;     /* Shrinks the box to fit the text */
    font-size: 0.9em;
    font-weight: 500;
    margin: 10px auto;         /* Centers the box itself on the page */
}

/*		INFO BADGE NOTICE "CENTERING" WRAPPER */
.badge-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*		LOGO (PAGE HEADER) 'WRAPPER' (centering, image, style, etc) */
.logo-wrapper {
    display: flex;
	flex-direction: column;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically (if needed) */
	/* margin:auto; */
    /* margin-bottom: 5px;     /* Adds space between logo and the form title */
    width: calc(100% + 80px);
    margin: -40px -40px 42px -40px;
    border-radius: 3px 3px 0 0;

    /* 1. Specify the Image */
    background-image: url('/assets/blue-pink-cloud-sky.png');
    
    /* 2. Positioning and Sizing */
    background-position: center;    /* Keeps it centered behind the logo */
    background-repeat: no-repeat;  /* Prevents the image from tiling */
    background-size: cover;      /* Or use 'cover' to fill the whole area */
    
    /* 3. Padding */
    padding: 20px 0px;               /* Adds space around the logo to show the background */
	position:relative;

}

/*		LOGO DISPLAY */
.logo {
    max-width: 250px;        /* Adjust this based on your logo's size */
	padding: 17px;
    height: auto;            /* Maintains aspect ratio */
}

/*		DATE-OF-BIRTH DROPDOWNS 'WRAPPER' for VERTICAL-STACK FLOW */
.dob-stack {
    display: flex;
    flex-direction: column; /* This makes them stack vertically */
    gap: 8px;              /* Space between Month, Day, and Year */
}

/*		DATE-OF-BIRTH DROPDOWN 'SELECT' BOXES, VERTICALLY-STACKED */
.dob-stack select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

/*		DATE-OF-BIRTH DROPDOWNS 'WRAPPER' for HORIZONTAL-STACK FLOW */
.dob-row {
    display: flex;       /* Initializes flex for the dropdowns */
    gap: 10px;           /* Adds space between the three dropdowns */
    width: 100%;         /* Ensures the row fills the right column */
}
/*		DATE-OF-BIRTH DROPDOWN 'SELECT' BOXES, HORIZONTALLY-STACKED */
.dob-row select {
    flex: 1;             /* Key: Makes all three span equal width across the row */
    display: flex;
	/* padding: 10px; */
    border: 1px solid #ccc;
    border-radius: 4px;
}

/*		'SYMPTOMS TEXT AREA: height, resizing, style' */
.field > textarea {
    min-height: 48px; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit; /* Ensures the font matches the rest of the form */
	resize: vertical;
}

/*		MAIN PAGE "CONTAINER" */
.container {
	background: white;
	max-width: 800px;
	width: 100%;
	padding: 40px;
	border-radius: 3px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	border: 1px solid #DED8C4;
	color: #4A453C;
	margin: 0 auto;
	position:relative;
}

/* --- MAIN PAGE CONTAINER BACKGROUND FORMAT Option 1: Classic Vellum (Recommended for the Image) --- */
.container.vellum {
    background: linear-gradient(180deg, #FFFDF5 0%, #FBF8EE 100%);
    border: 1px solid #E8E2D0;
    color: #3E3A31;
    box-shadow: 0 10px 30px rgba(62, 58, 49, 0.08);
}

/* --- MAIN PAGE CONTAINER BACKGROUND FORMAT Option 2: Antique Parchment --- */
.container.parchment {
    background: linear-gradient(180deg, #F5F1E6 0%, #EDE7D9 100%);
    border: 1px solid #DED8C4;
    color: #4A453C;
    box-shadow: 0 8px 25px rgba(74, 69, 60, 0.12);
}

/* --- MAIN PAGE CONTAINER BACKGROUND FORMAT Option 3: Modern Bone --- */
.container.bone {
    background: #F9F7F2;
    border: 1px solid #E3E1DB;
    color: #2C2A27;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* --- MAIN PAGE CONTAINER BACKGROUND FORMAT Option 4: Lavender Silk  --- */
.container.lavender-silk {
    /* 1. The Gradient: Starts slightly lighter/brighter and settles into your color */
    background: linear-gradient(180deg, #F8F4FF 0%, #F0E6FE 100%);
    
    /* 2. The Border: A slightly darker, muted lavender-grey to define the edges */
    border: 1px solid #D8CDEB;
    
    /* 3. The Text: A deep, desaturated purple-charcoal (cleaner than pure black) */
    color: #3B3645;
    
    /* 4. The Shadow: Uses a hint of purple in the shadow to make it look 'natural' 
       on the page rather than just a grey smudge */
    box-shadow: 0 10px 30px rgba(120, 105, 145, 0.12);
    
    padding: 40px;
}


/* 		LEGAL BLOCK DISCLAIMER 'WRAPPER' */
.disclaimer-container {
    margin-top: 30px;
	margin-bottom: 12px;
    padding: 11px 27px;
    background-color: rgba(0, 0, 0, 0.02); /* Very subtle tint */
    border: 1px solid #D8CDEB;            /* Matches your lavender border */
    border-radius: 4px; 
	justify-content: center;
	text-align: center;
}
/* 		LEGAL BLOCK DISCLAIMER BODY */
.disclaimer-text p {
    font-size: 1.0em;
    line-height: 1.2;
    color: #6B2737;
	margin-top: 0px;
    margin-bottom: 9px;
    font-style: italic;
}

/* Custom Checkbox Styling */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.8em;
    font-weight: 600;
    color: #3B3645;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: -1px;
	margin-left: 17px;
    cursor: pointer;
}

/* Container to handle centering of SUBMIT FORM area */
.submit-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px; /* Space above the button */
}

/* SUBMIT BUTTON STYLING */
button[type="submit"] {
    /* 1. Colors - using the Navy Blue from the logo */
    background-color: #1a237e;
    color: #ffffff;
    
    /* 2. Size & Shape */
    padding: 15px 45px;      /* Large and clickable */
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 11px;     /* Pill shape matches your badge */
    
    /* 3. Polish */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover */
    box-shadow: 0 4px 15px rgba(26, 35, 126, 0.2);
    text-transform: uppercase; /* Optional: makes it look more 'official' */
    letter-spacing: 1px;
}
/* SUBMIT BUTTON STYLING */
/* Hover Effect */
button[type="submit"]:hover {
    background-color: #283593; /* Slightly lighter navy */
    transform: translateY(-2px); /* Moves up slightly when hovered */
    box-shadow: 0 6px 20px rgba(26, 35, 126, 0.3);
}
/* SUBMIT BUTTON STYLING */
/* Active/Click Effect */
button[type="submit"]:active {
    transform: translateY(0); /* Pushes down when clicked */
}

/* Hidden 'PROCESSING' FIELD (for spam detection: this should not contain data after submission) */
.proc-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}