/**
 * Backup-power section (homepage)
 *
 * Animated section that highlights the hotel's continuous-electricity
 * guarantee. Originally inline in template-home.php (extracted to keep
 * markup clean and styles cacheable).
 *
 * @package mirak-hotel
 */

.backup__power__section {
	position: relative !important;
	overflow: hidden !important;
	background: linear-gradient(135deg, #1b1b1b 0%, #2a2520 50%, #1b1b1b 100%) !important;
	background-size: 200% 200% !important;
	animation: bp-gradient-move 12s ease infinite !important;
	padding: 90px 0 !important;
}
@keyframes bp-gradient-move {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.bp__shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	filter: blur(40px);
}
.bp__shape--1 { width: 250px; height: 250px; background: rgba(171,138,98,0.55); top: -80px; right: -80px; animation: bp-float 8s ease-in-out infinite; }
.bp__shape--2 { width: 180px; height: 180px; background: rgba(171,138,98,0.35); bottom: -60px; left: 10%; animation: bp-float 10s ease-in-out infinite reverse; }
.bp__shape--3 { width: 120px; height: 120px; background: rgba(241,241,241,0.18); top: 30%; left: -30px; animation: bp-float 6s ease-in-out infinite; }
.bp__shape--4 { width:  90px; height:  90px; background: rgba(171,138,98,0.4);  bottom: 20%; right: 20%; animation: bp-float 7s ease-in-out infinite reverse; }
@keyframes bp-float {
	0%, 100% { transform: translate(0,0) scale(1); }
	50%      { transform: translate(20px,-25px) scale(1.1); }
}

.bp__bolt {
	position: absolute;
	font-size: 28px;
	color: rgba(171,138,98,0.5);
	z-index: 1;
	pointer-events: none;
	text-shadow: 0 0 15px rgba(171,138,98,0.6);
	animation: bp-bolt-float 4s ease-in-out infinite;
}
.bp__bolt--1 { top: 20%; left: 12%; animation-delay: 0s; font-size: 32px; }
.bp__bolt--2 { top: 65%; right: 15%; animation-delay: 1s; font-size: 26px; }
.bp__bolt--3 { top: 40%; right: 35%; animation-delay: 2s; font-size: 22px; }
@keyframes bp-bolt-float {
	0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.4; }
	50%      { transform: translateY(-20px) rotate(8deg); opacity: 0.9; }
}

.backup__power__section .container { position: relative; z-index: 2; }

.backup__power__section .backup__power__wrap {
	display: flex !important;
	align-items: center !important;
	gap: 40px !important;
	padding: 40px !important;
	background: rgba(255,255,255,0.97) !important;
	backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(171,138,98,0.25) !important;
	border-radius: 24px !important;
	box-shadow: 0 25px 60px rgba(0,0,0,0.35) !important;
	position: relative !important;
	overflow: hidden !important;
}
.backup__power__section .backup__power__wrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 100%;
	background: linear-gradient(180deg, var(--btn-1, #AB8A62), #1b1b1b, var(--btn-1, #AB8A62));
	background-size: 100% 200%;
	animation: bp-shine 3s linear infinite;
}
@keyframes bp-shine {
	0%   { background-position: 0 0; }
	100% { background-position: 0 200%; }
}

.backup__power__section .backup__power__icon {
	flex-shrink: 0 !important;
	width: 130px !important;
	height: 130px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--btn-1, #AB8A62), #1b1b1b) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 15px 40px rgba(171,138,98,0.5) !important;
	position: relative !important;
	animation: bp-icon-bounce 2s ease-in-out infinite !important;
}
@keyframes bp-icon-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

.bp__icon__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid rgba(171,138,98,0.7);
	animation: bp-pulse 2s ease-out infinite;
}
.bp__icon__pulse--2 { animation-delay: 1s; }
@keyframes bp-pulse {
	0%   { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.6); opacity: 0; }
}

.backup__power__section .backup__power__icon svg {
	width: 64px !important;
	height: 64px !important;
	position: relative;
	z-index: 2;
	animation: bp-icon-flicker 1.5s ease-in-out infinite;
	filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
}
@keyframes bp-icon-flicker {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); filter: drop-shadow(0 0 18px rgba(171,138,98,0.95)); }
}

.backup__power__section .backup__power__content { flex: 1; }
.backup__power__section .backup__power__title {
	font-size: 32px;
	font-weight: 700;
	margin: 8px 0 14px;
	line-height: 1.3;
	background: linear-gradient(90deg, #1b1b1b, var(--btn-1, #AB8A62));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.backup__power__section .backup__power__desc {
	font-size: 15px;
	color: #65676B;
	line-height: 1.8;
	margin-bottom: 18px;
}
.backup__power__section .backup__power__hours {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--btn-1, #AB8A62), #1b1b1b) !important;
	color: #fff !important;
	border-radius: 30px;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 8px 20px rgba(171,138,98,0.4);
	transition: transform 0.3s;
}
.backup__power__section .backup__power__hours:hover { transform: translateY(-3px) scale(1.02); }
.backup__power__section .backup__power__hours i,
.backup__power__section .backup__power__hours span,
.backup__power__section .backup__power__arrow { color: #fff !important; }

@media (max-width: 768px) {
	.backup__power__section .backup__power__wrap {
		flex-direction: column !important;
		text-align: center;
		gap: 20px !important;
		padding: 28px 20px !important;
	}
	.backup__power__section .backup__power__icon { width: 90px !important; height: 90px !important; }
	.backup__power__section .backup__power__icon svg { width: 44px !important; height: 44px !important; }
	.backup__power__section .backup__power__title { font-size: 22px; }
	.bp__bolt { display: none; }
}