/* ==========================================================================
   2fox4 Custom Popup – Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overlay (backdrop)
   -------------------------------------------------------------------------- */

.scp-overlay {
	position:        fixed;
	inset:           0;              /* top/right/bottom/left: 0 */
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
	box-sizing:      border-box;

	background:            rgba(0, 0, 0, 0.55);
	backdrop-filter:       blur(5px);
	-webkit-backdrop-filter: blur(5px);

	z-index: 999999;

	/* Fade-in */
	opacity:    0;
	transition: opacity 0.35s ease;
}

.scp-overlay.scp-visible {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Popup card
   -------------------------------------------------------------------------- */

.scp-popup {
	position:   relative;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);

	max-width:  700px;
	width:      100%;
	max-height: 90vh;
	overflow-y: auto;

	padding:    44px 40px 40px;
	box-sizing: border-box;

	/* Slide-up + slight scale on enter */
	transform:  translateY(18px) scale(0.97);
	transition: transform 0.35s ease;
}

.scp-overlay.scp-visible .scp-popup {
	transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   Close button
   -------------------------------------------------------------------------- */

.scp-close {
	position:   absolute;
	top:        14px;
	right:      14px;

	display:         flex;
	align-items:     center;
	justify-content: center;

	width:  34px;
	height: 34px;
	padding: 0;

	background:    none;
	border:        none;
	border-radius: 50%;
	cursor:        pointer;

	font-size:   22px;
	line-height: 1;
	color:       #999;

	transition: background 0.2s, color 0.2s;
}

.scp-close:hover,
.scp-close:focus-visible {
	background: #f2f2f2;
	color:      #333;
	outline:    none;
}

/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */

.scp-content {
	/* Ensure Gutenberg block alignment classes work inside the popup. */
}

.scp-content > *:first-child {
	margin-top: 0;
}

.scp-content > *:last-child {
	margin-bottom: 0;
}

/* Gutenberg alignment helpers – fallback if block-library CSS is not
   loaded by the theme or stripped by an optimiser.                    */
.scp-content .has-text-align-center {
	text-align: center;
}
.scp-content .has-text-align-right {
	text-align: right;
}
.scp-content .has-text-align-left {
	text-align: left;
}
.scp-content .aligncenter {
	margin-left:  auto;
	margin-right: auto;
	text-align:   center;
}
.scp-content .alignfull {
	width: 100%;
}
.scp-content .alignwide {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Entrance animations (applied via JS after fade-in completes)
   -------------------------------------------------------------------------- */

/* ---- Bounce: jumps forward (scale up) then settles back ---- */
@keyframes scp-bounce {
	0%   { transform: translateY(0) scale(1);    }
	20%  { transform: translateY(0) scale(1.08); }
	40%  { transform: translateY(0) scale(0.97); }
	60%  { transform: translateY(0) scale(1.03); }
	80%  { transform: translateY(0) scale(0.99); }
	100% { transform: translateY(0) scale(1);    }
}

.scp-popup.scp-anim-bounce {
	animation: scp-bounce 0.7s ease both;
}

/* ---- Shake: horizontal shudder ---- */
@keyframes scp-shake {
	0%, 100% { transform: translateX(0);   }
	10%      { transform: translateX(-6px); }
	20%      { transform: translateX(6px);  }
	30%      { transform: translateX(-5px); }
	40%      { transform: translateX(5px);  }
	50%      { transform: translateX(-3px); }
	60%      { transform: translateX(3px);  }
	70%      { transform: translateX(-2px); }
	80%      { transform: translateX(2px);  }
	90%      { transform: translateX(-1px); }
}

.scp-popup.scp-anim-shake {
	animation: scp-shake 0.65s ease both;
}

/* --------------------------------------------------------------------------
   Responsive – mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.scp-overlay {
		align-items: flex-end;
		padding:     0;
	}

	.scp-popup {
		max-width:     100%;
		border-radius: 18px 18px 0 0;
		padding:       36px 20px 32px;
		max-height:    88vh;

		/* Slide up from bottom on mobile */
		transform: translateY(50px);
	}

	.scp-overlay.scp-visible .scp-popup {
		transform: translateY(0);
	}
}