/* ============================================
   Popup SDK - Frontend CSS
   ============================================ */

.psdk-wrapper .popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
    z-index: 99999;
}
.psdk-wrapper .popup-container.popup-center {
    background: #fff; border-radius: 12px; max-width: 480px; width: 90%;
    position: relative; overflow: hidden;
}
.psdk-wrapper .popup-container.popup-fullscreen,
.psdk-wrapper .popup-overlay.popup-fullscreen {
    max-width: 100vw; width: 100vw; height: 100vh; border-radius: 0;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.psdk-wrapper .popup-overlay.popup-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999;
}
.psdk-wrapper .popup-slidein {
    position: fixed; bottom: 20px; right: 20px; z-index: 99999;
}
.psdk-wrapper .popup-slidein.popup-slidein-top-left { top: 20px; bottom: auto; left: 20px; right: auto; }
.psdk-wrapper .popup-slidein.popup-slidein-top-right { top: 20px; bottom: auto; right: 20px; left: auto; }
.psdk-wrapper .popup-slidein.popup-slidein-bottom-left { bottom: 20px; left: 20px; right: auto; }
.psdk-wrapper .popup-slidein.popup-slidein-bottom-right { bottom: 20px; right: 20px; left: auto; }
.psdk-wrapper .popup-container.popup-slide-right {
    background: #fff; border-radius: 8px; width: 340px; position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15); overflow: hidden;
}
.psdk-wrapper .popup-stickybar {
    position: fixed; left: 0; right: 0; z-index: 99998;
}
.psdk-wrapper .popup-stickybar.popup-top { top: 0; }
.psdk-wrapper .popup-stickybar.popup-bottom { bottom: 0; }
.psdk-wrapper .popup-container.popup-bar {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: 0.75rem 1.5rem; position: relative;
}
.psdk-wrapper .popup-close {
    position: absolute; top: 8px; right: 12px; background: none; border: none;
    font-size: 1.5rem; color: #999; cursor: pointer; line-height: 1; z-index: 1;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.2s;
}
.psdk-wrapper .popup-close:hover { color: #333; background: rgba(0,0,0,0.05); }
.psdk-wrapper .popup-close-bar { position: static; font-size: 1.2rem; width: auto; height: auto; }
.psdk-wrapper .popup-image img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.psdk-wrapper .popup-image-full { margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); overflow: hidden; }
.psdk-wrapper .popup-image-full:first-child { margin-top: -1.5rem; }
.psdk-wrapper .popup-image-full:last-child { margin-bottom: -1.5rem; }
.psdk-wrapper .popup-image-full img { max-height: none; border-radius: 0; width: 100%; }
.psdk-wrapper .popup-split-image.popup-image-full { padding: 0 !important; margin: 0 !important; width: auto; }
.psdk-wrapper .popup-split-image.popup-image-full img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important; box-shadow: none !important; display: block; }
.psdk-wrapper .popup-content { padding: 1.5rem; overflow: visible; }
.psdk-wrapper .popup-title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; }
.psdk-wrapper .popup-subtitle { margin: 0 0 0.75rem; color: #6c757d; font-size: 0.95rem; }
.psdk-wrapper .popup-body { margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.5; }
.psdk-wrapper .popup-btn {
    display: inline-block; padding: 0.625rem 1.5rem; background: #435ebe;
    color: #fff; border: none; border-radius: 6px; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; text-decoration: none; text-align: center; transition: all 0.2s;
}
.psdk-wrapper .popup-btn:hover { opacity: 0.9; }

/* Form */
.psdk-wrapper .popup-embedded-form { margin-top: 1rem; }
.psdk-wrapper .popup-embedded-form .popup-form-field { margin-bottom: 0.75rem; }
.psdk-wrapper .popup-embedded-form label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; font-weight: 500; }
.psdk-wrapper .popup-embedded-form input,
.psdk-wrapper .popup-embedded-form select,
.psdk-wrapper .popup-embedded-form textarea {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #dee2e6; border-radius: 6px;
    font-size: 0.9rem; box-sizing: border-box; transition: border-color 0.2s;
}
.psdk-wrapper .popup-embedded-form input:focus,
.psdk-wrapper .popup-embedded-form select:focus,
.psdk-wrapper .popup-embedded-form textarea:focus { border-color: #435ebe; outline: none; }

/* Success message */
.psdk-wrapper .popup-success {
    display: none; text-align: center; padding: 2rem;
}
.psdk-wrapper .popup-success.psdk-show { display: block; }
.psdk-wrapper .popup-success-icon { font-size: 3rem; color: #00b894; margin-bottom: 0.75rem; }

/* Countdown */
.psdk-wrapper .popup-countdown {
    display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1rem;
}

/* Coupon */
.psdk-wrapper .popup-coupon {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem;
}
.psdk-wrapper .popup-copy-coupon {
    background: none; border: 1px solid #dee2e6; border-radius: 4px;
    padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.8rem;
}

/* ============================================
   Animation system
   ============================================ */
.psdk-wrapper { --psdk-anim-speed: 300ms; }

/* Fade */
.psdk-anim-fade .popup-overlay,
.psdk-anim-fade .popup-slidein,
.psdk-anim-fade .popup-stickybar { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-fade.psdk-visible .popup-overlay,
.psdk-anim-fade.psdk-visible .popup-slidein,
.psdk-anim-fade.psdk-visible .popup-stickybar { opacity: 1; }
.psdk-anim-fade.psdk-closing .popup-overlay,
.psdk-anim-fade.psdk-closing .popup-slidein,
.psdk-anim-fade.psdk-closing .popup-stickybar { opacity: 0; }

/* Scale */
.psdk-anim-scale .popup-container { transform: scale(0.5); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-scale .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-scale.psdk-visible .popup-container { transform: scale(1); opacity: 1; }
.psdk-anim-scale.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-scale.psdk-closing .popup-container { transform: scale(0.5); opacity: 0; }
.psdk-anim-scale.psdk-closing .popup-overlay { opacity: 0; }

/* Slide Up */
.psdk-anim-slide-up .popup-container { transform: translateY(60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-up .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-up .popup-slidein { transform: translateY(60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-up .popup-stickybar { transform: translateY(100%); transition: transform var(--psdk-anim-speed) ease; }
.psdk-anim-slide-up.psdk-visible .popup-container,
.psdk-anim-slide-up.psdk-visible .popup-slidein { transform: translateY(0); opacity: 1; }
.psdk-anim-slide-up.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-slide-up.psdk-visible .popup-stickybar { transform: translateY(0); }
.psdk-anim-slide-up.psdk-closing .popup-container,
.psdk-anim-slide-up.psdk-closing .popup-slidein { transform: translateY(60px); opacity: 0; }
.psdk-anim-slide-up.psdk-closing .popup-overlay { opacity: 0; }
.psdk-anim-slide-up.psdk-closing .popup-stickybar { transform: translateY(100%); }

/* Slide Down */
.psdk-anim-slide-down .popup-container { transform: translateY(-60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-down .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-down .popup-slidein { transform: translateY(-60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-down .popup-stickybar { transform: translateY(-100%); transition: transform var(--psdk-anim-speed) ease; }
.psdk-anim-slide-down.psdk-visible .popup-container,
.psdk-anim-slide-down.psdk-visible .popup-slidein { transform: translateY(0); opacity: 1; }
.psdk-anim-slide-down.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-slide-down.psdk-visible .popup-stickybar { transform: translateY(0); }
.psdk-anim-slide-down.psdk-closing .popup-container,
.psdk-anim-slide-down.psdk-closing .popup-slidein { transform: translateY(-60px); opacity: 0; }
.psdk-anim-slide-down.psdk-closing .popup-overlay { opacity: 0; }
.psdk-anim-slide-down.psdk-closing .popup-stickybar { transform: translateY(-100%); }

/* Slide Left */
.psdk-anim-slide-left .popup-container { transform: translateX(-60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-left .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-left .popup-slidein { transform: translateX(-60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-left.psdk-visible .popup-container,
.psdk-anim-slide-left.psdk-visible .popup-slidein { transform: translateX(0); opacity: 1; }
.psdk-anim-slide-left.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-slide-left.psdk-closing .popup-container,
.psdk-anim-slide-left.psdk-closing .popup-slidein { transform: translateX(-60px); opacity: 0; }
.psdk-anim-slide-left.psdk-closing .popup-overlay { opacity: 0; }

/* Slide Right */
.psdk-anim-slide-right .popup-container { transform: translateX(60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-right .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-right .popup-slidein { transform: translateX(60px); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity var(--psdk-anim-speed) ease; }
.psdk-anim-slide-right.psdk-visible .popup-container,
.psdk-anim-slide-right.psdk-visible .popup-slidein { transform: translateX(0); opacity: 1; }
.psdk-anim-slide-right.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-slide-right.psdk-closing .popup-container,
.psdk-anim-slide-right.psdk-closing .popup-slidein { transform: translateX(60px); opacity: 0; }
.psdk-anim-slide-right.psdk-closing .popup-overlay { opacity: 0; }

/* Bounce */
.psdk-anim-bounce .popup-container { transform: scale(0.3); opacity: 0; transition: transform var(--psdk-anim-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity calc(var(--psdk-anim-speed) * 0.5) ease; }
.psdk-anim-bounce .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-bounce .popup-slidein { transform: scale(0.3); opacity: 0; transition: transform var(--psdk-anim-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity calc(var(--psdk-anim-speed) * 0.5) ease; }
.psdk-anim-bounce.psdk-visible .popup-container,
.psdk-anim-bounce.psdk-visible .popup-slidein { transform: scale(1); opacity: 1; }
.psdk-anim-bounce.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-bounce.psdk-closing .popup-container,
.psdk-anim-bounce.psdk-closing .popup-slidein { transform: scale(0.3); opacity: 0; }
.psdk-anim-bounce.psdk-closing .popup-overlay { opacity: 0; }

/* Flip */
.psdk-anim-flip .popup-container { transform: perspective(600px) rotateX(90deg); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity calc(var(--psdk-anim-speed) * 0.5) ease; }
.psdk-anim-flip .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-flip .popup-slidein { transform: perspective(600px) rotateX(90deg); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity calc(var(--psdk-anim-speed) * 0.5) ease; }
.psdk-anim-flip.psdk-visible .popup-container,
.psdk-anim-flip.psdk-visible .popup-slidein { transform: perspective(600px) rotateX(0deg); opacity: 1; }
.psdk-anim-flip.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-flip.psdk-closing .popup-container,
.psdk-anim-flip.psdk-closing .popup-slidein { transform: perspective(600px) rotateX(90deg); opacity: 0; }
.psdk-anim-flip.psdk-closing .popup-overlay { opacity: 0; }

/* Rotate */
.psdk-anim-rotate .popup-container { transform: rotate(-180deg) scale(0.5); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity calc(var(--psdk-anim-speed) * 0.5) ease; }
.psdk-anim-rotate .popup-overlay { opacity: 0; transition: opacity var(--psdk-anim-speed) ease; }
.psdk-anim-rotate .popup-slidein { transform: rotate(-180deg) scale(0.5); opacity: 0; transition: transform var(--psdk-anim-speed) ease, opacity calc(var(--psdk-anim-speed) * 0.5) ease; }
.psdk-anim-rotate.psdk-visible .popup-container,
.psdk-anim-rotate.psdk-visible .popup-slidein { transform: rotate(0deg) scale(1); opacity: 1; }
.psdk-anim-rotate.psdk-visible .popup-overlay { opacity: 1; }
.psdk-anim-rotate.psdk-closing .popup-container,
.psdk-anim-rotate.psdk-closing .popup-slidein { transform: rotate(180deg) scale(0.5); opacity: 0; }
.psdk-anim-rotate.psdk-closing .popup-overlay { opacity: 0; }

/* None */
.psdk-anim-none .popup-overlay,
.psdk-anim-none .popup-slidein,
.psdk-anim-none .popup-stickybar,
.psdk-anim-none .popup-container { transition: none !important; }
.psdk-anim-none.psdk-visible .popup-overlay { opacity: 1; }

/* Responsive */
@media (max-width: 576px) {
    .psdk-wrapper .popup-container.popup-center { width: 95%; max-width: none; }
    .psdk-wrapper .popup-container.popup-slide-right { width: calc(100vw - 40px); }
    .psdk-wrapper .popup-layout-split { flex-direction: column !important; }
    .psdk-wrapper .popup-layout-split .popup-split-image { flex: 0 0 auto !important; max-height: 180px; }
    .psdk-wrapper .popup-container.popup-bar { flex-wrap: wrap; padding: 0.5rem 1rem; }
}