/* =========================
   Moqapi Creative Solutions Popups – Create Responsive Website Popups – Frontend
   ========================= */

/* Overlay */
.moqapics-popup-overlay {
    position: fixed;
    inset: 0; /* top/right/bottom/left */
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; /* hidden initially */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow-y: auto;
}

/* Popup container */
.moqapics-popup {
    position: relative;
    background: #fff;
    padding: 30px 20px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Title + message spacing */
.moqapics-popup-title {
    margin: 0 0 12px;
    line-height: 1.2;
}

.moqapics-popup-message {
    margin: 0 0 16px;
}

/* Close button */
.moqapics-popup .moqapics-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 40px;
    height: 40px;

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

    cursor: pointer;
    z-index: 10;

    color: #000;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;

    border: 2px solid #000;
    border-radius: 999px;

    background: transparent;
    transition: all 0.2s ease;
}

.moqapics-popup .moqapics-popup-close:hover {
    color: var(--moqapics-close-hover-color, #636161);
    background-color: var(--moqapics-close-hover-background, transparent);
    border-color: var(--moqapics-close-hover-border, #636161);
}

/*Form area (layout fixes only) */
.moqapics-popup-form {
    width: 100%;
}

/* Make common form wrappers behave nicely */
.moqapics-popup-form form,
.moqapics-popup-form .gform_wrapper,
.moqapics-popup-form .wpforms-container,
.moqapics-popup-form .nf-form-cont,
.moqapics-popup-form .wpcf7,
.moqapics-popup-form .frm_forms {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Prevent any form element from overflowing the popup */
.moqapics-popup-form * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Inputs/selects/textarea full width (layout only)*/
.moqapics-popup-form input[type="text"],
.moqapics-popup-form input[type="email"],
.moqapics-popup-form input[type="url"],
.moqapics-popup-form input[type="tel"],
.moqapics-popup-form input[type="number"],
.moqapics-popup-form input[type="password"],
.moqapics-popup-form input[type="search"],
.moqapics-popup-form select,
.moqapics-popup-form textarea {
    width: 100%;
}

/* Checkboxes/radios should not become full-width */
.moqapics-popup-form input[type="checkbox"],
.moqapics-popup-form input[type="radio"] {
    width: auto;
    max-width: none;
}

/* Buttons should not overflow */
.moqapics-popup-form button,
.moqapics-popup-form input[type="submit"],
.moqapics-popup-form input[type="button"],
.moqapics-popup-form input[type="reset"] {
    max-width: 100%;
}

/* Give form blocks a bit of breathing room without styling fields */
.moqapics-popup-form p,
.moqapics-popup-form .field,
.moqapics-popup-form .gfield,
.moqapics-popup-form .wpforms-field,
.moqapics-popup-form .nf-field-container,
.moqapics-popup-form .wpcf7-form-control-wrap,
.moqapics-popup-form .frm_form_field {
    margin-bottom: 12px;
}

/* Ensure embedded content doesn't overflow */
.moqapics-popup img,
.moqapics-popup iframe,
.moqapics-popup video,
.moqapics-popup embed,
.moqapics-popup object {
    max-width: 100%;
    height: auto;
}

/* Prevent long URLs/strings from breaking layout */
.moqapics-popup {
    overflow-wrap: anywhere;
}

/* =========================
   Headline
   ========================= */

.moqapics-popup-headline {
    margin: 0 0 20px;
    padding-right: 50px; /* Prevent overlap with close button */
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

/* =========================
   Layout Container
   ========================= */

.moqapics-popup-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =========================
   Side-by-side Layouts
   ========================= */

.moqapics-layout-two-column .moqapics-popup-content-wrap,
.moqapics-layout-form-left .moqapics-popup-content-wrap {
    flex-direction: row;
    align-items: flex-start;
}

/* =========================
   50 / 50
   ========================= */

.moqapics-ratio-50-50 .moqapics-popup-message,
.moqapics-ratio-50-50 .moqapics-popup-form {
    flex: 0 0 calc(50% - 10px);
}

/* =========================
   40 / 60
   ========================= */

.moqapics-ratio-40-60 .moqapics-popup-message {
    flex: 0 0 calc(40% - 10px);
}

.moqapics-ratio-40-60 .moqapics-popup-form {
    flex: 0 0 calc(60% - 10px);
}

/* =========================
   30 / 70
   ========================= */

.moqapics-ratio-30-70 .moqapics-popup-message {
    flex: 0 0 calc(30% - 10px);
}

.moqapics-ratio-30-70 .moqapics-popup-form {
    flex: 0 0 calc(70% - 10px);
}

/* =========================
   25 / 75
   ========================= */

.moqapics-ratio-25-75 .moqapics-popup-message {
    flex: 0 0 calc(25% - 10px);
}

.moqapics-ratio-25-75 .moqapics-popup-form {
    flex: 0 0 calc(75% - 10px);
}

/* =========================
   Form Top Layout
   ========================= */

.moqapics-layout-form-top .moqapics-popup-content-wrap {
    flex-direction: column;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 768px) {

    .moqapics-layout-two-column .moqapics-popup-content-wrap,
    .moqapics-layout-form-left .moqapics-popup-content-wrap {
        flex-direction: column;
    }

    .moqapics-ratio-50-50 .moqapics-popup-message,
    .moqapics-ratio-50-50 .moqapics-popup-form,
    .moqapics-ratio-40-60 .moqapics-popup-message,
    .moqapics-ratio-40-60 .moqapics-popup-form,
    .moqapics-ratio-30-70 .moqapics-popup-message,
    .moqapics-ratio-30-70 .moqapics-popup-form,
    .moqapics-ratio-25-75 .moqapics-popup-message,
    .moqapics-ratio-25-75 .moqapics-popup-form {
        flex: 1 1 100%;
        width: 100%;
    }

    .moqapics-popup-headline {
        font-size: 24px;
    }
}

@media (max-width: 880px) {
    .moqapics-popup {
        max-width: calc(100vw - 60px) !important;
    }
}

.moqapics-layout-form-left.moqapics-ratio-25-75 .moqapics-popup-form {
    flex: 0 0 calc(25% - 10px);
}

.moqapics-layout-form-left.moqapics-ratio-25-75 .moqapics-popup-message {
    flex: 0 0 calc(75% - 10px);
}