/*=========================================*/
/* Root form variables */
:root {
    --border-error-color: #ff4500;
    --border-error-glow-color: #ff4500;
    --border-focus-color: #1e90ff;
    --border-focus-glow-color: #1e90ff;
    --form-bg-color: #1a1a1a;
    --form-border-color: #000;
    --form-border-radius: 10px;
    --form-border-style: solid;
    --form-border-width: 1px;
    --form-element-bg-color: #171717;
    --form-text-color: #f1f1f1;
}

/*=========================================*/
/* Form styles */
.fu-form {
    background-color: var(--form-bg-color);
    padding: 20px;
    border-radius: var(--form-border-radius);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    max-width: 700px;
    margin: auto;
}

.fu-form-group {
    margin-top: 15px;
}

/*==========================================*/
/* Label styles */
.fu-label {
    display: block;
    /* Ensures labels sit above inputs */
    font-size: 16px;
    color: var(--form-text-color);
    margin-bottom: 5px;
    /* Adds space below label */
    font-weight: bold;
}

/*=========================================*/
/* Input styles */
.fu-input {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 10px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.3s ease;
}

/* Focus Effect */
.fu-input:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/*=========================================*/
/* Radio button styles */
.fu-radio-group {
    background-color: var(--form-element-bg-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Adds space between radio options */
    padding: 10px;
    /* Space above the group */
}

.fu-radio {

    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between custom button and label */
    color: var(--form-text-color);
    font-size: 14px;
}

/* Hide default radio */
.fu-radio-input {
    display: none;
}

.fu-radio-text {
    font-size: 14px;
    color: var(--form-text-color);
    margin-left: 2px;
    margin-bottom: 2px;
    ;

}

/* Custom radio circle */
.fu-radio-label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #1e90ff;
    background: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Prevents distortion */
}

/* Selected state */
.fu-radio-input:checked+.fu-radio-label::before {
    background: #1e90ff;
    border-color: #1e90ff;
}

/*=========================================*/
/* Checkbox styles */
.fu-checkbox-group {
    background-color: var(--form-element-bg-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between checkboxes */
    padding: 10px;
    /* Space above the group */
}

.fu-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between checkbox and label */
    color: var(--form-text-color);
    font-size: 14px;
}

/* Hide default checkbox */
.fu-checkbox-input {
    display: none;
}

/* Custom checkbox style */
.fu-checkbox-label::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #1e90ff;
    background: transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Checked state */
.fu-checkbox-input:checked+.fu-checkbox-label::before {
    background: #1e90ff;
    border-color: #1e90ff;
}

/*=========================================*/
/* Datalist styles */
.fu-datalist {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--form-text-color);
    background-color: var(--form-element-bg-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    outline: none;
    transition: border-color 0.2s ease;
}

.fu-datalist::placeholder {
    color: #888888;
}

.fu-datalist:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/*=========================================*/
/* Dropdown styles */
.fu-dropdown {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--form-text-color);
    background-color: var(--form-element-bg-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    appearance: none;
    /* removes native arrow in some browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.fu-dropdown:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/*=========================================*/
/* URL Input styles */
.fu-url {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Placeholder styling */
.fu-url::placeholder {
    color: #777;
    font-style: italic;
}

/* Focus effect */
.fu-url:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Invalid state (if URL is incorrectly formatted) */
.fu-url:invalid {
    border-color: var(--border-error-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-error-glow-color);
}

/*=========================================*/
/* Week Picker styles */
.fu-week {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Focus effect */
.fu-week:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* WebKit customization */
.fu-week::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/*=========================================*/
/* Time Picker styles */
.fu-time {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Focus effect */
.fu-time:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* WebKit customization */
.fu-time::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/*=========================================*/
/* Textarea styles */
.fu-textarea {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    height: auto;
    resize: vertical;
    /* Allows users to resize only vertically */
    transition: border-color 0.3s ease;
}

/* Placeholder styling */
.fu-textarea::placeholder {
    color: #777;
    font-style: italic;
}

/* Focus effect */
.fu-textarea:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/*=========================================*/
/* Tel Input styles */
.fu-tel {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Placeholder styling */
.fu-tel::placeholder {
    color: #777;
    font-style: italic;
}

/* Focus effect */
.fu-tel:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Invalid state (when input format is wrong) */
.fu-tel:invalid {
    border-color: var(--border-error-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-error-glow-color);
}

/*=========================================*/
/* Search Input styles */
.fu-search {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Focus effect */
.fu-search:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Remove default WebKit search styling */
.fu-search::-webkit-search-cancel-button {
    display: none;
}

/*=========================================*/
/* Range Slider styles */
.fu-range-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Adds spacing */
}

.fu-range-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Moves value to right */
    width: 100%;
}

.fu-range {
    flex-grow: 1;
    /* Allows slider to take available space */
}

.fu-range-value {
    font-size: 14px;
    color: var(--form-text-color);
    min-width: 40px;
    /* Prevents shifting */
    text-align: right;
    /* Ensures it stays aligned */
}

/*=========================================*/
/* Password Input styles */
.fu-password {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Placeholder styling */
.fu-password::placeholder {
    color: #333;
    font-style: italic;
}

/* Focus effect */
.fu-password:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Custom toggle button styling (for show/hide password) */
.fu-password-container {
    position: relative;
}

.fu-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #1e90ff;
    font-size: 14px;
}

/*=========================================*/
/* Number Input styles */
.fu-number {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Placeholder styling */
.fu-number::placeholder {
    color: #777;
    font-style: italic;
}

/* Focus effect */
.fu-number:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* WebKit stepper button customization */
.fu-number::-webkit-inner-spin-button,
.fu-number::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

/*=========================================*/
/* Month Picker styles */
.fu-month {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    width: 100%;
}

/* Focus effect */
.fu-month:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* WebKit customization */
.fu-month::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/*=========================================*/
/* Divider styles */
.pf-form-divider {
    height: 1px;
    background-color: #000;
    margin: 20px 0;
    /* Adds spacing above & below */
    border-radius: 2px;
}

/*=========================================*/
/* File Upload styles */
.fu-file {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    width: 100%;
}

/* Focus effect */
.fu-file:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Hide default button styling in WebKit */
.fu-file::-webkit-file-upload-button {
    background-color: #1e90ff;
    color: var(--form-text-color);
    border: none;
    padding: 6px 12px;
    border-radius: var(--form-border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover effect for upload button */
.fu-file::-webkit-file-upload-button:hover {
    background-color: #0077cc;
}

/*=========================================*/
/* Email Input styles */
.fu-email {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Placeholder styling */
.fu-email::placeholder {
    color: #777;
    font-style: italic;
}

/* Focus effect */
.fu-email:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Invalid state (when input doesn't match email format) */
.fu-email:invalid {
    border-color: var(--border-error-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-error-glow-color);

}

/*=========================================*/
/* Datetime Picker styles */
.fu-datetime {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    width: 100%;
}

/* Focus effect */
.fu-datetime:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* WebKit customization */
.fu-datetime::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/*=========================================*/
/* Date Picker styles */
.fu-date {
    background-color: var(--form-element-bg-color);
    color: var(--form-text-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 8px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

/* Focus effect */
.fu-date:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/* Customizing WebKit (Chrome, Edge, Safari) Date Picker */
.fu-date::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/*=========================================*/
/* Color Picker styles */
.fu-color {
    background-color: var(--form-element-bg-color);
    border: var(--form-border-width) var(--form-border-style) var(--form-border-color);
    border-radius: var(--form-border-radius);
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    appearance: none;
    /* Removes default styling */
    width: 100%;
}

/* Customizing the color input in WebKit browsers */
.fu-color::-webkit-color-swatch {
    border-radius: var(--form-border-radius);
    border: none;
}

/* Outline on focus */
.fu-color:focus {
    border-color: var(--border-focus-color);
    outline: none;
    box-shadow: 0 0 5px var(--border-focus-glow-color);
}

/*=========================================*/
/* Reset Button styles */
.fu-reset-container {
    display: flex;
    justify-content: flex-end;
    /* Aligns button to the right */
    padding: 10px 0;
    /* Adds spacing */
}

.fu-reset {
    background-color: #ff4500;
    color: var(--form-text-color);
    font-size: 14px;
    font-weight: bold;
    padding: 10px 16px;
    border: none;
    border-radius: var(--form-border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* Hover effect */
.pf-reset:hover {
    background-color: #cc3700;
}

/*=========================================*/
/* Button styles */
.fu-button-container {
    display: flex;
    justify-content: flex-end;
    /* Aligns button to the right */
    padding: 10px 0;
    /* Adds spacing */
}

.fu-button {
    background-color: #1e90ff;
    color: var(--form-text-color);
    font-size: 14px;
    font-weight: bold;
    padding: 10px 16px;
    border: none;
    border-radius: var(--form-border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* Hover Effect */
.fu-button:hover {
    background-color: #0077cc;
}

/* Click (Active) Effect */
.fu-button:active {
    background-color: #005faa;
}

/* Disabled Button */
.fu-button:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
}