/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE — QUOTE COMPONENT
   File:
   /home/jqkmqvml/public_html/assets/css/components/quote.css

   LIVE DATA ONLY
   --------------------------------------------------------------------------
   This file contains presentation styles only.

   Quote data must flow through:

   quote.html
        ↓
   assets/js/quote/quote.js
        ↓
   assets/js/api/quote-api.js
        ↓
   Backend API
        ↓
   Quote Controller
        ↓
   Quote Service
        ↓
   Quote Repository
        ↓
   LIVE DATABASE

   No fake/demo/sample/hardcoded marketplace data is created here.
   ========================================================================== */


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

.quote,
[data-component="quote"] {
    --quote-gap: var(--space-4, 1rem);
    --quote-gap-sm: var(--space-2, 0.5rem);
    --quote-gap-lg: var(--space-6, 1.5rem);

    --quote-radius: var(--radius-lg, 0.75rem);
    --quote-radius-sm: var(--radius-md, 0.5rem);

    --quote-border:
        var(--border-color, #d9dee7);

    --quote-bg:
        var(--surface-color, #ffffff);

    --quote-bg-soft:
        var(--surface-muted, #f7f8fa);

    --quote-text:
        var(--text-color, #172033);

    --quote-text-muted:
        var(--text-muted, #667085);

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

    --quote-primary-hover:
        var(--primary-color-hover, #1d4ed8);

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

    --quote-warning:
        var(--warning-color, #d97706);

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

    --quote-shadow:
        var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));

    width: 100%;
    color: var(--quote-text);
}


/* ==========================================================================
   2. QUOTE CONTAINER
   ========================================================================== */

.quote__container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.quote__container--narrow {
    max-width: 760px;
}

.quote__container--medium {
    max-width: 960px;
}

.quote__container--wide {
    max-width: 1200px;
}


/* ==========================================================================
   3. QUOTE CARD
   ========================================================================== */

.quote-card {
    width: 100%;

    background: var(--quote-bg);
    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius);

    box-shadow: var(--quote-shadow);

    overflow: hidden;
}

.quote-card--flat {
    box-shadow: none;
}

.quote-card--borderless {
    border-color: transparent;
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

.quote__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--quote-gap);

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

    border-bottom: 1px solid var(--quote-border);
}

.quote__header-content {
    min-width: 0;
    flex: 1 1 auto;
}

.quote__title {
    margin: 0;

    color: var(--quote-text);

    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.35;
}

.quote__subtitle {
    margin: var(--space-1, 0.25rem) 0 0;

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

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

.quote__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);

    flex: 0 0 auto;
}


/* ==========================================================================
   5. BODY
   ========================================================================== */

.quote__body {
    padding: var(--space-5, 1.25rem);
}

.quote__body--compact {
    padding: var(--space-4, 1rem);
}

.quote__body--large {
    padding: var(--space-6, 1.5rem);
}


/* ==========================================================================
   6. FOOTER
   ========================================================================== */

.quote__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--quote-gap);

    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);

    border-top: 1px solid var(--quote-border);
    background: var(--quote-bg-soft);
}

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

    flex-wrap: wrap;

    gap: var(--space-2, 0.5rem);
}


/* ==========================================================================
   7. QUOTE FORM
   ========================================================================== */

.quote-form {
    display: flex;
    flex-direction: column;

    gap: var(--quote-gap-lg);

    width: 100%;
}

.quote-form__section {
    display: flex;
    flex-direction: column;

    gap: var(--quote-gap);
}

.quote-form__section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--quote-gap);
}

.quote-form__section-title {
    margin: 0;

    color: var(--quote-text);

    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
}

.quote-form__section-description {
    margin: var(--space-1, 0.25rem) 0 0;

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

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


/* ==========================================================================
   8. FIELD GRID
   ========================================================================== */

.quote-form__fields {
    display: grid;

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

    gap: var(--quote-gap);
}

.quote-form__field {
    min-width: 0;
}

.quote-form__field--full {
    grid-column: 1 / -1;
}


/* ==========================================================================
   9. LABEL
   ========================================================================== */

.quote-form__label {
    display: inline-flex;
    align-items: center;

    gap: 0.25rem;

    margin-bottom: var(--space-2, 0.5rem);

    color: var(--quote-text);

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

    line-height: 1.4;
}

.quote-form__required {
    color: var(--quote-danger);
}


/* ==========================================================================
   10. FORM CONTROLS
   ========================================================================== */

.quote-form__control {
    display: block;

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

    padding: 0.7rem 0.85rem;

    color: var(--quote-text);
    background: var(--quote-bg);

    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius-sm);

    outline: none;

    font: inherit;
    line-height: 1.4;

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

.quote-form textarea.quote-form__control {
    min-height: 130px;
    resize: vertical;
}

.quote-form select.quote-form__control {
    cursor: pointer;
}

.quote-form__control::placeholder {
    color: var(--quote-text-muted);
    opacity: 0.85;
}

.quote-form__control:hover:not(:disabled) {
    border-color: var(--quote-primary);
}

.quote-form__control:focus-visible {
    border-color: var(--quote-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--quote-primary) 18%,
            transparent
        );
}

.quote-form__control[aria-invalid="true"],
.quote-form__control.is-invalid {
    border-color: var(--quote-danger);
}

.quote-form__control[aria-invalid="true"]:focus-visible,
.quote-form__control.is-invalid:focus-visible {
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--quote-danger) 16%,
            transparent
        );
}

.quote-form__control:disabled,
.quote-form__control[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;

    background: var(--quote-bg-soft);
}


/* ==========================================================================
   11. HELP / ERROR
   ========================================================================== */

.quote-form__help {
    margin: var(--space-1, 0.25rem) 0 0;

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

    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.5;
}

.quote-form__error {
    margin: var(--space-1, 0.25rem) 0 0;

    color: var(--quote-danger);

    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.5;
}


/* ==========================================================================
   12. QUOTE CONTEXT
   ========================================================================== */

.quote-context {
    display: grid;

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

    gap: var(--quote-gap);
}

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

.quote-context__item {
    display: flex;
    align-items: flex-start;

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

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

    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius-sm);

    background: var(--quote-bg-soft);
}

.quote-context__icon {
    flex: 0 0 auto;

    width: 2.25rem;
    height: 2.25rem;

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

    border-radius: var(--quote-radius-sm);

    background: var(--quote-bg);
    color: var(--quote-primary);
}

.quote-context__content {
    min-width: 0;
    flex: 1 1 auto;
}

.quote-context__label {
    margin: 0;

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

    font-size: var(--font-size-xs, 0.75rem);
}

.quote-context__value {
    margin: 0.2rem 0 0;

    color: var(--quote-text);

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

    overflow-wrap: anywhere;
}


/* ==========================================================================
   13. QUANTITY / REQUIREMENT
   ========================================================================== */

.quote-requirement {
    display: grid;

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

    gap: var(--quote-gap);
}

.quote-requirement__field {
    min-width: 0;
}

.quote-requirement__field--full {
    grid-column: 1 / -1;
}


/* ==========================================================================
   14. LOCATION
   ========================================================================== */

.quote-location {
    display: grid;

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

    gap: var(--quote-gap);
}

.quote-location__field {
    min-width: 0;
}

.quote-location__field--full {
    grid-column: 1 / -1;
}


/* ==========================================================================
   15. QUOTE ITEMS
   ========================================================================== */

.quote-items {
    display: flex;
    flex-direction: column;

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

.quote-item {
    display: grid;

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

    gap: var(--quote-gap);

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

    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius-sm);

    background: var(--quote-bg);
}

.quote-item__content {
    min-width: 0;
}

.quote-item__title {
    margin: 0;

    color: var(--quote-text);

    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
}

.quote-item__description {
    margin: var(--space-1, 0.25rem) 0 0;

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

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

.quote-item__meta {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-2, 0.5rem);

    margin-top: var(--space-2, 0.5rem);
}

.quote-item__meta-item {
    color: var(--quote-text-muted);

    font-size: var(--font-size-xs, 0.75rem);
}

.quote-item__actions {
    display: flex;
    align-items: flex-start;

    gap: var(--space-2, 0.5rem);
}


/* ==========================================================================
   16. PRICE
   ========================================================================== */

.quote-price {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 0.2rem;

    white-space: nowrap;
}

.quote-price__label {
    color: var(--quote-text-muted);

    font-size: var(--font-size-xs, 0.75rem);
}

.quote-price__value {
    color: var(--quote-text);

    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 700);
}

.quote-price__unit {
    color: var(--quote-text-muted);

    font-size: var(--font-size-xs, 0.75rem);
}


/* ==========================================================================
   17. QUOTE COMPARISON
   ========================================================================== */

.quote-compare {
    width: 100%;

    overflow-x: auto;
    overscroll-behavior-inline: contain;

    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius);
}

.quote-compare__table {
    width: 100%;
    min-width: 720px;

    border-collapse: collapse;
}

.quote-compare__table th,
.quote-compare__table td {
    padding: var(--space-3, 0.75rem);

    text-align: start;
    vertical-align: top;

    border-bottom: 1px solid var(--quote-border);
}

.quote-compare__table th {
    color: var(--quote-text);

    background: var(--quote-bg-soft);

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

.quote-compare__table td {
    color: var(--quote-text);

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

.quote-compare__table tr:last-child th,
.quote-compare__table tr:last-child td {
    border-bottom: 0;
}


/* ==========================================================================
   18. QUOTE STATUS
   ========================================================================== */

.quote-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 0.25rem 0.65rem;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);

    line-height: 1.2;
}

.quote-status--pending {
    color: var(--quote-warning);

    background:
        color-mix(
            in srgb,
            var(--quote-warning) 10%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--quote-warning) 25%,
            transparent
        );
}

.quote-status--active,
.quote-status--sent {
    color: var(--quote-primary);

    background:
        color-mix(
            in srgb,
            var(--quote-primary) 10%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--quote-primary) 25%,
            transparent
        );
}

.quote-status--accepted,
.quote-status--completed {
    color: var(--quote-success);

    background:
        color-mix(
            in srgb,
            var(--quote-success) 10%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--quote-success) 25%,
            transparent
        );
}

.quote-status--rejected,
.quote-status--expired,
.quote-status--cancelled {
    color: var(--quote-danger);

    background:
        color-mix(
            in srgb,
            var(--quote-danger) 10%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--quote-danger) 25%,
            transparent
        );
}


/* ==========================================================================
   19. QUOTE REFERENCE
   ========================================================================== */

.quote-reference {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2, 0.5rem);

    padding: 0.5rem 0.75rem;

    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius-sm);

    background: var(--quote-bg-soft);

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

.quote-reference__label {
    color: var(--quote-text-muted);
}

.quote-reference__value {
    color: var(--quote-text);

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

    overflow-wrap: anywhere;
}


/* ==========================================================================
   20. ACTION BUTTONS
   ========================================================================== */

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

    flex-wrap: wrap;

    gap: var(--space-2, 0.5rem);
}

.quote-actions__button {
    min-height: 44px;

    padding: 0.65rem 1rem;

    border: 1px solid transparent;
    border-radius: var(--quote-radius-sm);

    font: inherit;

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

    cursor: pointer;

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

.quote-actions__button--primary {
    color: #ffffff;
    background: var(--quote-primary);
}

.quote-actions__button--primary:hover:not(:disabled) {
    background: var(--quote-primary-hover);
}

.quote-actions__button--secondary {
    color: var(--quote-text);

    background: var(--quote-bg);

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

.quote-actions__button--secondary:hover:not(:disabled) {
    background: var(--quote-bg-soft);
}

.quote-actions__button--success {
    color: #ffffff;
    background: var(--quote-success);
}

.quote-actions__button--danger {
    color: #ffffff;
    background: var(--quote-danger);
}

.quote-actions__button:focus-visible {
    outline: 2px solid var(--quote-primary);
    outline-offset: 2px;
}

.quote-actions__button:disabled,
.quote-actions__button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}


/* ==========================================================================
   21. LOADING
   ========================================================================== */

.quote.is-loading,
.quote[data-loading="true"] {
    pointer-events: none;
}

.quote__loading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-2, 0.5rem);

    min-height: 120px;

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

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

.quote__loading-indicator {
    width: 1.25rem;
    height: 1.25rem;

    border: 2px solid var(--quote-border);
    border-top-color: var(--quote-primary);

    border-radius: 50%;

    animation: quote-spin 700ms linear infinite;
}

@keyframes quote-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   22. SUBMITTING
   ========================================================================== */

.quote-form.is-submitting {
    cursor: progress;
}

.quote-form.is-submitting
.quote-actions__button--primary {
    cursor: progress;
}

.quote-form.is-submitting
.quote-actions__button--primary::after {
    content: "";

    display: inline-block;

    width: 0.9rem;
    height: 0.9rem;

    margin-inline-start: 0.5rem;

    vertical-align: -0.1em;

    border: 2px solid currentColor;
    border-inline-end-color: transparent;

    border-radius: 50%;

    animation: quote-spin 700ms linear infinite;
}


/* ==========================================================================
   23. EMPTY / ERROR
   ========================================================================== */

.quote__empty,
.quote__error {
    display: flex;
    flex-direction: column;

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

    min-height: 180px;

    padding: var(--space-6, 1.5rem);

    text-align: center;
}

.quote__empty {
    color: var(--quote-text-muted);
}

.quote__error {
    color: var(--quote-danger);
}

.quote__empty-title,
.quote__error-title {
    margin: 0 0 var(--space-1, 0.25rem);

    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
}

.quote__empty-message,
.quote__error-message {
    max-width: 600px;

    margin: 0;

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

    line-height: 1.55;
}


/* ==========================================================================
   24. MODAL
   ========================================================================== */

.quote-modal {
    width: min(100%, 820px);

    max-height: min(90vh, 900px);

    display: flex;
    flex-direction: column;

    background: var(--quote-bg);

    border: 1px solid var(--quote-border);
    border-radius: var(--quote-radius);

    box-shadow:
        var(--shadow-xl,
        0 20px 60px rgba(15, 23, 42, 0.18));

    overflow: hidden;
}

.quote-modal__header {
    flex: 0 0 auto;
}

.quote-modal__body {
    min-height: 0;

    overflow-y: auto;

    overscroll-behavior: contain;
}

.quote-modal__footer {
    flex: 0 0 auto;
}


/* ==========================================================================
   25. INLINE QUOTE
   ========================================================================== */

.quote--inline {
    border: 1px solid var(--quote-border);

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

    background: var(--quote-bg);
}


/* ==========================================================================
   26. COMPACT
   ========================================================================== */

.quote--compact .quote__header,
.quote--compact .quote__body {
    padding: var(--space-4, 1rem);
}

.quote--compact .quote-form {
    gap: var(--quote-gap);
}


/* ==========================================================================
   27. TABLET
   ========================================================================== */

@media (max-width: 991px) {
    .quote__header,
    .quote__body,
    .quote__footer {
        padding: var(--space-4, 1rem);
    }

    .quote-form__fields {
        grid-template-columns: 1fr;
    }

    .quote-form__field--full {
        grid-column: auto;
    }

    .quote-location,
    .quote-requirement {
        grid-template-columns: 1fr;
    }

    .quote-location__field--full,
    .quote-requirement__field--full {
        grid-column: auto;
    }

    .quote-context--two {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   28. MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .quote__header {
        flex-direction: column;
    }

    .quote__header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .quote__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .quote__footer-actions {
        justify-content: stretch;
    }

    .quote-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-actions__button {
        width: 100%;
    }

    .quote-item {
        grid-template-columns: 1fr;
    }

    .quote-item__actions {
        justify-content: flex-start;
    }

    .quote-price {
        align-items: flex-start;
    }

    .quote-modal {
        width: 100%;
        max-height: 100dvh;

        border-radius: 0;
        border-inline: 0;
    }
}


/* ==========================================================================
   29. SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {
    .quote__header,
    .quote__body,
    .quote__footer {
        padding: var(--space-3, 0.75rem);
    }

    .quote__title {
        font-size: var(--font-size-lg, 1.125rem);
    }

    .quote-form__control {
        min-height: 46px;
    }

    .quote-form textarea.quote-form__control {
        min-height: 110px;
    }

    .quote-item {
        padding: var(--space-3, 0.75rem);
    }
}


/* ==========================================================================
   30. RTL
   ========================================================================== */

[dir="rtl"] .quote,
.quote[dir="rtl"] {
    direction: rtl;
}


/* ==========================================================================
   31. FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {
    .quote-card,
    .quote-modal,
    .quote-form__control,
    .quote-context__item,
    .quote-item,
    .quote-compare {
        border-color: CanvasText;
        forced-color-adjust: auto;
    }

    .quote-actions__button {
        border: 1px solid ButtonText;
    }

    .quote-actions__button--primary,
    .quote-actions__button--success,
    .quote-actions__button--danger {
        color: ButtonText;
        background: ButtonFace;
    }

    .quote-form__control:focus-visible,
    .quote-actions__button:focus-visible {
        outline: 2px solid Highlight;
        box-shadow: none;
    }
}


/* ==========================================================================
   32. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .quote *,
    .quote *::before,
    .quote *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   33. PRINT
   ========================================================================== */

@media print {
    .quote,
    .quote-card,
    .quote-modal {
        color: #000000;
        background: #ffffff;

        border: 1px solid #000000;

        box-shadow: none;
    }

    .quote-actions,
    .quote__header-actions {
        display: none !important;
    }

    .quote-modal {
        width: 100%;
        max-height: none;
    }

    .quote-modal__body {
        overflow: visible;
    }

    .quote-form__control {
        color: #000000;
        background: #ffffff;
        border-color: #000000;
    }
}