/* Стилі самого попапу (оверлей) */
.custom-popup-overlay {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(255,255,255,0.95); z-index: 10001;
	display: none; justify-content: center; align-items: center;
	opacity: 0; transition: opacity 0.3s ease;
}
.custom-popup-overlay.is-active { display: flex; opacity: 1; }
/* Контент всередині */
.custom-popup-overlay .custom_popup_block{
	background: #fff; min-width: 480px; max-width: 90%; max-height: 90%;
	position: relative; border-radius: 1px; /**/
	-webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3); 
}
.custom-popup-overlay .custom_popup_in { padding: 50px; overflow-y: auto; }

/* Кнопка закриття */
.popup-close-btn {
	position: absolute; top: 5px; right: 10px; color:#555555;
	cursor: pointer; font-size: 24px; border: none; background: none;
}

/* Кнопка виклику (стиль для прикладу) */
.btn-trigger {display: inline-block;}
.btn-trigger svg{display: inline-block; width: auto; height: 24px; margin-bottom: -6px;}
.btn-trigger span{margin-left: 4px;}
@media (max-width: 1640px){
.custom-popup-overlay .custom_popup_block{min-width: 480px;}
}
@media (max-width: 540px){
.custom-popup-overlay .custom_popup_block{min-width: 320px;}
}



/* Головний контейнер модуля */
.beforeafter_block_in {
    position: relative; width: 100%; overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none;
    /* Дозволяє скролити сторінку вертикально, але блокує горизонтальний скрол при перетягуванні */
    touch-action: pan-y; 
}

/* Лінія повзунка (Спліттер) */
.beforeafter-handle {
    position: absolute; top: 0; bottom: 0; width: 3px; background: #ffffff; transform: translateX(-50%); z-index: 10; pointer-events: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    left: var(--slider-pos, 50%);
}

/* Круглий елемент по центру з стрілками */
.beforeafter-handle:after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: #ffffff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Вбудована SVG-іконка стрілок вліво-вправо */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg>'); background-size: 55%; background-position: center; background-repeat: no-repeat;
}

/* Контейнер ДО (базовий шар) */
.before-img {
    display: block;
    width: 100%;
    height: auto;
}
.before-img img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Контейнер ПІСЛЯ (накладається зверху) */
.after-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Ефект розрізу: ховаємо ліву частину зображення відповідно до позиції повзунка */
    clip-path: inset(0 0 0 var(--slider-pos, 50%));
}
.after-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Стилізація написів (Title) */
.beforeafter-title {
    position: absolute;
    bottom: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
    font-family: sans-serif;
}
.before-img .beforeafter-title {
    left: 15px;
}
.after-img .beforeafter-title {
    right: 15px;
}