```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM MODAL SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/modal.css
   Full Path:
   /public_html/assets/css/components/modal.css

   Version: 1.0

   Used For:
   - Product Quick View
   - Product Enquiry
   - Export Enquiry
   - Contact Popup
   - Image Preview
   - Success / Confirmation
   - Future Dynamic Modals

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - buttons.css
   - forms.css
   ============================================================ */


/* ============================================================
   01. BODY MODAL OPEN
   ============================================================ */

body.modal-open {
    overflow: hidden;
}


/* ============================================================
   02. MODAL ROOT
   ============================================================ */

.modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    width: 100%;
    height: 100%;

    padding:
        clamp(1rem, 3vw, 2rem);

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}


/* ============================================================
   03. MODAL ACTIVE
   ============================================================ */

.modal.is-open,
.modal.show {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ============================================================
   04. MODAL BACKDROP
   ============================================================ */

.modal-backdrop {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        rgba(2, 14, 10, 0.76);

    -webkit-backdrop-filter:
        blur(9px);

    backdrop-filter:
        blur(9px);

    opacity: 0;

    transition:
        opacity var(--transition-premium);
}


/* ============================================================
   05. ACTIVE BACKDROP
   ============================================================ */

.modal.is-open
.modal-backdrop,

.modal.show
.modal-backdrop {
    opacity: 1;
}


/* ============================================================
   06. MODAL DIALOG
   ============================================================ */

.modal-dialog {
    position: relative;

    z-index: 2;

    width: min(100%, 640px);

    max-height:
        calc(100vh - 4rem);

    opacity: 0;

    transform:
        translateY(28px)
        scale(0.97);

    transition:
        opacity var(--transition-premium),
        transform var(--transition-premium);
}


/* ============================================================
   07. ACTIVE DIALOG
   ============================================================ */

.modal.is-open
.modal-dialog,

.modal.show
.modal-dialog {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ============================================================
   08. MODAL CONTENT
   ============================================================ */

.modal-content {
    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    max-height:
        calc(100vh - 4rem);

    border:
        1px solid rgba(183, 138, 61, 0.18);

    border-radius:
        var(--radius-2xl);

    color: var(--text-body);

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.28);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   09. MODAL GOLD TOP LINE
   ============================================================ */

.modal-content::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    z-index: 5;

    height: 3px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   10. MODAL AMBIENT GLOW
   ============================================================ */

.modal-content::after {
    content: "";

    position: absolute;

    right: -160px;
    bottom: -190px;

    z-index: -1;

    width: 380px;
    height: 380px;

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

    background:
        radial-gradient(
            circle,
            rgba(183, 138, 61, 0.10),
            rgba(183, 138, 61, 0) 70%
        );

    pointer-events: none;
}


/* ============================================================
   11. MODAL HEADER
   ============================================================ */

.modal-header {
    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--space-5);

    flex: 0 0 auto;

    padding:
        var(--space-7)
        var(--space-7)
        var(--space-5);

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


/* ============================================================
   12. MODAL HEADER CONTENT
   ============================================================ */

.modal-header-content {
    min-width: 0;

    flex: 1 1 auto;
}


/* ============================================================
   13. MODAL EYEBROW
   ============================================================ */

.modal-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

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

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

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

    font-size: 0.5rem;

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

    line-height: 1;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* ============================================================
   14. MODAL EYEBROW DOT
   ============================================================ */

.modal-eyebrow::before {
    content: "";

    width: 6px;
    height: 6px;

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

    background:
        var(--color-secondary);

    box-shadow:
        0 0 0 5px rgba(183, 138, 61, 0.07);
}


/* ============================================================
   15. MODAL TITLE
   ============================================================ */

.modal-title {
    margin: 0;

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

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

    font-size:
        clamp(1.55rem, 3vw, 2.2rem);

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

    line-height: 1.12;

    letter-spacing: -0.025em;
}


/* ============================================================
   16. MODAL DESCRIPTION
   ============================================================ */

.modal-description {
    max-width: 540px;

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

    color: var(--text-muted);

    font-size: 0.62rem;

    line-height: 1.7;
}


/* ============================================================
   17. MODAL CLOSE
   ============================================================ */

.modal-close {
    position: relative;

    display: inline-flex;

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

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

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

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

    outline: none;

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

    background:
        var(--bg-soft);

    cursor: pointer;

    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   18. MODAL CLOSE LINES
   ============================================================ */

.modal-close::before,
.modal-close::after {
    content: "";

    position: absolute;

    width: 14px;
    height: 1.5px;

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

    background:
        currentColor;
}

.modal-close::before {
    transform:
        rotate(45deg);
}

.modal-close::after {
    transform:
        rotate(-45deg);
}


/* ============================================================
   19. MODAL CLOSE HOVER
   ============================================================ */

.modal-close:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        var(--gradient-gold);

    transform:
        rotate(90deg);
}


/* ============================================================
   20. MODAL BODY
   ============================================================ */

.modal-body {
    position: relative;

    flex: 1 1 auto;

    padding:
        var(--space-6)
        var(--space-7);

    overflow-x: hidden;

    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(183, 138, 61, 0.38)
        transparent;
}


/* ============================================================
   21. MODAL BODY SCROLLBAR
   ============================================================ */

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    border-radius:
        var(--radius-pill);

    background:
        rgba(183, 138, 61, 0.35);
}


/* ============================================================
   22. MODAL BODY PARAGRAPH
   ============================================================ */

.modal-body p {
    margin:
        0
        0
        var(--space-4);

    line-height: 1.8;
}

.modal-body p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   23. MODAL BODY STRONG
   ============================================================ */

.modal-body strong {
    color: var(--color-primary-deep);

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


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

.modal-footer {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: var(--space-3);

    flex: 0 0 auto;

    padding:
        var(--space-5)
        var(--space-7)
        var(--space-6);

    border-top:
        1px solid var(--border-light);

    background:
        rgba(250, 248, 242, 0.52);
}


/* ============================================================
   25. FOOTER BETWEEN
   ============================================================ */

.modal-footer-between {
    justify-content: space-between;
}


/* ============================================================
   26. FOOTER CENTER
   ============================================================ */

.modal-footer-center {
    justify-content: center;
}


/* ============================================================
   27. SMALL MODAL
   ============================================================ */

.modal-sm
.modal-dialog {
    width:
        min(100%, 440px);
}


/* ============================================================
   28. MEDIUM MODAL
   ============================================================ */

.modal-md
.modal-dialog {
    width:
        min(100%, 640px);
}


/* ============================================================
   29. LARGE MODAL
   ============================================================ */

.modal-lg
.modal-dialog {
    width:
        min(100%, 900px);
}


/* ============================================================
   30. EXTRA LARGE MODAL
   ============================================================ */

.modal-xl
.modal-dialog {
    width:
        min(100%, 1160px);
}


/* ============================================================
   31. FULL WIDTH MODAL
   ============================================================ */

.modal-full
.modal-dialog {
    width:
        min(100%, 1440px);
}


/* ============================================================
   32. FULLSCREEN MODAL
   ============================================================ */

.modal-fullscreen {
    padding: 0;
}

.modal-fullscreen
.modal-dialog {
    width: 100%;
    height: 100%;

    max-height: none;
}

.modal-fullscreen
.modal-content {
    width: 100%;
    height: 100%;

    max-height: none;

    border: 0;

    border-radius: 0;
}


/* ============================================================
   33. CENTERED MODAL
   ============================================================ */

.modal-centered {
    align-items: center;
}


/* ============================================================
   34. TOP MODAL
   ============================================================ */

.modal-top {
    align-items: flex-start;

    padding-top:
        clamp(1rem, 6vh, 4rem);
}


/* ============================================================
   35. BOTTOM MODAL
   ============================================================ */

.modal-bottom {
    align-items: flex-end;

    padding-bottom: 0;
}


/* ============================================================
   36. BOTTOM SHEET DIALOG
   ============================================================ */

.modal-bottom
.modal-dialog {
    width:
        min(100%, 760px);

    transform:
        translateY(100%);
}


/* ============================================================
   37. BOTTOM SHEET ACTIVE
   ============================================================ */

.modal-bottom.is-open
.modal-dialog,

.modal-bottom.show
.modal-dialog {
    transform:
        translateY(0);
}


/* ============================================================
   38. BOTTOM SHEET CONTENT
   ============================================================ */

.modal-bottom
.modal-content {
    border-radius:
        var(--radius-2xl)
        var(--radius-2xl)
        0
        0;
}


/* ============================================================
   39. GLASS MODAL
   ============================================================ */

.modal-glass
.modal-content {
    border-color:
        rgba(255, 255, 255, 0.15);

    background:
        rgba(255, 255, 255, 0.88);

    -webkit-backdrop-filter:
        blur(22px);

    backdrop-filter:
        blur(22px);
}


/* ============================================================
   40. DARK MODAL
   ============================================================ */

.modal-dark
.modal-content {
    color:
        rgba(255, 255, 255, 0.62);

    border-color:
        rgba(212, 175, 104, 0.14);

    background:
        linear-gradient(
            145deg,
            rgba(4, 19, 14, 0.98),
            rgba(11, 43, 32, 0.98)
        );

    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.40);
}


/* ============================================================
   41. DARK TITLE
   ============================================================ */

.modal-dark
.modal-title {
    color: #ffffff;
}


/* ============================================================
   42. DARK DESCRIPTION
   ============================================================ */

.modal-dark
.modal-description {
    color:
        rgba(255, 255, 255, 0.48);
}


/* ============================================================
   43. DARK HEADER
   ============================================================ */

.modal-dark
.modal-header {
    border-bottom-color:
        rgba(255, 255, 255, 0.08);
}


/* ============================================================
   44. DARK CLOSE
   ============================================================ */

.modal-dark
.modal-close {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.055);
}


/* ============================================================
   45. DARK CLOSE HOVER
   ============================================================ */

.modal-dark
.modal-close:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(212, 175, 104, 0.32);

    background:
        var(--gradient-gold);
}


/* ============================================================
   46. DARK BODY
   ============================================================ */

.modal-dark
.modal-body {
    color:
        rgba(255, 255, 255, 0.60);
}


/* ============================================================
   47. DARK BODY STRONG
   ============================================================ */

.modal-dark
.modal-body strong {
    color: #ffffff;
}


/* ============================================================
   48. DARK FOOTER
   ============================================================ */

.modal-dark
.modal-footer {
    border-top-color:
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.025);
}


/* ============================================================
   49. PRODUCT MODAL GRID
   ============================================================ */

.modal-product-grid {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(1.5rem, 4vw, 3rem);

    align-items: start;
}


/* ============================================================
   50. PRODUCT MODAL IMAGE
   ============================================================ */

.modal-product-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1;

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

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

    background:
        var(--bg-soft);

    overflow: hidden;
}


/* ============================================================
   51. PRODUCT IMAGE
   ============================================================ */

.modal-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform var(--transition-premium);
}


/* ============================================================
   52. PRODUCT IMAGE HOVER
   ============================================================ */

.modal-product-image:hover img {
    transform:
        scale(1.04);
}


/* ============================================================
   53. PRODUCT CONTENT
   ============================================================ */

.modal-product-content {
    min-width: 0;
}


/* ============================================================
   54. PRODUCT CATEGORY
   ============================================================ */

.modal-product-category {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

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

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

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

    font-size: 0.5rem;

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

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* ============================================================
   55. PRODUCT CATEGORY DOT
   ============================================================ */

.modal-product-category::before {
    content: "";

    width: 6px;
    height: 6px;

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

    background:
        var(--color-secondary);
}


/* ============================================================
   56. PRODUCT TITLE
   ============================================================ */

.modal-product-title {
    margin: 0;

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

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

    font-size:
        clamp(1.6rem, 3vw, 2.5rem);

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

    line-height: 1.1;

    letter-spacing: -0.025em;
}


/* ============================================================
   57. PRODUCT DESCRIPTION
   ============================================================ */

.modal-product-description {
    margin:
        var(--space-4)
        0
        0;

    color: var(--text-body);

    font-size: 0.65rem;

    line-height: 1.8;
}


/* ============================================================
   58. PRODUCT META
   ============================================================ */

.modal-product-meta {
    display: grid;

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

    gap: var(--space-3);

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


/* ============================================================
   59. PRODUCT META ITEM
   ============================================================ */

.modal-product-meta-item {
    padding:
        var(--space-3)
        var(--space-4);

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

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

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


/* ============================================================
   60. META LABEL
   ============================================================ */

.modal-product-meta-label {
    display: block;

    color: var(--text-muted);

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

    font-size: 0.46rem;

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

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ============================================================
   61. META VALUE
   ============================================================ */

.modal-product-meta-value {
    display: block;

    margin-top: 4px;

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

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

    font-size: 0.6rem;

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

    line-height: 1.4;
}


/* ============================================================
   62. PRODUCT ACTIONS
   ============================================================ */

.modal-product-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top:
        var(--space-6);
}


/* ============================================================
   63. IMAGE PREVIEW MODAL
   ============================================================ */

.modal-image-preview
.modal-dialog {
    width:
        min(100%, 1100px);
}


/* ============================================================
   64. IMAGE PREVIEW CONTENT
   ============================================================ */

.modal-image-preview
.modal-content {
    border-color:
        rgba(255, 255, 255, 0.10);

    background:
        rgba(2, 10, 7, 0.92);

    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.50);
}


/* ============================================================
   65. IMAGE PREVIEW BODY
   ============================================================ */

.modal-image-preview
.modal-body {
    display: flex;

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

    padding:
        var(--space-5);
}


/* ============================================================
   66. PREVIEW IMAGE
   ============================================================ */

.modal-preview-image {
    display: block;

    max-width: 100%;
    max-height:
        calc(100vh - 8rem);

    width: auto;
    height: auto;

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

    object-fit: contain;
}


/* ============================================================
   67. SUCCESS MODAL
   ============================================================ */

.modal-success
.modal-body {
    padding:
        clamp(2rem, 6vw, 4rem);

    text-align: center;
}


/* ============================================================
   68. SUCCESS ICON
   ============================================================ */

.modal-success-icon {
    position: relative;

    display: inline-flex;

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

    width: 78px;
    height: 78px;

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

    border:
        1px solid rgba(30, 130, 76, 0.16);

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

    color: #17633b;

    background:
        rgba(30, 130, 76, 0.07);

    font-size: 1.35rem;

    box-shadow:
        0 14px 36px rgba(30, 130, 76, 0.08);
}


/* ============================================================
   69. SUCCESS TITLE
   ============================================================ */

.modal-success-title {
    margin: 0;

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

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

    font-size:
        clamp(1.7rem, 4vw, 2.5rem);

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

    line-height: 1.1;
}


/* ============================================================
   70. SUCCESS TEXT
   ============================================================ */

.modal-success-text {
    max-width: 480px;

    margin:
        var(--space-4)
        auto
        0;

    color: var(--text-body);

    font-size: 0.65rem;

    line-height: 1.75;
}


/* ============================================================
   71. SUCCESS ACTIONS
   ============================================================ */

.modal-success-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top:
        var(--space-6);
}


/* ============================================================
   72. CONFIRMATION ICON
   ============================================================ */

.modal-confirm-icon {
    display: inline-flex;

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

    width: 64px;
    height: 64px;

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

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

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

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

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

    font-size: 1.1rem;
}


/* ============================================================
   73. MODAL DIVIDER
   ============================================================ */

.modal-divider {
    width: 100%;
    height: 1px;

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

    background:
        var(--border-light);
}


/* ============================================================
   74. GOLD DIVIDER
   ============================================================ */

.modal-divider-gold {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183, 138, 61, 0.42),
            transparent
        );
}


/* ============================================================
   75. MODAL LOADING
   ============================================================ */

.modal.is-loading
.modal-content {
    pointer-events: none;
}


/* ============================================================
   76. MODAL LOADING OVERLAY
   ============================================================ */

.modal-loading {
    position: absolute;

    inset: 0;

    z-index: 100;

    display: none;

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

    background:
        rgba(255, 255, 255, 0.80);

    -webkit-backdrop-filter:
        blur(6px);

    backdrop-filter:
        blur(6px);
}

.modal.is-loading
.modal-loading {
    display: flex;
}


/* ============================================================
   77. MODAL LOADING SPINNER
   ============================================================ */

.modal-spinner {
    width: 38px;
    height: 38px;

    border:
        3px solid rgba(183, 138, 61, 0.18);

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

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

    animation:
        modalSpin 0.75s linear infinite;
}


/* ============================================================
   78. SPINNER KEYFRAMES
   ============================================================ */

@keyframes modalSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   79. MODAL FOCUS
   ============================================================ */

.modal-close:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   80. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .modal-xl
    .modal-dialog,

    .modal-full
    .modal-dialog {
        width: 100%;
    }

    .modal-product-grid {
        grid-template-columns:
            minmax(220px, 0.8fr)
            minmax(0, 1.2fr);
    }

}


/* ============================================================
   81. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .modal {
        padding:
            var(--space-4);
    }

    .modal-dialog {
        width: 100%;

        max-height:
            calc(100vh - 2rem);
    }

    .modal-content {
        max-height:
            calc(100vh - 2rem);

        border-radius:
            var(--radius-xl);
    }

    .modal-header {
        padding:
            var(--space-6)
            var(--space-5)
            var(--space-4);
    }

    .modal-body {
        padding:
            var(--space-5);
    }

    .modal-footer {
        padding:
            var(--space-4)
            var(--space-5)
            var(--space-5);
    }

    .modal-product-grid {
        grid-template-columns: 1fr;
    }

    .modal-product-image {
        max-width: 420px;

        margin:
            0
            auto;
    }

    .modal-product-meta {
        grid-template-columns: 1fr 1fr;
    }

    .modal-bottom {
        padding:
            var(--space-4)
            var(--space-4)
            0;
    }

}


/* ============================================================
   82. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .modal {
        align-items: flex-end;

        padding:
            12px;
    }

    .modal-dialog {
        max-height:
            calc(100vh - 24px);
    }

    .modal-content {
        max-height:
            calc(100vh - 24px);

        border-radius:
            var(--radius-lg);
    }

    .modal-header {
        gap: var(--space-3);

        padding:
            var(--space-5)
            var(--space-4)
            var(--space-4);
    }

    .modal-title {
        font-size:
            clamp(1.4rem, 8vw, 1.8rem);
    }

    .modal-description {
        font-size: 0.58rem;
    }

    .modal-close {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .modal-body {
        padding:
            var(--space-4);
    }

    .modal-footer {
        align-items: stretch;

        flex-direction: column;

        padding:
            var(--space-4);
    }

    .modal-footer
    .btn {
        width: 100%;
    }

    .modal-product-meta {
        grid-template-columns: 1fr;
    }

    .modal-product-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .modal-product-actions
    .btn {
        width: 100%;
    }

    .modal-success-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .modal-success-actions
    .btn {
        width: 100%;
    }

    .modal-bottom {
        padding: 0;
    }

    .modal-bottom
    .modal-dialog {
        max-height: 92vh;
    }

    .modal-bottom
    .modal-content {
        max-height: 92vh;

        border-radius:
            var(--radius-xl)
            var(--radius-xl)
            0
            0;
    }

}


/* ============================================================
   83. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .modal {
        padding:
            8px;
    }

    .modal-dialog {
        max-height:
            calc(100vh - 16px);
    }

    .modal-content {
        max-height:
            calc(100vh - 16px);
    }

    .modal-header {
        padding:
            18px
            14px
            14px;
    }

    .modal-body {
        padding:
            14px;
    }

    .modal-footer {
        padding:
            14px;
    }

}


/* ============================================================
   84. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .modal-close:hover {
        transform: none;
    }

    .modal-product-image:hover img {
        transform: none;
    }

}


/* ============================================================
   85. REDUCED MOTION
   ============================================================ */

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

    .modal,
    .modal-backdrop,
    .modal-dialog,
    .modal-close,
    .modal-product-image img {
        transition: none;
    }

    .modal-dialog {
        transform: none;
    }

    .modal.is-open
    .modal-dialog,

    .modal.show
    .modal-dialog {
        transform: none;
    }

    .modal-close:hover {
        transform: none;
    }

    .modal-product-image:hover img {
        transform: none;
    }

    .modal-spinner {
        animation-duration:
            1.5s;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM MODAL SYSTEM
   ============================================================ */
```