/*
 * Qstylez Popups — frontend (exact Figma 13348:11941 spec)
 * Card: 436x573 (height auto), bg #fff, radius 16
 * Image area: 436x276 (top), close 31x31 wit-rondje top-right 16px inset
 * Body: padding 32, gap 16, items-start
 * Title:  Inter SemiBold 24 / line-height 1.4, color #000
 * Body:   Inter Regular 16 / line-height 1.5, color #000
 * CTA:    Inter Medium 16, bg #7a68ae, padding 14 16, radius 8, color #fff, GEEN box-shadow
 * Backdrop: rgba(0,0,0,.55) + 2px blur
 * Mobile: card clamp naar viewport - 24px gutter
 */

.qsm-popup[hidden] { display: none !important; }

.qsm-popup {
    position: fixed;
    inset: 0;
    z-index: 99990;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #000;
    animation: qsmFade 220ms ease-out;
}

@keyframes qsmFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.qsm-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.qsm-popup__card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(436px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: qsmIn 260ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

@keyframes qsmIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.qsm-popup__image {
    position: relative;
    width: 100%;
    height: 276px;
    border-radius: 16px 16px 0 0;
    background: #c4c4c4;
    overflow: hidden;
    flex: 0 0 auto;
}

.qsm-popup__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qsm-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 31px;
    height: 31px;
    border: 0;
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    color: #000;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.qsm-popup__close:focus { outline: none; }
.qsm-popup__close:focus-visible { box-shadow: 0 0 0 3px rgba(122, 104, 174, 0.5); }

.qsm-popup__body {
    background: #fff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 0 0 16px 16px;
    overflow-y: auto;
}

.qsm-popup__title {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.4;
    color: #000;
    text-align: left;
}

.qsm-popup__text {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

.qsm-popup__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7a68ae;
    color: #fff !important;
    padding: 14px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    box-shadow: none;
}

.qsm-popup__cta:hover,
.qsm-popup__cta:focus {
    color: #fff !important;
    text-decoration: none;
    background: #6a5a9c;
}

.qsm-popup__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 104, 174, 0.45);
}

/* Klein scherm: card scaled binnen viewport, image hoogte iets terug */
@media (max-width: 460px) {
    .qsm-popup__image { height: 220px; }
    .qsm-popup__body { padding: 24px; gap: 14px; }
    .qsm-popup__title { font-size: 22px; }
}