/* ========================================
   Newsam Weather Cube — 3D CSS Cube
   ======================================== */

.nwc-wrapper {
	--nwc-size: 200px;
	--nwc-half: 100px;
	--nwc-bg: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
	--nwc-bg-night: linear-gradient(135deg, #0c1445, #1a1a4e, #2d1b69);
	--nwc-text: #ffffff;
	--nwc-text-muted: rgba(255, 255, 255, 0.7);
	--nwc-accent: #00d2ff;
	--nwc-border: rgba(255, 255, 255, 0.15);
	--nwc-radius: 14px;
	--nwc-transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 32px 18px 18px;
	user-select: none;
	-webkit-user-select: none;
	min-height: 270px;
	overflow: visible !important;
}

/* ---- Scene (perspective container) ---- */
.nwc-scene {
	width: var(--nwc-size) !important;
	height: var(--nwc-size) !important;
	perspective: 800px !important;
	perspective-origin: 50% 50%;
	cursor: grab;
	overflow: visible !important;
	position: relative;
}

.nwc-scene:active {
	cursor: grabbing;
}

/* ---- Cube ---- */
.nwc-cube {
	width: 100% !important;
	height: 100% !important;
	position: relative !important;
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
	transition: transform var(--nwc-transition);
	overflow: visible !important;
}

.nwc-cube.nwc-dragging {
	transition: none !important;
}

/* ---- Faces ---- */
.nwc-face {
	position: absolute !important;
	width: var(--nwc-size) !important;
	height: var(--nwc-size) !important;
	background: var(--nwc-bg);
	border: 1px solid var(--nwc-border);
	border-radius: var(--nwc-radius);
	color: var(--nwc-text) !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
	overflow: hidden;
	box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.2);
	top: 0;
	left: 0;
}

.nwc-face.nwc-night {
	background: var(--nwc-bg-night);
}

/* ---- Weather-aware face backgrounds (day) ---- */
.nwc-face.nwc-wx-clear {
	background: linear-gradient(135deg, #ff9a44 0%, #fc6076 60%, #ff4e50 100%);
}
.nwc-face.nwc-wx-cloudy {
	background: linear-gradient(135deg, #485563 0%, #29323c 50%, #6a7886 100%);
}
.nwc-face.nwc-wx-rain {
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #3a7bd5 100%);
}
.nwc-face.nwc-wx-storm {
	background: linear-gradient(135deg, #232526 0%, #3d2f5a 50%, #6a1b9a 100%);
}
.nwc-face.nwc-wx-snow {
	background: linear-gradient(135deg, #4e54c8 0%, #6a75dc 50%, #8f94fb 100%);
}
.nwc-face.nwc-wx-fog {
	background: linear-gradient(135deg, #3e4f5e 0%, #5c6e8a 50%, #829ab1 100%);
}

/* ---- Weather-aware face backgrounds (night) ---- */
.nwc-face.nwc-wx-clear.nwc-night {
	background: linear-gradient(135deg, #0c1445 0%, #1a1a4e 50%, #2d1b69 100%);
}
.nwc-face.nwc-wx-cloudy.nwc-night {
	background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
}
.nwc-face.nwc-wx-rain.nwc-night {
	background: linear-gradient(135deg, #0b1a33 0%, #152a50 50%, #1f3a6b 100%);
}
.nwc-face.nwc-wx-storm.nwc-night {
	background: linear-gradient(135deg, #0f0c29 0%, #24243e 50%, #302b63 100%);
}
.nwc-face.nwc-wx-snow.nwc-night {
	background: linear-gradient(135deg, #1e2749 0%, #2c3e63 50%, #3b5078 100%);
}
.nwc-face.nwc-wx-fog.nwc-night {
	background: linear-gradient(135deg, #232526 0%, #3d484f 100%);
}

/* ========================================
   Animated weather effects (iPhone-style)
   Rain streaks, snowflakes, fog drift,
   lightning flashes, sun glow, twinkle.
   ======================================== */

/* Keep weather content above effect layers */
.nwc-weather {
	position: relative;
	z-index: 3;
}

/* --- Clear sky (day): soft pulsing sun glow --- */
.nwc-face.nwc-wx-clear:not(.nwc-night)::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -25%;
	width: 85%;
	height: 85%;
	background: radial-gradient(circle,
		rgba(255, 236, 150, 0.55) 0%,
		rgba(255, 190, 80, 0.25) 35%,
		transparent 65%);
	border-radius: 50%;
	animation: nwc-sun-glow 5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes nwc-sun-glow {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.12); }
}

/* --- Clear sky (night): twinkling stars --- */
.nwc-face.nwc-wx-clear.nwc-night::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent 60%),
		radial-gradient(1px   1px   at 28% 45%, #fff, transparent 60%),
		radial-gradient(1.5px 1.5px at 45% 12%, #fff, transparent 60%),
		radial-gradient(1px   1px   at 62% 30%, #fff, transparent 60%),
		radial-gradient(1.5px 1.5px at 78% 20%, #fff, transparent 60%),
		radial-gradient(1px   1px   at 88% 55%, #fff, transparent 60%),
		radial-gradient(1px   1px   at 18% 75%, #fff, transparent 60%),
		radial-gradient(1.5px 1.5px at 55% 85%, #fff, transparent 60%),
		radial-gradient(1px   1px   at 72% 68%, #fff, transparent 60%),
		radial-gradient(1.5px 1.5px at 92% 82%, #fff, transparent 60%);
	animation: nwc-twinkle 3s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 1;
}
@keyframes nwc-twinkle {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 1; }
}

/* --- Cloudy: slow drifting cloud wisps --- */
.nwc-face.nwc-wx-cloudy::before {
	content: '';
	position: absolute;
	inset: -10% -20%;
	background:
		radial-gradient(ellipse 120px 40px at 28% 28%, rgba(255,255,255,0.25), transparent 60%),
		radial-gradient(ellipse 100px 35px at 68% 52%, rgba(255,255,255,0.2),  transparent 60%),
		radial-gradient(ellipse 90px  30px at 48% 82%, rgba(255,255,255,0.18), transparent 60%);
	animation: nwc-clouds-drift 15s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 1;
}
@keyframes nwc-clouds-drift {
	0%   { transform: translateX(-8%); }
	100% { transform: translateX(8%); }
}

/* --- Rain: falling streaks --- */
.nwc-face.nwc-wx-rain::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g stroke='rgba(255,255,255,0.7)' stroke-width='1.2' stroke-linecap='round'><line x1='15' y1='0' x2='12' y2='14'/><line x1='38' y1='5' x2='35' y2='19'/><line x1='62' y1='0' x2='59' y2='14'/><line x1='85' y1='3' x2='82' y2='17'/><line x1='108' y1='0' x2='105' y2='14'/><line x1='25' y1='50' x2='22' y2='64'/><line x1='50' y1='55' x2='47' y2='69'/><line x1='75' y1='50' x2='72' y2='64'/><line x1='98' y1='52' x2='95' y2='66'/></g></svg>");
	background-repeat: repeat;
	animation: nwc-rain-fall 0.7s linear infinite;
	pointer-events: none;
	z-index: 1;
	opacity: 0.75;
}
@keyframes nwc-rain-fall {
	0%   { background-position: 0 0; }
	100% { background-position: -25px 120px; }
}

/* --- Thunderstorm: heavier rain + lightning flashes --- */
.nwc-face.nwc-wx-storm::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g stroke='rgba(255,255,255,0.8)' stroke-width='1.4' stroke-linecap='round'><line x1='15' y1='0' x2='10' y2='18'/><line x1='38' y1='5' x2='33' y2='23'/><line x1='62' y1='0' x2='57' y2='18'/><line x1='85' y1='3' x2='80' y2='21'/><line x1='108' y1='0' x2='103' y2='18'/><line x1='25' y1='50' x2='20' y2='68'/><line x1='50' y1='55' x2='45' y2='73'/><line x1='75' y1='50' x2='70' y2='68'/><line x1='98' y1='52' x2='93' y2='70'/></g></svg>");
	background-repeat: repeat;
	animation: nwc-rain-fall 0.5s linear infinite;
	pointer-events: none;
	z-index: 1;
	opacity: 0.85;
}
.nwc-face.nwc-wx-storm::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.9), transparent 65%);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	animation: nwc-lightning 7s infinite;
}
@keyframes nwc-lightning {
	0%, 87%, 100% { opacity: 0; }
	88%           { opacity: 0.85; }
	89%           { opacity: 0;    }
	90%           { opacity: 0.6;  }
	91%           { opacity: 0;    }
}

/* --- Snow: falling flakes --- */
.nwc-face.nwc-wx-snow::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='white'><circle cx='15' cy='10' r='1.8'/><circle cx='45' cy='25' r='1.3'/><circle cx='75' cy='12' r='1.6'/><circle cx='100' cy='32' r='1.2'/><circle cx='25' cy='55' r='1.5'/><circle cx='60' cy='70' r='1.9'/><circle cx='90' cy='60' r='1.2'/><circle cx='10' cy='90' r='1.4'/><circle cx='50' cy='100' r='1.6'/><circle cx='105' cy='95' r='1.3'/></g></svg>");
	background-repeat: repeat;
	animation: nwc-snow-fall 6s linear infinite;
	pointer-events: none;
	z-index: 1;
	opacity: 0.9;
}
@keyframes nwc-snow-fall {
	0%   { background-position: 0 0; }
	100% { background-position: 18px 120px; }
}

/* --- Fog: drifting blurred mist layers --- */
.nwc-face.nwc-wx-fog::before {
	content: '';
	position: absolute;
	inset: -10%;
	background: linear-gradient(100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.25) 35%,
		rgba(255, 255, 255, 0.4)  50%,
		rgba(255, 255, 255, 0.25) 65%,
		transparent 100%);
	background-size: 250% 100%;
	filter: blur(6px);
	animation: nwc-fog-drift 9s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 1;
}
.nwc-face.nwc-wx-fog::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.12) 50%,
		rgba(255, 255, 255, 0.25) 100%);
	pointer-events: none;
	z-index: 1;
}
@keyframes nwc-fog-drift {
	0%   { background-position: 0% 50%;   opacity: 0.55; }
	100% { background-position: 100% 50%; opacity: 0.9;  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.nwc-face::before,
	.nwc-face::after {
		animation: none !important;
	}
}

.nwc-face--front  { transform: rotateY(0deg)    translateZ(var(--nwc-half)) !important; }
.nwc-face--back   { transform: rotateY(180deg)  translateZ(var(--nwc-half)) !important; }
.nwc-face--right  { transform: rotateY(90deg)   translateZ(var(--nwc-half)) !important; }
.nwc-face--left   { transform: rotateY(-90deg)  translateZ(var(--nwc-half)) !important; }
.nwc-face--top    { transform: rotateX(90deg)   translateZ(var(--nwc-half)) !important; }
.nwc-face--bottom { transform: rotateX(-90deg)  translateZ(var(--nwc-half)) !important; }

/* ---- Loading state ---- */
.nwc-loading {
	font-size: 14px;
	color: var(--nwc-text-muted);
	animation: nwc-pulse 1.5s ease-in-out infinite;
}

@keyframes nwc-pulse {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 1; }
}

/* ---- Weather content on each face ---- */
.nwc-weather {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	text-align: center;
}

.nwc-city {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--nwc-text) !important;
}

.nwc-city small {
	display: block;
	font-size: 9px;
	font-weight: 400;
	color: var(--nwc-text-muted) !important;
	text-transform: none;
	letter-spacing: 0;
	margin-top: 1px;
}

/* Icon + Temp side by side */
.nwc-temp-row {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.nwc-icon img {
	width: 40px;
	height: 40px;
	filter: drop-shadow(0 2px 6px rgba(0, 210, 255, 0.3));
}

.nwc-temp {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.8px;
	color: var(--nwc-text) !important;
}

.nwc-temp span {
	font-size: 14px;
	font-weight: 400;
	vertical-align: super;
}

.nwc-desc {
	font-size: 11px;
	color: var(--nwc-text-muted) !important;
	text-transform: capitalize;
	line-height: 1.2;
}

.nwc-details {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 3px 10px;
	width: 100%;
	margin-top: 3px;
	padding-top: 5px;
	border-top: 1px solid var(--nwc-border);
}

.nwc-detail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
}

.nwc-detail-label {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--nwc-text-muted) !important;
	line-height: 1.15;
}

.nwc-detail-value {
	font-size: 12px;
	font-weight: 600;
	color: var(--nwc-text) !important;
	line-height: 1.15;
}

/* ---- Forecast row ---- */
.nwc-forecast {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	padding-top: 5px;
	border-top: 1px solid var(--nwc-border);
	width: 100%;
	justify-content: center;
}

.nwc-forecast-label {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--nwc-accent) !important;
}

.nwc-forecast img {
	width: 22px;
	height: 22px;
}

.nwc-forecast-temps {
	font-size: 11px;
	font-weight: 600;
	color: var(--nwc-text) !important;
}

.nwc-forecast-temps .nwc-lo {
	color: var(--nwc-text-muted) !important;
}

/* ---- Arrows (floating on the cube) ---- */
.nwc-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateZ(160px);
	z-index: 100;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, 0.9) !important;
	background: rgba(0, 0, 0, 0.75) !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s, background 0.2s;
	backdrop-filter: blur(6px);
	padding: 0;
	line-height: 1;
	opacity: 0;
	/* WCAG AAA: white #fff on bg rgba(0,0,0,0.75) ≈ #404040 → contrast 7.2:1 */
}

.nwc-scene:hover .nwc-btn {
	opacity: 1;
}

.nwc-btn:hover {
	background: rgba(0, 0, 0, 0.9) !important;
	transform: translateY(-50%) translateZ(160px) scale(1.1);
}

.nwc-btn:focus-visible {
	outline: 2px solid var(--nwc-accent);
	outline-offset: 2px;
}

.nwc-btn--prev {
	left: -15px;
}

.nwc-btn--next {
	right: -15px;
}

/* Prevent theme/Elementor ancestors from breaking 3D */
.nwc-wrapper,
.nwc-wrapper *,
.nwc-scene,
.nwc-cube {
	-webkit-transform-style: preserve-3d;
}

/* Ensure no parent clips the 3D space */
.elementor-widget-container:has(.nwc-wrapper),
.entry-content:has(.nwc-wrapper),
.post-content:has(.nwc-wrapper),
.page-content:has(.nwc-wrapper) {
	overflow: visible !important;
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
	.nwc-wrapper {
		--nwc-size: 180px;
		--nwc-half: 90px;
	}

	.nwc-temp {
		font-size: 28px;
	}

	.nwc-icon img {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 360px) {
	.nwc-wrapper {
		--nwc-size: 160px;
		--nwc-half: 80px;
	}

	.nwc-face {
		padding: 10px;
	}

	.nwc-temp {
		font-size: 24px;
	}
}