/** Universal Controls **/

.universal_control {
	position: fixed;
	width: 60px;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column-reverse;
	gap: 20px;
	justify-content: center;
	align-items: center;
	height: auto;
}

.wh_btn { width: 40px; height: 40px; }
.wh_btn a svg { width: 40px; height: 40px; }

.back_to_top {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--prigri);
	border-radius: 50%;
	cursor: pointer;
}

.back_to_top svg { width: 28px; height: 40px; fill: white; }

.social_share {
	height: 40px;
	background: var(--pri);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	width: 40px;
}

.social_share svg { width: 25px; height: 25px; fill: white !important; }

.social_share_options {
	width: 0px;
	overflow: hidden;
	background: white;
	border: 1px solid gainsboro;
	padding: 0px;
	z-index: 1;
	height: 0px;
	position: fixed;
	bottom: 65px;
	right: 7px;
	border-radius: 13px;
	box-shadow: var(--hoversha);
}

.social_share_options svg { width: 45px; height: 45px; cursor: pointer; box-shadow: var(--hoversha); padding: 6px; }
.social_share_options_icons { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 30px); justify-content: center; align-items: center; text-align: center; margin-bottom: 20px; }
.social_share_options_text { height: min-content; padding-bottom: 3px; margin-bottom: 20px; margin-top: 14px; border-bottom: 1px solid gainsboro; }
.social_share_options_text p { text-align: center; margin: 10px 0px; color: var(--bgdim); font-size: 1.6rem; }
.close_share_options { width: 19px; height: 20px; display: flex; justify-content: center; text-align: center; position: absolute; top: 16px; align-items: center; right: 13px; }
div#close_share_options svg { padding: 0px; width: 20px; height: 20px; box-shadow: none; }

/* ===== CLEAN WHITE FOOTER ===== */

.footer-clean {
    width: 100%;
    background: white;
    color: var(--bgdim);
    border-top: 1px solid gainsboro;
    margin-top: 40px;
    border-radius: 17px;
    box-shadow: var(--sha);
}

/* CTA section */
.footer-cta-section {
    padding: 28px 5%;
    width: 90%;
    margin: -53px auto;
    border-radius: 14px;
    z-index: 11;
    position: relative;
    box-shadow: rgb(175 161 161 / 28%) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    background: white;
}

.footer-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-cta-copy h3 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--bgdim);
	margin: 0 !important;
}

.footer-cta-copy p {
	font-size: 1.4rem;
	color: #777;
	margin: 4px 0 0 !important;
	text-transform: none !important;
}

.footer-cta-btn {
	display: inline-block;
	background: var(--prigri);
	color: white !important;
	padding: 12px 26px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s, transform 0.2s;
	flex-shrink: 0;
}

.footer-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* Grid */
.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, 300px);
	gap: 40px;
	padding: 48px 5%;
	justify-content: center;
	margin-top: 40px;
}

.footer-col-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--bgdim);
    margin: 0 0 18px !important;
    text-transform: capitalize;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: none;
}

.footer-desc {
	font-size: 1.4rem !important;
	color: #666 !important;
	line-height: 1.7 !important;
	margin: 0 0 20px !important;
	text-align: left !important;
	text-transform: none !important;
}

/* Footer social row */
.footer-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.footer-soc-link {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #f5f5f5;
	border: 1px solid #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.footer-soc-link svg { width: 17px; height: 17px; fill: var(--bgdim); transition: fill 0.2s; }
.footer-soc-link:hover { background: var(--prigri); border-color: transparent; transform: translateY(-2px); }
.footer-soc-link:hover svg { fill: white; }

/* Footer links */
.footer-links {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.footer-links li {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: none;
}

.footer-links li a {
	display: block;
	padding: 9px 0;
	font-size: 1.4rem;
	color: #555;
	transition: color 0.15s, padding-left 0.15s;
}

.footer-links li a:hover {
	color: var(--pridim);
	padding-left: 5px;
}

/* Bottom bar */
.footer-bottom-bar {
	background: #f9f9f9;
	border-top: 1px solid #ebebeb;
	padding: 14px 5%;
	text-align: center;
}

.footer-bottom-bar p {
	font-size: 1.3rem;
	color: #888;
	margin: 0 !important;
	text-transform: none !important;
}

/* Responsive */
@media (max-width: 768px) {
	.footer-cta-inner { flex-direction: column; text-align: center; }
	.footer-col-heading::after { left: 50%; transform: translateX(-50%); }
	.footer-grid { padding: 32px 5%; gap: 28px; }
	.footer-social-row { justify-content: flex-start; }
}

@media (max-width: 400px) {
	.universal_control { position: fixed; width: 60px; right: 0px; bottom: 26px; display: flex; flex-direction: column-reverse; gap: 20px; justify-content: center; align-items: center; height: auto; align-content: center; }
	.footer-grid { grid-template-columns: 1fr; }
}

/* ============================================
   BOTTOM NAVIGATION BAR
   ============================================ */

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid #ebebeb;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 4px 0;
	height: 65px;
	z-index: 8000;
}

/* ── Each nav item ── */

.bn-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	color: #aaa;
	font-size: 10px;
	font-weight: 500;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	transition: color 0.2s;
	flex: 1;
	min-width: 0;
	line-height: 1;
	font-family: inherit;
}

.bn-item svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	stroke: currentColor;
	transition: stroke 0.2s;
}

.bn-item span {
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
}

.bn-item:hover { color: #E91E63; }

.bn-item.bn-active { color: #E91E63; }

/* ── Center FAB wrap ── */

.bn-center-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	transform: translateY(0px);
}

/* ── Plus FAB button ── */

.bn-plus {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E91E63, #F44336);
	border: 3px solid #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.22s;
	color: #fff;
	position: relative;
	z-index: 1;
}

.bn-plus:hover {
	transform: scale(1.07);
}

.bn-plus svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.bn-center-wrap.bn-open .bn-plus svg {
	transform: rotate(45deg);
}

/* ── Social icon group (white pill above the FAB) ── */

/* ── Social icons — arc from button centre ── */

/* Zero-size anchor at the vertical centre of the 48px plus button.
   Group shows/hides instantly so the per-icon spring animation is visible. */
.bn-soc-group {
	position: absolute;
	bottom: 24px;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2;
}

.bn-center-wrap.bn-open .bn-soc-group {
	pointer-events: auto;
}

/* Each icon centred on anchor, starts invisible + collapsed */
.bn-soc {
	position: absolute;
	top: -19px;
	left: -19px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0;
	transform: scale(0);
	transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
	            opacity   0.22s ease;
}

/* Arc open — radius 80px, 4 icons from 135° → 45°
   cos/sin values: 135°=(-57,-57) 105°=(-21,-77) 75°=(21,-77) 45°=(57,-57) */
.bn-center-wrap.bn-open .bn-soc-pin {
	transform: translate(-57px, -57px) scale(1);
	opacity: 1;
	transition-delay: 0.00s;
}
.bn-center-wrap.bn-open .bn-soc-yt {
	transform: translate(-21px, -77px) scale(1);
	opacity: 1;
	transition-delay: 0.07s;
}
.bn-center-wrap.bn-open .bn-soc-ig {
	transform: translate( 21px, -77px) scale(1);
	opacity: 1;
	transition-delay: 0.14s;
}
.bn-center-wrap.bn-open .bn-soc-fb {
	transform: translate( 57px, -57px) scale(1);
	opacity: 1;
	transition-delay: 0.21s;
}

.bn-soc svg {
	width: 17px;
	height: 17px;
}

.bn-soc-pin svg { fill: #E60023; }
.bn-soc-yt  svg { fill: #FF0000; }
.bn-soc-ig  svg { fill: #bc1888; }
.bn-soc-fb  svg { fill: #1877F2; }

/* ── Dim overlay — disabled ── */

.bn-dim,
.bn-dim.bn-dim-show {
	display: none !important;
}

/* Push page content up so it's not hidden behind the bar */
@media (max-width: 988px) {
	body { padding-bottom: 65px; }
}

/* ============================================
   FLOATING EVENTS FAB
   ============================================ */

@keyframes fabWave {
	0%   { transform: scale(1);   opacity: 0.55; }
	100% { transform: scale(2);   opacity: 0; }
}

.float-events-fab {
	position: fixed;
	bottom: 82px;
	right: 16px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E91E63, #F44336);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 7500;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.float-events-fab:hover {
	transform: scale(1.1);
}

.float-events-fab svg {
	stroke: #fff;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* Two staggered wave rings */
.float-events-fab::before,
.float-events-fab::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #E91E63, #F44336);
	opacity: 0;
	animation: fabWave 2.4s ease-out infinite;
	pointer-events: none;
}

.float-events-fab::after {
	animation-delay: 1.2s;
}