/* ============================================================
   CPB Frontend — Popup Overlay & Content
   ============================================================ */

/* ---- Overlay ---- */
.cpb-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, .6);
    display: none; /* toggled by JS */
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ---- Position variants ---- */
.cpb-overlay[data-pos="top-left"]      { align-items: flex-start; justify-content: flex-start; }
.cpb-overlay[data-pos="top-center"]    { align-items: flex-start; justify-content: center; }
.cpb-overlay[data-pos="top-right"]     { align-items: flex-start; justify-content: flex-end; }
.cpb-overlay[data-pos="middle-left"]   { align-items: center;     justify-content: flex-start; }
.cpb-overlay[data-pos="center"]        { align-items: center;     justify-content: center; }
.cpb-overlay[data-pos="middle-right"]  { align-items: center;     justify-content: flex-end; }
.cpb-overlay[data-pos="bottom-left"]   { align-items: flex-end;   justify-content: flex-start; }
.cpb-overlay[data-pos="bottom-center"] { align-items: flex-end;   justify-content: center; }
.cpb-overlay[data-pos="bottom-right"]  { align-items: flex-end;   justify-content: flex-end; }

/* ---- Popup container ---- */
.cpb-popup {
    position: relative;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
    /* Inline styles from PHP set: max-width, bg, padding, border-radius, box-shadow */
}

/* ---- Close button ---- */
.cpb-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    opacity: .7;
    transition: opacity .15s;
}
.cpb-close:hover { opacity: 1; }

/* ---- Content wrapper ---- */
.cpb-popup-content {
    /* fields flow vertically */
}

/* ---- Fields ---- */
.cpb-field-title,
.cpb-field-text,
.cpb-field-image,
.cpb-field-button {
    /* margin-bottom set via inline style per field */
}
.cpb-field-title { line-height: 1.1; padding: 0}
.cpb-field-text  { line-height: 1.5; }
.cpb-field-text {
    p, a, ul li { font-size: inherit; }
}

.cpb-field-image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.cpb-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s;
}
.cpb-btn:hover { filter: brightness(1.2); }

/* ============================================================
   Animations
   ============================================================ */

/* --- Fade --- */
.cpb-anim-fade .cpb-popup {
    opacity: 0;
}
.cpb-anim-fade .cpb-popup.cpb-visible {
    opacity: 1;
}

/* --- Slide Up --- */
.cpb-anim-slide-up .cpb-popup {
    opacity: 0;
    transform: translateY(30px);
}
.cpb-anim-slide-up .cpb-popup.cpb-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Slide Down --- */
.cpb-anim-slide-down .cpb-popup {
    opacity: 0;
    transform: translateY(-30px);
}
.cpb-anim-slide-down .cpb-popup.cpb-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Scale --- */
.cpb-anim-scale .cpb-popup {
    opacity: 0;
    transform: scale(.85);
}
.cpb-anim-scale .cpb-popup.cpb-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- Bounce --- */
.cpb-anim-bounce .cpb-popup {
    opacity: 0;
    transform: scale(.75);
}
.cpb-anim-bounce .cpb-popup.cpb-visible {
    opacity: 1;
    transform: scale(1);
    animation: cpb-bounce .45s cubic-bezier(.36,.07,.19,.97) both;
}

.cpb-field-text {
    p, a, ul li { font-size: inherit; }
}

@keyframes cpb-bounce {
    0%   { transform: scale(.75); opacity: 0; }
    50%  { transform: scale(1.06); opacity: 1; }
    75%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

/* --- None --- */
.cpb-anim-none .cpb-popup {
    opacity: 1;
    transform: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .cpb-overlay {
        padding: 8px;
    }

    /* Mobile position variants (data-mobile-pos overrides data-pos on mobile) */
    .cpb-overlay[data-mobile-pos="top-left"]      { align-items: flex-start !important; justify-content: flex-start !important; }
    .cpb-overlay[data-mobile-pos="top-center"]    { align-items: flex-start !important; justify-content: center !important; }
    .cpb-overlay[data-mobile-pos="top-right"]     { align-items: flex-start !important; justify-content: flex-end !important; }
    .cpb-overlay[data-mobile-pos="middle-left"]   { align-items: center !important;     justify-content: flex-start !important; }
    .cpb-overlay[data-mobile-pos="center"]        { align-items: center !important;     justify-content: center !important; }
    .cpb-overlay[data-mobile-pos="middle-right"]  { align-items: center !important;     justify-content: flex-end !important; }
    .cpb-overlay[data-mobile-pos="bottom-left"]   { align-items: flex-end !important;   justify-content: flex-start !important; }
    .cpb-overlay[data-mobile-pos="bottom-center"] { align-items: flex-end !important;   justify-content: center !important; }
    .cpb-overlay[data-mobile-pos="bottom-right"]  { align-items: flex-end !important;   justify-content: flex-end !important; }

    /* Popup size & padding */
    .cpb-popup {
        max-width: var(--cpb-mobile-max-width, 95%) !important;
        width: var(--cpb-mobile-max-width, 95%) !important;
        padding: var(--cpb-mobile-padding, 20px) !important;
        max-height: 85vh;
    }

    /* Border-radius based on mobile position */
    .cpb-overlay[data-mobile-pos^="bottom"] .cpb-popup { border-radius: 12px 12px 0 0 !important; }
    .cpb-overlay[data-mobile-pos^="top"]    .cpb-popup { border-radius: 0 0 12px 12px !important; }
    .cpb-overlay[data-mobile-pos="center"]  .cpb-popup,
    .cpb-overlay[data-mobile-pos^="middle"] .cpb-popup { border-radius: 12px !important; }

    .cpb-field-title {
        font-size: 1.2em !important;
    }
}


@media screen and (max-width: 575px) {
    .cpb-field-text {
        font-size: 1em !important;
    }
    .cpb-btn {
        font-size: 1em !important;
        padding: 10px 16px;
        line-height: 1;
    }
    .cpb-field-title {
        font-size: 1.2em !important;
    }
}

/* ============================================================
   Copy Code Field
   ============================================================ */

.cpb-copy-label {
    display: block;
}
.cpb-copy-inner {
    transition: transform .15s, box-shadow .15s, filter .15s;
    outline: none;
}
.cpb-copy-inner:hover {
    filter: brightness(1.08);
    transform: scale(1.02);
}
.cpb-copy-inner:active {
    transform: scale(.97);
}
.cpb-copy-inner:focus-visible {
    box-shadow: 0 0 0 3px rgba(91,200,192,.5);
}

/* Copied state — icon swap handled by JS */
.cpb-copy-inner.cpb-is-copied .cpb-icon-copy  { display: none; }
.cpb-copy-inner.cpb-is-copied .cpb-icon-check { display: flex !important; }

.cpb-icon-check {
    animation: cpb-check-pop .25s ease;
}
@keyframes cpb-check-pop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cpb-copy-success {
    text-align: inherit;
}



/* ---- No-overlay mode ---- */
.cpb-no-overlay {
    pointer-events: none;   /* clicks pass through the transparent backdrop */
}
.cpb-no-overlay .cpb-popup {
    pointer-events: auto;   /* but the popup itself stays interactive */
}

/* Mobile CSS custom properties injected per popup by JS */

/* ============================================================
   Minimize-to-Icon
   ============================================================ */

.cpb-popup-icon {
    /* position, size, z-index set via inline styles from PHP */
    outline: none;
}
.cpb-popup-icon-inner {
    /* bg, border, radius set via inline styles from PHP */
    transition: transform .2s ease;
}
/* Hover scale handled by JS to avoid transform conflicts with animations */

/* ---- Idle animations (applied to outer wrapper) ---- */
@keyframes cpb-icon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
    50%       { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.cpb-icon-anim-pulse {
    animation: cpb-icon-pulse 2s ease-in-out infinite;
}

@keyframes cpb-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.cpb-icon-anim-bounce {
    animation: cpb-icon-bounce 1.5s ease-in-out infinite;
}

@keyframes cpb-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.cpb-icon-anim-spin {
    animation: cpb-icon-spin 3s linear infinite;
}

/* Pause animation while inner is scaling on hover */
.cpb-popup-icon:hover.cpb-icon-anim-bounce,
.cpb-popup-icon:hover.cpb-icon-anim-spin {
    animation-play-state: paused;
}