/* =========================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   Core Forms
   ---------------------------------------------------------
   Live-data safe:
   - No hardcoded marketplace records
   - No fake/demo/sample values
   - No API/database logic
   - UI and form presentation only
   ========================================================= */


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

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

.form > * {
    min-width: 0;
}


/* =========================================================
   2. FORM GROUP
   ========================================================= */

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: var(--space-2, 0.5rem);
}

.form-group + .form-group {
    margin-top: var(--space-4, 1rem);
}


/* Compact */

.form-group--compact {
    gap: var(--space-1, 0.25rem);
}


/* Comfortable */

.form-group--comfortable {
    gap: var(--space-3, 0.75rem);
}


/* =========================================================
   3. LABEL
   ========================================================= */

.form-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    width: fit-content;
    max-width: 100%;
    color: var(--color-text, #1f2937);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    cursor: pointer;
}

.form-label--required::after {
    content: "*";
    color: var(--color-danger, #dc2626);
    font-weight: 700;
}


/* =========================================================
   4. INPUT BASE
   ========================================================= */

.form-control,
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.7rem 0.85rem;

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

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

    border-radius:
        var(--radius-md, 0.5rem);

    font-family: inherit;
    font-size:
        var(--font-size-base, 1rem);

    line-height: 1.45;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
}


/* =========================================================
   5. INPUT HEIGHT VARIANTS
   ========================================================= */

.form-control--sm,
.form-input--sm,
.form-select--sm {
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    font-size: var(--font-size-sm, 0.875rem);
}

.form-control--md,
.form-input--md,
.form-select--md {
    min-height: 2.75rem;
}

.form-control--lg,
.form-input--lg,
.form-select--lg {
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    font-size: var(--font-size-lg, 1.125rem);
}


/* =========================================================
   6. PLACEHOLDER
   ========================================================= */

.form-control::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
    color:
        var(--color-text-muted, #6b7280);

    opacity: 1;
}


/* =========================================================
   7. FOCUS
   ========================================================= */

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

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

    box-shadow:
        0 0 0 3px
        var(--color-focus-ring,
        rgba(37, 99, 235, 0.16));
}


/* =========================================================
   8. HOVER
   ========================================================= */

.form-control:hover:not(:disabled),
.form-input:hover:not(:disabled),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled) {
    border-color:
        var(--color-border-strong, #9ca3af);
}


/* =========================================================
   9. TEXTAREA
   ========================================================= */

.form-textarea {
    min-height: 8rem;
    resize: vertical;
}

.form-textarea--sm {
    min-height: 5rem;
}

.form-textarea--lg {
    min-height: 14rem;
}


/* Prevent extremely wide text */

.form-textarea--readable {
    max-width:
        var(--content-readable-max-width, 70ch);
}


/* =========================================================
   10. SELECT
   ========================================================= */

.form-select {
    cursor: pointer;
}

.form-select:disabled {
    cursor: not-allowed;
}


/* =========================================================
   11. CHECKBOX / RADIO
   ========================================================= */

.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    width: 100%;
}

.form-check-input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;

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

    cursor: pointer;
}

.form-check-label {
    min-width: 0;

    color:
        var(--color-text, #1f2937);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.5;

    cursor: pointer;
}


/* =========================================================
   12. CHECKBOX GROUP
   ========================================================= */

.form-check-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.form-check-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}


/* =========================================================
   13. RADIO GROUP
   ========================================================= */

.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.form-radio-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}


/* =========================================================
   14. INPUT WITH PREFIX / SUFFIX
   ========================================================= */

.form-control-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.form-prefix,
.form-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 2.75rem;
    padding-inline: 0.7rem;

    color:
        var(--color-text-muted, #6b7280);

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

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

    font-size:
        var(--font-size-sm, 0.875rem);
}

.form-prefix {
    border-inline-end: 0;
    border-radius:
        var(--radius-md, 0.5rem) 0 0
        var(--radius-md, 0.5rem);
}

.form-suffix {
    border-inline-start: 0;
    border-radius:
        0 var(--radius-md, 0.5rem)
        var(--radius-md, 0.5rem) 0;
}

.form-control-wrapper .form-control {
    position: relative;
    z-index: 1;
}


/* =========================================================
   15. SEARCH INPUT
   ========================================================= */

.form-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.form-search .form-input {
    padding-inline-start: 2.75rem;
}

.form-search-icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    z-index: 2;

    transform: translateY(-50%);

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

    width: 1.25rem;
    height: 1.25rem;

    color:
        var(--color-text-muted, #6b7280);

    pointer-events: none;
}


/* =========================================================
   16. PASSWORD INPUT
   ========================================================= */

.form-password {
    position: relative;
    width: 100%;
}

.form-password .form-input {
    padding-inline-end: 3rem;
}

.form-password-toggle {
    position: absolute;
    inset-inline-end: 0.35rem;
    top: 50%;
    z-index: 2;

    transform: translateY(-50%);

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

    width: 2.25rem;
    height: 2.25rem;

    padding: 0;

    border: 0;
    background: transparent;

    color:
        var(--color-text-muted, #6b7280);

    cursor: pointer;
}

.form-password-toggle:hover {
    color:
        var(--color-text, #1f2937);
}


/* =========================================================
   17. HELP TEXT
   ========================================================= */

.form-help {
    display: block;

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.5;
}


/* =========================================================
   18. VALIDATION MESSAGE
   ========================================================= */

.form-message {
    display: block;

    margin: 0;

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.5;
}

.form-message--error {
    color:
        var(--color-danger, #dc2626);
}

.form-message--success {
    color:
        var(--color-success, #16a34a);
}

.form-message--warning {
    color:
        var(--color-warning, #d97706);
}

.form-message--info {
    color:
        var(--color-info, #2563eb);
}


/* =========================================================
   19. VALIDATION STATES
   ========================================================= */

.form-control.is-valid,
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid,
.form-control[aria-invalid="false"],
.form-input[aria-invalid="false"],
.form-select[aria-invalid="false"],
.form-textarea[aria-invalid="false"] {
    border-color:
        var(--color-success, #16a34a);
}

.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);
}

.form-control.is-invalid:focus,
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus,
.form-control[aria-invalid="true"]:focus,
.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
    box-shadow:
        0 0 0 3px
        var(--color-danger-ring,
        rgba(220, 38, 38, 0.14));
}


/* =========================================================
   20. DISABLED / READONLY
   ========================================================= */

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

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

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

    cursor: not-allowed;
    opacity: 0.8;
}

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

    cursor: default;
}


/* =========================================================
   21. FILE INPUT
   ========================================================= */

.form-file {
    display: block;
    width: 100%;
    min-width: 0;
}

.form-file input[type="file"] {
    width: 100%;
    max-width: 100%;

    color:
        var(--color-text, #1f2937);

    font: inherit;

    cursor: pointer;
}

.form-file input[type="file"]::file-selector-button {
    margin-inline-end: 0.75rem;
    padding: 0.55rem 0.85rem;

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

    border-radius:
        var(--radius-md, 0.5rem);

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

    color:
        var(--color-text, #1f2937);

    font: inherit;
    cursor: pointer;
}


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

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

    gap: var(--space-3, 0.75rem);

    width: 100%;

    margin-top:
        var(--space-5, 1.25rem);
}

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

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

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


/* =========================================================
   23. BUTTON BASE FOR FORMS
   ========================================================= */

.form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.75rem;

    padding:
        0.65rem 1rem;

    border: 1px solid transparent;

    border-radius:
        var(--radius-md, 0.5rem);

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

    color:
        var(--color-on-primary, #ffffff);

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

    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.form-button:hover:not(:disabled) {
    background:
        var(--color-primary-hover, #1d4ed8);
}

.form-button:focus-visible {
    outline: 2px solid
        var(--color-primary, #2563eb);

    outline-offset: 2px;
}

.form-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* =========================================================
   24. FORM BUTTON VARIANTS
   ========================================================= */

.form-button--secondary {
    background:
        var(--color-secondary, #475569);

    color:
        var(--color-on-secondary, #ffffff);
}

.form-button--secondary:hover:not(:disabled) {
    background:
        var(--color-secondary-hover, #334155);
}

.form-button--outline {
    background: transparent;

    border-color:
        var(--color-border-strong, #9ca3af);

    color:
        var(--color-text, #1f2937);
}

.form-button--outline:hover:not(:disabled) {
    background:
        var(--color-surface-muted, #f3f4f6);
}

.form-button--danger {
    background:
        var(--color-danger, #dc2626);
}

.form-button--danger:hover:not(:disabled) {
    background:
        var(--color-danger-hover, #b91c1c);
}

.form-button--success {
    background:
        var(--color-success, #16a34a);
}

.form-button--success:hover:not(:disabled) {
    background:
        var(--color-success-hover, #15803d);
}

.form-button--link {
    min-height: auto;
    padding: 0;

    background: transparent;

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

.form-button--link:hover:not(:disabled) {
    background: transparent;
    text-decoration: underline;
}


/* =========================================================
   25. FULL WIDTH BUTTON
   ========================================================= */

.form-button--full {
    width: 100%;
}


/* =========================================================
   26. LOADING STATE
   ---------------------------------------------------------
   Actual loading state should be controlled by JS/API.
   This CSS only styles the state.
   ========================================================= */

.form-button[aria-busy="true"],
.form-control[aria-busy="true"],
.form-input[aria-busy="true"] {
    cursor: wait;
}

.form-button[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.75;
}


/* =========================================================
   27. FIELDSET
   ========================================================= */

.form-fieldset {
    min-width: 0;

    margin: 0;
    padding: var(--space-5, 1.25rem);

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

    border-radius:
        var(--radius-lg, 0.75rem);
}

.form-legend {
    padding-inline: var(--space-2, 0.5rem);

    color:
        var(--color-text, #1f2937);

    font-size:
        var(--font-size-base, 1rem);

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


/* =========================================================
   28. FORM SECTION
   ========================================================= */

.form-section {
    width: 100%;
    min-width: 0;

    padding-block:
        var(--space-5, 1.25rem);
}

.form-section + .form-section {
    border-top: 1px solid
        var(--color-border, #e5e7eb);
}


/* =========================================================
   29. FORM HEADER
   ========================================================= */

.form-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);

    width: 100%;
    margin-bottom:
        var(--space-5, 1.25rem);
}

.form-title {
    margin: 0;

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

    font-size:
        var(--font-size-xl, 1.25rem);

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

    line-height: 1.3;
}

.form-description {
    margin: 0;

    color:
        var(--color-text-muted, #6b7280);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.6;
}


/* =========================================================
   30. FORM STATUS
   ========================================================= */

.form-status {
    width: 100%;
    min-width: 0;

    padding:
        var(--space-3, 0.75rem)
        var(--space-4, 1rem);

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

    border-radius:
        var(--radius-md, 0.5rem);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.5;
}

.form-status[data-state="loading"] {
    background:
        var(--color-surface-muted, #f3f4f6);
}

.form-status[data-state="success"] {
    background:
        var(--color-success-surface, #f0fdf4);

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

    color:
        var(--color-success-text, #166534);
}

.form-status[data-state="error"] {
    background:
        var(--color-danger-surface, #fef2f2);

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

    color:
        var(--color-danger-text, #991b1b);
}


/* =========================================================
   31. INLINE FORM
   ========================================================= */

.form-inline {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: var(--space-3, 0.75rem);

    width: 100%;
}

.form-inline .form-group {
    flex: 1 1 12rem;
    width: auto;
}

.form-inline .form-actions {
    width: auto;
    margin-top: 0;
}


/* =========================================================
   32. RESPONSIVE
   ========================================================= */

@media (max-width: 575.98px) {

    .form-actions,
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions > *,
    .form-inline > * {
        width: 100%;
    }

    .form-button {
        width: 100%;
    }

    .form-fieldset {
        padding: var(--space-4, 1rem);
    }
}


/* =========================================================
   33. TABLET
   ========================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

    .form-inline .form-group {
        flex-basis: 10rem;
    }
}


/* =========================================================
   34. RTL
   ========================================================= */

[dir="rtl"] .form-prefix {
    border-inline-end: 1px solid
        var(--color-border, #d1d5db);

    border-inline-start: 0;
}

[dir="rtl"] .form-suffix {
    border-inline-start: 1px solid
        var(--color-border, #d1d5db);

    border-inline-end: 0;
}


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

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

    outline-offset: 2px;
}


/* =========================================================
   36. REDUCED MOTION
   ========================================================= */

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

    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-button {
        transition: none;
    }
}


/* =========================================================
   37. PRINT
   ========================================================= */

@media print {

    .form-button,
    .form-password-toggle {
        box-shadow: none;
    }

    .form-control,
    .form-input,
    .form-select,
    .form-textarea {
        color: #000;
        background: #fff;
        border-color: #000;
    }
}