/* CanApprove Popup – Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Container / overlay */
.cap-popup-container {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cap-popup-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
    transition: opacity .35s ease;
}

/* Popup box */
.cap-popup-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cap-popup-box {
    position: relative;
    width: 100%;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Close button */
.cap-popup-close {
    position: absolute;
    top: 16px; right: 20px;
    width: 36px; height: 36px;
    border: none; background: rgba(0,0,0,.07);
    border-radius: 50%; font-size: 22px; line-height: 1;
    cursor: pointer; color: #666;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    z-index: 2;
}
.cap-popup-close:hover { background: #e53e3e; color: #fff; }

/* Icon */
.cap-popup-icon {
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(200,168,75,.1);
    padding: 18px;
    width: fit-content;
}
.cap-popup-icon svg,
.cap-popup-custom-icon {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Text */
.cap-popup-title {
    margin: 0 0 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.cap-popup-subtitle {
    margin: 0 0 12px;
    font-weight: 600;
    line-height: 1.4;
}
.cap-popup-body {
    margin: 0 0 20px;
    line-height: 1.7;
}

/* CTA */
.cap-popup-cta {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px; font-weight: 700;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    margin-top: 4px;
}
.cap-popup-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Progress bar for auto-close */
.cap-popup-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 4px;
    background: rgba(200,168,75,.6);
    border-radius: 0 0 var(--radius,16px) var(--radius,16px);
    transition: width linear;
}

/* ── Animations ──────────────────────────────────────── */

/* scale-up */
@keyframes cap-scale-up {
    from { opacity:0; transform: scale(.7); }
    to   { opacity:1; transform: scale(1);  }
}
.cap-popup-wrap[data-animation="scale-up"] .cap-popup-box {
    animation: cap-scale-up .35s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* fade-in */
@keyframes cap-fade-in {
    from { opacity:0; }
    to   { opacity:1; }
}
.cap-popup-wrap[data-animation="fade-in"] .cap-popup-box {
    animation: cap-fade-in .4s ease forwards;
}

/* slide-up */
@keyframes cap-slide-up {
    from { opacity:0; transform: translateY(60px); }
    to   { opacity:1; transform: translateY(0);    }
}
.cap-popup-wrap[data-animation="slide-up"] .cap-popup-box {
    animation: cap-slide-up .4s cubic-bezier(.25,.46,.45,.94) forwards;
}

/* slide-down */
@keyframes cap-slide-down {
    from { opacity:0; transform: translateY(-60px); }
    to   { opacity:1; transform: translateY(0);     }
}
.cap-popup-wrap[data-animation="slide-down"] .cap-popup-box {
    animation: cap-slide-down .4s cubic-bezier(.25,.46,.45,.94) forwards;
}

/* bounce */
@keyframes cap-bounce {
    0%   { opacity:0; transform: scale(.3);   }
    50%  { opacity:1; transform: scale(1.08); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1); }
}
.cap-popup-wrap[data-animation="bounce"] .cap-popup-box {
    animation: cap-bounce .5s forwards;
}

/* flip */
@keyframes cap-flip {
    from { opacity:0; transform: perspective(600px) rotateX(-90deg); }
    to   { opacity:1; transform: perspective(600px) rotateX(0deg);   }
}
.cap-popup-wrap[data-animation="flip"] .cap-popup-box {
    animation: cap-flip .45s ease forwards;
}

/* Closing animation */
@keyframes cap-close-out {
    from { opacity:1; transform: scale(1); }
    to   { opacity:0; transform: scale(.85); }
}
.cap-popup-closing .cap-popup-box {
    animation: cap-close-out .25s ease forwards !important;
}
.cap-popup-closing .cap-popup-overlay {
    opacity: 0 !important;
}

/* Mobile */
@media (max-width: 480px) {
    .cap-popup-container { padding: 12px; }
    .cap-popup-box { padding: 32px 20px !important; }
}

/* ── 3D Emoji icons ──────────────────────────────────── */
.cap-popup-emoji-icon {
    display: block;
    line-height: 1;
    /* Subtle drop shadow gives depth/3D feel to emoji */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.12));
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s;
    cursor: default;
    user-select: none;
}
.cap-popup-emoji-icon:hover {
    transform: scale(1.1) translateY(-2px);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.22)) drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
/* Override icon wrapper – emoji doesn't need the tinted circle bg */
.cap-popup-icon:has(.cap-popup-emoji-icon) {
    background: transparent;
    padding: 0;
}