/**
 * VITIKS Popup Builder - Frontend Popup Styles
 *
 * @package Vitiks\PopupBuilder
 * @since 1.4.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    --vitiks-popup-z-index: 999999;
    --vitiks-popup-overlay-color: rgba(0, 0, 0, 0.5);
    --vitiks-popup-bg: #fff;
    --vitiks-popup-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --vitiks-popup-close-size: 32px;
    --vitiks-popup-close-color: #666;
    --vitiks-popup-close-hover: #333;
    --vitiks-popup-animation-duration: 300ms;
    --vitiks-popup-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Popup Structure
   ========================================================================== */

.vitiks-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--vitiks-popup-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity var(--vitiks-popup-animation-duration) var(--vitiks-popup-animation-easing);
}

.vitiks-popup--hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.vitiks-popup--hidden .vitiks-popup__container {
    transform: scale(0.9);
}

/* ==========================================================================
   Overlay
   ========================================================================== */

.vitiks-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--vitiks-popup-overlay-color);
    opacity: 0;
    transition: opacity var(--vitiks-popup-animation-duration) var(--vitiks-popup-animation-easing);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-popup__overlay {
    opacity: 1;
}

.vitiks-popup__overlay--clickable {
    cursor: pointer;
}

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

.vitiks-popup__container {
    position: relative;
    max-height: 90vh;
    overflow: auto;
    transition: transform var(--vitiks-popup-animation-duration) var(--vitiks-popup-animation-easing);
    /* Background is handled by Elementor content */
}

.vitiks-popup__content {
    position: relative;
}

/*
 * Elementor Content Styling
 * Let Elementor handle all visual styling (background, border-radius, shadows)
 * The popup container is just a wrapper for positioning
 */
.vitiks-popup__content > .elementor {
    border-radius: inherit;
    overflow: hidden;
}

/* Apply default background only to the Elementor section if no custom background is set */
.vitiks-popup__content .elementor-section-wrap > .elementor-section:first-child,
.vitiks-popup__content .elementor > .e-con:first-child,
.vitiks-popup__content .elementor > .elementor-section:first-child {
    /* Default white background - Elementor will override this if user sets a custom background */
    background-color: var(--vitiks-popup-bg);
    box-shadow: var(--vitiks-popup-shadow);
}

/* ==========================================================================
   Close Button
   ========================================================================== */

.vitiks-popup__close {
    position: absolute;
    width: var(--vitiks-popup-close-size);
    height: var(--vitiks-popup-close-size);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--vitiks-popup-close-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.vitiks-popup__close:hover {
    color: var(--vitiks-popup-close-hover);
    transform: scale(1.1);
}

.vitiks-popup__close:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.vitiks-popup__close svg {
    width: 20px;
    height: 20px;
}

/* Close button positions */
.vitiks-popup__close--inside {
    top: 10px;
    right: 10px;
}

.vitiks-popup__close--outside {
    top: -40px;
    right: 0;
    color: #fff;
}

.vitiks-popup__close--outside:hover {
    color: #fff;
}

/* ==========================================================================
   Layout: Classic (Centered Modal)
   ========================================================================== */

.vitiks-popup--classic {
    padding: 20px;
}

.vitiks-popup--classic .vitiks-popup__container {
    border-radius: 8px;
}

.vitiks-popup--classic .vitiks-popup__content .elementor-section-wrap > .elementor-section:first-child,
.vitiks-popup--classic .vitiks-popup__content .elementor > .e-con:first-child,
.vitiks-popup--classic .vitiks-popup__content .elementor > .elementor-section:first-child {
    border-radius: 8px;
}

/* ==========================================================================
   Layout: Slide In
   ========================================================================== */

.vitiks-popup--slide_in {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
}

.vitiks-popup--slide_in.vitiks-popup--position-left {
    justify-content: flex-start;
}

.vitiks-popup--slide_in.vitiks-popup--position-top-left {
    align-items: flex-start;
    justify-content: flex-start;
}

.vitiks-popup--slide_in.vitiks-popup--position-top-right {
    align-items: flex-start;
    justify-content: flex-end;
}

.vitiks-popup--slide_in.vitiks-popup--position-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
}

.vitiks-popup--slide_in .vitiks-popup__container {
    border-radius: 8px;
}

.vitiks-popup--slide_in .vitiks-popup__content .elementor-section-wrap > .elementor-section:first-child,
.vitiks-popup--slide_in .vitiks-popup__content .elementor > .e-con:first-child,
.vitiks-popup--slide_in .vitiks-popup__content .elementor > .elementor-section:first-child {
    border-radius: 8px;
}

/* ==========================================================================
   Layout: Bar (Top/Bottom)
   ========================================================================== */

.vitiks-popup--bar {
    padding: 0;
}

.vitiks-popup--bar.vitiks-popup--position-top {
    align-items: flex-start;
}

.vitiks-popup--bar.vitiks-popup--position-bottom {
    align-items: flex-end;
}

.vitiks-popup--bar .vitiks-popup__container {
    width: 100%;
    max-width: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.vitiks-popup--bar .vitiks-popup__close--inside {
    top: 50%;
    transform: translateY(-50%);
}

.vitiks-popup--bar .vitiks-popup__close--inside:hover {
    transform: translateY(-50%) scale(1.1);
}

/* ==========================================================================
   Layout: Bordering
   ========================================================================== */

.vitiks-popup--bordering {
    padding: 0;
}

.vitiks-popup--bordering.vitiks-popup--position-left {
    justify-content: flex-start;
}

.vitiks-popup--bordering.vitiks-popup--position-right {
    justify-content: flex-end;
}

.vitiks-popup--bordering .vitiks-popup__container {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}

/* ==========================================================================
   Layout: Full View (Fullscreen)
   ========================================================================== */

.vitiks-popup--full_view {
    padding: 0;
}

.vitiks-popup--full_view .vitiks-popup__container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
}

.vitiks-popup--full_view .vitiks-popup__close--inside {
    top: 20px;
    right: 20px;
}

/* ==========================================================================
   Position Variants
   ========================================================================== */

.vitiks-popup--position-center {
    align-items: center;
    justify-content: center;
}

.vitiks-popup--position-top {
    align-items: flex-start;
    justify-content: center;
}

.vitiks-popup--position-bottom {
    align-items: flex-end;
    justify-content: center;
}

.vitiks-popup--position-left {
    align-items: center;
    justify-content: flex-start;
}

.vitiks-popup--position-right {
    align-items: center;
    justify-content: flex-end;
}

.vitiks-popup--position-top-left {
    align-items: flex-start;
    justify-content: flex-start;
}

.vitiks-popup--position-top-right {
    align-items: flex-start;
    justify-content: flex-end;
}

.vitiks-popup--position-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
}

.vitiks-popup--position-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
}

/* ==========================================================================
   Animations - Entrance
   ========================================================================== */

/* Fade */
.vitiks-anim-fade {
    opacity: 0;
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-fade {
    opacity: 1;
}

/* Zoom In */
.vitiks-anim-zoom_in {
    opacity: 0;
    transform: scale(0.8);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-zoom_in {
    opacity: 1;
    transform: scale(1);
}

/* Zoom Out */
.vitiks-anim-zoom_out {
    opacity: 0;
    transform: scale(1.2);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-zoom_out {
    opacity: 1;
    transform: scale(1);
}

/* Slide Up */
.vitiks-anim-slide_up {
    opacity: 0;
    transform: translateY(50px);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-slide_up {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Down */
.vitiks-anim-slide_down {
    opacity: 0;
    transform: translateY(-50px);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-slide_down {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left */
.vitiks-anim-slide_left {
    opacity: 0;
    transform: translateX(50px);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-slide_left {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right */
.vitiks-anim-slide_right {
    opacity: 0;
    transform: translateX(-50px);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-slide_right {
    opacity: 1;
    transform: translateX(0);
}

/* Bounce In */
.vitiks-anim-bounce_in {
    opacity: 0;
    transform: scale(0.3);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-bounce_in {
    opacity: 1;
    transform: scale(1);
    animation: vitiks-bounce-in var(--vitiks-popup-animation-duration) forwards;
}

@keyframes vitiks-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip */
.vitiks-anim-flip {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-flip {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
}

/* Rotate */
.vitiks-anim-rotate {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-rotate {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Move Up (from bottom of screen) */
.vitiks-anim-move_up {
    opacity: 0;
    transform: translateY(100vh);
}

.vitiks-popup:not(.vitiks-popup--hidden) .vitiks-anim-move_up {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Scroll Lock
   ========================================================================== */

body.vitiks-popup-scroll-locked {
    overflow: hidden !important;
    padding-right: var(--vitiks-scrollbar-width, 0);
}

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

@media screen and (max-width: 768px) {
    .vitiks-popup {
        padding: 10px;
    }

    .vitiks-popup__container {
        max-width: calc(100% - 20px) !important;
    }

    .vitiks-popup--bar .vitiks-popup__container {
        max-width: 100% !important;
    }

    .vitiks-popup--full_view .vitiks-popup__container {
        max-width: 100% !important;
    }

    .vitiks-popup__close--outside {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 5px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .vitiks-popup,
    .vitiks-popup__container,
    .vitiks-popup__overlay,
    .vitiks-popup__close {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .vitiks-popup__container {
        border: 2px solid currentColor;
    }

    .vitiks-popup__close {
        border: 1px solid currentColor;
    }
}

/* Focus visible for keyboard navigation */
.vitiks-popup__close:focus-visible {
    outline: 3px solid #0073aa;
    outline-offset: 3px;
}