/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   Modal Component
   File:
   /home/jqkmqvml/public_html/assets/css/components/modal.css

   IMPORTANT
   --------------------------------------------------------------------------
   - UI/CSS only
   - No fake/demo/sample marketplace data
   - Modal content must be supplied by HTML/JS/API
   - Backend/API remains authoritative
   - Supports accessibility, mobile, RTL, dark mode and reduced motion
   ========================================================================== */


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

.modal {
    --modal-z-index: 1000;
    --modal-width: 560px;
    --modal-max-width: calc(100vw - 32px);
    --modal-max-height: calc(100vh - 32px);

    --modal-radius: 14px;
    --modal-padding: 20px;

    --modal-backdrop: rgba(15, 23, 42, 0.62);

    --modal-bg: var(--color-surface, #ffffff);
    --modal-text: var(--color-text, #1f2937);
    --modal-muted: var(--color-muted, #6b7280);

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

    --modal-shadow:
        0 24px 70px rgba(15, 23, 42, 0.20);

    position: fixed;
    inset: 0;

    z-index: var(--modal-z-index);

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

    width: 100%;
    height: 100%;

    padding: 16px;

    visibility: visible;
    opacity: 1;

    overflow: hidden;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}


/* ==========================================================================
   2. HIDDEN MODAL
   ========================================================================== */

.modal[hidden],
.modal.is-hidden {
    display: none;
}

.modal[aria-hidden="true"] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ==========================================================================
   3. BACKDROP
   ========================================================================== */

.modal__backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
    padding: 0;

    background: var(--modal-backdrop);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

.modal__backdrop:focus-visible {
    outline: none;
}


/* ==========================================================================
   4. MODAL DIALOG
   ========================================================================== */

.modal__dialog {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: var(--modal-width);
    max-height: var(--modal-max-height);

    margin: auto;

    overflow: hidden;

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

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

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

    transform: translateY(0) scale(1);

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}


/* ==========================================================================
   5. MODAL SIZES
   ========================================================================== */

.modal--small {
    --modal-width: 400px;
}

.modal--medium {
    --modal-width: 560px;
}

.modal--large {
    --modal-width: 760px;
}

.modal--xlarge {
    --modal-width: 960px;
}

.modal--full {
    --modal-width: none;
    --modal-max-width: calc(100vw - 24px);
    --modal-max-height: calc(100vh - 24px);
}


/* ==========================================================================
   6. MODAL HEADER
   ========================================================================== */

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    flex: 0 0 auto;

    padding: var(--modal-padding);

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

.modal__heading {
    min-width: 0;
    margin: 0;

    color: var(--modal-text);

    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.modal__subtitle {
    margin: 5px 0 0;

    color: var(--modal-muted);

    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================================
   7. CLOSE BUTTON
   ========================================================================== */

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

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    padding: 0;

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

    background: transparent;
    color: var(--modal-muted);

    font: inherit;

    cursor: pointer;

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

.modal__close:hover {
    background: var(--color-surface-muted, #f3f4f6);
    color: var(--modal-text);
}

.modal__close:focus-visible {
    outline: 3px solid var(--color-focus, rgba(37, 99, 235, 0.25));
    outline-offset: 2px;
}

.modal__close-icon {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    pointer-events: none;
}


/* ==========================================================================
   8. MODAL BODY
   ========================================================================== */

.modal__body {
    flex: 1 1 auto;

    min-height: 0;

    padding: var(--modal-padding);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;
}

.modal__body > :first-child {
    margin-top: 0;
}

.modal__body > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   9. MODAL FOOTER
   ========================================================================== */

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

    flex-wrap: wrap;

    gap: 10px;

    flex: 0 0 auto;

    padding: var(--modal-padding);

    border-top: 1px solid var(--modal-border);
}

.modal__footer--between {
    justify-content: space-between;
}

.modal__footer--start {
    justify-content: flex-start;
}

.modal__footer--center {
    justify-content: center;
}


/* ==========================================================================
   10. MODAL ACTIONS
   ========================================================================== */

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

    flex-wrap: wrap;

    gap: 10px;

    width: 100%;
}


/* ==========================================================================
   11. SCROLLABLE MODAL
   ========================================================================== */

.modal--scrollable .modal__dialog {
    max-height: calc(100vh - 32px);
}

.modal--scrollable .modal__body {
    overflow-y: auto;
}


/* ==========================================================================
   12. STATIC MODAL
   ========================================================================== */

.modal--static .modal__backdrop {
    cursor: default;
}


/* ==========================================================================
   13. BOTTOM SHEET
   ========================================================================== */

.modal--bottom {
    align-items: flex-end;
    padding: 0;
}

.modal--bottom .modal__dialog {
    max-width: 100%;
    max-height: 90vh;

    margin: 0;

    border-radius: 16px 16px 0 0;

    transform: translateY(0);
}

.modal--bottom .modal__header {
    position: relative;
}


/* ==========================================================================
   14. CENTERED CONTENT
   ========================================================================== */

.modal--centered .modal__body {
    text-align: center;
}

.modal--centered .modal__footer {
    justify-content: center;
}


/* ==========================================================================
   15. CONFIRMATION MODAL
   ========================================================================== */

.modal--confirm .modal__body {
    padding-top: 24px;
    padding-bottom: 24px;
}

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

    width: 52px;
    height: 52px;

    margin: 0 auto 14px;

    border-radius: 50%;

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

.modal__confirm-icon svg {
    width: 26px;
    height: 26px;

    fill: none;
    stroke: currentColor;
}


/* ==========================================================================
   16. ALERT MODAL
   ========================================================================== */

.modal--danger .modal__confirm-icon {
    background: var(--color-danger-soft, #fff4f2);
    color: var(--color-danger, #b42318);
}

.modal--warning .modal__confirm-icon {
    background: var(--color-warning-soft, #fff7e6);
    color: var(--color-warning, #b54708);
}

.modal--success .modal__confirm-icon {
    background: var(--color-success-soft, #ecfdf3);
    color: var(--color-success, #027a48);
}


/* ==========================================================================
   17. LOADING MODAL
   ========================================================================== */

.modal.is-loading .modal__body {
    min-height: 160px;

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

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

    gap: 10px;

    color: var(--modal-muted);

    font-size: 14px;
}

.modal__spinner {
    width: 22px;
    height: 22px;

    border: 2px solid currentColor;
    border-right-color: transparent;

    border-radius: 50%;

    animation: modal-spin 700ms linear infinite;
}

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


/* ==========================================================================
   18. ERROR STATE
   ========================================================================== */

.modal__error {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    border: 1px solid var(--color-danger-border, #f1b5b0);
    border-radius: 10px;

    background: var(--color-danger-soft, #fff4f2);
    color: var(--color-danger, #b42318);

    font-size: 14px;
    line-height: 1.5;
}

.modal__error-icon {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;
}


/* ==========================================================================
   19. EMPTY STATE
   ========================================================================== */

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

    min-height: 160px;

    text-align: center;
}

.modal__empty-title {
    margin: 0 0 6px;

    font-size: 16px;
    font-weight: 700;
}

.modal__empty-text {
    max-width: 440px;

    margin: 0;

    color: var(--modal-muted);

    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================================================
   20. FORM MODAL
   ========================================================================== */

.modal--form .modal__body {
    padding-top: 24px;
    padding-bottom: 24px;
}

.modal--form .modal__footer {
    background: var(--color-surface-subtle, #fafafa);
}


/* ==========================================================================
   21. MEDIA MODAL
   ========================================================================== */

.modal--media .modal__dialog {
    background: #000000;
    border-color: #000000;
}

.modal--media .modal__header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.modal--media .modal__heading {
    color: #ffffff;
}

.modal--media .modal__body {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #000000;
}

.modal--media .modal__close {
    color: #ffffff;
}

.modal--media .modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   22. MODAL MEDIA
   ========================================================================== */

.modal__media {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}

.modal__media--contain {
    max-height: calc(100vh - 160px);
}


/* ==========================================================================
   23. DRAWER MODAL — LEFT
   ========================================================================== */

.modal--drawer-left {
    justify-content: flex-start;
    padding: 0;
}

.modal--drawer-left .modal__dialog {
    height: 100%;
    max-height: 100%;
    max-width: min(420px, 90vw);

    margin: 0;

    border-radius: 0 14px 14px 0;
}


/* ==========================================================================
   24. DRAWER MODAL — RIGHT
   ========================================================================== */

.modal--drawer-right {
    justify-content: flex-end;
    padding: 0;
}

.modal--drawer-right .modal__dialog {
    height: 100%;
    max-height: 100%;
    max-width: min(420px, 90vw);

    margin: 0;

    border-radius: 14px 0 0 14px;
}


/* ==========================================================================
   25. NESTED CONTENT
   ========================================================================== */

.modal__body .modal {
    position: relative;
    inset: auto;

    width: auto;
    height: auto;

    padding: 0;
}


/* ==========================================================================
   26. BACKGROUND SCROLL LOCK SUPPORT
   ========================================================================== */

html.modal-open,
body.modal-open {
    overflow: hidden;
}

body.modal-open {
    overscroll-behavior: none;
}


/* ==========================================================================
   27. MOBILE
   ========================================================================== */

@media (max-width: 640px) {
    .modal {
        --modal-padding: 16px;

        align-items: flex-end;

        padding: 0;
    }

    .modal__dialog {
        max-width: 100%;
        max-height: 94vh;

        border-radius: 16px 16px 0 0;
    }

    .modal__header {
        gap: 10px;
    }

    .modal__heading {
        font-size: 18px;
    }

    .modal__body {
        max-height: calc(94vh - 140px);
    }

    .modal__footer {
        padding-bottom:
            calc(var(--modal-padding) + env(safe-area-inset-bottom));
    }

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

    .modal__actions > * {
        width: 100%;
    }

    .modal--small .modal__dialog,
    .modal--medium .modal__dialog,
    .modal--large .modal__dialog,
    .modal--xlarge .modal__dialog {
        max-width: 100%;
    }

    .modal--drawer-left .modal__dialog,
    .modal--drawer-right .modal__dialog {
        max-width: 92vw;
    }
}


/* ==========================================================================
   28. TABLET
   ========================================================================== */

@media (min-width: 641px) and (max-width: 900px) {
    .modal {
        --modal-max-width: calc(100vw - 48px);
        --modal-max-height: calc(100vh - 48px);
    }
}


/* ==========================================================================
   29. DARK THEME
   ========================================================================== */

[data-theme="dark"] .modal,
.dark .modal {
    --modal-bg: var(--color-surface-dark, #111827);
    --modal-text: var(--color-text-dark, #e5e7eb);
    --modal-muted: var(--color-muted-dark, #9ca3af);

    --modal-border: var(--color-border-dark, #374151);

    --modal-backdrop: rgba(0, 0, 0, 0.72);

    --modal-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .modal__close:hover,
.dark .modal__close:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .modal--form .modal__footer,
.dark .modal--form .modal__footer {
    background: rgba(255, 255, 255, 0.025);
}


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

[dir="rtl"] .modal__header {
    text-align: right;
}

[dir="rtl"] .modal__footer {
    justify-content: flex-start;
}

[dir="rtl"] .modal__footer--start {
    justify-content: flex-end;
}

[dir="rtl"] .modal--drawer-left {
    justify-content: flex-end;
}

[dir="rtl"] .modal--drawer-left .modal__dialog {
    border-radius: 14px 0 0 14px;
}

[dir="rtl"] .modal--drawer-right {
    justify-content: flex-start;
}

[dir="rtl"] .modal--drawer-right .modal__dialog {
    border-radius: 0 14px 14px 0;
}


/* ==========================================================================
   31. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal__dialog,
    .modal__close {
        transition: none;
    }

    .modal__spinner {
        animation: none;
    }
}


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

@media (forced-colors: active) {
    .modal__dialog {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .modal__close {
        border: 1px solid ButtonText;
        color: ButtonText;
    }

    .modal__close:focus-visible {
        outline: 2px solid Highlight;
    }

    .modal__backdrop {
        background: Canvas;
        opacity: 0.85;
    }
}


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

@media print {
    .modal,
    .modal__backdrop {
        display: none !important;
    }
}