/* =====================================================
   ObfuscatorJS Framework v2.4
   form.css
   Form System
   Production Optimized Version

   SAFE UPDATE
   - Existing class names preserved
   - Existing HTML/JS compatible
   - Existing tool pages compatible
   - Accessibility improved
   - Focus handling improved
   - Mobile behavior preserved
===================================================== */


/* =====================================================
   FORM GROUP
===================================================== */

.form-group {

    margin-bottom: var(--space-5);

}


/* =====================================================
   LABEL
===================================================== */

label {

    display: block;

    margin-bottom: var(--space-2);

    color: var(--text-color);

    font-size: var(--font-size-sm);

    font-weight: var(--font-medium);

    line-height: 1.4;

}

label.required::after {

    content: " *";

    color: var(--danger-color);

}


/* =====================================================
   INPUT / TEXTAREA / SELECT
===================================================== */

input,
textarea,
select {

    width: 100%;

    min-height: var(--input-height);

    padding: 12px 16px;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    background: var(--surface-color);

    color: var(--text-color);

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    line-height: 1.5;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;

}


/* =====================================================
   TEXTAREA
===================================================== */

textarea {

    min-height: 160px;

    resize: vertical;

}


/* =====================================================
   PLACEHOLDER
===================================================== */

input::placeholder,
textarea::placeholder {

    color: var(--text-muted-color);

    opacity: 1;

}


/* =====================================================
   HOVER
===================================================== */

input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {

    border-color: var(--border-dark-color);

}


/* =====================================================
   FOCUS
===================================================== */

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: var(--primary-color);

    box-shadow: var(--focus-ring);

}


/* =====================================================
   KEYBOARD FOCUS
===================================================== */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        var(--focus-width)
        solid
        var(--primary-color);

    outline-offset: var(--focus-offset);

}


/* =====================================================
   DISABLED
===================================================== */

input:disabled,
textarea:disabled,
select:disabled {

    cursor: not-allowed;

    opacity: .65;

    background: var(--surface-secondary);

}


/* =====================================================
   READONLY
===================================================== */

input[readonly],
textarea[readonly] {

    background: var(--surface-secondary);

    cursor: default;

}


/* =====================================================
   SELECT
===================================================== */

select {

    cursor: pointer;

}


/* =====================================================
   FORM HELP TEXT
===================================================== */

.form-help {

    margin-top: var(--space-2);

    color: var(--text-light-color);

    font-size: var(--font-size-sm);

    line-height: 1.5;

}


/* =====================================================
   FORM ERROR / SUCCESS
===================================================== */

.form-error {

    margin-top: var(--space-2);

    color: var(--danger-color);

    font-size: var(--font-size-sm);

    line-height: 1.5;

}

.form-success {

    margin-top: var(--space-2);

    color: var(--success-color);

    font-size: var(--font-size-sm);

    line-height: 1.5;

}


/* =====================================================
   VALIDATION STATES
===================================================== */

.input-success {

    border-color: var(--success-color) !important;

}

.input-success:focus {

    box-shadow:
        0 0 0 3px rgba(22, 163, 74, .15);

}

.input-warning {

    border-color: var(--warning-color) !important;

}

.input-warning:focus {

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, .15);

}

.input-error {

    border-color: var(--danger-color) !important;

}

.input-error:focus {

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, .15);

}


/* =====================================================
   FORM ROW
===================================================== */

.form-row {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-5);

}

.form-row .form-group {

    flex: 1 1 0;

    min-width: 220px;

}


/* =====================================================
   INPUT GROUP
===================================================== */

.input-group {

    display: flex;

    align-items: stretch;

    width: 100%;

}

.input-group input,
.input-group textarea,
.input-group select {

    flex: 1 1 auto;

    min-width: 0;

}


/* =====================================================
   INPUT GROUP BUTTON
===================================================== */

.input-group .btn {

    flex-shrink: 0;

}


/* =====================================================
   INPUT GROUP DESKTOP RADIUS
===================================================== */

.input-group > input,
.input-group > textarea,
.input-group > select {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

}

.input-group > .btn {

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

}


/* =====================================================
   CHECKBOX
===================================================== */

input[type="checkbox"] {

    width: 18px;

    height: 18px;

    min-width: 18px;

    min-height: 18px;

    margin: 0;

    padding: 0;

    border-radius: 4px;

    accent-color: var(--primary-color);

    cursor: pointer;

}


/* =====================================================
   RADIO
===================================================== */

input[type="radio"] {

    width: 18px;

    height: 18px;

    min-width: 18px;

    min-height: 18px;

    margin: 0;

    padding: 0;

    accent-color: var(--primary-color);

    cursor: pointer;

}


/* =====================================================
   CHECKBOX / RADIO GROUP
===================================================== */

.form-check {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: var(--space-3);

}

.form-check input {

    flex-shrink: 0;

    margin-top: 3px;

}

.form-check label {

    display: inline;

    margin: 0;

    font-weight: var(--font-normal);

    cursor: pointer;

}


/* =====================================================
   FILE UPLOAD
===================================================== */

input[type="file"] {

    min-height: auto;

    padding: 10px;

    cursor: pointer;

}


/* =====================================================
   RANGE SLIDER
===================================================== */

input[type="range"] {

    min-height: auto;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;

    accent-color: var(--primary-color);

    cursor: pointer;

}

input[type="range"]:focus {

    box-shadow: none;

}


/* =====================================================
   SEARCH INPUT
===================================================== */

input[type="search"] {

    appearance: none;

    -webkit-appearance: none;

}


/* =====================================================
   NUMBER INPUT
===================================================== */

input[type="number"] {

    appearance: textfield;

    -moz-appearance: textfield;

}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {

    appearance: none;

    -webkit-appearance: none;

    margin: 0;

}


/* =====================================================
   FIELDSET
===================================================== */

fieldset {

    margin: 0 0 var(--space-5);

    padding: var(--space-5);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

}

legend {

    padding: 0 var(--space-2);

    color: var(--text-color);

    font-size: var(--font-size-md);

    font-weight: var(--font-semibold);

}


/* =====================================================
   FORM ACTIONS
===================================================== */

.form-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top: var(--space-5);

}


/* =====================================================
   DARK MODE
===================================================== */

html.dark input,
html.dark textarea,
html.dark select {

    background: var(--surface-color);

    color: var(--text-color);

    border-color: var(--border-color);

}

html.dark input::placeholder,
html.dark textarea::placeholder {

    color: var(--text-muted-color);

}

html.dark input:hover:not(:disabled),
html.dark textarea:hover:not(:disabled),
html.dark select:hover:not(:disabled) {

    border-color: var(--border-dark-color);

}

html.dark fieldset {

    border-color: var(--border-color);

}

html.dark legend {

    color: var(--text-color);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .form-row {

        flex-direction: column;

        gap: var(--space-4);

    }

    .form-row .form-group {

        min-width: 100%;

    }

    .input-group {

        flex-direction: column;

        gap: var(--space-2);

    }

    .input-group > input,
    .input-group > textarea,
    .input-group > select {

        border-radius: var(--radius-md);

    }

    .input-group > .btn {

        width: 100%;

        border-radius: var(--radius-md);

    }

    .form-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .form-actions .btn {

        width: 100%;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    input,
    textarea,
    select {

        padding: 11px 14px;

        font-size: var(--font-size-sm);

    }

    textarea {

        min-height: 140px;

    }

    fieldset {

        padding: var(--space-4);

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    input,
    textarea,
    select {

        transition: none !important;

    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    input,
    textarea,
    select {

        color: #000000;

        background: #ffffff;

        border-color: #000000;

        box-shadow: none;

    }

}


/* =====================================================
   END OF FORM.CSS v2.4
===================================================== */