/* =============================================================================
   Dentalora Hero Arched Stack Widget — Frontend Styles
   Scoped entirely to: .elementor-widget-dentalora-hero-arched-stack
   Compatible with Elementor, RTL, and WCAG 2.1 AA.
   ============================================================================= */

/* ── 1. Showcase Container ─────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-showcase-wrap {
	position: relative;
	max-width: 650px;
	margin-inline: auto;
}

/* ── 2. Hero Image ─────────────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-as-image {
	position: relative;
	overflow: hidden;
	/* Default arched top — overridable via Elementor Border Radius control */
	border-radius: 90px 90px 20px 20px;
	line-height: 0; /* Collapse inline spacing */
}

.elementor-widget-dentalora-hero-arched-stack .dnl-as-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-as-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* ── 3. Floating Card Base ─────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-as-card {
	position: absolute;
	background-color: #ffffff;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.10 );
	transition:
		transform 0.35s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
		box-shadow 0.35s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
	will-change: transform;
}

/* ── 4. Hover Lift ─────────────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-hover-lift:hover {
	transform: translateY( -6px );
	box-shadow: 0 28px 80px rgba( 0, 0, 0, 0.14 );
}

/* ── 5. Scale Hover ────────────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-scale-hover:hover {
	transform: scale( 1.035 );
	box-shadow: 0 28px 70px rgba( 0, 0, 0, 0.13 );
}

/* ── 6. Float Animation ────────────────────────────────────────────────────── */

@keyframes dnl-float {
	0%,
	100% { transform: translateY( 0 ); }
	50%   { transform: translateY( -8px ); }
}

.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-float {
	animation: dnl-float 4.6s ease-in-out infinite;
}

/* Stagger each card */
.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-float.dnl-appt-card  { animation-delay: 0s; }
.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-float.dnl-feat-card  { animation-delay: 0.6s; }
.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-float.dnl-rating-card { animation-delay: 1.2s; }

/* Pause float on hover so lift/scale still works */
.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-float:hover {
	animation-play-state: paused;
}

/* ── 7. Fade-In on Scroll ──────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack.dnl-fade-init .dnl-as-card {
	opacity: 0;
	transform: translateY( 18px );
	transition:
		opacity  0.55s ease,
		transform 0.55s ease;
}

.elementor-widget-dentalora-hero-arched-stack.dnl-fade-init .dnl-as-card.dnl-in {
	opacity: 1;
	transform: translateY( 0 );
}

/* Keep float going after fade completes */
.elementor-widget-dentalora-hero-arched-stack.dnl-fade-init .dnl-as-card.dnl-float.dnl-in {
	animation: dnl-float 4.6s ease-in-out 0.55s infinite;
}

/* ── 8. Appointment Card ───────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-appt-card {
	top:   40px;
	right: -20px;
	width: 300px;
	padding: 26px;
	z-index: 10;
}

/* Label row */
.elementor-widget-dentalora-hero-arched-stack .dnl-appt-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
	margin-bottom:   10px;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-appt-label {
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          #C5A55B;
	line-height:    1;
}

/* Status dot */
.elementor-widget-dentalora-hero-arched-stack .dnl-status-dot {
	width:        10px;
	height:       10px;
	border-radius: 50%;
	background-color: #4CAF76;
	flex-shrink:  0;
}

/* Appointment heading */
.elementor-widget-dentalora-hero-arched-stack .dnl-appt-time {
	font-size:      30px;
	font-weight:    700;
	color:          #203B2C;
	margin:         0 0 12px;
	line-height:    1.1;
	letter-spacing: -0.02em;
}

/* Description */
.elementor-widget-dentalora-hero-arched-stack .dnl-appt-desc {
	font-size:   14px;
	line-height: 1.65;
	color:       #6b6460;
	margin:      0 0 18px;
}

/* CTA Button */
.elementor-widget-dentalora-hero-arched-stack .dnl-btn {
	display:         block;
	background-color: #1F3A2E;
	padding:         14px 20px;
	border-radius:   12px;
	color:           #ffffff;
	font-weight:     600;
	font-size:       14px;
	text-align:      center;
	text-decoration: none;
	letter-spacing:  0.01em;
	border:          none;
	cursor:          pointer;
	transition:
		background-color 0.25s ease,
		color             0.25s ease,
		transform         0.2s  ease;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-btn:hover,
.elementor-widget-dentalora-hero-arched-stack .dnl-btn:focus-visible {
	background-color: #2d5240;
	color:            #ffffff;
	transform:        translateY( -1px );
	outline:          none;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-btn:focus {
	outline: 2px solid #4CAF76;
	outline-offset: 3px;
}

/* ── 9. Feature Card ───────────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-feat-card {
	right:    -30px;
	bottom:   110px;
	width:    290px;
	padding:  0;
	overflow: hidden;
	z-index:  10;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-feat-img {
	width:       100%;
	height:      150px;
	object-fit:  cover;
	display:     block;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-feat-body {
	padding: 18px 22px 22px;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-feat-label {
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          #C5A55B;
	margin:         0 0 7px;
	line-height:    1;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-feat-desc {
	font-size:   13.5px;
	line-height: 1.65;
	color:       #6b6460;
	margin:      0;
}

/* ── 10. Rating Card ───────────────────────────────────────────────────────── */

.elementor-widget-dentalora-hero-arched-stack .dnl-rating-card {
	left:    -20px;
	bottom:  30px;
	width:   230px;
	padding: 26px;
	z-index: 10;
}

/* Stars */
.elementor-widget-dentalora-hero-arched-stack .dnl-stars {
	display:       flex;
	gap:           2px;
	margin-bottom: 8px;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-star {
	font-size:   15px;
	color:       #C5A55B;
	line-height: 1;
}

/* Score + text row */
.elementor-widget-dentalora-hero-arched-stack .dnl-rating-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-rating-meta {
	flex:      1;
	min-width: 0;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-score {
	font-size:      28px;
	font-weight:    700;
	color:          #203B2C;
	line-height:    1;
	letter-spacing: -0.03em;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-review-text {
	font-size:   12px;
	color:       #6b6460;
	margin:      4px 0 0;
	line-height: 1.4;
}

/* Avatar Stack */
.elementor-widget-dentalora-hero-arched-stack .dnl-avatars {
	display:        flex;
	flex-direction: row-reverse;
}

.elementor-widget-dentalora-hero-arched-stack .dnl-avatar {
	width:         32px;
	height:        32px;
	border-radius: 50%;
	border:        2px solid #ffffff;
	object-fit:    cover;
	display:       block;
	margin-left:   -8px;
}

/* The last child (visually first) has no negative margin */
.elementor-widget-dentalora-hero-arched-stack .dnl-avatars .dnl-avatar:last-child {
	margin-left: 0;
}

/* ── 11. Responsive — Tablet (≤ 1024px) ────────────────────────────────────── */

@media ( max-width: 1024px ) {

	.elementor-widget-dentalora-hero-arched-stack .dnl-appt-card {
		right: 0;
	}

	.elementor-widget-dentalora-hero-arched-stack .dnl-feat-card {
		right: 0;
	}

	.elementor-widget-dentalora-hero-arched-stack .dnl-rating-card {
		left: 0;
	}
}

/* ── 12. Responsive — Mobile (≤ 767px) ─────────────────────────────────────── */

@media ( max-width: 767px ) {

	.elementor-widget-dentalora-hero-arched-stack .dnl-showcase-wrap {
		display:        flex;
		flex-direction: column;
		gap:            16px;
	}

	/* Override all absolute positioning — stack vertically */
	.elementor-widget-dentalora-hero-arched-stack .dnl-as-card {
		position: relative !important;
		top:      auto !important;
		right:    auto !important;
		bottom:   auto !important;
		left:     auto !important;
		width:    100% !important;
	}

	.elementor-widget-dentalora-hero-arched-stack .dnl-appt-card {
		order: 2;
	}

	.elementor-widget-dentalora-hero-arched-stack .dnl-feat-card {
		order: 3;
	}

	.elementor-widget-dentalora-hero-arched-stack .dnl-rating-card {
		order: 4;
	}
}

/* ── 13. RTL Support ───────────────────────────────────────────────────────── */

[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-appt-card {
	right: auto;
	left:  -20px;
}

[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-feat-card {
	right: auto;
	left:  -30px;
}

[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-rating-card {
	left:  auto;
	right: -20px;
}

/* Mirror avatar stack direction for RTL */
[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-avatars {
	flex-direction: row;
}

[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-avatar {
	margin-left:  0;
	margin-right: -8px;
}

[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-avatars .dnl-avatar:last-child {
	margin-right: 0;
}

/* Mirror RTL tablet overrides */
@media ( max-width: 1024px ) {
	[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-appt-card {
		left:  0;
		right: auto;
	}

	[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-feat-card {
		left:  0;
		right: auto;
	}

	[dir="rtl"] .elementor-widget-dentalora-hero-arched-stack .dnl-rating-card {
		right: 0;
		left:  auto;
	}
}

/* ── 14. Reduced-Motion Accessibility ─────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {

	.elementor-widget-dentalora-hero-arched-stack .dnl-as-card,
	.elementor-widget-dentalora-hero-arched-stack .dnl-as-card.dnl-float,
	.elementor-widget-dentalora-hero-arched-stack.dnl-fade-init .dnl-as-card,
	.elementor-widget-dentalora-hero-arched-stack .dnl-btn {
		animation:  none !important;
		transition: none !important;
		opacity:    1    !important;
		transform:  none !important;
	}
}