#mainContainer
{
    display: flex;
    flex-direction: row;
}

#leftSec
{
    background-color: var(--darkGrey);
    width: 75vw;
    height: 100vh;
}

#rightSec
{   
    position: fixed;
    right: 0vw;
    top: 0vh;

    background-color: var(--darkGrey);
    border: 0.052vw solid var(--grey5);

    width: 25vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* #date{
    width: 30%;
    height: 0.92vh;
    padding: 0.92vh 0.52vw;
    border: 0.052vw solid #ccc;
    border-radius: 0.2vw;
    font-size: 0.83vw;
    right: 0;
    top: 50%;
    z-index: 5;
} */

#leftSecForm
{
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "lH rH";

    padding-top: 5.55vh;
}

#leftHalf
{
    grid-area: lH;
    border: 0.052vw solid var(--grey5);

    position: relative;

    padding-left: 15%;
    padding-right: 15%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.92vh;
    align-items: top;
}

.leftHalfItems
{
    position: relative;
}

.leftHalfItems input
{
    margin-top: 0.92vh;
    margin-bottom: 0.92vh;
    width: 100%;
}

#rightHalf
{
    grid-area: rH;
    border: 0.052vw solid var(--grey5);

    position: relative;

    padding-left: 15%;
    padding-right: 15%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.92vh;
    align-items: top;
    
}

#budget:focus, 
input:focus, 
textarea:focus {
    outline: none;
    color: var(--green);
    border-color: var(--white);
    transition: 0.5s;
}

label
{
    color: var(--lightGrey);
}

input:not(:focus):not(:placeholder-shown) {
    color: var(--green);        /* Beautiful emerald green text */
    border-color: var(--dimWhite); 
    transition: 0.5s;
}

::selection
{
    color: var(--green);
    background-color: var(--dimGreen);
}

input,select,#budget
{
    background-color: transparent;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 0.052vw solid var(--dimWhite);

    color: var(--dimWhite);
}

.optionText
{
    color: aqua;
}

input::placeholder {
    color: var(--dimWhite);
    transition: color 0.3s ease; 
    justify-self: right;
}

input:focus::placeholder {
    color: var(--dimGreen); 
}


/*
#budget option[value=""] {
  color: #888888; 
  background-color: #ffffff;
}*/

option
{
    background-color: var(--lightGrey);
    color: var(--white);
} 

::-webkit-input-placeholder
{
    color: var(--dimWhite);
}

#Note
{
  color: var(--dimWhite);
  text-align: center;
}

#date {
  text-align: center !important;
  font-size: 1.66vw;
  
  /* Optional: Matching the input field to your dark theme */
  background: var(--darkGrey);
  color: var(--green); /* So the selected date is clearly visible */
  /* border: 0.052vw solid var(--grey5); */
  padding: 0.92vh 0.52vw;
  outline: none;
}

/* ---------------------------------------------------
   1. AUTOFILL BLURRED (Deselected but filled)
   Behavior: Text remains Green, Bottom Border goes Dim White
--------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:hover {
  /* Hides the default white background */
  /* -webkit-box-shadow: 0 0 0px 1000px var(--darkGrey) inset !important; */
  
  /* Text is considered "typed", so it stays Green */
  -webkit-text-fill-color: var(--green) !important;
  
  /* Clear all borders, then apply only the bottom one */
  border: none !important;
  border-bottom: 0.052vw solid var(--grey5) !important;
  
  /* Keep your sharp corners */
  border-radius: 0 !important;
  
  /* Prevents background color flashing */
  transition: background-color 5000s ease-in-out 0s;
}

/* ---------------------------------------------------
   2. AUTOFILL FOCUSED (User clicks on the autofilled field)
   Behavior: Bottom Border goes White, Text stays Green
--------------------------------------------------- */
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  /* Maintain the dark background */
  /* -webkit-box-shadow: 0 0 0px 1000px var(--darkGrey) inset !important; */
  
  /* Text remains Green */
  -webkit-text-fill-color: var(--green) !important;
  
  /* Clear all borders, then apply solid White to the bottom */
  border: none !important;
  border-bottom: 0.052vw solid var(--white) !important;
}

/* 1. Main calendar container & width */
.flatpickr-calendar {
  width: 100% !important;
  background: var(--darkGrey) !important;
  border-radius: 0% !important;
  box-shadow: none;
  border: 0.052vw solid var(--dimWhite);
}

/* 2. Header and Month section */
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month {
  background: var(--darkGrey) !important;
  color: var(--lightGrey) !important;
}

/* Month Dropdown Styling */
.flatpickr-monthDropdown-months {
  background: transparent !important; /* Transparent selected month background */
  color: var(--lightGrey) !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  
  /* Fix for cropped text at the bottom */
  height: auto !important;
  line-height: normal !important;
  padding-bottom: 0.18vh !important; 
  vertical-align: middle !important;
}

/* The actual dropdown list items (kept dark so they are readable) */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-monthDropdown-months option {
  background: var(--black) !important;
  color: var(--lightGrey) !important;
}

.flatpickr-monthDropdown-months:hover,
.flatpickr-monthDropdown-months:focus,
.flatpickr-monthDropdown-months option:hover,
.flatpickr-monthDropdown-months option:focus {
  background: var(--dimGreen) !important;
  color: var(--green) !important;
}

/* 3. Month & Time Toggle Arrows - Hidden by default, visible on hover */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
  background: transparent !important;
  color: var(--lightGrey) !important;
  fill: var(--lightGrey) !important;
  opacity: 0 !important; /* Hides arrows initially */
  transition: opacity 0.2s ease-in-out !important;
}

/* Show arrows when hovering their respective zones */
.flatpickr-months:hover .flatpickr-prev-month, 
.flatpickr-months:hover .flatpickr-next-month,
.numInputWrapper:hover span.arrowUp,
.numInputWrapper:hover span.arrowDown {
  opacity: 1 !important; /* Makes them visible on hover */
}

/* Arrow SVG styling */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path,
.numInputWrapper span svg,
.numInputWrapper span svg path {
  fill: var(--lightGrey) !important;
  stroke: var(--lightGrey) !important;
  color: var(--lightGrey) !important;
}

/* Time input CSS border triangles */
.numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--lightGrey) !important;
}

.numInputWrapper span.arrowDown::after {
  border-top-color: var(--lightGrey) !important;
}

/* Arrow hover effects */
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg path,
.flatpickr-months .flatpickr-next-month:hover svg path,
.numInputWrapper span:hover::after {
  fill: var(--green) !important;
  stroke: var(--green) !important;
  border-bottom-color: var(--green) !important;
  border-top-color: var(--green) !important;
}

/* 4. Weekday headers (Mon, Tue, etc.) */
.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
  width: 100% !important;
  background: var(--darkGrey) !important;
}

span.flatpickr-weekday {
  background: var(--darkGrey) !important;
  color: var(--white) !important;
  flex: 1 !important;
  max-width: none !important;
}

/* 5. Day container stretched full-width */
.flatpickr-days,
.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  background: var(--darkGrey) !important;
}

/* 6. Individual day cells */
.flatpickr-day {
  color: var(--lightGrey) !important;
  max-width: none !important;
  flex-basis: 14.28% !important;
  height: 3.7vh !important;
  line-height: 3.7vh !important;
  border-radius: 0 !important; /* Strict sharp corners */
  border: 0.052vw solid transparent;
}

/* 7. Day cell interaction states */
.flatpickr-day:hover {
  background: var(--dimGreen) !important;
  border-color: transparent !important;
}

.flatpickr-day.selected, 
.flatpickr-day.selected:hover {
  background: var(--green) !important;
  color: var(--darkGrey) !important;
  border-color: var(--green) !important;
  border-radius: 0 !important; 
}

.flatpickr-day.today {
  border-color: var(--green) !important;
  border-radius: 0 !important; 
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--dimWhite) !important;
  background: transparent !important;
}

/* 8. Timepicker section */
.flatpickr-time {
  background: var(--darkGrey) !important;
  border-radius: 0 !important;
  border-top: 0.052vw solid var(--grey5) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--lightGrey) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Time selection / focus states */
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--dimGreen) !important;
  color: var(--green) !important;
  outline: none !important;
}

.flatpickr-time input::selection {
  background: var(--dimGreen) !important;
  color: var(--green) !important;
}
/*-----------------------------------------------------------------------------------------------------------------------------
*/
/* below is css of checkmark options */

/* 1. Fieldset Container */
fieldset {
  border: 0.052vw solid var(--dimWhite);
  border-radius: 0; /* Keeping strict sharp corners */
  padding: 1.85vh 1.3vw;
  margin: 1.85vh 0;
  background: var(--darkGrey);
  box-shadow: none;
}

/* 2. Legend (Title) */
fieldset legend {
  color: var(--lightGrey);
  padding: 0 0.52vw;
  font-size: 0.83vw;
  background: var(--darkGrey); /* Helps cut through the border cleanly */
}

/* 3. Spacing for each service row */
.services {
  margin-bottom: 1.29vh;
}

.services:last-child {
  margin-bottom: 0;
}

/* 4. Label styling & layout */
.services label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--lightGrey);
  font-size: 0.83vw;
  transition: color 0.2s ease-in-out;
  user-select: none; /* Prevents text highlighting when clicking rapidly */
}

/* Label text hover */
.services label:hover {
  color: var(--white);
}

/* 5. Custom Checkbox Base */
.services input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.04vw;
  height: 1.04vw;
  border: 0.052vw solid var(--lightGrey);
  border-radius: 0; /* Sharp corners */
  background-color: transparent;
  margin-right: 0.62vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  position: relative;
}

/* Checkbox Hover State */
.services input[type="checkbox"]:hover {
  border-color: var(--green);
  background-color: var(--dimGreen);
}

/* 6. Checkbox Checked State */
.services input[type="checkbox"]:checked {
  background-color: var(--green);
  border-color: var(--green);
}

/* 7. The Checkmark Icon (Drawn using CSS borders) */
.services input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  width: 0.26vw;
  height: 0.52vw;
  border: solid var(--darkGrey); /* Dark checkmark against the green background */
  border-width: 0 0.1vw 0.1vw 0;
  transform: rotate(45deg);
  top: 0.1vw; /* Adjusts vertical centering */
}

/* 8. Accessibility Focus State */
.services input[type="checkbox"]:focus-visible {
  outline: none;
  /* box-shadow: 0 0 0 0.1vw var(--darkGrey), 0 0 0 0.2vw var(--green); */
}




/* ----------------------------------------------------------------------------------------------------------- */




/* Container spacing (assuming this div is part of a larger form stack) */
textarea.textarea {
  /* Box model */
  width: 100%;
  height: 11.11vh;
  box-sizing: border-box;
  padding: 2%;

  /* align-self: top; */
  
  /* Theme styling */
  background: var(--darkGrey); /* Alternatively, use var(--black) if you want the input to look deeper */
  color: var(--green);
  border: 0.052vw solid var(--dimWhite);
  border-radius: 0; /* Sharp corners */
  
  /* Typography & Interaction */
  font-family: inherit;
  font-size: 0.83vw;
  line-height: 1.5;
  resize: none; /* Allows user to drag down, but prevents horizontal layout-breaking */
  outline: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Label Styling */
label[for="message"] {
  margin-top: 1.85vh;
  display: block;
  color: var(--lightGrey);
  font-size: 0.83vw;
  margin-bottom: 0.92vh;
}

/* Hover state
textarea.textarea:hover {
  border-color: var(--lightGrey);
} */

/* Focus state - Highlights with the theme's green */
textarea.textarea:focus {
  border-color: var(--white);
  /* background: var(--black); Darkens slightly on focus for depth */
}

/* Placeholder styling */
textarea.textarea::placeholder {
  color: var(--lightGrey);
  opacity: 0.6; /* Dims the placeholder so it doesn't compete with user input */
}

/* Custom Scrollbar for the textarea (Webkit browsers like Chrome/Edge/Safari) */
textarea.textarea::-webkit-scrollbar {
  width: 0.41vw;
}

textarea.textarea::-webkit-scrollbar-track {
  background: var(--darkGrey);
  border-left: 0.052vw solid var(--grey5);
}

textarea.textarea::-webkit-scrollbar-thumb {
  background: var(--grey5);
  border-radius: 0; /* Keeping the blocky theme */
}

textarea.textarea::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}




/* 1. Container Spacing & Centering */
.TNS {
  /* margin-top: 1.3vh; */
  /* margin-bottom: 1.3vh; */
  text-align: center;
}

/* 2. Label Layout */
.TNS label {
  display: block;
  text-align: center;
  color: var(--lightGrey);
  font-size: 0.83vw;
  font-weight: normal; /* Unweighted per brand guide */
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease-in-out;
}

.TNS label:hover {
  color: var(--white);
}

/* 3. Custom Checkbox Base */
.TNS input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15vw; /* Aligns checkbox cleanly with line 1 text */
  width: 1.04vw;
  height: 1.04vw;
  border: 0.052vw solid var(--lightGrey); /* Highly visible border */
  border-radius: 0; /* Sharp corners */
  background-color: transparent;
  margin-right: 0.41vw;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
}

/* Checkbox Hover */
.TNS input[type="checkbox"]:hover {
  border-color: var(--green);
  background-color: var(--dimGreen);
}

/* Checkbox Checked */
.TNS input[type="checkbox"]:checked {
  background-color: var(--green);
  border-color: var(--green);
}

/* The Checkmark */
.TNS input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  width: 0.26vw;
  height: 0.52vw;
  border: solid var(--darkGrey);
  border-width: 0 0.1vw 0.1vw 0;
  transform: rotate(45deg);
  top: 0.1vw;
}

/* Focus state */
.TNS input[type="checkbox"]:focus-visible {
  outline: none;
  /* box-shadow: 0 0 0 0.1vw var(--darkGrey), 0 0 0 0.2vw var(--green); */
}

/* 4. Link & Highlight Styling */
.TNS a {
  text-decoration: none;
  color: inherit;
}

.TNSHighlight {
  color: var(--green);
  font-size: 0.83vw;
  font-weight: normal; /* Unweighted per brand guide */
}

/* Hover state for Terms & Condition link */
.TNS a:hover .TNSHighlight {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 0.2vw;
}

#submitInfo
{
  height: 3.7vh;
  width: 20.83vw;

  align-self: center;

  background-color: transparent;
  border: 0.052vw solid var(--green) !important;

  transition: 0.3s;
}

#submitInfoText
{
  color: var(--green);

  transition: 0.3s;
}

#submitInfo:hover
{
  background-color: var(--green);
  color: var(--darkGrey);

}

#submitInfo:hover #submitInfoText
{
  color: var(--darkGrey);
}


.rx-select {
  position: relative;
  width: 100%;
  margin-top: 0.92vh;
}