html, body {
  min-height: 100hv;
  margin: 0;
  font-size: 1.05rem;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: url('T2s.JPG');
    display: flex;
    background-size: cover;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3); /* opacity effect, adjust 0.0-1.0 */
    z-index: 0; /* behind content */
}

/* Separator at the top */
.separator {
    width: 100%;
    height: 50px;                 /* taller for buttons */
    background-color: #ffc400;
    border-radius: 4px;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;                    /* above overlay */
    display: flex;                 /* align buttons */
    justify-content: flex-start;   /* left side by default */
    align-items: center;
    padding: 0 1.5rem;             /* spacing from edges */
    gap: 1rem;                     /* space between buttons */
}

/* Style for separator buttons */
.separator .top-btn {
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.9); /* white-ish box */
    color: #000;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* Hover effect */
.separator .top-btn:hover {
    background-color: #fff;       /* brighter on hover */
    color: #ffc400;               /* match separator */
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}


/* Center the form container */
.container {
    position: relative;                   /* so it sits above the overlay */
    z-index: 1;                           /* above ::before overlay */
    background-color: rgba(255, 255, 255, 0.95); /* almost solid white */
    padding: 2rem 2.5rem;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* optional shadow */
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 3rem
}


label {
  display: block;
  margin-top: 1rem;   /* space above each label */
  margin-bottom: 0.3rem; /* small gap below label */
  font-size: 1.05rem;
  font-weight: 550;

}

/* Gallons quantity input — fixed small width */
.gallons-quantity input {
    width: 100px;        /* small, fixed width */
    padding: 5px;
    box-sizing: border-box;
}

/* Tank size input — full width */
.tank-size input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.gallons-quantity label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.tank-size input {
     width: 5%;
    box-sizing: border-box; /* ensures padding doesn’t break the width */
}

/* Chrome, Edge, Safari */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fill-options {
    display: flex;          /* put the two options side by side */
    gap: 2rem;              /* space between Yes and No */
    align-items: center;    /* vertically align the radio with text */
}

.fill-options div {
    display: flex;          /* keep radio and label together */
    align-items: center;    /* align radio and text */
}

.fill-options input[type="radio"] {
    margin-right: 0.4rem;   /* small space between box and label */
    transform: scale(1.2);
}


.instructions-details textarea {
    width: 100%;             /* fill the container width */
    min-height: 120px;       /* make it bigger by default */
    max-height: 300px;       /* optional limit so it doesn’t get too tall */
    padding: 10px;
    box-sizing: border-box;  /* include padding in width/height */
    border-radius: 8px;
    border: 1px solid #ccc;
    resize: vertical;        /* allow only vertical resizing */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
}

.agree-checkbox {
    display: flex;          /* put checkbox and label in a row */
    align-items: center;    /* vertically align box with text */
    gap: 0.5rem;            /* space between box and label */
    margin-top: 1rem;       /* optional spacing above */
}

.agree-checkbox input[type="checkbox"] {
    margin: 0;              /* remove default browser spacing */
}

   



input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    font-size: 1.1rem;        /* slightly bigger font */
    padding: 10px 12px;       /* more space inside the input */
    border-radius: 8px;       /* slightly rounded corners */
    border: 1px solid #ccc;   /* keep light border */
    width: 100%;              /* full width for readability */
    box-sizing: border-box;   /* padding included in width */
}

/* Optional: focus effect for better UX */
input:focus,
textarea:focus {
    outline: none;
    border-color: #ffc400;   /* matches your yellow separator */
    box-shadow: 0 0 5px rgba(255,196,0,0.5);
}




/* Style the select dropdown */
select {
    font-size: 1.1rem;            /* bigger text for readability */
    padding: 8px 12px;             /* taller and easier to click */
    border-radius: 12px;           /* rounded corners */
    border: 1px solid #ccc;        /* light border */
    background-color: #fff;        /* white background */
    width: 100%;                   /* fill container */
    box-sizing: border-box;
    cursor: pointer;
}

/* Optional: hover/focus effect */
select:focus {
    outline: none;
    border-color: #ffc400;        /* match your yellow accent */
    box-shadow: 0 0 5px rgba(255,196,0,0.5);
}

/* Style options inside the dropdown (note: limited styling support across browsers) */
select option {
    padding: 6px 10px;            /* spacing inside options */
    font-size: 1rem;              /* slightly smaller than select itself */
}




/* Enabled submit button */
button[type="submit"]:not(:disabled) {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 20px;
    border: none;
    background-color: #ffc400;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Hover effect only when enabled */
button[type="submit"]:not(:disabled):hover {
    background-color: #e6b800;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Focus effect only when enabled */
button[type="submit"]:not(:disabled):focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,196,0,0.5);
}

/* Disabled submit button styling */
button[type="submit"]:disabled {
    background-color: #ddd;      /* light gray */
    color: #888;                 /* muted text */
    cursor: not-allowed;         /* show not-allowed cursor */
    box-shadow: none;            /* remove shadow */
    transform: none;             /* prevent scaling */
}