/**
 * PCM Popup System - Frontend Styles
 */

/* Recall tab - lets a visitor manually reopen a popup they've already
   seen/dismissed, matching the legacy site's #popup-recall affordance. */
#pcm-popup-recall {
    position: fixed;
    bottom: -60px;
    left: 20px;
    z-index: 999997;
    background-color: #b00d68;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
    opacity: 0;
    transform: rotate(-3deg);
    transition: bottom 0.2s ease-in, opacity 0.1s ease-in;
}

#pcm-popup-recall.pcm-popup-recall-ready {
    bottom: 0;
    opacity: 1;
}

/* Popup overlay */
.pcm-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pcm-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Legacy popups (1ktimer is ~850px) are taller than most laptop
       viewports. Centered flex content that overflows spills off BOTH edges
       where it can't be scrolled to, so let the wrapper scroll and center the
       popup with auto margins instead (see `> .popup` below) - those collapse
       to 0 on overflow, so the popup starts at the top and stays reachable. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pcm-popup-wrapper .pcm-popup-overlay {
    opacity: 1;
}

/* Legacy theme templates render their own `.popup` element rather than the
   plugin's `.pcm-popup-container` below, and it carries no z-index of its own.
   The overlay is a positioned sibling *with* an explicit z-index, so it painted
   on top of the popup - dimming the popup itself and the close button along with
   the page behind it. Lift the legacy content and the close control above the
   overlay so only the page behind them is darkened. */
.pcm-popup-wrapper > .popup {
    position: relative;
    z-index: 1000000;
    margin: auto;
}

/* Fixed, not absolute, so it stays on screen while a tall popup scrolls. */
.pcm-popup-wrapper > .pcm-popup-close {
    position: fixed;
    z-index: 1000001;
}

/* Popup container */
.pcm-popup-container {
    position: relative;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1000000;
    animation: pcmPopupSlideIn 0.3s ease;
}

@keyframes pcmPopupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Popup content */
.pcm-popup-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Close button */
.pcm-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
}

.pcm-popup-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Popup image */
.pcm-popup-image {
    width: 100%;
    overflow: hidden;
}

.pcm-popup-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Popup body */
.pcm-popup-body {
    padding: 30px;
}

.pcm-popup-body h2 {
    margin: 0 0 15px;
    font-size: 28px;
    font-weight: 700;
    color: #333;
}

.pcm-popup-text {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

.pcm-popup-text p {
    margin: 0 0 15px;
}

.pcm-popup-text p:last-child {
    margin-bottom: 0;
}

/* Form styles */
.pcm-popup-form {
    margin-top: 20px;
}

.pcm-popup-form .form-group {
    margin-bottom: 15px;
}

.pcm-popup-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.pcm-popup-form input[type="text"],
.pcm-popup-form input[type="email"],
.pcm-popup-form input[type="tel"],
.pcm-popup-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.pcm-popup-form input:focus,
.pcm-popup-form textarea:focus {
    outline: none;
    border-color: #0073aa;
}

.pcm-popup-form button[type="submit"] {
    width: 100%;
    padding: 15px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pcm-popup-form button[type="submit"]:hover {
    background: #005a87;
}

/* Body lock when popup active */
body.pcm-popup-active {
    overflow: hidden;
}

/* Responsive styles */
@media (max-width: 768px) {
    .pcm-popup-container {
        max-width: 100%;
        max-height: 100vh;
    }
    
    .pcm-popup-content {
        border-radius: 0;
    }
    
    .pcm-popup-body {
        padding: 20px;
    }
    
    .pcm-popup-body h2 {
        font-size: 24px;
    }
    
    .pcm-popup-close {
        width: 35px;
        height: 35px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .pcm-popup-body {
        padding: 15px;
    }
    
    .pcm-popup-body h2 {
        font-size: 20px;
    }
    
    .pcm-popup-text {
        font-size: 14px;
    }
    
    .pcm-popup-form button[type="submit"] {
        padding: 12px;
        font-size: 16px;
    }
}

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

/* Print styles */
@media print {
    .pcm-popup-wrapper {
        display: none !important;
    }
}