/**
 * Webinar Thank You Pattern Styles
 */

/* ── Pattern container ── */
.webinar-thank-you-pattern {
	padding: 60px 20px;
}

/* ── Card container ── */
.webinar-card {
	background: var(--wp--preset--color--navy-light, #232845);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
	animation: fadeUp 0.6s ease both;
	margin-bottom: 0;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Card accent bar ── */
.card-accent {
	height: 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--custom-pink, #dc556c), var(--wp--preset--color--purple, #6b5bb5));
}

/* ── Card body ── */
.card-body {
	padding: 48px 48px 40px;
}

/* ── Checkmark section ── */
.check-wrap {
	gap: 16px;
	margin-bottom: 28px;
}

.check-icon-wrapper {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--custom-pink, #dc556c);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: popIn 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	padding: 13px;
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.check-icon-wrapper img {
	filter: brightness(0) invert(1);
}

.check-label {
	font-family: var(--wp--preset--font-family--barlow-condensed, 'Barlow Condensed', sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-pink, #dc556c);
	margin: 0;
}

/* ── Title and subtitle ── */
.webinar-title {
	font-family: var(--wp--preset--font-family--barlow-condensed, 'Barlow Condensed', sans-serif);
	font-size: 2.6rem;
	font-weight: 900;
	line-height: 1.05;
	margin-bottom: 16px;
	text-transform: uppercase;
	margin-top: 0;
}

.webinar-subtitle {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 36px;
}

/* ── Details grid ── */
.webinar-details {
	gap: 12px;
	margin-bottom: 36px;
}

p.detail-label {
    color: white;
    margin-bottom: 0 !important;
}

.detail-item {
	background: var(--wp--preset--color--navy, #1a1e35);
	border-radius: 8px;
	padding: 16px 20px;
	gap: 12px;
}

.detail-icon img {
	margin-top: 2px;
	filter: invert(47%) sepia(43%) saturate(1620%) hue-rotate(314deg) brightness(96%) contrast(87%);
}

.detail-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray, #a0a8c0);
	margin-bottom: 3px;
	margin-top: 0;
}

.detail-value {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.2;
}

/* ── CTA button ── */
.btn-join-webinar {
	margin-bottom: 24px;
}

.btn-join-webinar .wp-block-button__link {
	background: var(--wp--preset--color--custom-pink, #dc556c);
	color: white;
	font-family: var(--wp--preset--font-family--barlow, 'Barlow', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 6px;
	padding: 16px;
	width: 100%;
	transition: background 0.2s;
}

.btn-join-webinar .wp-block-button__link:hover {
	background: #c44459;
}

/* ── Share section ── */
.share-section {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 24px;
	gap: 12px;
}

.share-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray, #a0a8c0);
	margin: 0 4px 0 0;
}

.share-buttons {
	gap: 8px;
}

.share-btn .wp-block-button__link {
	padding: 8px 16px;
	border-radius: 5px;
	font-size: 0.82rem;
	font-weight: 600;
	color: white;
	transition: opacity 0.2s;
}

.share-btn .wp-block-button__link:hover {
	opacity: 0.85;
}

.share-btn.twitter .wp-block-button__link {
	background: #000000;
}

.share-btn.linkedin .wp-block-button__link {
	background: #0077b5;
}

.share-btn.facebook .wp-block-button__link {
	background: #1877f2;
}

/* ── Mobile responsive ── */
@media (max-width: 560px) {
	.webinar-thank-you-pattern {
		padding: 32px 16px;
	}

	.card-body {
		padding: 32px 24px 28px;
	}

	.webinar-title {
		font-size: 2rem;
	}

	.webinar-details {
		grid-template-columns: 1fr;
	}

	.share-section {
		flex-direction: column;
		align-items: flex-start;
	}

	.share-buttons {
		width: 100%;
	}

	.share-btn {
		width: 100%;
	}
}