/**
 * Shiv Wedding Countdown — frontend styles.
 *
 * All colors, fonts, sizes and offsets come in as CSS custom properties
 * set by Elementor on the widget's OUTER wrapper element, via each
 * control's `selectors` option. Elementor's own responsive control
 * engine overrides those same custom properties inside its own
 * auto-generated tablet/mobile media queries.
 *
 * IMPORTANT: every var() below uses the `var(--name, fallback)` form.
 * Nothing in this file re-declares a hard value for these custom
 * properties on .swc-countdown-wrapper itself -- doing so would shadow
 * whatever value Elementor set on the ancestor element and silently
 * break every color/font/size control. Do not reintroduce that pattern.
 */

.swc-countdown-wrapper {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.swc-countdown-wrapper * {
	box-sizing: border-box;
}

/* ---------- Scenes ---------- */
/* The countdown scene and the post-wedding message scene are two
 * separate, independently-sized blocks. Only one is ever visible at a
 * time (toggled by the .swc-completed class on the wrapper -- decided
 * server-side in PHP so the correct scene is already correct in the
 * very first HTML response, avoiding any flicker), so switching
 * between them never stretches the wrapper's height or leaves the
 * countdown panel visible behind the message. */

.swc-scene {
	position: relative;
	width: 100%;
	display: none;
}

.swc-scene-countdown {
	display: block;
	line-height: 0; /* height is driven entirely by the <img> (or the fallback box). */
}

.swc-completed .swc-scene-countdown {
	display: none;
}

.swc-scene-message {
	display: none;
	aspect-ratio: 1.76;
}

.swc-completed .swc-scene-message {
	display: block;
}

@media (max-width: 767px) {
	.swc-has-mobile-bg .swc-scene-message {
		aspect-ratio: 1.05;
	}
}

/* ---------- Countdown panel image ---------- */

.swc-bg-picture {
	display: block;
	width: 100%;
	max-width: 100%;
}

.swc-bg-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	pointer-events: none;
	user-select: none;
}

/* ---------- Countdown panel fallback (Solid Color / Gradient background type) ---------- */
/* Used instead of <picture>/<img> when Background Type isn't "Image". The
 * fixed image has no natural height, so an aspect-ratio box takes its
 * place; the circles above are positioned with the same percentage-based
 * offsets either way. */

.swc-bg-fallback {
	display: block;
	width: 100%;
	aspect-ratio: var(--swc-bg-fallback-ratio, 2.4);
	background: var(--swc-bg-fill, #0b2447);
	border-radius: clamp(10px, 2vw, 22px);
}

/* ---------- Countdown circles ---------- */
/* Percentages measured directly from the approved desktop artwork:
 * circle centers at x = 24.11% / 41.46% / 58.86% / 75.17%, y = 49.59%. */

.swc-circles {
	position: absolute;
	inset: 0;
	line-height: normal;
}

.swc-circle {
	position: absolute;
	top: calc(49.59% + var(--swc-pos-y, 0px));
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 22%;
	max-width: 22%;
}

.swc-circle-1 {
	left: calc(24.11% + var(--swc-pos-x, 0px));
}

.swc-circle-2 {
	left: calc(41.46% + var(--swc-pos-x, 0px));
}

.swc-circle-3 {
	left: calc(58.86% + var(--swc-pos-x, 0px));
}

.swc-circle-4 {
	left: calc(75.17% + var(--swc-pos-x, 0px));
}

.swc-number {
	display: block;
	max-width: 100%;
	font-family: var(--swc-number-font, 'Playfair Display', Georgia, 'Times New Roman', serif);
	font-size: var(--swc-number-size, 42px);
	color: var(--swc-number-color, #0b2447);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	transform: translateY(var(--swc-number-offset, 0px));
	white-space: nowrap;
}

.swc-label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--swc-label-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-label-size, 13px);
	color: var(--swc-label-color, #a9812f);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.2;
	margin-top: var(--swc-label-offset, 6px);
	white-space: nowrap;
}

/* Digit-change pulse animation (toggled by the Animation control). */
@keyframes swc-pulse {
	0% {
		opacity: 0.35;
		transform: translateY(var(--swc-number-offset, 0px)) scale(0.88);
	}
	55% {
		opacity: 1;
		transform: translateY(var(--swc-number-offset, 0px)) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translateY(var(--swc-number-offset, 0px)) scale(1);
	}
}

.swc-number.swc-pulse {
	animation: swc-pulse 0.45s ease-out;
}

/* Soft anticipation glow on the whole panel during the final 24 hours. */
@keyframes swc-final-glow {
	0%, 100% {
		filter: drop-shadow(0 0 0 rgba(201, 164, 76, 0));
	}
	50% {
		filter: drop-shadow(0 0 16px rgba(201, 164, 76, 0.55));
	}
}

.swc-final-day .swc-bg-image,
.swc-final-day .swc-bg-fallback {
	animation: swc-final-glow 3.6s ease-in-out infinite;
}

/* ---------- Wedding date display ---------- */

.swc-date {
	position: absolute;
	left: calc(50% + var(--swc-date-pos-x, 0px));
	top: calc(68.8% + var(--swc-date-pos-y, 0px));
	transform: translate(-50%, -50%);
	text-align: center;
	white-space: nowrap;
	font-family: var(--swc-date-font, 'Playfair Display', Georgia, serif);
	font-size: var(--swc-date-size, 20px);
	color: var(--swc-date-color, #0b2447);
	font-weight: 700;
	letter-spacing: 0.08em;
	z-index: 2;
}

@media (max-width: 767px) {
	.swc-has-mobile-bg .swc-date {
		top: calc(78.3% + var(--swc-date-pos-y, 0px));
	}
}

/* ---------- Post-wedding message card ---------- */
/* A self-contained CSS card -- no background image -- so nothing from
 * the countdown panel shows through, and it never stretches the
 * wrapper beyond its own fixed aspect ratio. Every element below reads
 * its own dedicated CSS variables (color/font/size plus line-height,
 * letter-spacing and margin-top/bottom), independent of the others, so
 * any two elements can be spaced apart from each other freely. */

.swc-vivah-card {
	position: absolute;
	inset: 0;
	border-radius: clamp(16px, 4vw, 30px);
	background: #0b2447;
	padding: clamp(4px, 0.8vw, 7px);
	box-shadow: 0 0 40px 6px rgba(169, 129, 47, 0.3);
	overflow: hidden;
}

.swc-vivah-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: clamp(12px, 3.2vw, 24px);
	border: 2px solid #a9812f;
	background-color: #fbf3e1;
	background-image:
		radial-gradient(circle at 50% 38%, rgba(169, 129, 47, 0.1), transparent 62%),
		repeating-radial-gradient(circle at 50% 42%, rgba(169, 129, 47, 0.07) 0px, rgba(169, 129, 47, 0.07) 1px, transparent 1px, transparent 16px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5% 8%;
	box-sizing: border-box;
	overflow: hidden;
}

.swc-vivah-corner {
	position: absolute;
	color: #a9812f;
	font-size: clamp(9px, 1.4vw, 13px);
	line-height: 1;
}

.swc-corner-tl {
	top: 4%;
	left: 3%;
}

.swc-corner-tr {
	top: 4%;
	right: 3%;
}

.swc-corner-bl {
	bottom: 4%;
	left: 3%;
}

.swc-corner-br {
	bottom: 4%;
	right: 3%;
}

.swc-msg-om {
	position: relative;
	font-size: var(--swc-msg-om-size, 26px);
	color: var(--swc-msg-om-color, #a9812f);
	line-height: 1;
	margin-top: var(--swc-msg-om-margin-top, 0px);
	margin-bottom: var(--swc-msg-om-margin-bottom, clamp(4px, 1vw, 8px));
}

.swc-msg-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--swc-msg-divider-margin-top, 0px);
	margin-bottom: var(--swc-msg-divider-margin-bottom, clamp(6px, 1.2vw, 12px));
}

.swc-msg-divider span {
	width: var(--swc-msg-divider-width, 22px);
	height: 1px;
	background: var(--swc-msg-divider-color, #a9812f);
}

.swc-msg-divider i {
	width: 6px;
	height: 6px;
	background: var(--swc-msg-divider-color, #a9812f);
	transform: rotate(45deg);
	display: inline-block;
}

.swc-msg-label {
	position: relative;
	font-family: var(--swc-msg-toplabel-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-msg-toplabel-size, 11px);
	line-height: var(--swc-msg-toplabel-lineheight, 1.4);
	letter-spacing: var(--swc-msg-toplabel-letterspacing, 0.3em);
	text-transform: uppercase;
	color: var(--swc-msg-toplabel-color, #a9812f);
	margin-top: var(--swc-msg-toplabel-margin-top, 0px);
	margin-bottom: var(--swc-msg-toplabel-margin-bottom, clamp(6px, 1.2vw, 10px));
}

@keyframes swc-msg-glow-pulse {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.1);
	}
	35% {
		opacity: 1;
	}
	55%, 100% {
		opacity: 0.9;
		transform: translate(-50%, -50%) scale(1);
	}
}

.swc-msg-glow {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 70%;
	max-width: 380px;
	height: 34%;
	max-height: 140px;
	background: radial-gradient(ellipse, rgba(217, 181, 103, 0.55) 0%, rgba(217, 181, 103, 0.22) 45%, rgba(217, 181, 103, 0) 75%);
	transform: translate(-50%, -50%) scale(0.1);
	animation: swc-msg-glow-pulse 6s ease-in-out infinite;
	pointer-events: none;
}

.swc-msg-heading {
	position: relative;
	font-family: var(--swc-msg-heading-font, 'Playfair Display', Georgia, serif);
	font-size: var(--swc-msg-heading-size, 34px);
	font-weight: 700;
	color: var(--swc-msg-heading-color, #0b2447);
	line-height: var(--swc-msg-heading-lineheight, 1.3);
	letter-spacing: var(--swc-msg-heading-letterspacing, 0.02em);
	margin-top: var(--swc-msg-heading-margin-top, 0px);
	margin-bottom: var(--swc-msg-heading-margin-bottom, 0px);
}

.swc-msg-rule {
	position: relative;
	width: var(--swc-msg-rule-width, 60px);
	height: 1px;
	background: var(--swc-msg-rule-color, #a9812f);
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--swc-msg-rule-margin-top, clamp(8px, 1.6vw, 16px));
	margin-bottom: var(--swc-msg-rule-margin-bottom, clamp(8px, 1.6vw, 16px));
}

.swc-msg-subtitle {
	position: relative;
	font-family: var(--swc-msg-subtitle-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-msg-subtitle-size, 12.5px);
	line-height: var(--swc-msg-subtitle-lineheight, 1.5);
	letter-spacing: var(--swc-msg-subtitle-letterspacing, 0.16em);
	text-transform: uppercase;
	color: var(--swc-msg-subtitle-color, #0b2447);
	margin-top: var(--swc-msg-subtitle-margin-top, 0px);
}

/* ---------- Confetti (JS-generated pieces) ---------- */
/* Confetti no longer lives inside the widget: it's injected by JS into a
 * single, page-wide, position:fixed layer appended once to <body>
 * (#swc-global-confetti-layer). This lets the burst spread out beyond the
 * widget's own box (and its overflow:hidden) instead of being clipped to
 * the panel. The layer itself is pointer-events:none so it never blocks
 * clicks/scrolling on the rest of the page. */

.swc-global-confetti-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 999999;
}

.swc-confetti-piece {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* ---------- Scratch to reveal ---------- */

.swc-scratch-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	touch-action: none;
	z-index: 10;
}

/* ---------- Two-Stage mode: Reveal Card + Countdown Display ---------- */
/* An alternative to the classic single-panel layout: the scratch layer
 * only covers a small "Reveal Card" (Wedding Date or custom text like
 * "Shree Ganeshaya Namah"), while the countdown numbers sit in their own
 * always-visible section underneath -- never covered by the scratch
 * layer. The .swc-scene-countdown reset below undoes the classic mode's
 * `line-height: 0` (which assumes an <img> drives the height); here the
 * height comes from ordinary block content instead. */

.swc-two-stage .swc-scene-countdown {
	line-height: normal;
}

.swc-reveal-card {
	position: relative;
	width: 100%;
	aspect-ratio: var(--swc-rc-ratio, 2.6);
	border-radius: clamp(14px, 3vw, 26px);
	background: var(--swc-rc-bg, #fbf3e1);
	border: 2px solid var(--swc-rc-border, #a9812f);
	overflow: hidden;
	box-sizing: border-box;
}

.swc-rc-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6% 8%;
	gap: clamp(4px, 1vw, 10px);
	box-sizing: border-box;
}

.swc-rc-top {
	font-family: var(--swc-rc-top-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-rc-top-size, 13px);
	color: var(--swc-rc-top-color, #a9812f);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	line-height: 1.3;
}

.swc-rc-main {
	font-family: var(--swc-rc-main-font, 'Playfair Display', Georgia, serif);
	font-size: var(--swc-rc-main-size, 28px);
	font-weight: 700;
	color: var(--swc-rc-main-color, #1d3b63);
	line-height: 1.25;
}

.swc-rc-sub {
	font-family: var(--swc-rc-sub-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-rc-sub-size, 13px);
	color: var(--swc-rc-sub-color, #5a5a5a);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.3;
}

.swc-cd-section {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: clamp(14px, 2.4vw, 26px);
}

.swc-cd-heading {
	font-family: var(--swc-cd-heading-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-cd-heading-size, 14px);
	color: var(--swc-cd-heading-color, #a9812f);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin-bottom: clamp(10px, 1.8vw, 18px);
}

.swc-cd-numbers {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(8px, 1.6vw, 16px);
	flex-wrap: wrap;
}

.swc-cd-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 64px;
	flex: 1 1 0;
	max-width: 120px;
	padding: clamp(10px, 1.8vw, 18px) clamp(6px, 1.2vw, 12px);
	border-radius: clamp(8px, 1.6vw, 14px);
	background: var(--swc-cd-box-bg, rgba(255, 255, 255, 0.35));
	border: 1px solid var(--swc-cd-box-border, rgba(169, 129, 47, 0.4));
	box-sizing: border-box;
}

.swc-cd-number {
	font-family: var(--swc-cd-number-font, 'Playfair Display', Georgia, serif);
	font-size: var(--swc-cd-number-size, 30px);
	font-weight: 700;
	color: var(--swc-cd-number-color, #1d3b63);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.swc-cd-label {
	font-family: var(--swc-cd-heading-font, 'Cormorant Garamond', Georgia, serif);
	font-size: 11px;
	color: var(--swc-cd-label-color, #a9812f);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.swc-cd-subheading {
	margin-top: clamp(10px, 1.8vw, 18px);
	font-family: var(--swc-cd-subheading-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-cd-subheading-size, 15px);
	font-style: italic;
	color: var(--swc-cd-subheading-color, #1d3b63);
}

@media (max-width: 480px) {
	.swc-cd-box {
		min-width: 54px;
	}
}

/* ---------- Add to Calendar ---------- */

.swc-cal-section {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: var(--swc-cal-margin-top, 24px);
	margin-bottom: var(--swc-cal-margin-bottom, 0px);
	line-height: normal;
}

.swc-cal-heading-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--swc-cal-heading-gap, 14px);
	margin-bottom: var(--swc-cal-heading-margin-bottom, 18px);
}

.swc-cal-divider {
	display: inline-block;
	height: 1px;
	width: var(--swc-cal-divider-width, 40px);
	background: var(--swc-cal-divider-color, rgba(169, 129, 47, 0.5));
}

.swc-cal-heading {
	font-family: var(--swc-cal-heading-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-cal-heading-size, 18px);
	letter-spacing: var(--swc-cal-heading-letterspacing, 0.35em);
	color: var(--swc-cal-heading-color, #a9812f);
	text-transform: uppercase;
	white-space: nowrap;
}

.swc-cal-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--swc-cal-buttons-gap, 16px);
}

.swc-cal-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--swc-cal-btn-padding, 12px 24px);
	border-radius: var(--swc-cal-btn-radius, 999px);
	border-width: var(--swc-cal-btn-border-width, 1px);
	border-style: solid;
	border-color: var(--swc-cal-btn-border-color, rgba(169, 129, 47, 0.6));
	background: var(--swc-cal-btn-bg, rgba(11, 36, 71, 0.85));
	color: var(--swc-cal-btn-color, #f3e6c8);
	font-family: var(--swc-cal-btn-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--swc-cal-btn-size, 15px);
	font-style: italic;
	letter-spacing: var(--swc-cal-btn-letterspacing, 0.02em);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.swc-cal-btn:hover,
.swc-cal-btn:focus-visible {
	background: var(--swc-cal-btn-bg-hover, rgba(11, 36, 71, 1));
	color: var(--swc-cal-btn-color-hover, #ffffff);
	border-color: var(--swc-cal-btn-border-color-hover, rgba(169, 129, 47, 1));
}

.swc-cal-icon {
	display: inline-flex;
	width: var(--swc-cal-icon-size, 16px);
	height: var(--swc-cal-icon-size, 16px);
	flex-shrink: 0;
	color: var(--swc-cal-icon-color, #a9812f);
	transition: color 0.25s ease;
}

.swc-cal-btn:hover .swc-cal-icon,
.swc-cal-btn:focus-visible .swc-cal-icon {
	color: var(--swc-cal-icon-color-hover, #f3e6c8);
}

.swc-cal-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- "Reveal Only After Scratch" animation ---------- */
/* Applied to .swc-cd-section / .swc-cal-section when their "Reveal Only
 * After Scratch" toggle is on: stays invisible and slightly lowered
 * until the scratch layer above is cleared, then fades and floats
 * gently up into place (JS adds .swc-reveal-shown at that moment). */

.swc-reveal-pending {
	opacity: 0;
	transform: translateY(18px);
	pointer-events: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.swc-reveal-pending.swc-reveal-shown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/*
 * Mobile 2x2 layout.
 * Circle centers measured directly from the approved vertical panel:
 * top row 36.21% from top, bottom row 61.20%;
 * left column 31.37%, right column 68.40%.
 */
@media (max-width: 767px) {
	.swc-has-mobile-bg .swc-circle {
		width: 40%;
		max-width: 40%;
	}

	.swc-has-mobile-bg .swc-circle-1 {
		left: calc(31.37% + var(--swc-pos-x, 0px));
		top: calc(36.21% + var(--swc-pos-y, 0px));
	}

	.swc-has-mobile-bg .swc-circle-2 {
		left: calc(68.40% + var(--swc-pos-x, 0px));
		top: calc(36.21% + var(--swc-pos-y, 0px));
	}

	.swc-has-mobile-bg .swc-circle-3 {
		left: calc(31.37% + var(--swc-pos-x, 0px));
		top: calc(61.20% + var(--swc-pos-y, 0px));
	}

	.swc-has-mobile-bg .swc-circle-4 {
		left: calc(68.40% + var(--swc-pos-x, 0px));
		top: calc(61.20% + var(--swc-pos-y, 0px));
	}

	.swc-label {
		letter-spacing: 0.1em;
	}
}

@media (max-width: 480px) {
	.swc-label {
		letter-spacing: 0.08em;
	}
}