/**
 * WDSA Popup Handler Styles
 * 
 * @since 4.0.0
 * @since 5.4.0 Refactored for vanilla JS, improved responsive, removed duplicates
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    --wdsa-popup-z-index: 100000;
    --wdsa-popup-overlay-bg: rgba(0, 0, 0, 0.7);
    --wdsa-popup-bg: #fff;
    --wdsa-popup-border-radius: 8px;
    --wdsa-popup-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --wdsa-popup-header-bg: #fff;
    --wdsa-popup-footer-bg: #f7f7f7;
    --wdsa-popup-border-color: #ddd;
    --wdsa-popup-text-color: #23282d;
    --wdsa-popup-transition: 0.3s ease;
    --wdsa-popup-focus-color: #2271b1;
    --wdsa-admin-bar-height: 32px;
    --wdsa-admin-bar-height-mobile: 46px;
}

/* ==========================================================================
   Container & Base
   ========================================================================== */
#wdsa-popup-container {
    position: relative;
    z-index: calc(var(--wdsa-popup-z-index) - 1);
}

/* Body scroll lock when popup is open */
body.wdsa-popup-open {
    overflow: hidden;
}

/* Main popup wrapper */
.wdsa-popup {
    position: fixed;
    inset: 0;
    z-index: var(--wdsa-popup-z-index);
    display: none;
    opacity: 0;
    transition: opacity var(--wdsa-popup-transition);
}

.wdsa-popup.wdsa-popup-visible {
    opacity: 1;
}

/* ==========================================================================
   Overlay
   ========================================================================== */
.wdsa-popup-overlay {
    position: fixed;
    inset: 0;
    background: var(--wdsa-popup-overlay-bg);
    cursor: pointer;
    z-index: 1;
}

/* ==========================================================================
   Popup Content Container
   ========================================================================== */
.wdsa-popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--wdsa-popup-bg);
    border-radius: var(--wdsa-popup-border-radius);
    box-shadow: var(--wdsa-popup-shadow);
    display: flex;
    flex-direction: column;
    z-index: 2;
    max-height: min(90vh, 90dvh);
    width: clamp(300px, 90%, 800px);
    overflow: hidden;
    overscroll-behavior: contain;
    transition: transform var(--wdsa-popup-transition), 
                opacity var(--wdsa-popup-transition);
}

/* Slide-in animation on open */
.wdsa-popup:not(.wdsa-popup-visible) .wdsa-popup-content {
    transform: translate(-50%, -48%);
    opacity: 0;
}

.wdsa-popup.wdsa-popup-visible .wdsa-popup-content {
    transform: translate(-50%, -50%);
    opacity: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
.wdsa-popup-header {
    border-bottom: 1px solid var(--wdsa-popup-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    background: var(--wdsa-popup-header-bg);
    border-radius: var(--wdsa-popup-border-radius) var(--wdsa-popup-border-radius) 0 0;
    padding: 12px;
    min-height: 48px;
}

h2.wdsa-popup-title {
    margin: 0;
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 600;
    color: var(--wdsa-popup-text-color);
    line-height: 1.4;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

/* Header Actions */
.wdsa-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wdsa-popup-close,
.wdsa-popup-fullwidth-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: var(--wdsa-radius-full, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}

.wdsa-popup-close:hover,
.wdsa-popup-fullwidth-btn:hover {
    color: #000;
    background: #f0f0f0;
}

.wdsa-popup-close:focus,
.wdsa-popup-fullwidth-btn:focus {
    outline: 2px solid var(--wdsa-popup-focus-color);
    outline-offset: 2px;
}

.wdsa-popup-close .dashicons,
.wdsa-popup-fullwidth-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Body (Scrollable Content Area)
   ========================================================================== */
.wdsa-popup-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100px;
    overscroll-behavior: contain;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

.wdsa-popup-messages {
    margin-bottom: 16px;
}

.wdsa-popup-messages:empty {
    display: none;
}

.wdsa-popup-messages .notice {
    margin: 0 0 12px 0;
    transition: opacity 0.3s ease;
}

.wdsa-popup-content-area {
    position: relative;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.wdsa-popup-footer {
    border-top: 1px solid var(--wdsa-popup-border-color);
    background: var(--wdsa-popup-footer-bg);
    flex-shrink: 0;
    border-radius: 0 0 var(--wdsa-popup-border-radius) var(--wdsa-popup-border-radius);
    padding: 16px;
}

.wdsa-popup-footer:empty,
.wdsa-popup-buttons:empty {
    display: none;
}

.wdsa-popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */
.wdsa-popup-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    border-radius: var(--wdsa-popup-border-radius);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wdsa-popup-loading.active {
    opacity: 1;
    visibility: visible;
}

.wdsa-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: wdsaSpin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes wdsaSpin {
    to { transform: rotate(360deg); }
}

.wdsa-loading-text {
    color: #666;
    font-size: 14px;
}

/* ==========================================================================
   Template Editor Specific
   ========================================================================== */

/*
 * Contract: only the editor scrolls inside the template-edit popup. The popup
 * body is a non-scrolling flex column and each layer passes the available height
 * down via flex: 1 / min-height: 0, until Monaco clips and scrolls internally.
 */
.wdsa-template-edit-popup .wdsa-popup-body {
    padding: 0;
    overflow: hidden;          /* popup body does NOT scroll */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wdsa-template-edit-popup .wdsa-popup-messages {
    flex-shrink: 0;            /* notification bar stays at top, shrinks editor not body */
}

.wdsa-template-edit-popup .wdsa-popup-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.wdsa-template-edit-popup .wdsa-popup-content-area > form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.template-file-path {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    color: #666;
    background: #fafafa;
    border-bottom: 1px solid var(--wdsa-popup-border-color);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    overflow: hidden;
}

.template-file-path .path-label {
    flex-shrink: 0;
    font-weight: 500;
}

.template-file-path .path-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.template-editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/*
 * Inside the popup the editor fills the body and Monaco clips/scrolls internally.
 * The surface keeps its standalone height as the flex basis and grows from there:
 * Monaco's mount is height:100% of the surface, so an `auto` basis would make the
 * two size off each other and collapse to nothing.
 */
.wdsa-popup .wdsa-editor {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
    --wdsa-ed-min-height: 0;
    --wdsa-ed-max-height: none;
}

/* ==========================================================================
   Contact Form Popup
   ========================================================================== */
.wdsa-contact-popup .wdsa-popup-logo {
    max-width: 200px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
}

.wdsa-contact-popup .form-field {
    margin-bottom: 16px;
}

.wdsa-contact-popup .form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--wdsa-popup-text-color);
}

.wdsa-contact-popup .form-field input[type="text"],
.wdsa-contact-popup .form-field input[type="email"],
.wdsa-contact-popup .form-field select,
.wdsa-contact-popup .form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wdsa-popup-border-color);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 40px;
}

.wdsa-contact-popup .form-field input:focus,
.wdsa-contact-popup .form-field select:focus,
.wdsa-contact-popup .form-field textarea:focus {
    border-color: var(--wdsa-popup-focus-color);
    outline: none;
    box-shadow: 0 0 0 1px var(--wdsa-popup-focus-color);
}

.wdsa-contact-popup textarea {
    min-height: 120px;
    resize: vertical;
}

/* Attachment Controls */
.attachment-controls {
    background: var(--wdsa-popup-footer-bg);
    padding: 16px;
    border-radius: 4px;
}

.attachment-options {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.attachment-or {
    color: #666;
    font-weight: 500;
}

.paste-area {
    flex: 1;
    min-width: 150px;
    border: 2px dashed var(--wdsa-popup-border-color);
    padding: 12px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background: var(--wdsa-popup-bg);
}

.paste-area:hover {
    border-color: var(--wdsa-popup-focus-color);
    background: #f0f8ff;
}

.paste-area:focus {
    outline: 2px solid var(--wdsa-popup-focus-color);
    outline-offset: 2px;
}

.paste-area::before {
    content: attr(data-placeholder);
    color: #999;
    font-size: 13px;
}

.attachment-counter {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    width: 100%;
}

.preview-area {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   WordPress Admin Compatibility
   ========================================================================== */
.wp-admin .wdsa-popup select {
    max-width: 100%;
}

.wp-admin .wdsa-popup-content button:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wdsa-popup-focus-color);
}

/* ==========================================================================
   Fullwidth Mode
   ========================================================================== */
.wdsa-popup.wdsa-popup-fullwidth .wdsa-popup-content {
    position: fixed;
    top: var(--wdsa-admin-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--wdsa-admin-bar-height));
    height: calc(100dvh - var(--wdsa-admin-bar-height));
    max-height: none;
    transform: none;
    border-radius: 0;
    margin: 0;
}

body:not(.admin-bar) .wdsa-popup.wdsa-popup-fullwidth .wdsa-popup-content {
    top: 0;
    height: 100vh;
    height: 100dvh;
}

.wdsa-popup.wdsa-popup-fullwidth .wdsa-popup-header {
    border-radius: 0;
    background: linear-gradient(to bottom, #fff, #f9f9f9);
}

.wdsa-popup.wdsa-popup-fullwidth .wdsa-popup-body {
    max-height: none;
    flex: 1;
    overflow: hidden;          /* keep single-scroll contract in fullwidth too */
}

.wdsa-popup.wdsa-popup-fullwidth .wdsa-popup-footer {
    border-radius: 0;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Fullwidth: editor fills entire body — single unified rule, no calc fighting flex */
.wdsa-popup.wdsa-popup-fullwidth .template-editor-wrapper {
    flex: 1;
    min-height: 0;
}


/* ==========================================================================
   Responsive: Small Mobile (<480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    
    .wdsa-popup-header,
    .wdsa-popup-footer {
        border-radius: 0;
    }
    
    .wdsa-popup-body {
        padding: 16px;
    }
    
    .wdsa-popup-buttons {
        flex-direction: column;
    }
    
    .wdsa-popup-buttons button {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
}

/* ==========================================================================
   Responsive: Mobile (<782px) - WordPress mobile breakpoint
   ========================================================================== */
@media screen and (max-width: 782px) {
    :root {
        --wdsa-admin-bar-height: var(--wdsa-admin-bar-height-mobile);
    }
    
    .wdsa-popup-close,
    .wdsa-popup-fullwidth-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .wdsa-popup-close .dashicons,
    .wdsa-popup-fullwidth-btn .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
    
    .wdsa-popup-buttons button {
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Prevent iOS zoom on input focus */
    .wdsa-contact-popup .form-field input[type="text"],
    .wdsa-contact-popup .form-field input[type="email"],
    .wdsa-contact-popup .form-field select,
    .wdsa-contact-popup .form-field textarea {
        font-size: 16px;
        min-height: 44px;
    }
    
    .attachment-options {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Fullwidth adjustments for mobile admin bar */
    .wdsa-popup.wdsa-popup-fullwidth .wdsa-popup-content {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Consent popup mobile optimization */
    .wdsa-consent-popup-content .wdsa-popup-footer {
        position: sticky;
        bottom: 0;
        background: var(--wdsa-popup-bg);
        z-index: 10;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }
}

/* ==========================================================================
   Responsive: Tablet Portrait (600px - 782px)
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 782px) {
    .wdsa-popup-content {
        width: 90%;
        max-width: 600px;
    }
}

/* ==========================================================================
   Responsive: Tablet Landscape / Small Desktop (782px - 1024px)
   ========================================================================== */
@media screen and (min-width: 782px) and (max-width: 1024px) {
    .wdsa-popup-content {
        width: 85%;
        max-width: 700px;
    }
}

/* ==========================================================================
   Responsive: Large Desktop (>1200px)
   ========================================================================== */
@media screen and (min-width: 1200px) {
    .wdsa-popup-content {
        max-width: 900px;
    }
    /* No fixed height override here — flex layout handles editor sizing */
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wdsa-popup,
    .wdsa-popup-content,
    .wdsa-popup-close,
    .wdsa-popup-fullwidth-btn,
    .wdsa-popup-loading,
    .wdsa-contact-popup input,
    .wdsa-contact-popup select,
    .wdsa-contact-popup textarea,
    .paste-area,
    .wdsa-popup-messages .notice {
        transition: none;
    }
    
    .wdsa-spinner {
        animation: none;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */
@media (prefers-contrast: high) {
    .wdsa-popup-content {
        border: 2px solid #000;
    }
    
    .wdsa-popup-header,
    .wdsa-popup-footer {
        border-color: #000;
    }
    
    .wdsa-popup-close:focus,
    .wdsa-popup-fullwidth-btn:focus {
        outline-width: 3px;
    }
}