/*
 * Mad CTA Card Widget - Following SiteOrigin patterns
 */

/* Font Awesome Animations */
.fa-beat {
  -webkit-animation: fa-beat 1s ease-in-out infinite;
  animation: fa-beat 1s ease-in-out infinite;
}
.fa-bounce {
  -webkit-animation: fa-bounce 1s cubic-bezier(.28,.84,.42,1) infinite;
  animation: fa-bounce 1s cubic-bezier(.28,.84,.42,1) infinite;
}
.fa-fade {
  -webkit-animation: fa-fade 1s cubic-bezier(.4,0,.6,1) infinite;
  animation: fa-fade 1s cubic-bezier(.4,0,.6,1) infinite;
}
.fa-beat-fade {
  -webkit-animation: fa-beat-fade 1s cubic-bezier(.4,0,.6,1) infinite;
  animation: fa-beat-fade 1s cubic-bezier(.4,0,.6,1) infinite;
}
.fa-flip {
  -webkit-animation: fa-flip 1s ease-in-out infinite;
  animation: fa-flip 1s ease-in-out infinite;
}
.fa-shake {
  -webkit-animation: fa-shake 1s linear infinite;
  animation: fa-shake 1s linear infinite;
}
.fa-spin {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}
.fa-spin-pulse {
  -webkit-animation: fa-spin 1s steps(8) infinite;
  animation: fa-spin 1s steps(8) infinite;
}
.fa-spin-reverse {
  -webkit-animation: fa-spin 2s linear infinite reverse;
  animation: fa-spin 2s linear infinite reverse;
}

@-webkit-keyframes fa-beat {
  0%,90% { -webkit-transform: scale(1); transform: scale(1); }
  45% { -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@keyframes fa-beat {
  0%,90% { -webkit-transform: scale(1); transform: scale(1); }
  45% { -webkit-transform: scale(1.25); transform: scale(1.25); }
}

@-webkit-keyframes fa-bounce {
  0% { -webkit-transform: scale(1,1) translateY(0); transform: scale(1,1) translateY(0); }
  10% { -webkit-transform: scale(1.1,.9) translateY(0); transform: scale(1.1,.9) translateY(0); }
  30% { -webkit-transform: scale(.9,1.1) translateY(-0.5em); transform: scale(.9,1.1) translateY(-0.5em); }
  50% { -webkit-transform: scale(1.05,.95) translateY(0); transform: scale(1.05,.95) translateY(0); }
  57% { -webkit-transform: scale(1,1) translateY(-0.125em); transform: scale(1,1) translateY(-0.125em); }
  64% { -webkit-transform: scale(1,1) translateY(0); transform: scale(1,1) translateY(0); }
  100% { -webkit-transform: scale(1,1) translateY(0); transform: scale(1,1) translateY(0); }
}
@keyframes fa-bounce {
  0% { -webkit-transform: scale(1,1) translateY(0); transform: scale(1,1) translateY(0); }
  10% { -webkit-transform: scale(1.1,.9) translateY(0); transform: scale(1.1,.9) translateY(0); }
  30% { -webkit-transform: scale(.9,1.1) translateY(-0.5em); transform: scale(.9,1.1) translateY(-0.5em); }
  50% { -webkit-transform: scale(1.05,.95) translateY(0); transform: scale(1.05,.95) translateY(0); }
  57% { -webkit-transform: scale(1,1) translateY(-0.125em); transform: scale(1,1) translateY(-0.125em); }
  64% { -webkit-transform: scale(1,1) translateY(0); transform: scale(1,1) translateY(0); }
  100% { -webkit-transform: scale(1,1) translateY(0); transform: scale(1,1) translateY(0); }
}

@-webkit-keyframes fa-fade {
  50% { opacity: 0.4; }
}
@keyframes fa-fade {
  50% { opacity: 0.4; }
}

@-webkit-keyframes fa-beat-fade {
  0%,100% { opacity: 0.4; -webkit-transform: scale(1); transform: scale(1); }
  50% { opacity: 1; -webkit-transform: scale(1.125); transform: scale(1.125); }
}
@keyframes fa-beat-fade {
  0%,100% { opacity: 0.4; -webkit-transform: scale(1); transform: scale(1); }
  50% { opacity: 1; -webkit-transform: scale(1.125); transform: scale(1.125); }
}

@-webkit-keyframes fa-flip {
  50% { -webkit-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); }
}
@keyframes fa-flip {
  50% { -webkit-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); }
}

@-webkit-keyframes fa-shake {
  0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
  4% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  8%,24% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
  12%,28% { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
  16% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg); }
  20% { -webkit-transform: rotate(22deg); transform: rotate(22deg); }
  32% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); }
  36% { -webkit-transform: rotate(12deg); transform: rotate(12deg); }
  40%,100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes fa-shake {
  0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
  4% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  8%,24% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
  12%,28% { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
  16% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg); }
  20% { -webkit-transform: rotate(22deg); transform: rotate(22deg); }
  32% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); }
  36% { -webkit-transform: rotate(12deg); transform: rotate(12deg); }
  40%,100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@-webkit-keyframes fa-spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes fa-spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* End Font Awesome Animations */

/* Main widget container */
.mad-cta-card-widget {
	width: 100%;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}

.mad-cta-card-widget * {
	box-sizing: border-box;
}

/* Card container */
.mad-cta-card-container {
	position: relative;
	width: 100%;
	min-height: 300px;
	border-radius: 8px;
	overflow: hidden;
	/* Background color applied via inline styles from template */
}

/* Video background */
.mad-cta-card-video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	border-radius: inherit;
}

/* Video elements */
.mad-cta-card-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	outline: none;
	border: none;
	pointer-events: none;
}

/* Content wrapper - flexbox approach like SiteOrigin */
.mad-cta-card-wrapper {
	position: relative;
	z-index: 3;
	padding: 2em 2.5em;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
}

/* Base elements */
.mad-cta-card-icon {
	flex: 0 0 auto;
}

.mad-cta-card-text {
	flex: 1 1 auto;
}

.mad-cta-card-button {
	flex: 0 0 auto;
}

/* Icon styling */
.mad-cta-card-icon-static-bg {
	/* Static background container - never animates */
	position: relative;
	z-index: 1;
	animation: none !important;
	transform: none !important;
	transition: none !important;
	/* Prevent overflow on small screens */
	max-width: 90%;
	max-height: 200px;
	box-sizing: border-box;
}

.mad-cta-card-icon-background {
	display: inline-block;
	/* Prevent animation inheritance - background should stay static */
	animation: none !important;
	transform: none !important;
	transition: none !important;
}

.mad-cta-card-icon-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.mad-cta-card-icon-font {
	font-size: 48px;
	line-height: 1;
}

/* Fix for gradient text on font icons */
.mad-cta-card-icon-font i {
	background: inherit;
	-webkit-background-clip: inherit;
	background-clip: inherit;
	-webkit-text-fill-color: inherit;
	color: inherit;
}

/* Text styling - use inline styles from template */
.mad-cta-card-text {
	word-wrap: break-word;
	/* Dynamic styles applied via inline CSS from template variables */
}

/* Icon font styling - use inline styles from template */
.mad-cta-card-icon-font {
	/* Dynamic color and size applied via inline CSS from template variables */
}

/* Button styling - use inline styles from template */
.mad-cta-card-btn {
	/* Dynamic colors, padding, etc. applied via inline CSS from template variables */
}

/* Button styling */
.mad-cta-card-btn {
	display: inline-block;
	padding: 12px 24px;
	background-color: #007bb6;
	color: #ffffff;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	transition: all 0.3s ease;
	line-height: 1.4;
	user-select: none;
	min-height: 44px;
}

.mad-cta-card-btn:hover,
.mad-cta-card-btn:focus {
	background: var(--hover-bg-gradient, var(--hover-bg-color, #005a87)) !important;
	color: var(--hover-text-color, #ffffff) !important;
	border-color: var(--hover-border-color) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mad-cta-card-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mad-cta-card-btn-text {
	display: block;
}

/* Positioning using flexbox order and alignment */

/* Icon positioning - vertical order */
.mad-cta-card-widget.icon-position-top-left .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-top-center .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-top-right .mad-cta-card-icon { 
	order: -1;
}
.mad-cta-card-widget.icon-position-center-left .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-center-center .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-center-right .mad-cta-card-icon { 
	order: 0;
}
.mad-cta-card-widget.icon-position-bottom-left .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-bottom-center .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-bottom-right .mad-cta-card-icon { 
	order: 1;
}

/* Icon positioning - horizontal alignment */
.mad-cta-card-widget.icon-position-top-left .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-center-left .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-bottom-left .mad-cta-card-icon { 
	align-self: flex-start;
}
.mad-cta-card-widget.icon-position-top-center .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-center-center .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-bottom-center .mad-cta-card-icon { 
	align-self: center;
}
.mad-cta-card-widget.icon-position-top-right .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-center-right .mad-cta-card-icon,
.mad-cta-card-widget.icon-position-bottom-right .mad-cta-card-icon { 
	align-self: flex-end;
}

/* Text positioning - vertical order */
.mad-cta-card-widget.text-position-top-left .mad-cta-card-text,
.mad-cta-card-widget.text-position-top-center .mad-cta-card-text,
.mad-cta-card-widget.text-position-top-right .mad-cta-card-text { 
	order: -1;
}
.mad-cta-card-widget.text-position-center-left .mad-cta-card-text,
.mad-cta-card-widget.text-position-center-center .mad-cta-card-text,
.mad-cta-card-widget.text-position-center-right .mad-cta-card-text { 
	order: 0;
}
.mad-cta-card-widget.text-position-bottom-left .mad-cta-card-text,
.mad-cta-card-widget.text-position-bottom-center .mad-cta-card-text,
.mad-cta-card-widget.text-position-bottom-right .mad-cta-card-text { 
	order: 1;
}

/* Text positioning - horizontal alignment */
.mad-cta-card-widget.text-position-top-left .mad-cta-card-text,
.mad-cta-card-widget.text-position-center-left .mad-cta-card-text,
.mad-cta-card-widget.text-position-bottom-left .mad-cta-card-text { 
	align-self: flex-start;
	text-align: left;
}
.mad-cta-card-widget.text-position-top-center .mad-cta-card-text,
.mad-cta-card-widget.text-position-center-center .mad-cta-card-text,
.mad-cta-card-widget.text-position-bottom-center .mad-cta-card-text { 
	align-self: center;
	text-align: center;
}
.mad-cta-card-widget.text-position-top-right .mad-cta-card-text,
.mad-cta-card-widget.text-position-center-right .mad-cta-card-text,
.mad-cta-card-widget.text-position-bottom-right .mad-cta-card-text { 
	align-self: flex-end;
	text-align: right;
}

/* Button positioning - vertical order */
.mad-cta-card-widget.button-position-top-left .mad-cta-card-button,
.mad-cta-card-widget.button-position-top-center .mad-cta-card-button,
.mad-cta-card-widget.button-position-top-right .mad-cta-card-button { 
	order: -1;
}
.mad-cta-card-widget.button-position-center-left .mad-cta-card-button,
.mad-cta-card-widget.button-position-center-center .mad-cta-card-button,
.mad-cta-card-widget.button-position-center-right .mad-cta-card-button { 
	order: 0;
}
.mad-cta-card-widget.button-position-bottom-left .mad-cta-card-button,
.mad-cta-card-widget.button-position-bottom-center .mad-cta-card-button,
.mad-cta-card-widget.button-position-bottom-right .mad-cta-card-button { 
	order: 1;
}

/* Button positioning - horizontal alignment */
.mad-cta-card-widget.button-position-top-left .mad-cta-card-button,
.mad-cta-card-widget.button-position-center-left .mad-cta-card-button,
.mad-cta-card-widget.button-position-bottom-left .mad-cta-card-button { 
	align-self: flex-start;
}
.mad-cta-card-widget.button-position-top-center .mad-cta-card-button,
.mad-cta-card-widget.button-position-center-center .mad-cta-card-button,
.mad-cta-card-widget.button-position-bottom-center .mad-cta-card-button { 
	align-self: center;
}
.mad-cta-card-widget.button-position-top-right .mad-cta-card-button,
.mad-cta-card-widget.button-position-center-right .mad-cta-card-button,
.mad-cta-card-widget.button-position-bottom-right .mad-cta-card-button { 
	align-self: flex-end;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.mad-cta-card-wrapper {
		padding: 1.5em;
		gap: 1em;
	}
	
	/* Scale down large icon backgrounds on mobile */
	.mad-cta-card-icon-static-bg {
		max-width: 80%;
		max-height: 150px;
	}
	
	.mad-cta-card-btn:hover,
	.mad-cta-card-btn:focus {
		transform: none;
	}
	
	/* Disable hover effects on touch devices for better performance */
	[class*="mad-hover-effect-"] .mad-cta-card-container {
		transform: none !important;
		filter: none !important;
	}
	
	[class*="mad-hover-effect-"] .mad-cta-card-container::before,
	[class*="mad-hover-effect-"] .mad-cta-card-container::after {
		display: none !important;
	}
}

@media (max-width: 480px) {
	/* Extra small screens - be more aggressive */
	.mad-cta-card-icon-static-bg {
		max-width: 70%;
		max-height: 120px;
	}
}

/* =====================================================
   BACKGROUND HOVER EFFECTS
   ===================================================== */

/* Base transition for all hover effects */
[class*="mad-hover-effect-"] .mad-cta-card-container {
	transition: all var(--hover-duration, 0.3s) ease;
	position: relative;
}

/* Keep overflow hidden to clip corner accents to just corner portions */
.mad-hover-effect-corner_accents .mad-cta-card-container {
	overflow: hidden;
}

/* Duration classes for fallback */
.mad-hover-duration-fast .mad-cta-card-container {
	transition-duration: 0.2s;
}
.mad-hover-duration-normal .mad-cta-card-container {
	transition-duration: 0.3s;
}
.mad-hover-duration-slow .mad-cta-card-container {
	transition-duration: 0.5s;
}
.mad-hover-duration-slower .mad-cta-card-container {
	transition-duration: 0.7s;
}

/* =====================================================
   1. CLASSIC CORNER ACCENTS - EXACT copy of working professional-modern.css
   ===================================================== */
.mad-hover-effect-corner_accents .mad-cta-card-container::before,
.mad-hover-effect-corner_accents .mad-cta-card-container::after {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	opacity: 0;
	transition: all var(--hover-duration, 0.3s);
	pointer-events: none;
	z-index: 10;
}

.mad-hover-effect-corner_accents .mad-cta-card-container::before {
	background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
	top: -175px;
	left: -175px;
}

.mad-hover-effect-corner_accents .mad-cta-card-container::after {
	background: linear-gradient(135deg, #1E3A8A 0%, #6B21A8 100%);
	bottom: -175px;
	right: -175px;
}

.mad-hover-effect-corner_accents:hover .mad-cta-card-container::before,
.mad-hover-effect-corner_accents:hover .mad-cta-card-container::after {
	opacity: 0.1;
}

/* =====================================================
   2. KEN BURNS EFFECT
   ===================================================== */
.mad-hover-effect-ken_burns .mad-cta-card-container {
	transform-origin: center center;
}

.mad-hover-effect-ken_burns:hover .mad-cta-card-container {
	transform: scale(calc(1 + var(--hover-intensity, 0.5) * 0.1)) 
	           translate(calc(var(--hover-intensity, 0.5) * 5px), calc(var(--hover-intensity, 0.5) * -3px));
}

/* =====================================================
   3. DIAGONAL SWEEP
   ===================================================== */
.mad-hover-effect-diagonal_sweep .mad-cta-card-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, 
		transparent 0%, 
		rgba(255, 255, 255, calc(var(--hover-intensity, 0.5) * 0.4)) 30%,
		rgba(255, 255, 255, calc(var(--hover-intensity, 0.5) * 0.6)) 50%,
		rgba(255, 255, 255, calc(var(--hover-intensity, 0.5) * 0.4)) 70%,
		transparent 100%);
	background-size: 200% 200%;
	background-position: -100% -100%;
	transition: background-position var(--hover-duration, 0.3s) ease;
	pointer-events: none;
	z-index: 10;
}

.mad-hover-effect-diagonal_sweep:hover .mad-cta-card-container::before {
	background-position: 100% 100%;
}

/* =====================================================
   4. DOUBLE-SIDED CARD FLIP - Following blueprint from prismic.io
   ===================================================== */

/* Double-sided card structure - blueprint adapted */
.mad-hover-effect-double_sided .mad-cta-card-container {
	perspective: 1000px;
	height: auto !important; /* Let content determine height */
	display: flex !important;
	flex-direction: column !important;
	/* Critical fix for Safari/Firefox backface visibility */
	overflow: visible !important;
	/* Cross-browser perspective */
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
}

.mad-hover-effect-double_sided .mad-cta-card-inner {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;
	/* Cross-browser 3D transform support */
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/* Cross-browser transitions */
	-webkit-transition: -webkit-transform var(--hover-duration, 0.6s);
	-moz-transition: -moz-transform var(--hover-duration, 0.6s);
	-ms-transition: -ms-transform var(--hover-duration, 0.6s);
	transition: transform var(--hover-duration, 0.6s);
}


/* Default horizontal flip */
.mad-hover-effect-double_sided:hover .mad-cta-card-inner {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* Vertical flip override */
.mad-hover-effect-double_sided.mad-flip-axis-vertical:hover .mad-cta-card-inner {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.mad-hover-effect-double_sided .mad-cta-card-front {
	position: relative !important; /* Normal flow to contribute to parent height */
	width: 100% !important;
	/* Cross-browser backface-visibility */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Initialize transform for Firefox/Safari */
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	border-radius: inherit;
}

/* When card is hovered (flipped), disable pointer events on front to allow back clicks */
.mad-hover-effect-double_sided:hover .mad-cta-card-front {
	pointer-events: none;
}

.mad-hover-effect-double_sided .mad-cta-card-back {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	/* Cross-browser backface-visibility */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Initialize back side transform for Firefox/Safari */
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
	border-radius: inherit;
	/* Force to match container dimensions exactly */
	width: 100% !important;
	height: 100% !important;
}

/* Vertical flip back side needs different initial transform */
.mad-hover-effect-double_sided.mad-flip-axis-vertical .mad-cta-card-back {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/* Ensure back side wrapper behaves identically to front side */
.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-wrapper {
	position: relative;
	z-index: 3;
	padding: 2em 2.5em;
	text-align: center;
	height: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
	/* Remove any background that might be blocking the parent background */
	background: transparent;
}

/* Ensure back side button is clickable */
.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-button {
	position: relative;
	z-index: 5;
	pointer-events: auto;
}

.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-btn {
	pointer-events: auto;
}

/* Force back side text to stack vertically and center properly */
.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-text {
	display: flex !important;
	flex-direction: column !important;
	text-align: center;
	width: 100%;
}

.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-text > div {
	display: block !important;
	width: 100% !important;
}


.mad-hover-effect-double_sided .mad-cta-card-back {
	transform: rotateY(180deg);
}

/* For vertical flip, back side needs additional rotation to not be upside down */
.mad-hover-effect-double_sided.mad-flip-axis-vertical .mad-cta-card-back {
	transform: rotateX(180deg);
}

/* Back side background styling - apply to the full back element */
.mad-hover-effect-double_sided .mad-cta-card-back {
	background-color: var(--back-bg-color, var(--card-bg-color, transparent)) !important;
	background-image: var(--back-bg-image, none) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* Back side text styling - encompasses both title and body text */
.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-text {
	color: var(--back-text-color, inherit);
	background-color: var(--back-text-bg-color, transparent);
	padding: var(--back-text-bg-padding, 0.5em);
	border-radius: var(--back-text-bg-border-radius, 4px);
	/* Inherit font family and size from front side */
	font-family: var(--back-text-font-family, inherit);
	font-size: var(--back-text-font-size, inherit);
}
}


/* Back side video background */
.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	border-radius: inherit;
}

.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-video-background video,
.mad-hover-effect-double_sided .mad-cta-card-back .mad-cta-card-video-background iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	outline: none;
	border: none;
	pointer-events: none;
}

/* Mobile tap handling for double-sided cards */
@media (max-width: 768px) {
	/* Fix overflow issues on mobile - remove the problematic overflow: visible */
	.mad-hover-effect-double_sided .mad-cta-card-container {
		overflow: hidden !important;
		max-width: 100vw;
		box-sizing: border-box;
	}
	
	/* Ensure all card elements use proper box-sizing */
	.mad-cta-card-widget,
	.mad-cta-card-container,
	.mad-cta-card-wrapper,
	.mad-cta-card-inner,
	.mad-cta-card-front,
	.mad-cta-card-back {
		box-sizing: border-box;
		max-width: 100%;
	}
	
	/* Enable tap-to-flip on mobile */
	.mad-hover-effect-double_sided.mobile-flipped .mad-cta-card-inner {
		transform: rotateY(180deg);
	}
	
	/* Fix vertical flip cards getting upside-down on mobile */
	.mad-hover-effect-double_sided.mad-flip-axis-vertical.mobile-flipped .mad-cta-card-inner {
		transform: rotateX(180deg) !important;
	}
	
	/* Disable hover on mobile for double-sided cards - but only when not mobile-flipped */
	.mad-hover-effect-double_sided:not(.mobile-flipped):hover .mad-cta-card-inner {
		transform: rotateY(0deg);
	}
	
	/* Ensure tap takes precedence for horizontal flip */
	.mad-hover-effect-double_sided.mobile-flipped:hover .mad-cta-card-inner {
		transform: rotateY(180deg) !important;
	}
	
	/* Ensure tap takes precedence for vertical flip */
	.mad-hover-effect-double_sided.mad-flip-axis-vertical.mobile-flipped:hover .mad-cta-card-inner {
		transform: rotateX(180deg) !important;
	}
	
	/* Add Safari z-fighting fix */
	.mad-hover-effect-double_sided .mad-cta-card-back {
		transform: rotateY(180deg) translateZ(1px);
	}
	
	.mad-hover-effect-double_sided.mad-flip-axis-vertical .mad-cta-card-back {
		transform: rotateX(180deg) translateZ(1px);
	}
}