/* ===================================================================
   ELEZI PAGE BUILDER v2 - Colonial Hill
   =================================================================== */

/* ─── RESET & ROOT ───────────────────────────────────────────────── */
.eph-root{font-family:var(--eph-bfont);font-size:var(--eph-fsize);color:var(--eph-text);background:var(--eph-bg);line-height:1.7;box-sizing:border-box}
.eph-root *{box-sizing:inherit}
.eph-fw{width:100vw;max-width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* ─── SECTION / CONTAINER ────────────────────────────────────────── */
.eph-section{padding:clamp(40px,6vw,90px) 20px}
.eph-container{max-width:1200px;margin:0 auto;text-align:center}
.eph-title{font-family:var(--eph-hfont);font-size:var(--eph-hsize);color:var(--eph-heading);letter-spacing:var(--eph-ls);font-weight:600;margin:0 0 10px;line-height:1.2}
.eph-subtitle{font-size:calc(var(--eph-fsize)*1.05);opacity:.8;margin:0 0 8px;font-weight:300}
.eph-divider{display:flex;align-items:center;justify-content:center;margin:22px auto 38px;gap:14px;color:var(--eph-accent)}
.eph-divider::before,.eph-divider::after{content:'';flex:1;max-width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--eph-accent))}
.eph-divider::after{background:linear-gradient(270deg,transparent,var(--eph-accent))}
.eph-divider span{font-size:13px}
.eph-empty{border:1px dashed var(--eph-border);border-radius:var(--eph-r);padding:36px 20px;opacity:.85;background:var(--eph-surface)}
.eph-empty a{color:var(--eph-accent)}

/* ─── GALLERY ────────────────────────────────────────────────────── */
.eph-gallery{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:14px}
.eph-gitem{position:relative;overflow:hidden;border-radius:var(--eph-r);aspect-ratio:1/1;cursor:pointer;background:var(--eph-surface);border:1px solid var(--eph-border)}
.eph-gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.eph-gover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s}
.eph-gover span{width:46px;height:46px;border-radius:50%;border:2px solid var(--eph-accent);color:var(--eph-accent);font-size:26px;display:flex;align-items:center;justify-content:center;transform:scale(.6);transition:transform .3s}
.eph-gitem:hover img{transform:scale(1.07)}
.eph-gitem:hover .eph-gover,.eph-gitem:focus .eph-gover{opacity:1}
.eph-gitem:hover .eph-gover span{transform:scale(1)}

/* Lightbox */
.eph-lb{position:fixed;inset:0;background:rgba(5,5,5,.93);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;visibility:hidden;transition:opacity .3s}
.eph-lb.open{opacity:1;visibility:visible}
.eph-lb-img-wrap{max-width:90vw;max-height:86vh}
.eph-lb-img-wrap img{max-width:90vw;max-height:86vh;width:auto;height:auto;border-radius:4px;box-shadow:0 10px 50px rgba(0,0,0,.6);display:block}
.eph-lb-close,.eph-lb-nav{position:absolute;background:rgba(20,20,20,.6);border:1px solid var(--eph-accent);color:var(--eph-accent);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.eph-lb-close:hover,.eph-lb-nav:hover{background:var(--eph-accent);color:var(--eph-btn-text)}
.eph-lb-close{top:16px;right:16px;width:42px;height:42px;font-size:20px}
.eph-lb-nav{width:48px;height:48px;font-size:28px;top:50%;transform:translateY(-50%)}
.eph-lb-prev{left:12px}.eph-lb-next{right:12px}

/* ─── MENU OPEN BUTTON ───────────────────────────────────────────── */
.eph-menubtn-section{padding-top:0}
.eph-menu-open-btn{
	font-family:var(--eph-hfont);
	font-size:clamp(15px,2.2vw,20px);
	letter-spacing:2px;
	text-transform:uppercase;
	background:transparent;
	color:var(--eph-accent);
	border:2px solid var(--eph-accent);
	border-radius:var(--eph-r);
	padding:18px 44px;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:14px;
	position:relative;
	overflow:hidden;
	transition:color .3s,background .3s,transform .2s,box-shadow .3s;
	box-shadow:0 0 0 0 var(--eph-accent);
}
.eph-menu-open-btn::before{
	content:'';
	position:absolute;
	inset:0;
	background:var(--eph-accent);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .35s ease;
	z-index:0;
}
.eph-menu-open-btn:hover::before,.eph-menu-open-btn:focus::before{transform:scaleX(1)}
.eph-menu-open-btn:hover,.eph-menu-open-btn:focus{color:var(--eph-btn-text);box-shadow:0 6px 28px rgba(201,163,90,.35);transform:translateY(-2px)}
.eph-mbi,.eph-mbt,.eph-mba{position:relative;z-index:1}
.eph-mba{font-size:20px;transition:transform .35s}
.eph-menu-open-btn:hover .eph-mba{transform:translateY(4px)}

/* ─── MODAL OVERLAY ──────────────────────────────────────────────── */
.eph-modal-overlay{
	position:fixed;inset:0;z-index:999999;
	background:rgba(8,7,6,.7);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	display:flex;align-items:flex-end;justify-content:center;
	opacity:0;visibility:hidden;
	transition:opacity .35s ease;
}
@media(min-width:700px){
	.eph-modal-overlay{align-items:center}
}
.eph-modal-overlay.open{opacity:1;visibility:visible}

/* ─── MODAL BOX ──────────────────────────────────────────────────── */
.eph-modal{
	background:var(--eph-surface);
	border:1px solid var(--eph-border);
	border-radius:var(--eph-r) var(--eph-r) 0 0;
	width:100%;
	max-width:100%;
	max-height:92vh;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transform:translateY(60px);
	transition:transform .4s cubic-bezier(.22,1,.36,1);
	box-shadow:0 -8px 60px rgba(0,0,0,.5);
}
@media(min-width:700px){
	.eph-modal{
		border-radius:var(--eph-r);
		max-width:900px;
		width:94vw;
		max-height:90vh;
		transform:scale(.92) translateY(20px);
		box-shadow:0 20px 80px rgba(0,0,0,.6);
	}
}
.eph-modal-overlay.open .eph-modal{transform:translateY(0);transition:transform .4s cubic-bezier(.22,1,.36,1)}
@media(min-width:700px){
	.eph-modal-overlay.open .eph-modal{transform:scale(1) translateY(0)}
}

/* drag handle (mobile only) */
.eph-modal::before{
	content:'';
	display:block;
	width:44px;height:4px;
	border-radius:2px;
	background:var(--eph-border);
	margin:10px auto 0;
	flex-shrink:0;
}
@media(min-width:700px){ .eph-modal::before{display:none} }

/* ─── MODAL HEADER ───────────────────────────────────────────────── */
.eph-modal-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:14px 20px;
	border-bottom:1px solid var(--eph-border);
	flex-shrink:0;
}
.eph-modal-title{
	font-family:var(--eph-hfont);
	color:var(--eph-heading);
	font-size:clamp(15px,2.4vw,20px);
	letter-spacing:1.5px;
}
.eph-modal-close{
	background:transparent;
	border:1px solid var(--eph-border);
	color:var(--eph-text);
	width:34px;height:34px;
	border-radius:50%;
	cursor:pointer;
	font-size:16px;
	display:flex;align-items:center;justify-content:center;
	transition:background .2s,color .2s;
}
.eph-modal-close:hover{background:var(--eph-accent);color:var(--eph-btn-text);border-color:var(--eph-accent)}

/* ─── MENU TABS ──────────────────────────────────────────────────── */
.eph-modal-tabs{
	display:flex;
	border-bottom:1px solid var(--eph-border);
	flex-shrink:0;
}
.eph-mtab{
	flex:1;
	padding:14px 10px;
	background:transparent;
	border:none;
	border-bottom:3px solid transparent;
	color:var(--eph-text);
	font-family:var(--eph-bfont);
	font-size:clamp(13px,2vw,15px);
	font-weight:600;
	letter-spacing:.5px;
	cursor:pointer;
	transition:color .25s,border-color .25s;
	opacity:.65;
}
.eph-mtab.active{border-bottom-color:var(--eph-accent);color:var(--eph-accent);opacity:1}
.eph-mtab:hover{opacity:1;color:var(--eph-accent)}

/* ─── MODAL BODY / PANES ─────────────────────────────────────────── */
.eph-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px}
.eph-menu-pane{display:none}
.eph-menu-pane.active{display:block}

/* ─── FLIPBOOK ───────────────────────────────────────────────────── */
.eph-book-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.eph-book-stage{
	position:relative;
	width:100%;
	max-width:560px;
	background:var(--eph-book-bg);
	border-radius:calc(var(--eph-r) + 4px);
	padding:clamp(10px,2.5vw,28px);
	box-shadow:0 16px 50px rgba(0,0,0,.4),inset 0 0 0 1px var(--eph-border);
	display:flex;align-items:center;justify-content:center;
}
.eph-book{
	position:relative;
	width:100%;
	aspect-ratio:.72;
	perspective:2200px;
}
.eph-loading{
	position:absolute;inset:0;
	display:flex;flex-direction:column;
	align-items:center;justify-content:center;
	gap:12px;
	background:var(--eph-page-bg);
	border-radius:4px;
	color:#555;
	font-family:var(--eph-bfont);
}
.eph-spin{
	width:30px;height:30px;
	border-radius:50%;
	border:3px solid rgba(0,0,0,.12);
	border-top-color:var(--eph-accent);
	animation:eph-spin .85s linear infinite;
}
@keyframes eph-spin{to{transform:rotate(360deg)}}

.eph-page{
	position:absolute;inset:0;
	background:var(--eph-page-bg);
	border-radius:4px;
	box-shadow:0 6px 28px rgba(0,0,0,.3),inset -5px 0 12px -8px rgba(0,0,0,.45);
	overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	backface-visibility:hidden;
}
.eph-page img{width:100%;height:100%;object-fit:contain;display:block;background:var(--eph-page-bg)}
.eph-page-base{z-index:1}
.eph-page-flip{z-index:5;pointer-events:none;display:none;transition:transform .65s cubic-bezier(.4,.1,.2,1),box-shadow .65s}
.eph-flip-nx-s{transform:rotateY(0deg);transform-origin:right center}
.eph-flip-nx-e{transform:rotateY(-180deg);transform-origin:right center}
.eph-flip-pv-s{transform:rotateY(180deg);transform-origin:left center}
.eph-flip-pv-e{transform:rotateY(0deg);transform-origin:left center}

/* spine shadow */
.eph-book::before{
	content:'';position:absolute;
	top:2%;bottom:2%;left:50%;
	width:12px;margin-left:-6px;
	background:linear-gradient(90deg,rgba(0,0,0,.22),transparent,rgba(0,0,0,.22));
	z-index:6;pointer-events:none;opacity:.3;
}

.eph-edge{
	position:absolute;top:0;bottom:0;width:20%;
	background:transparent;border:none;cursor:pointer;z-index:7;
	transition:background .2s;
}
.eph-edge-l{left:0}.eph-edge-r{right:0}
.eph-edge-l:not(:disabled):hover{background:linear-gradient(90deg,rgba(255,255,255,.08),transparent)}
.eph-edge-r:not(:disabled):hover{background:linear-gradient(270deg,rgba(255,255,255,.08),transparent)}
.eph-edge:disabled{cursor:default}

.eph-book-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.eph-bctrl-btn{
	font-family:var(--eph-bfont);font-weight:600;
	font-size:clamp(12px,1.8vw,14px);
	background:var(--eph-btn-bg);color:var(--eph-btn-text);
	border:none;border-radius:var(--eph-r);
	padding:10px 20px;cursor:pointer;
	transition:background .2s,transform .15s,opacity .2s;
	display:inline-flex;align-items:center;gap:5px;
}
.eph-bctrl-btn:hover:not(:disabled){background:var(--eph-btn-hover);transform:translateY(-1px)}
.eph-bctrl-btn:disabled{opacity:.3;cursor:not-allowed}
.eph-fs-btn{padding:10px 14px;font-size:1em}
.eph-pind{min-width:80px;text-align:center;color:var(--eph-text);font-size:.9em;letter-spacing:1px}
.eph-swipe-hint{font-size:.82em;opacity:.55;margin:0;text-align:center}

/* Fullscreen mode */
.eph-book-stage.eph-fs{
	position:fixed;inset:0;z-index:9999999;
	max-width:100vw;width:100vw;height:100vh;
	border-radius:0;padding:12px;
}
.eph-book-stage.eph-fs .eph-book{
	height:88vh;width:auto;
	max-width:92vw;aspect-ratio:var(--ratio,.72);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:900px){
	.eph-gallery{grid-template-columns:repeat(2,1fr)}
	.eph-title{font-size:calc(var(--eph-hsize)*.72)}
}
@media(max-width:540px){
	.eph-gallery{grid-template-columns:repeat(2,1fr);gap:8px}
	.eph-section{padding:32px 12px}
	.eph-title{font-size:calc(var(--eph-hsize)*.58)}
	.eph-menu-open-btn{padding:14px 26px;font-size:14px;letter-spacing:1.5px}
	.eph-lb-nav{width:36px;height:36px;font-size:22px}
	.eph-modal-body{padding:10px}
}
@media(max-width:360px){
	.eph-gallery{grid-template-columns:1fr}
}

body.eph-noscroll{overflow:hidden}