/**
 * ArgonShopTheme — lightweight modal window styles.
 *
 * @package ArgonShopTheme
 * @author  Ivan Voitkov
 *
 * ============================================================
 * PURPOSE
 * ============================================================
 *
 * Styles .ars-modal: backdrop, window, close button,
 * loader and error. Works with modal.js from the js folder.
 *
 * ============================================================
 * COLORS
 * ============================================================
 *
 * The theme blue — #4e83c6.
 * Dark overlay — rgba(0, 0, 0, 0.6).
 */

/* ============================================================
   PAGE SCROLL LOCK
   ============================================================ */

body.ars-modal-open {
    overflow: hidden;
}

/* ============================================================
   ROOT CONTAINER
   ============================================================ */

.ars-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.ars-modal.ars-modal--open {
    display: flex;
}

/* ============================================================
   BACKDROP
   ============================================================ */

.ars-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* ============================================================
   WINDOW
   ============================================================
 *
 * Sizes:
 *   - on wide screens 60% of the width, up to 900px;
 *   - on mobile 92% of the width.
 * The height is limited to 85vh, the content scrolls inside.
 *
 * overflow-y: auto on the window itself — a single scrollbar,
 * no nested ones.
 */

.ars-modal__window {
    position: relative;
    width: 60%;
    max-width: 900px;
    max-height: 85vh;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.ars-modal__body {
    padding: 28px 32px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    flex: 1 1 auto;
}

/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.ars-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.ars-modal__close:hover,
.ars-modal__close:focus-visible {
    background: rgba(0, 0, 0, 0.8);
}

.ars-modal__close svg {
    display: block;
    pointer-events: none;
}

/* ============================================================
   LOADER AND ERRORS
   ============================================================ */

.ars-modal__loader,
.ars-modal__error {
    text-align: center;
    padding: 40px 20px;
    font-size: 15px;
    color: #666;
}

.ars-modal__error {
    color: #c0392b;
}

/* ============================================================
   IFRAME
   ============================================================ */

.ars-modal__body iframe {
    display: block;
    width: 100%;
    min-height: 60vh;
    border: 0;
}

/* ============================================================
   CF7 FORM INSIDE THE MODAL
   ============================================================
 *
 * Remove extra margins so that the form fits correctly
 * into our window. The form itself is a regular one: the #feedback
 * element is moved into the modal (not cloned), so there are
 * no duplicate ids.
 */

.ars-modal__body .wpcf7 {
    margin: 0;
}

.ars-modal__body .wpcf7 form {
    margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .ars-modal__window {
        width: 90%;
        max-width: 90%;
    }

    .ars-modal__body {
        padding: 24px 20px 28px;
    }
}

@media (max-width: 480px) {

    .ars-modal__window {
        width: 96%;
        max-height: 90vh;
    }

    .ars-modal__body {
        padding: 20px 16px 24px;
    }

    .ars-modal__close {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
    }
}