/* =========================================================
   WONDER APP - VENDOR APPLICATION
   File: /vendor_app/assets/css/forms.css
   Purpose: Global form controls, layouts, validation,
            input groups, uploads, switches and form states
   ========================================================= */


/* =========================================================
   1. FORM ROOT
   ========================================================= */

form {
    width:100%;
    min-width:0;
}

.form,
.app-form,
.vendor-form {
    width:100%;
    min-width:0;
}

.form-section,
.form-group-section {
    width:100%;
    margin-bottom:var(--space-6,24px);
}

.form-section:last-child,
.form-group-section:last-child {
    margin-bottom:0;
}

.form-section-header,
.form-group-section-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-4,16px);

    width:100%;

    margin-bottom:var(--space-4,16px);
}

.form-section-title,
.form-group-section-title {
    margin:0;

    color:
        var(--color-heading, var(--color-text, #111827));

    font-size:
        var(--font-size-lg, 18px);

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

    line-height:1.35;
}

.form-section-description,
.form-group-section-description {
    margin-top:var(--space-1,4px);

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-sm, 14px);

    line-height:1.5;
}


/* =========================================================
   2. FORM LAYOUT
   ========================================================= */

.form-row {
    display:flex;
    flex-wrap:wrap;

    width:100%;

    gap:var(--space-4,16px);

    margin-bottom:var(--space-4,16px);
}

.form-row:last-child {
    margin-bottom:0;
}

.form-col {
    min-width:0;
    flex:1 1 0;
}

.form-col-full {
    width:100%;
    flex:0 0 100%;
}

.form-col-half {
    width:calc(50% - 8px);
    flex:0 0 calc(50% - 8px);
}

.form-col-third {
    width:calc(33.333% - 11px);
    flex:0 0 calc(33.333% - 11px);
}

.form-col-quarter {
    width:calc(25% - 12px);
    flex:0 0 calc(25% - 12px);
}

.form-grid {
    display:grid;

    width:100%;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:var(--space-4,16px);
}

.form-grid-1 {
    grid-template-columns:
        minmax(0,1fr);
}

.form-grid-2 {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.form-grid-3 {
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}

.form-grid-4 {
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}

.form-grid-auto {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%,240px),1fr)
        );
}


/* =========================================================
   3. FORM GROUP
   ========================================================= */

.form-group,
.form-field,
.field-group {
    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;
    min-width:0;

    margin-bottom:var(--space-4,16px);
}

.form-group:last-child,
.form-field:last-child,
.field-group:last-child {
    margin-bottom:0;
}

.form-group-inline {
    display:flex;
    flex-direction:row;
    align-items:center;

    gap:var(--space-3,12px);
}

.form-group-inline .form-label,
.form-group-inline .field-label {
    margin-bottom:0;
}


/* =========================================================
   4. LABELS
   ========================================================= */

.form-label,
.field-label,
label {
    display:inline-flex;
    align-items:center;

    max-width:100%;

    margin-bottom:var(--space-2,8px);

    color:
        var(--color-label, var(--color-text, #334155));

    font-size:
        var(--font-size-sm,14px);

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

    line-height:1.4;
}

.form-label.required::after,
.field-label.required::after,
.form-required::after,
.required-marker {
    content:" *";

    color:
        var(--color-danger, #dc2626);
}

.form-label-optional::after,
.field-label-optional::after {
    content:" (optional)";

    margin-left:4px;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);

    font-weight:
        var(--font-weight-normal,400);
}

.form-label-description {
    margin-left:auto;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);

    font-weight:
        var(--font-weight-normal,400);
}


/* =========================================================
   5. INPUT / SELECT / TEXTAREA BASE
   ========================================================= */

.form-control,
.form-input,
.form-select,
.form-textarea,
.form-control-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    display:block;

    width:100%;
    min-width:0;

    border:1px solid
        var(--color-input-border, #cbd5e1);

    border-radius:
        var(--radius-md,10px);

    color:
        var(--color-input-text, #1e293b);

    background:
        var(--color-input-bg, #ffffff);

    font-family:
        inherit;

    font-size:
        var(--font-size-sm,14px);

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

    line-height:1.5;

    outline:none;

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


/* =========================================================
   6. TEXT INPUTS
   ========================================================= */

.form-control,
.form-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height:44px;

    padding:
        10px 12px;
}

.form-control::placeholder,
.form-input::placeholder,
textarea::placeholder,
input::placeholder {
    color:
        var(--color-input-placeholder, #94a3b8);

    opacity:1;
}

.form-control:hover,
.form-input:hover,
.form-select:hover,
.form-textarea:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover {
    border-color:
        var(--color-input-border-hover, #94a3b8);
}

.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color:
        var(--color-primary, #2563eb);

    box-shadow:
        0 0 0 3px
        var(--color-primary-ring, rgba(37,99,235,.12));
}

.form-control:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline:none;
}


/* =========================================================
   7. TEXTAREA
   ========================================================= */

textarea,
.form-textarea {
    min-height:120px;

    padding:
        10px 12px;

    resize:vertical;
}

.form-textarea-small {
    min-height:80px;
}

.form-textarea-large {
    min-height:200px;
}

.form-textarea-no-resize {
    resize:none;
}


/* =========================================================
   8. SELECT
   ========================================================= */

select,
.form-select {
    min-height:44px;

    padding:
        10px 36px 10px 12px;

    appearance:none;

    background-image:
        linear-gradient(45deg,transparent 50%,currentColor 50%),
        linear-gradient(135deg,currentColor 50%,transparent 50%);

    background-position:
        calc(100% - 17px) 19px,
        calc(100% - 12px) 19px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:no-repeat;

    cursor:pointer;
}

select[multiple],
.form-select[multiple] {
    min-height:120px;

    padding:8px 12px;

    background-image:none;
}


/* =========================================================
   9. INPUT SIZES
   ========================================================= */

.form-control-xs,
.form-input-xs {
    min-height:32px;

    padding:
        5px 8px;

    font-size:
        var(--font-size-xs,12px);

    border-radius:
        var(--radius-sm,8px);
}

.form-control-sm,
.form-input-sm {
    min-height:38px;

    padding:
        7px 10px;
}

.form-control-lg,
.form-input-lg {
    min-height:50px;

    padding:
        12px 14px;

    font-size:
        var(--font-size-md,16px);
}

.form-control-xl,
.form-input-xl {
    min-height:56px;

    padding:
        14px 16px;

    font-size:
        var(--font-size-lg,18px);
}


/* =========================================================
   10. INPUT WITH ICON
   ========================================================= */

.input-wrapper,
.form-input-wrapper {
    position:relative;

    width:100%;
}

.input-wrapper .form-control,
.input-wrapper .form-input,
.form-input-wrapper .form-control,
.form-input-wrapper .form-input {
    position:relative;
}

.input-icon-left,
.form-input-icon-left {
    position:absolute;

    top:50%;
    left:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    color:
        var(--color-text-muted, #64748b);

    transform:translateY(-50%);

    pointer-events:none;

    z-index:1;
}

.input-icon-right,
.form-input-icon-right {
    position:absolute;

    top:50%;
    right:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    color:
        var(--color-text-muted, #64748b);

    transform:translateY(-50%);

    z-index:1;
}

.input-wrapper.has-icon-left .form-control,
.input-wrapper.has-icon-left .form-input,
.form-input-wrapper.has-icon-left .form-control,
.form-input-wrapper.has-icon-left .form-input {
    padding-left:40px;
}

.input-wrapper.has-icon-right .form-control,
.input-wrapper.has-icon-right .form-input,
.form-input-wrapper.has-icon-right .form-control,
.form-input-wrapper.has-icon-right .form-input {
    padding-right:40px;
}


/* =========================================================
   11. INPUT GROUP
   ========================================================= */

.input-group,
.form-input-group {
    display:flex;

    width:100%;
    min-width:0;

    align-items:stretch;
}

.input-group > .form-control,
.input-group > .form-input,
.input-group > .form-select,
.form-input-group > .form-control,
.form-input-group > .form-input,
.form-input-group > .form-select {
    flex:1 1 auto;

    min-width:0;

    border-radius:0;
}

.input-group > :first-child,
.form-input-group > :first-child {
    border-top-left-radius:
        var(--radius-md,10px);

    border-bottom-left-radius:
        var(--radius-md,10px);
}

.input-group > :last-child,
.form-input-group > :last-child {
    border-top-right-radius:
        var(--radius-md,10px);

    border-bottom-right-radius:
        var(--radius-md,10px);
}

.input-group-addon,
.input-group-text,
.form-input-addon {
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:
        0 12px;

    color:
        var(--color-text-muted, #64748b);

    background:
        var(--color-surface-muted, #f8fafc);

    border:1px solid
        var(--color-border, #e2e8f0);

    white-space:nowrap;

    font-size:
        var(--font-size-sm,14px);
}


/* =========================================================
   12. SEARCH INPUT
   ========================================================= */

.form-search,
.search-input,
.form-control-search {
    position:relative;

    width:100%;
}

.form-search input,
.search-input input,
.form-control-search input {
    padding-left:40px;
    padding-right:40px;
}

.form-search-icon {
    position:absolute;

    top:50%;
    left:12px;

    width:20px;
    height:20px;

    color:
        var(--color-text-muted, #64748b);

    transform:translateY(-50%);

    pointer-events:none;
}

.form-search-clear {
    position:absolute;

    top:50%;
    right:8px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:0;

    border-radius:50%;

    color:
        var(--color-text-muted, #64748b);

    background:transparent;

    cursor:pointer;

    transform:translateY(-50%);
}

.form-search-clear:hover {
    color:
        var(--color-text, #1e293b);

    background:
        var(--color-surface-muted, #f1f5f9);
}


/* =========================================================
   13. CHECKBOX / RADIO
   ========================================================= */

.form-check,
.form-radio,
.checkbox,
.radio {
    display:flex;
    align-items:flex-start;

    width:100%;

    gap:var(--space-2,8px);

    margin-bottom:var(--space-3,12px);
}

.form-check:last-child,
.form-radio:last-child,
.checkbox:last-child,
.radio:last-child {
    margin-bottom:0;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"],
.form-radio input[type="checkbox"],
.form-radio input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox input[type="radio"],
.radio input[type="checkbox"],
.radio input[type="radio"] {
    width:18px;
    height:18px;

    flex:0 0 18px;

    margin:2px 0 0;

    accent-color:
        var(--color-primary, #2563eb);

    cursor:pointer;
}

.form-check label,
.form-radio label,
.checkbox label,
.radio label {
    display:block;

    margin:0;

    cursor:pointer;

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

    line-height:1.5;
}

.form-check-inline,
.form-radio-inline {
    display:inline-flex;

    width:auto;

    margin-right:var(--space-4,16px);
}


/* =========================================================
   14. CHECKBOX / RADIO CARD
   ========================================================= */

.form-check-card,
.form-radio-card {
    position:relative;

    display:flex;

    width:100%;

    padding:var(--space-4,16px);

    border:1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-md,10px);

    background:
        var(--color-surface, #ffffff);

    cursor:pointer;

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

.form-check-card:hover,
.form-radio-card:hover {
    border-color:
        var(--color-border-hover, #cbd5e1);

    background:
        var(--color-surface-muted, #f8fafc);
}

.form-check-card:has(input:checked),
.form-radio-card:has(input:checked) {
    border-color:
        var(--color-primary, #2563eb);

    background:
        var(--color-primary-light, #eff6ff);

    box-shadow:
        0 0 0 1px
        var(--color-primary, #2563eb);
}

.form-check-card input,
.form-radio-card input {
    margin-top:3px;

    flex:0 0 auto;
}

.form-check-card-content,
.form-radio-card-content {
    min-width:0;

    flex:1 1 auto;

    margin-left:var(--space-3,12px);
}

.form-check-card-title,
.form-radio-card-title {
    display:block;

    margin-bottom:2px;

    color:
        var(--color-heading, #1e293b);

    font-weight:
        var(--font-weight-semibold,600);
}

.form-check-card-description,
.form-radio-card-description {
    display:block;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-sm,14px);

    line-height:1.5;
}


/* =========================================================
   15. SWITCH
   ========================================================= */

.form-switch,
.switch {
    display:inline-flex;
    align-items:center;

    gap:var(--space-3,12px);

    cursor:pointer;
}

.form-switch input,
.switch input {
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    pointer-events:none;
}

.form-switch-control,
.switch-control {
    position:relative;

    display:block;

    width:44px;
    height:24px;

    flex:0 0 44px;

    border-radius:999px;

    background:
        var(--color-switch-off, #cbd5e1);

    transition:
        background-color .18s ease;
}

.form-switch-control::after,
.switch-control::after {
    content:"";

    position:absolute;

    top:3px;
    left:3px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 1px 3px rgba(15,23,42,.2);

    transition:
        transform .18s ease;
}

.form-switch input:checked + .form-switch-control,
.switch input:checked + .switch-control {
    background:
        var(--color-primary, #2563eb);
}

.form-switch input:checked + .form-switch-control::after,
.switch input:checked + .switch-control::after {
    transform:translateX(20px);
}

.form-switch-label,
.switch-label {
    color:
        var(--color-text, #334155);

    font-size:
        var(--font-size-sm,14px);
}


/* =========================================================
   16. FORM HELP / DESCRIPTION
   ========================================================= */

.form-help,
.form-hint,
.field-help,
.input-help {
    display:block;

    margin-top:var(--space-1,4px);

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);

    line-height:1.5;
}

.form-counter {
    display:flex;
    justify-content:flex-end;

    margin-top:4px;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);
}


/* =========================================================
   17. VALIDATION STATES
   ========================================================= */

.form-group.has-error .form-control,
.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea,

.form-control.is-invalid,
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,

.form-control[aria-invalid="true"],
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color:
        var(--color-danger, #dc2626);

    box-shadow:
        0 0 0 3px
        var(--color-danger-ring, rgba(220,38,38,.10));
}

.form-group.has-error .form-label,
.form-group.has-error .field-label {
    color:
        var(--color-danger, #dc2626);
}

.form-error,
.field-error,
.invalid-feedback {
    display:block;

    margin-top:var(--space-1,4px);

    color:
        var(--color-danger, #dc2626);

    font-size:
        var(--font-size-xs,12px);

    line-height:1.5;
}

.form-group.has-success .form-control,
.form-group.has-success .form-input,
.form-group.has-success .form-select,
.form-group.has-success .form-textarea,

.form-control.is-valid,
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color:
        var(--color-success, #16a34a);
}

.form-success,
.field-success,
.valid-feedback {
    display:block;

    margin-top:var(--space-1,4px);

    color:
        var(--color-success, #16a34a);

    font-size:
        var(--font-size-xs,12px);

    line-height:1.5;
}

.form-warning .form-control,
.form-warning .form-input,
.form-warning .form-select,
.form-warning .form-textarea {
    border-color:
        var(--color-warning, #d97706);
}


/* =========================================================
   18. DISABLED / READONLY
   ========================================================= */

.form-control:disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    color:
        var(--color-text-disabled, #94a3b8);

    background:
        var(--color-surface-disabled, #f1f5f9);

    border-color:
        var(--color-border-disabled, #e2e8f0);

    cursor:not-allowed;

    opacity:.75;
}

.form-control[readonly],
.form-input[readonly],
.form-textarea[readonly],
input[readonly],
textarea[readonly] {
    background:
        var(--color-surface-muted, #f8fafc);

    cursor:default;
}


/* =========================================================
   19. FILE UPLOAD
   ========================================================= */

.form-file,
.file-input {
    position:relative;

    width:100%;
}

.form-file input[type="file"],
.file-input input[type="file"] {
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    overflow:hidden;

    pointer-events:none;
}

.form-file-label,
.file-input-label {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:120px;

    padding:var(--space-5,20px);

    border:2px dashed
        var(--color-border, #cbd5e1);

    border-radius:
        var(--radius-md,10px);

    color:
        var(--color-text-muted, #64748b);

    background:
        var(--color-surface-muted, #f8fafc);

    text-align:center;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}

.form-file-label:hover,
.file-input-label:hover {
    border-color:
        var(--color-primary, #2563eb);

    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-primary-light, #eff6ff);
}

.form-file.is-dragover .form-file-label,
.file-input.is-dragover .file-input-label {
    border-color:
        var(--color-primary, #2563eb);

    background:
        var(--color-primary-light, #eff6ff);
}

.form-file-content {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:var(--space-2,8px);

    width:100%;
}

.form-file-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    color:
        var(--color-primary, #2563eb);
}

.form-file-title {
    color:
        var(--color-text, #334155);

    font-size:
        var(--font-size-sm,14px);

    font-weight:
        var(--font-weight-semibold,600);
}

.form-file-description {
    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);
}


/* =========================================================
   20. FILE LIST
   ========================================================= */

.form-file-list,
.upload-file-list {
    display:flex;
    flex-direction:column;

    width:100%;

    gap:var(--space-2,8px);

    margin-top:var(--space-3,12px);
}

.form-file-item,
.upload-file-item {
    display:flex;
    align-items:center;

    width:100%;

    gap:var(--space-3,12px);

    padding:
        var(--space-3,12px);

    border:1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-md,10px);

    background:
        var(--color-surface, #ffffff);
}

.form-file-item-info,
.upload-file-item-info {
    min-width:0;

    flex:1 1 auto;
}

.form-file-item-name,
.upload-file-item-name {
    display:block;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    color:
        var(--color-text, #334155);

    font-size:
        var(--font-size-sm,14px);

    font-weight:
        var(--font-weight-medium,500);
}

.form-file-item-size,
.upload-file-item-size {
    display:block;

    margin-top:2px;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);
}

.form-file-remove,
.upload-file-remove {
    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    flex:0 0 32px;

    border:0;

    border-radius:
        var(--radius-sm,8px);

    color:
        var(--color-danger, #dc2626);

    background:transparent;

    cursor:pointer;
}

.form-file-remove:hover,
.upload-file-remove:hover {
    background:
        var(--color-danger-light, #fef2f2);
}


/* =========================================================
   21. PROGRESS
   ========================================================= */

.form-upload-progress,
.upload-progress {
    width:100%;

    height:6px;

    margin-top:var(--space-2,8px);

    overflow:hidden;

    border-radius:999px;

    background:
        var(--color-surface-muted, #e2e8f0);
}

.form-upload-progress-bar,
.upload-progress-bar {
    height:100%;

    width:0;

    border-radius:inherit;

    background:
        var(--color-primary, #2563eb);

    transition:
        width .2s ease;
}


/* =========================================================
   22. FORM ACTIONS
   ========================================================= */

.form-actions,
.form-footer,
.form-submit-row {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;

    width:100%;

    gap:var(--space-3,12px);

    padding-top:var(--space-5,20px);

    margin-top:var(--space-5,20px);

    border-top:1px solid
        var(--color-border, #e2e8f0);
}

.form-actions-left {
    justify-content:flex-start;
}

.form-actions-between {
    justify-content:space-between;
}

.form-actions-center {
    justify-content:center;
}

.form-actions-sticky {
    position:sticky;

    bottom:0;

    z-index:
        var(--z-sticky,500);

    padding:
        var(--space-4,16px);

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        0 -4px 12px rgba(15,23,42,.06);
}


/* =========================================================
   23. FORM DIVIDER
   ========================================================= */

.form-divider {
    display:flex;
    align-items:center;

    width:100%;

    margin:
        var(--space-5,20px) 0;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs,12px);
}

.form-divider::before,
.form-divider::after {
    content:"";

    flex:1 1 auto;

    height:1px;

    background:
        var(--color-border, #e2e8f0);
}

.form-divider span {
    padding:
        0 var(--space-3,12px);
}


/* =========================================================
   24. FORM CARD
   ========================================================= */

.form-card {
    width:100%;

    padding:var(--space-5,20px);

    border:1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-lg,12px);

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        var(--shadow-sm, 0 1px 2px rgba(15,23,42,.04));
}

.form-card-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:var(--space-4,16px);

    margin-bottom:var(--space-5,20px);
}

.form-card-title {
    margin:0;

    color:
        var(--color-heading, #111827);

    font-size:
        var(--font-size-md,16px);

    font-weight:
        var(--font-weight-semibold,600);
}

.form-card-description {
    margin-top:4px;

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-sm,14px);

    line-height:1.5;
}


/* =========================================================
   25. FLOATING LABEL
   ========================================================= */

.form-floating {
    position:relative;

    width:100%;
}

.form-floating > .form-control,
.form-floating > .form-select {
    min-height:54px;

    padding-top:20px;
    padding-bottom:6px;
}

.form-floating > label {
    position:absolute;

    top:0;
    left:0;

    height:100%;

    display:flex;
    align-items:center;

    padding:
        0 12px;

    margin:0;

    color:
        var(--color-text-muted, #64748b);

    pointer-events:none;

    transform-origin:
        0 0;

    transition:
        transform .15s ease,
        color .15s ease;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label {
    height:auto;

    padding:
        0 4px;

    margin-left:8px;

    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-surface, #ffffff);

    transform:
        translateY(-8px) scale(.85);
}


/* =========================================================
   26. DATE / TIME / NUMBER
   ========================================================= */

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    min-height:44px;

    padding:
        10px 12px;

    color-scheme:light;
}

input[type="number"] {
    min-height:44px;
}

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

input[type="search"] {
    appearance:none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    appearance:none;
}


/* =========================================================
   27. PASSWORD FIELD
   ========================================================= */

.password-field {
    position:relative;

    width:100%;
}

.password-field .form-control,
.password-field .form-input {
    padding-right:44px;
}

.password-toggle {
    position:absolute;

    top:50%;
    right:6px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    padding:0;

    border:0;

    border-radius:
        var(--radius-sm,8px);

    color:
        var(--color-text-muted, #64748b);

    background:transparent;

    cursor:pointer;

    transform:translateY(-50%);
}

.password-toggle:hover {
    color:
        var(--color-text, #334155);

    background:
        var(--color-surface-muted, #f1f5f9);
}


/* =========================================================
   28. OTP / VERIFICATION INPUT
   ========================================================= */

.otp-inputs,
.verification-inputs {
    display:flex;
    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:var(--space-2,8px);

    width:100%;
}

.otp-input,
.verification-input {
    width:48px !important;
    height:52px !important;

    padding:0 !important;

    text-align:center;

    font-size:
        var(--font-size-lg,18px);

    font-weight:
        var(--font-weight-semibold,600);
}

.otp-input:focus,
.verification-input:focus {
    border-color:
        var(--color-primary, #2563eb);

    box-shadow:
        0 0 0 3px
        var(--color-primary-ring, rgba(37,99,235,.12));
}


/* =========================================================
   29. RANGE
   ========================================================= */

input[type="range"],
.form-range {
    width:100%;

    height:6px;

    padding:0;

    border:0;

    border-radius:999px;

    background:
        var(--color-border, #cbd5e1);

    accent-color:
        var(--color-primary, #2563eb);

    cursor:pointer;
}

.form-range-value {
    display:inline-flex;

    margin-left:auto;

    color:
        var(--color-primary, #2563eb);

    font-size:
        var(--font-size-sm,14px);

    font-weight:
        var(--font-weight-semibold,600);
}


/* =========================================================
   30. FORM READONLY / DISPLAY VALUE
   ========================================================= */

.form-static,
.form-value {
    display:flex;
    align-items:center;

    width:100%;
    min-height:44px;

    padding:
        10px 12px;

    border:1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-md,10px);

    color:
        var(--color-text, #334155);

    background:
        var(--color-surface-muted, #f8fafc);

    font-size:
        var(--font-size-sm,14px);

    line-height:1.5;
}


/* =========================================================
   31. AUTOCOMPLETE / SUGGESTIONS
   ========================================================= */

.form-autocomplete {
    position:relative;

    width:100%;
}

.form-suggestions {
    position:absolute;

    top:calc(100% + 4px);
    left:0;
    right:0;

    z-index:
        var(--z-dropdown,1000);

    max-height:280px;

    overflow-y:auto;

    padding:var(--space-1,4px);

    border:1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-md,10px);

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        var(--shadow-lg, 0 10px 30px rgba(15,23,42,.12));
}

.form-suggestion {
    display:flex;
    align-items:center;

    width:100%;

    min-height:40px;

    padding:
        8px 10px;

    border:0;

    border-radius:
        var(--radius-sm,8px);

    color:
        var(--color-text, #334155);

    background:transparent;

    text-align:left;

    cursor:pointer;
}

.form-suggestion:hover,
.form-suggestion.is-active {
    background:
        var(--color-surface-muted, #f1f5f9);

    color:
        var(--color-primary, #2563eb);
}


/* =========================================================
   32. TAG / TOKEN INPUT
   ========================================================= */

.form-tags {
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:var(--space-2,8px);

    width:100%;
    min-height:44px;

    padding:
        6px 8px;

    border:1px solid
        var(--color-border, #cbd5e1);

    border-radius:
        var(--radius-md,10px);

    background:
        var(--color-surface, #ffffff);
}

.form-tags:focus-within {
    border-color:
        var(--color-primary, #2563eb);

    box-shadow:
        0 0 0 3px
        var(--color-primary-ring, rgba(37,99,235,.12));
}

.form-tag {
    display:inline-flex;
    align-items:center;

    gap:6px;

    min-height:28px;

    padding:
        4px 8px;

    border-radius:999px;

    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-primary-light, #eff6ff);

    font-size:
        var(--font-size-xs,12px);

    font-weight:
        var(--font-weight-medium,500);
}

.form-tag-remove {
    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    padding:0;

    border:0;

    border-radius:50%;

    color:inherit;

    background:transparent;

    cursor:pointer;
}

.form-tags-input {
    flex:1 1 100px;

    min-width:100px;

    min-height:28px;

    padding:4px;

    border:0;

    outline:none;

    background:transparent;
}


/* =========================================================
   33. FORM LOADING
   ========================================================= */

.form-loading {
    position:relative;

    pointer-events:none;
}

.form-loading::after {
    content:"";

    position:absolute;

    inset:0;

    z-index:10;

    border-radius:
        inherit;

    background:
        rgba(255,255,255,.65);
}

.form-loading-spinner {
    position:absolute;

    top:50%;
    left:50%;

    z-index:11;

    width:28px;
    height:28px;

    border:3px solid
        var(--color-border, #e2e8f0);

    border-top-color:
        var(--color-primary, #2563eb);

    border-radius:50%;

    transform:
        translate(-50%,-50%);

    animation:
        form-spinner .7s linear infinite;
}

@keyframes form-spinner {
    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}


/* =========================================================
   34. FORM DISABLED STATE
   ========================================================= */

.form-disabled {
    opacity:.65;

    pointer-events:none;

    user-select:none;
}


/* =========================================================
   35. FORM ACCESSIBILITY
   ========================================================= */

.form-visually-hidden,
.form-sr-only {
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;

    white-space:nowrap !important;

    border:0 !important;
}

.form-control:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.form-check input:focus-visible,
.form-radio input:focus-visible,
.form-switch input:focus-visible,
.form-file input:focus-visible + .form-file-label {
    outline:2px solid
        var(--color-primary, #2563eb);

    outline-offset:2px;
}


/* =========================================================
   36. RTL SUPPORT
   ========================================================= */

[dir="rtl"] .input-icon-left,
[dir="rtl"] .form-input-icon-left {
    left:auto;
    right:12px;
}

[dir="rtl"] .input-icon-right,
[dir="rtl"] .form-input-icon-right {
    right:auto;
    left:12px;
}

[dir="rtl"] .input-wrapper.has-icon-left .form-control,
[dir="rtl"] .input-wrapper.has-icon-left .form-input,
[dir="rtl"] .form-input-wrapper.has-icon-left .form-control,
[dir="rtl"] .form-input-wrapper.has-icon-left .form-input {
    padding-left:12px;
    padding-right:40px;
}

[dir="rtl"] .input-wrapper.has-icon-right .form-control,
[dir="rtl"] .input-wrapper.has-icon-right .form-input,
[dir="rtl"] .form-input-wrapper.has-icon-right .form-control,
[dir="rtl"] .form-input-wrapper.has-icon-right .form-input {
    padding-right:12px;
    padding-left:40px;
}


/* =========================================================
   37. RESPONSIVE
   ========================================================= */

@media (max-width:992px) {

    .form-grid-4 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .form-grid-3 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .form-col-quarter {
        width:calc(50% - 8px);
        flex-basis:calc(50% - 8px);
    }
}


@media (max-width:768px) {

    .form-row {
        flex-direction:column;

        gap:var(--space-3,12px);
    }

    .form-col,
    .form-col-half,
    .form-col-third,
    .form-col-quarter {
        width:100%;
        flex:0 0 100%;
    }

    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns:
            minmax(0,1fr);
    }

    .form-section-header,
    .form-group-section-header {
        flex-direction:column;
    }

    .form-actions,
    .form-footer,
    .form-submit-row {
        align-items:stretch;

        flex-direction:column;
    }

    .form-actions > *,
    .form-footer > *,
    .form-submit-row > * {
        width:100%;
    }

    .form-actions-sticky {
        padding:
            var(--space-3,12px);
    }

    .otp-input,
    .verification-input {
        width:44px !important;
        height:48px !important;
    }
}


@media (max-width:480px) {

    .form-card {
        padding:var(--space-4,16px);
    }

    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size:16px;
    }

    .form-label,
    .field-label {
        font-size:13px;
    }

    .otp-input,
    .verification-input {
        width:40px !important;
        height:46px !important;

        font-size:16px;
    }

    .form-file-label,
    .file-input-label {
        min-height:100px;

        padding:var(--space-4,16px);
    }
}


/* =========================================================
   38. REDUCED MOTION
   ========================================================= */

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

    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-file-label,
    .file-input-label,
    .form-check-card,
    .form-radio-card,
    .form-switch-control,
    .form-switch-control::after,
    .switch-control,
    .switch-control::after,
    .form-upload-progress-bar,
    .upload-progress-bar,
    .form-suggestion {
        transition:none;
    }

    .form-loading-spinner {
        animation:none;
    }
}


/* =========================================================
   39. PRINT
   ========================================================= */

@media print {

    .form-actions-sticky,
    .password-toggle,
    .form-search-clear,
    .form-file-remove,
    .upload-file-remove {
        display:none !important;
    }

    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-static,
    .form-value {
        color:#000000;

        background:#ffffff;

        border-color:#999999;

        box-shadow:none;
    }
}