/* 📄 C:\vindxit\frontend\styles\lady_verdict.css */
/* 🎨 Styles Lady's comic-style verdict module, including bubble, image, and animation */

/* .lady-verdict {
	text-align: center;
	margin-top: 40px;
} */
/* ↑ If you re-enable this wrapper, it centers the whole verdict block. */

/* 💬 Comic-Style Speech Bubble */
.speech-bubble {
	position: relative;                  /* needed for ::after tail positioning */
	display: inline-block;               /* shrink to content while allowing padding */
	background: #ffffff;                 /* white balloon */
	color: #333;                         /* readable dark text */
	padding: 20px 25px;                  /* comfy interior spacing */
	border-radius: 20px;                 /* rounded comic look */
	box-shadow:                         /* same layered depth as vx-reasons */
		10px 12px 0 rgba(0,0,0,.10),
		20px 26px 38px rgba(0,0,0,.28);
	max-width: 90%;                      /* avoid edge-to-edge on small screens */
	margin: 0 auto;                      /* center in its container */
	font-family: 'Poppins', sans-serif;  /* match site typography */
	font-size: 1.1rem;                   /* slightly larger than base for readability */
	line-height: 1.4em;                  /* relaxed multiline copy */
}

/* ✏️ Comic bubble tail (pointing down to Lady) */
.speech-bubble::after {
	content: '';
	position: absolute;
	bottom: -20px;                       /* place tail below bubble */
	left: 50%;
	transform: translateX(-50%);         /* center the tail horizontally */
	border-width: 12px 15px 0;           /* triangle dimensions (points upward) */
	border-style: solid;
	border-color: #ffffff transparent transparent transparent; /* white top triangle */
	filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));       /* soft separation from bg */
}

/* 🐶 Lady image styling */
.lady-image {
	max-width: 180px;                    /* default figure size on desktop */
	height: auto;                        /* maintain aspect ratio */
	display: block;                      /* allow margin auto centering */
	margin: 30px auto 10px auto;         /* space above/below bubble */
	/* silhouette-hugging shadow, same style as the box */
	filter:
		drop-shadow(10px 12px 0 rgba(0,0,0,.10))
		drop-shadow(20px 26px 38px rgba(0,0,0,.28));
}

/* 📱 Mobile scaling */
@media (max-width: 900px) {
	.lady-image {
		max-width: 120px;                /* smaller figure for narrow screens */
	}
	.speech-bubble {
		padding: 16px 20px;              /* tighten padding on mobile */
		font-size: 1rem;                 /* match typical body text size */
	}
}

/* 🎭 Text fade animation */
/*@keyframes fadeInOut {
	0%   { opacity: 0; }                /* start hidden */
	/*10%  { opacity: 1; }                /* quick fade in */
	/*90%  { opacity: 1; }                /* hold visible for most of duration */
	/*100% { opacity: 0; }                /* fade out for next message */
/*}

/* ✨ Applied via JS on each verdict step */
/*.lady-speech-fade {
/*	animation: fadeInOut 6s ease-in-out; /* smooth in/out over 6s */
/*}

/* ─────────────────────────────────────────────
   📐 Y-Axis Centering of #resultSection (Desktop)
   (These were disabled; leaving in place for future opt-in)
────────────────────────────────────────────── */
html, body {
	height: 100%;                         /* enables flex centering layouts elsewhere */
}

/* #resultSection {
	min-height: 100vh;                   // full-height card for vertical centering
	display: none;                        // hidden by default until results are ready
	flex-direction: column !important;    // ensure vertical stack within
	align-items: center !important;       // horizontal center
	justify-content: center !important;   // vertical center
	padding: 2rem;
	box-sizing: border-box;
	text-align: center;
} */

/* 📱 Allow vertical scroll and reduce height on mobile */
@media only screen and (max-width: 768px) {
	#resultSection {
		min-height: auto !important;      /* avoid forced tall card on phones */
		padding: 1rem !important;         /* lighter spacing on small screens */
		justify-content: flex-start !important;  /* top-align so content can scroll */
	}
}
/* ─────────────────────────────────────────────
   🩷 Nested sub-list styling (safety features)
────────────────────────────────────────────── */
.lady-verdict ul ul {
	margin-top: 6px;           /* small gap above nested list */
	margin-bottom: 6px;        /* small gap below */
	padding-left: 1.25rem;     /* indent from parent bullet */
	list-style-type: circle;   /* open circle style for distinction */
	font-size: 0.95rem;        /* slightly smaller text */
	color: #444;               /* softer gray text */
}

.lady-verdict ul ul li {
	margin: 2px 0;             /* tighter vertical spacing */
	line-height: 1.3em;        /* compact line height */
}