.flow-popup {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: flex-end;

align-items: stretch;

z-index: 9999;

pointer-events: none;

}


.flow-popup-overlay {

position: absolute;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.5);

opacity: 0;

transition: opacity 0.25s ease;

pointer-events: auto;

}


.flow-popup-body {

width: 420px;

max-width: 100%;

height: 100%;

background: var(--flow-bg-panel);

transform: translateX(100%);

transition: transform 0.25s ease;

pointer-events: auto;

padding: 20px;

overflow-y: auto;

}


/* CENTER MODAL */

.flow-popup-center {

justify-content: center;

align-items: center;

}


.flow-popup-center
.flow-popup-body {

width: 420px;

height: auto;

max-height: 80%;

transform: scale(0.85);

border-radius: 12px;

}


/* BOTTOM MOBILE */

.flow-popup-bottom {

align-items: flex-end;

}


.flow-popup-bottom
.flow-popup-body {

width: 100%;

height: auto;

transform: translateY(100%);

border-radius: 18px 18px 0 0;

}


/* VISIBLE STATE */

.popup-visible
.flow-popup-overlay {

opacity: 1;

}


.popup-visible
.flow-popup-body {

transform: translateX(0);

}


.popup-visible.flow-popup-bottom
.flow-popup-body {

transform: translateY(0);

}


.popup-visible.flow-popup-center
.flow-popup-body {

transform: scale(1);

}


/* CLOSE BUTTON */

.flow-popup-close {

background: transparent;

border: none;

font-size: 18px;

cursor: pointer;

float: right;

color: var(--flow-text-secondary);

}


/* ACTION BUTTONS */

.popup-actions {

display: flex;

gap: 10px;

margin-top: 20px;

}


.popup-cancel {

background: var(--flow-border);

}