.phonika-slider-frontend{ box-sizing:border-box; }
.phonika-slider-frontend *{ box-sizing:border-box; }

.phonika-fs-slider{ position:relative; overflow:hidden; }
.phonika-fs-track{ display:flex; transition:transform .7s cubic-bezier(.65,0,.35,1); }
.phonika-fs-slide{ flex:0 0 100%; width:100%; }
.phonika-fs-banner{ position:relative; overflow:hidden; display:flex; align-items:stretch; }
.phonika-fs-row{ display:flex; width:100%; }
.phonika-fs-col-img{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.phonika-fs-layers{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.phonika-fs-layer{ position:absolute; transform:translate(-50%,-50%); }
.phonika-fs-layer-text span{ display:inline-block; white-space:pre-wrap; line-height:1.3; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.phonika-fs-layer-image img{ width:100%; display:block; border-radius:4px; }
.phonika-fs-col-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 7s ease; }
.phonika-fs-slide.phonika-fs-active .phonika-fs-col-img img{ transform:scale(1.08); }
.phonika-fs-col-text{ display:flex; flex-direction:column; padding:5%; }
.phonika-fs-title-wrap, .phonika-fs-subtitle-wrap, .phonika-fs-desc-wrap, .phonika-fs-btn-wrap{
	max-width:100%; opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
}
.phonika-fs-slide.phonika-fs-active .phonika-fs-title-wrap,
.phonika-fs-slide.phonika-fs-active .phonika-fs-subtitle-wrap,
.phonika-fs-slide.phonika-fs-active .phonika-fs-desc-wrap,
.phonika-fs-slide.phonika-fs-active .phonika-fs-btn-wrap{ opacity:1; transform:translateY(0); }
.phonika-fs-slide.phonika-fs-active .phonika-fs-title-wrap{ transition-delay:.05s; }
.phonika-fs-slide.phonika-fs-active .phonika-fs-subtitle-wrap{ transition-delay:.15s; }
.phonika-fs-slide.phonika-fs-active .phonika-fs-desc-wrap{ transition-delay:.25s; }
.phonika-fs-slide.phonika-fs-active .phonika-fs-btn-wrap{ transition-delay:.35s; }
.phonika-fs-col-text h2{ margin:0 0 8px; font-weight:900; line-height:1.25; }
.phonika-fs-col-text h3{ margin:0 0 12px; font-weight:700; }
.phonika-fs-col-text p{ margin:0 0 20px; line-height:2; }
.phonika-fs-btn{
	display:inline-flex; align-self:flex-start; padding:14px 34px; border-radius:50px;
	text-decoration:none; font-weight:800; font-size:14px; white-space:nowrap; transition:.2s;
}
.phonika-fs-btn:hover{ filter:brightness(0.95); text-decoration:none; }

.phonika-fs-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; pointer-events:none; }
.phonika-fs-arrow{
	pointer-events:auto; width:40px; height:40px; border-radius:50%; border:none;
	background:#fff; color:#20232b; cursor:pointer; font-size:17px; box-shadow:0 3px 12px rgba(0,0,0,.2);
	display:flex; align-items:center; justify-content:center; transition:.2s;
	-webkit-appearance:none; appearance:none; flex-shrink:0; box-sizing:border-box;
}
.phonika-fs-arrow:hover{ background:#FFD400; }
.phonika-fs-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; }
.phonika-fs-dots button{
	padding:0; margin:0; cursor:pointer; border:none; outline:none; background:rgba(255,255,255,.55); transition:.2s;
	-webkit-appearance:none; appearance:none; flex-shrink:0; display:block; box-sizing:border-box; min-width:0;
}
.phonika-fs-dots button.active{ background:#FFD400; }

/* dot shape variants */
.phonika-fs-dot-line .phonika-fs-dots button{ width:9px; height:3px; border-radius:2px; }
.phonika-fs-dot-line .phonika-fs-dots button.active{ width:22px; }
.phonika-fs-dot-circle .phonika-fs-dots button{ width:8px; height:8px; border-radius:50%; }
.phonika-fs-dot-circle .phonika-fs-dots button.active{ width:12px; height:12px; }

/* classic "below the slide" nav style */
.phonika-fs-nav-below .phonika-fs-nav{
	position:static; inset:auto; margin-top:16px; padding:0; justify-content:center; gap:12px; pointer-events:auto;
}
.phonika-fs-nav-below .phonika-fs-arrow{ background:#2a2e37; color:#fff; box-shadow:none; }
.phonika-fs-nav-below .phonika-fs-arrow:hover{ background:#111; }
.phonika-fs-nav-below .phonika-fs-dots{ position:static; transform:none; margin-top:12px; justify-content:center; }
.phonika-fs-nav-below .phonika-fs-dots button{ background:#d5d5d5; }
.phonika-fs-nav-below .phonika-fs-dots button.active{ background:#2a2e37; }

/* fade / zoom slide-change effects (instead of the default horizontal slide) */
.phonika-transition-fade .phonika-fs-track,
.phonika-transition-zoom .phonika-fs-track{ position:relative; }
.phonika-transition-fade .phonika-fs-slide,
.phonika-transition-zoom .phonika-fs-slide{
	position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .8s ease;
}
.phonika-transition-fade .phonika-fs-slide.phonika-fs-active,
.phonika-transition-zoom .phonika-fs-slide.phonika-fs-active{ opacity:1; pointer-events:auto; z-index:2; position:relative; }
.phonika-transition-zoom .phonika-fs-slide{ transition:opacity .8s ease, transform .8s ease; transform:scale(1.06); }
.phonika-transition-zoom .phonika-fs-slide.phonika-fs-active{ transform:scale(1); }

/* zoom-out: slides grow in from smaller-than-normal */
.phonika-transition-zoomout .phonika-fs-track{ position:relative; }
.phonika-transition-zoomout .phonika-fs-slide{
	position:absolute; inset:0; opacity:0; pointer-events:none;
	transition:opacity .8s ease, transform .8s ease; transform:scale(0.85);
}
.phonika-transition-zoomout .phonika-fs-slide.phonika-fs-active{ opacity:1; pointer-events:auto; z-index:2; position:relative; transform:scale(1); }

/* 3D flip */
.phonika-transition-flip .phonika-fs-track{ position:relative; perspective:1500px; }
.phonika-transition-flip .phonika-fs-slide{
	position:absolute; inset:0; opacity:0; pointer-events:none;
	transition:opacity .7s ease, transform .7s ease; transform:rotateY(85deg);
}
.phonika-transition-flip .phonika-fs-slide.phonika-fs-active{ opacity:1; pointer-events:auto; z-index:2; position:relative; transform:rotateY(0deg); }

/* push: classic horizontal slide with a soft cross-fade layered on top */
.phonika-transition-push .phonika-fs-slide{ transition:opacity .5s ease; opacity:.3; }
.phonika-transition-push .phonika-fs-slide.phonika-fs-active{ opacity:1; }

/* optional: disable the staggered text fade-in entrance */
.phonika-fs-no-textfade .phonika-fs-title-wrap,
.phonika-fs-no-textfade .phonika-fs-subtitle-wrap,
.phonika-fs-no-textfade .phonika-fs-desc-wrap,
.phonika-fs-no-textfade .phonika-fs-btn-wrap{
	opacity:1 !important; transform:none !important; transition:none !important;
}

@media (max-width: 767px){
	.phonika-slider-frontend{ padding:0 var(--phonika-mobile-margin, 0px); }

	/* per-element mobile position & size — stored and applied independently from desktop */
	.phonika-fs-title-wrap, .phonika-fs-subtitle-wrap, .phonika-fs-desc-wrap, .phonika-fs-btn-wrap{
		transform:translate(var(--mx, 0px), var(--my, 0px)) !important;
	}
	.phonika-fs-title-wrap h2{ font-size:var(--ms) !important; }
	.phonika-fs-subtitle-wrap h3{ font-size:var(--ms) !important; }
	.phonika-fs-desc-wrap p{ font-size:var(--ms) !important; }

	/* overlay layout (default, more professional): image fills the banner, text sits on top with a gradient scrim */
	.phonika-fs-mobile-overlay .phonika-fs-row{ position:relative; display:block; min-height:var(--phonika-mobile-img-h, 320px); }
	.phonika-fs-mobile-overlay .phonika-fs-col-img{ position:absolute; inset:0; width:100% !important; height:100%; }
	.phonika-fs-mobile-overlay .phonika-fs-col-img img{ width:100%; height:100%; }
	.phonika-fs-mobile-overlay .phonika-fs-col-text{
		position:relative; z-index:2; width:100% !important; min-height:var(--phonika-mobile-img-h, 320px);
		background:linear-gradient(to top, rgba(0,0,0,.72) 15%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 80%);
		justify-content:flex-end !important; padding:22px;
	}
	.phonika-fs-mobile-overlay .phonika-fs-col-text h2,
	.phonika-fs-mobile-overlay .phonika-fs-col-text h3,
	.phonika-fs-mobile-overlay .phonika-fs-col-text p{ color:#fff !important; }

	/* stack layout (classic): image on top, text in its own box below */
	.phonika-fs-mobile-stack .phonika-fs-row{ flex-direction:column !important; }
	.phonika-fs-mobile-stack .phonika-fs-col-img,
	.phonika-fs-mobile-stack .phonika-fs-col-text{ width:100% !important; }
	.phonika-fs-mobile-stack .phonika-fs-col-img{ min-height:var(--phonika-mobile-img-h, 220px); }
	.phonika-fs-mobile-stack .phonika-fs-col-text{ padding:24px; }
}