/*
 * BNS HNF — Footer Stylesheet
 */

/* =========================================================================
   CSS Custom Properties (overridden per-site via inline style)
   ========================================================================= */
:root {
	--bns-footer-bg:             #111111;
	--bns-footer-text-color:     #ffffff;
	--bns-footer-pad-top:        80px;
	--bns-footer-pad-bottom:     40px;
	--bns-footer-logo-max-width: 200px;
	--bns-footer-border-width:   0px;
	--bns-footer-border-color:   #333333;
}

/* =========================================================================
   Footer base
   ========================================================================= */
#bns-hnf-footer {
	width:            100%;
	background-color: var(--bns-footer-bg);
	color:            var(--bns-footer-text-color);
	padding-top:      var(--bns-footer-pad-top);
	padding-bottom:   var(--bns-footer-pad-bottom);
	border-top:       var(--bns-footer-border-width) solid var(--bns-footer-border-color);
	box-sizing:       border-box;
	position:         relative;
	z-index:          1;
	overflow-x:       hidden;
}

/* =========================================================================
   Inner container — centred column
   ========================================================================= */
.bns-footer-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            clamp(14px, 2.5vh, 24px);
	width:          100%;
	max-width:      100%;
	padding-left:   clamp(16px, 4vw, 80px);
	padding-right:  clamp(16px, 4vw, 80px);
	box-sizing:     border-box;
	margin:         0 auto;
}

/* =========================================================================
   Logo
   ========================================================================= */
.bns-footer-logo a {
	display:         inline-block;
	line-height:     0;
	text-decoration: none;
}

.bns-footer-logo img {
	display:   block;
	max-width: min(var(--bns-footer-logo-max-width), 60vw);
	width:     100%;
	height:    auto;
}

/* =========================================================================
   Text blocks
   ========================================================================= */
.bns-footer-tagline,
.bns-footer-contact {
	color:       var(--bns-footer-text-color);
	font-family: inherit;
	font-size:   clamp(0.85rem, 1.5vw, 1rem);
	line-height: 1.7;
	opacity:     0.85;
	max-width:   600px;
}

.bns-footer-tagline a,
.bns-footer-contact a {
	color:           var(--bns-accent, #4a9eff);
	text-decoration: none;
}
.bns-footer-tagline a:hover,
.bns-footer-contact a:hover {
	text-decoration: underline;
}

.bns-footer-copyright {
	color:          var(--bns-footer-text-color);
	font-family:    inherit;
	font-size:      clamp(0.68rem, 1.2vw, 0.8rem);
	letter-spacing: 1px;
	opacity:        0.5;
}

/* =========================================================================
   Horizontal nav
   ========================================================================= */
.bns-footer-nav {
	width:           100%;
	display:         flex;
	justify-content: center;
}

.bns-footer-nav-list {
	list-style:      none;
	margin:          0;
	padding:         0;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             clamp(12px, 2vw, 28px);
}

.bns-footer-nav-list a {
	color:           var(--bns-footer-text-color);
	text-decoration: none;
	font-family:     inherit;
	font-size:       clamp(0.68rem, 1.3vw, 0.85rem);
	text-transform:  uppercase;
	letter-spacing:  2px;
	opacity:         0.7;
	transition:      opacity 0.25s ease, color 0.25s ease;
}

.bns-footer-nav-list a:hover {
	opacity: 1;
	color:   var(--bns-accent, #4a9eff);
}

/* =========================================================================
   Social icons
   ========================================================================= */
.bns-footer-social {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	align-items:     center;
	gap:             clamp(12px, 2vw, 22px);
}

.bns-footer-social a {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--bns-footer-text-color);
	text-decoration: none;
	opacity:         0.7;
	transition:
		opacity   0.25s ease,
		color     0.25s ease,
		transform 0.2s  ease;
}

.bns-footer-social a:hover {
	opacity:   1;
	color:     var(--bns-accent, #4a9eff);
	transform: scale(1.15);
}

.bns-footer-social svg {
	width:   clamp(18px, 2vw, 22px);
	height:  clamp(18px, 2vw, 22px);
	fill:    currentColor;
	display: block;
}

/* =========================================================================
   WhatsApp floating button
   ========================================================================= */
.ez-wa-float {
	position:         fixed;
	bottom:           28px;
	right:            28px;
	width:            60px;
	height:           60px;
	background-color: #25D366;
	border-radius:    50%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	box-shadow:       0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.25);
	z-index:          999999;
	text-decoration:  none;
	transition:       transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
	                  box-shadow 0.25s ease;
	animation:        ez-wa-popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

.ez-wa-float:hover {
	transform:  scale(1.12);
	box-shadow: 0 6px 28px rgba(37,211,102,0.6), 0 4px 12px rgba(0,0,0,0.3);
}

.ez-wa-float::before {
	content:       '';
	position:      absolute;
	width:         60px;
	height:        60px;
	border-radius: 50%;
	background:    rgba(37,211,102,0.4);
	animation:     ez-wa-pulse 2.2s ease-out infinite;
}

.ez-wa-tooltip {
	position:      absolute;
	right:         70px;
	top:           50%;
	transform:     translateX(8px) translateY(-50%);
	background:    #1a1a1a;
	color:         #fff;
	font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size:     13px;
	font-weight:   500;
	white-space:   nowrap;
	padding:       7px 13px;
	border-radius: 8px;
	opacity:       0;
	pointer-events:none;
	transition:    opacity 0.2s ease, transform 0.2s ease;
	box-shadow:    0 2px 10px rgba(0,0,0,0.3);
}

.ez-wa-tooltip::after {
	content:          '';
	position:         absolute;
	right:            -6px;
	top:              50%;
	transform:        translateY(-50%);
	border:           6px solid transparent;
	border-right:     none;
	border-left-color:#1a1a1a;
}

.ez-wa-float:hover .ez-wa-tooltip {
	opacity:   1;
	transform: translateX(0) translateY(-50%);
}

[dir="rtl"] .ez-wa-float           { right: auto; left: 28px; }
[dir="rtl"] .ez-wa-tooltip         { right: auto; left: 70px; }
[dir="rtl"] .ez-wa-tooltip::after  {
	right:             auto;
	left:              -6px;
	border-left:       none;
	border-right-color:#1a1a1a;
}

@keyframes ez-wa-popIn {
	0%   { opacity: 0; transform: scale(0.4); }
	100% { opacity: 1; transform: scale(1);   }
}

@keyframes ez-wa-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	70%  { transform: scale(1.6); opacity: 0;   }
	100% { transform: scale(1.6); opacity: 0;   }
}

@media (max-width: 600px) {
	.ez-wa-float { width: 52px; height: 52px; bottom: 20px; right: 20px; }
	.ez-wa-float::before { width: 52px; height: 52px; }
	.ez-wa-tooltip { display: none; }
	[dir="rtl"] .ez-wa-float { right: auto; left: 20px; }
}