/**
 * Modal Popup Manager - Frontend Styles
 * Version: 1.3.0
 */

/* Modal Overlay */
.mpm-modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    animation: none !important;
    /* transition set inline per modal */
}

.mpm-modal-overlay.mpm-active {
    display: flex !important;
}

.mpm-modal-overlay.mpm-visible {
    /* opacity set to 1 via inline style per modal */
}

/* Modal Container */
.mpm-modal-container {
    position: relative !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
    /* transition set inline per modal */
}

/* Position Variations */
.mpm-position-center {
    justify-content: center;
    align-items: center;
}

.mpm-position-top {
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
}

.mpm-position-bottom {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 50px;
}

.mpm-position-top-left {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 50px;
}

.mpm-position-top-right {
    justify-content: flex-end;
    align-items: flex-start;
    padding: 50px;
}

.mpm-position-bottom-left {
    justify-content: flex-start;
    align-items: flex-end;
    padding: 50px;
}

.mpm-position-bottom-right {
    justify-content: flex-end;
    align-items: flex-end;
    padding: 50px;
}

/* Animation: Fade & Scale */
.mpm-animation-fade-scale .mpm-modal-container {
    transform: scale(0.7) !important;
}

.mpm-animation-fade-scale.mpm-visible .mpm-modal-container {
    transform: scale(1) !important;
}

/* Animation: Fade Only */
.mpm-animation-fade .mpm-modal-container {
    transform: scale(1) !important;
}

/* Animation: Slide Down */
.mpm-animation-slide-down .mpm-modal-container {
    transform: translateY(-100px) !important;
}

.mpm-animation-slide-down.mpm-visible .mpm-modal-container {
    transform: translateY(0) !important;
}

/* Animation: Slide Up */
.mpm-animation-slide-up .mpm-modal-container {
    transform: translateY(100px) !important;
}

.mpm-animation-slide-up.mpm-visible .mpm-modal-container {
    transform: translateY(0) !important;
}

/* Animation: Slide Left */
.mpm-animation-slide-left .mpm-modal-container {
    transform: translateX(-100px) !important;
}

.mpm-animation-slide-left.mpm-visible .mpm-modal-container {
    transform: translateX(0) !important;
}

/* Animation: Slide Right */
.mpm-animation-slide-right .mpm-modal-container {
    transform: translateX(100px) !important;
}

.mpm-animation-slide-right.mpm-visible .mpm-modal-container {
    transform: translateX(0) !important;
}

/* Close Button Base */
.mpm-close {
    position: absolute;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    z-index: 10;
}

/* Close Button: Default */
.mpm-close-default {
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    color: #666;
}

.mpm-close-default:hover {
    color: #000;
    transform: rotate(90deg);
}

/* Close Button: Circle */
.mpm-close-circle {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpm-close-circle:hover {
    background-color: rgba(0, 0, 0, 0.2);
    transform: rotate(90deg);
}

/* Close Button: Minimal */
.mpm-close-minimal {
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    font-size: 24px;
    color: #999;
}

.mpm-close-minimal:hover {
    color: #333;
}

/* Close Button: Hidden */
.mpm-close-hidden {
    display: none;
}

/* Modal Content */
.mpm-modal-content {
    position: relative;
}

.mpm-modal-content h1,
.mpm-modal-content h2,
.mpm-modal-content h3,
.mpm-modal-content h4,
.mpm-modal-content h5,
.mpm-modal-content h6 {
    margin-top: 0;
}

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

/* Trigger Button */
.mpm-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.mpm-trigger:hover {
    background-color: #005177;
}

/* Device-Specific Display Controls */

/* ============================================
   DESKTOP ONLY (1025px and up)
   Show: Desktop
   Hide: Tablet (768-1024px) and Mobile (0-767px)
   ============================================ */
@media screen and (max-width: 1024px) {
    body .mpm-device-desktop-only {
        display: none !important;
    }
}

/* ============================================
   TABLET & UP (768px and up)
   Show: Tablet + Desktop
   Hide: Mobile (0-767px)
   ============================================ */
@media screen and (max-width: 767px) {
    body .mpm-device-tablet-up {
        display: none !important;
    }
}

/* ============================================
   TABLET ONLY (768px to 1024px)
   Show: Tablet only
   Hide: Mobile (0-767px) and Desktop (1025px+)
   ============================================ */
@media screen and (max-width: 767px) {
    body .mpm-device-tablet-only {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    body .mpm-device-tablet-only {
        display: none !important;
    }
}

/* ============================================
   MOBILE ONLY (0 to 767px)
   Show: Mobile only
   Hide: Tablet (768-1024px) and Desktop (1025px+)
   ============================================ */
@media screen and (min-width: 768px) {
    body .mpm-device-mobile-only {
        display: none !important;
    }
}

/* ============================================
   MOBILE & TABLET (0 to 1024px)
   Show: Mobile + Tablet
   Hide: Desktop (1025px+)
   ============================================ */
@media screen and (min-width: 1025px) {
    body .mpm-device-mobile-tablet {
        display: none !important;
    }
}

/* Mobile Responsive Adjustments */
@media screen and (max-width: 768px) {
    .mpm-modal-container {
        width: 95% !important;
        max-height: 95vh !important;
    }
    
    .mpm-position-top-left,
    .mpm-position-top-right,
    .mpm-position-bottom-left,
    .mpm-position-bottom-right,
    .mpm-position-top,
    .mpm-position-bottom {
        padding: 20px !important;
    }
}

/* Scrollbar Styling for Modal Content */
.mpm-modal-container::-webkit-scrollbar {
    width: 8px;
}

.mpm-modal-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.mpm-modal-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.mpm-modal-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Prevent Body Scroll When Modal is Open */
body.mpm-modal-open {
    overflow: hidden;
}

/* Accessibility */
.mpm-close:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Loading State */
.mpm-modal-overlay.mpm-loading .mpm-modal-container {
    opacity: 0.5;
    pointer-events: none;
}