/* =========================================================
SCL Global Enquiry Modal

Purpose:
- Provide the shared desktop modal appearance.
- Support dynamic enquiry forms across the SCL platform.
- Provide shared open / close animations.
- Support SCL dark / light theme tokens.

Dependencies:
- roots.css
========================================================= */


/* =========================================================
Modal Overlay
========================================================= */

.scl-enquiry-modal {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 2147483000 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 24px;

    margin: 0 !important;

    background:
        var(--bg-color);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

}


/* =========================================================
Open State
========================================================= */

.scl-enquiry-modal.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
Modal Window
========================================================= */

.scl-enquiry-modal__window {

    position: relative;

    display: flex;

    flex-direction: column;

    width: min(
        100%,
        var(--scl-enquiry-modal-width, 720px)
    );

    height: auto;

    max-height:
        calc(100vh - 48px);

    margin: 0;

    overflow: hidden;

    box-sizing: border-box;

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

    border-radius: 18px;

    background:
        var(--bg-color);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .30);

    transform:
        translateY(18px)
        scale(.98);

    transition:
        transform var(--transition-fast);

}


/* =========================================================
Open Animation
========================================================= */

.scl-enquiry-modal.is-open
.scl-enquiry-modal__window {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
Header
========================================================= */

.scl-enquiry-modal__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    flex: 0 0 auto;

    padding: 28px 30px 20px;

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

    background:
        var(--card-color);

}


.scl-enquiry-modal__heading {

    min-width: 0;

}


.scl-enquiry-modal__eyebrow {

    display: block;

    margin-bottom: 6px;

    font-size: .72rem;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        var(--accent-primary);

}


.scl-enquiry-modal__title {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 1.55rem;

    font-weight: 700;

    line-height: 1.25;

    color:
        var(--text);

}


/* =========================================================
Close Button
========================================================= */

.scl-enquiry-modal__close {

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    padding: 0;

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

    border-radius: 50%;

    background:
        transparent;

    color:
        var(--text);

    font-size: 1.35rem;

    line-height: 1;

    cursor: pointer;

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

}


.scl-enquiry-modal__close:hover {

    border-color:
        var(--card-border-hover);

    background:
        var(--glass-background);

    transform:
        rotate(90deg);

}


/* =========================================================
Body
========================================================= */

.scl-enquiry-modal__body {

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding: 26px 30px 30px;

}


/* =========================================================
Context
========================================================= */

.scl-enquiry-modal__context {

    margin-bottom: 28px;

    padding: 16px 18px;

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

    border-radius: 12px;

    background:
        var(--glass-background);

}


.scl-enquiry-modal__context-label {

    display: block;

    margin-bottom: 6px;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    color:
        var(--text-soft);

}


.scl-enquiry-modal__context-title {

    display: block;

    color:
        var(--text);

    font-size: 1rem;

    font-weight: 700;

}


.scl-enquiry-modal__context-meta {

    margin-top: 4px;

    color:
        var(--text-soft);

    font-size: .85rem;

}


/* =========================================================
Description
========================================================= */

.scl-enquiry-modal__description {

    margin: 0 0 24px;

    color:
        var(--text-soft);

    font-size: .9rem;

    line-height: 1.6;

}


/* =========================================================
Form
========================================================= */

.scl-enquiry-modal__form {

    display: flex;

    flex-direction: column;

    gap: 28px;

}


/* =========================================================
Section
========================================================= */

.scl-enquiry-modal__section {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.scl-enquiry-modal__section-title {

    margin: 0;

    padding-bottom: 8px;

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

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color:
        var(--text);

}


/* =========================================================
Field Grid
========================================================= */

.scl-enquiry-modal__field-grid {

    display: grid;

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

    gap: 18px 20px;

}


/* =========================================================
Field
========================================================= */

.scl-enquiry-modal__field {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.scl-enquiry-modal__field--full {

    grid-column:
        1 / -1;

}


.scl-enquiry-modal__field-label {

    font-size: .78rem;

    font-weight: 600;

    color:
        var(--text);

}

/* =========================================================
   File Field Label
========================================================= */

.scl-enquiry-modal__field-label--file {

    display:
        none;

}


.scl-enquiry-modal__required {

    color:
        var(--accent-primary);

}


/* =========================================================
Controls
========================================================= */

.scl-enquiry-modal__control {

    width: 100%;

    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 12px;

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

    border-radius: 9px;

    background:
        var(--glass-background);

    color:
        var(--text);

    font: inherit;

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}


.scl-enquiry-modal__control::placeholder {

    color:
        var(--text-soft);

    opacity: .65;

}


.scl-enquiry-modal__control:focus {

    border-color:
        var(--accent-primary);

    box-shadow:
        0 0 0 2px
        rgba(19, 216, 255, .12);

}


textarea.scl-enquiry-modal__control {

    min-height: 110px;

    resize: vertical;

}

/* =========================================================
   3D Printing CAD Upload
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-upload {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}


/* =========================================================
   Dropzone
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-dropzone {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        175px;

    padding:
        30px;

    border:
        1px dashed
        var(--card-border);

    border-radius:
        16px;

    background:
        var(--glass-background);

    text-align:
        center;

    cursor:
        pointer;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-dropzone:hover {

    border-color:
        var(--card-border-hover);

    background:
        var(--card-color);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .08);

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-dropzone.is-dragover {

    border-color:
        var(--accent-primary);

    background:
        rgba(19, 216, 255, .08);

    box-shadow:
        0 0 0 3px
        rgba(19, 216, 255, .08);

    transform:
        translateY(-2px);

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-dropzone:focus-visible {

    outline:
        2px solid
        var(--accent-primary);

    outline-offset:
        3px;

}


/* =========================================================
   Upload Icon
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        56px;

    height:
        56px;

    margin-bottom:
        15px;

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

    border-radius:
        15px;

    background:
        var(--glass-background);

    color:
        var(--accent-primary);

    font-size:
        1.35rem;

    box-shadow:
        0 8px 24px
        rgba(19, 216, 255, .08);

}


/* =========================================================
   Upload Text
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-title {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--text);

    font-size:
        .95rem;

    font-weight:
        700;

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-message {

    display:
        block;

    color:
        var(--text-soft);

    font-size:
        .81rem;

    line-height:
        1.5;

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-formats {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        10px;

    padding:
        5px 10px;

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

    border-radius:
        999px;

    background:
        var(--glass-background);

    color:
        var(--text-soft);

    font-size:
        .66rem;

    font-weight:
        600;

    letter-spacing:
        .05em;

}


/* =========================================================
   Hidden Native File Input

   The custom CAD dropzone opens this input programmatically.
   Keep the input functional but remove its native UI.
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-input {

    display:
        none;

}


/* =========================================================
   File List
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


/* =========================================================
   File Item
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    min-width:
        0;

    padding:
        12px 14px;

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

    border-radius:
        12px;

    background:
        var(--card-color);

    box-sizing:
        border-box;

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

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-item:hover {

    border-color:
        var(--card-border);

    background:
        var(--glass-background);

    transform:
        translateY(-1px);

}


/* =========================================================
   File Information
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-info {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;

    flex:
        1 1 auto;

}


/* =========================================================
   File Type Badge
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    min-width:
        48px;

    min-height:
        27px;

    padding:
        0 9px;

    box-sizing:
        border-box;

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

    border-radius:
        7px;

    background:
        var(--glass-background);

    color:
        var(--accent-primary);

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .06em;

}


/* =========================================================
   File Details
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    min-width:
        0;

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-name {

    display:
        block;

    overflow:
        hidden;

    max-width:
        100%;

    color:
        var(--text);

    font-size:
        .79rem;

    font-weight:
        600;

    line-height:
        1.4;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-size {

    color:
        var(--text-soft);

    font-size:
        .68rem;

}


/* =========================================================
   Remove File Button
========================================================= */

.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-remove {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    flex:
        0 0 auto;

    margin:
        0;

    padding:
        0;

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

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--text-soft);

    font-size:
        .78rem;

    line-height:
        1;

    cursor:
        pointer;

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

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-remove:hover {

    border-color:
        var(--form-error);

    background:
        var(--form-error-ring);

    color:
        var(--form-error);

    transform:
        scale(1.06);

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-remove:active {

    transform:
        scale(.96);

}


.scl-enquiry-modal--3d-printing
.scl-enquiry-modal__file-remove:focus-visible {

    outline:
        2px solid
        var(--accent-primary);

    outline-offset:
        2px;

}


/* =========================================================
Select
========================================================= */

select.scl-enquiry-modal__control {

    appearance: auto;

}


select.scl-enquiry-modal__control option {

    background:
        var(--bg-color);

    color:
        var(--text);

}


/* =========================================================
Checkbox
========================================================= */

.scl-enquiry-modal__checkbox {

    display: flex;

    align-items: flex-start;

    gap: 10px;

}


.scl-enquiry-modal__checkbox input {

    flex: 0 0 auto;

    width: 17px;

    height: 17px;

    margin-top: 2px;

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

}


.scl-enquiry-modal__checkbox label {

    color:
        var(--text-soft);

    font-size: .82rem;

    line-height: 1.5;

}


/* =========================================================
Validation
========================================================= */

.scl-enquiry-modal__field.is-invalid
.scl-enquiry-modal__control {

    border-color:
        var(--form-error);

}


.scl-enquiry-modal__error {

    display: none;

    margin: 0;

    color:
        var(--form-error);

    font-size: .74rem;

    line-height: 1.4;

}


.scl-enquiry-modal__field.is-invalid
.scl-enquiry-modal__error {

    display: block;

}


/* =========================================================
Footer
========================================================= */

.scl-enquiry-modal__footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    flex: 0 0 auto;

    padding: 18px 30px;

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

    background:
        var(--card-color);

}


/* =========================================================
Buttons
========================================================= */

.scl-enquiry-modal__button {

    min-height: 44px;

    padding: 0 20px;

    border-radius: 9px;

    font: inherit;

    font-size: .85rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);

}


.scl-enquiry-modal__button:hover {

    transform:
        translateY(-1px);

}


.scl-enquiry-modal__button--secondary {

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

    background:
        transparent;

    color:
        var(--text);

}


.scl-enquiry-modal__button--primary {

    border:
        1px solid transparent;

    background:
        var(--accent-gradient);

    color:
        #ffffff;

}


.scl-enquiry-modal__button:disabled {

    opacity: .55;

    cursor:
        not-allowed;

    transform:
        none;

}


/* =========================================================
Submitting State
========================================================= */

.scl-enquiry-modal.is-submitting
.scl-enquiry-modal__body {

    opacity: .72;

    pointer-events: none;

}


/* =========================================================
Status
========================================================= */

.scl-enquiry-modal__status {

    display: none;

    margin-bottom: 20px;

    padding: 14px 16px;

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

    border-radius: 10px;

    font-size: .84rem;

    line-height: 1.5;

}


.scl-enquiry-modal__status.is-visible {

    display: block;

}


.scl-enquiry-modal__status--success {

    border-color:
        var(--accent-primary);

}


.scl-enquiry-modal__status--error {

    border-color:
        var(--form-error);

}


.scl-enquiry-modal__status--info {

    border-color:
        var(--card-border);

}


/* =========================================================
Success State
========================================================= */

.scl-enquiry-modal__success {

    display: none;

    align-items: center;

    justify-content: center;

    min-height: 320px;

    text-align: center;

}


.scl-enquiry-modal__success.is-visible {

    display: flex;

}


.scl-enquiry-modal__success-content {

    max-width: 460px;

}


.scl-enquiry-modal__success-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    color:
        var(--accent-primary);

    font-size: 1.5rem;

}


.scl-enquiry-modal__success-title {

    margin: 0 0 8px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 1.25rem;

    color:
        var(--text);

}


.scl-enquiry-modal__success-message {

    margin: 0;

    color:
        var(--text-soft);

    line-height: 1.6;

}


/* =========================================================
Loading Indicator
========================================================= */

.scl-enquiry-modal__loading {

    display: none;

    align-items: center;

    gap: 8px;

}


.scl-enquiry-modal.is-submitting
.scl-enquiry-modal__loading {

    display: flex;

}


.scl-enquiry-modal__loading-dots {

    display: inline-flex;

    gap: 4px;

}


.scl-enquiry-modal__loading-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        currentColor;

    animation:
        scl-enquiry-loading
        1s infinite ease-in-out;

}


.scl-enquiry-modal__loading-dot:nth-child(2) {

    animation-delay:
        .15s;

}


.scl-enquiry-modal__loading-dot:nth-child(3) {

    animation-delay:
        .3s;

}


@keyframes scl-enquiry-loading {

    0%,
    80%,
    100% {

        opacity: .25;

        transform:
            translateY(0);

    }

    40% {

        opacity: 1;

        transform:
            translateY(-3px);

    }

}



/* =========================================================
Reduced Motion
========================================================= */

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

    .scl-enquiry-modal,
    .scl-enquiry-modal__window,
    .scl-enquiry-modal__close,
    .scl-enquiry-modal__button {

        transition: none;

    }

}


/* =========================================================
Desktop Only - Current Development Scope
========================================================= */

@media (max-width: 700px) {

    .scl-enquiry-modal {

        align-items:
            flex-start;

        padding:
            0;

    }


    .scl-enquiry-modal__window {

        width: 100%;

        height: 100vh;

        max-height: 100vh;

        border-radius: 0;

    }

}