@charset "UTF-8";
/**
 * Module 4 Unit 1 Project — Midterm Project
 * Web Development 3 — Broward College
 * Author: Frank Roscoe
 * Instructor: Professor Phil Colodetti
 *
 * Stylesheet: Basic Form Styling
 * Original base styles by: Dr. Raz Ben‑Ezzer
 *
 * Purpose:
 * - Provides consistent styling for form labels, inputs, validation states,
 *   and error messages.
 * - Used by jQuery Validation plugin to visually indicate valid/invalid fields.
 */

/* ------------------------------------------------------------
   FORM POSITIONING
------------------------------------------------------------ */

form {
    position: relative;
}

/* ------------------------------------------------------------
   LABELS BEFORE INPUTS
------------------------------------------------------------ */

form label {
    display: inline-block;
    width: 150px;
    text-align: right;
    padding: 10px;
    font-size: 18px;
    margin: 10px;
    color: #333;
}

/* ------------------------------------------------------------
   LABELS AFTER INPUTS (validation messages)
------------------------------------------------------------ */

form input + label {
    text-align: left;
    font-size: 18px;
    padding: 10px;
    color: #333;
}

/* Error messages after an input */
form input + label.error {
    color: #CD212A; /* Italian red */
    padding: 10px;
    font-size: 18px;
    width: auto !important;
}

/* ------------------------------------------------------------
   RADIO GROUP ERROR MESSAGE
------------------------------------------------------------ */

form .radioreq {
    position: absolute;
    left: 130px;
    top: 60px;
    transform: rotate(90deg);
    color: #CD212A !important; /* Italian red */
    padding: 10px;
    font-size: 18px;
    width: auto !important;
}

/* ------------------------------------------------------------
   REGULAR INPUTS
------------------------------------------------------------ */

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
    background-color: #F4F4F4; /* Light neutral */
    padding: 10px;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid #008C45; /* Italian green */
    color: #333;
}

/* ------------------------------------------------------------
   INPUTS WITH ERRORS
------------------------------------------------------------ */

form input[type="text"].error,
form input[type="email"].error,
form input[type="password"].error,
form textarea.error {
    background-color: #F9D4D4; /* Soft red tint */
    border-color: #CD212A;     /* Italian red */
    font-size: 18px;
}

/* ------------------------------------------------------------
   INPUTS THAT PASSED VALIDATION
------------------------------------------------------------ */

form input[type="text"].valid,
form input[type="email"].valid,
form input[type="password"].valid,
form textarea.valid {
    background-color: #D8F2E0; /* Soft green tint */
    border-color: #008C45;     /* Italian green */
    font-size: 18px;
}

/* ------------------------------------------------------------
   SUBMIT BUTTON
------------------------------------------------------------ */

form input[type="submit"] {
    font-size: 18px;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: #008C45; /* Italian green */
    color: white;
    border: none;
    box-shadow: 0px 3px 10px rgba(50, 50, 50, 0.4);
    cursor: pointer;
}

form input[type="submit"]:hover {
    background-color: #006C35; /* Darker green */
}