/*
 * Umount Compatibility Finder — Frontend Styles
 *
 * We load bootstrap-utilities.min.css (NOT bootstrap.min.css) so we get
 * layout helpers (d-flex, gap-*, w-100, fw-bold, etc.) without Bootstrap's
 * Reboot, which resets headings and links globally and breaks the site header.
 *
 * Component styles (card, form-select, btn, badge, alert) are written here,
 * scoped inside .umount-finder, so nothing leaks to the rest of the page.
 */

/* ── Scoped box-model reset ── */
.umount-finder,
.umount-finder *,
.umount-finder *::before,
.umount-finder *::after { box-sizing: border-box; }

/* ── Outer card ── */
.umount-finder {
	max-width:     620px;
	margin:        2rem auto;
	background:    #fff;
	border-radius: 0.75rem;       /* Bootstrap rounded-4 equivalent */
	box-shadow:    0 0.5rem 1rem rgba(0,0,0,.15); /* Bootstrap shadow */
	overflow:      hidden;
	font-family:   inherit;
	color:         inherit;
	line-height:   1.5;
}

/* ── Card body ── */
.umount-finder .card-body {
	padding: 1.5rem;
}
@media (min-width: 992px) {
	.umount-finder .card-body { padding: 2.5rem; }
}

/* ── Header block ── */
.umount-header-box {
	min-height:      6rem;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
}

/* Headings inside our widget — reset any theme overrides */
.umount-finder__title {
	font-size:   1.5rem;
	font-weight: 700;
	margin:      0 0 0.35rem;
	padding:     0;
	line-height: 1.3;
	color:       inherit;
}
.umount-finder__subtitle {
	margin:    0;
	font-size: 0.95rem;
	color:     #6c757d;
}

/* Heading crossfade */
.umount-finder__title,
.umount-finder__subtitle { transition: opacity 0.18s ease; }
.umount-heading--fading   { opacity: 0 !important; }

/* ── Form select ── */
.umount-finder .form-select {
	display:            block;
	width:              100%;
	padding:            0.5rem 2.25rem 0.5rem 0.75rem;
	font-size:          1rem;
	font-family:        inherit;
	font-weight:        400;
	line-height:        1.5;
	color:              #212529;
	background-color:   #fff;
	background-image:   url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat:  no-repeat;
	background-position: right 0.75rem center;
	background-size:    16px 12px;
	border:             1px solid #ced4da;
	border-radius:      0.375rem;
	appearance:         none;
	-webkit-appearance: none;
	transition:         border-color 0.15s ease, box-shadow 0.15s ease;
	outline:            0;
}
.umount-finder .form-select-lg {
	padding:     0.5rem 3rem 0.5rem 1rem;
	font-size:   1.15rem;
	border-radius: 0.5rem;
}
.umount-finder .form-select:focus {
	outline: 0;
}

/* ── Buttons ── */
.umount-finder .btn {
	display:          inline-block;
	font-weight:      600;
	font-family:      inherit;
	line-height:      1.5;
	text-align:       center;
	text-decoration:  none;
	vertical-align:   middle;
	cursor:           pointer;
	user-select:      none;
	padding:          0.5rem 1rem;
	font-size:        1rem;
	border-radius:    0.375rem;
	border:           1px solid transparent;
	transition:       color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.umount-finder .btn-lg {
	padding:       0.65rem 1.25rem;
	font-size:     1.1rem;
	border-radius: 0.5rem;
}
.umount-finder .btn-outline-secondary {
	color:        #6c757d;
	border-color: #6c757d;
	background:   transparent;
}
.umount-finder .btn-outline-secondary:hover,
.umount-finder .btn-outline-secondary:focus {
	background-color: #6c757d;
	color:            #fff;
}

/* Primary "Buy" button — colour from wp_add_inline_style */
.btn-umount {
	color:           #fff !important;
	text-decoration: none;
	cursor:          pointer;
	font-weight:     600;
}

/* ── Badge ── */
.umount-finder .badge {
	display:         inline-block;
	padding:         0.4em 0.7em;
	font-size:       0.85em;
	font-weight:     700;
	line-height:     1.4;
	text-align:      center;
	white-space:     normal;
	word-break:      break-word;
	overflow-wrap:   break-word;
	max-width:       100%;
	border-radius:   0.375rem;
	color:           #fff;
}
.umount-finder .bg-warning { background-color: #ffc107 !important; }
.umount-finder .text-dark  { color: #212529 !important; }

/* ── Alert ── */
.umount-finder .alert {
	padding:       1rem;
	border:        1px solid transparent;
	border-radius: 0.375rem;
}
.umount-finder .alert-warning {
	color:            #664d03;
	background-color: #fff3cd;
	border-color:     #ffecb5;
}

/* ── "Don't see your brand?" note below the tool ── */
.umount-contact-note {
	max-width:     620px;
	margin-top:    0.75rem !important;
	background:    transparent;
	box-shadow:    none;
	border-radius: 0;
	overflow:      visible;
}

/* ── Button groups stack on small screens ── */
@media (max-width: 480px) {
	.umount-btn-group {
		flex-direction: column;
	}
	.umount-btn-group .btn {
		width: 100%;
	}
}

/* ── Step visibility ── */
.umount-finder__step--hidden { display: none !important; }

/* ── Result reveal animation ── */
.umount-finder__result {
	opacity:        0;
	transform:      translateY(8px);
	transition:     opacity 0.28s ease, transform 0.28s ease;
	pointer-events: none;
}
.umount-finder__result--visible {
	opacity:        1;
	transform:      translateY(0);
	pointer-events: auto;
}

/* ── Result card ── */
.umount-result-card { border-width: 2px !important; }

.umount-result-label {
	font-size:      0.75rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin:         0 0 0.75rem;
}

/* ── "AND" divider between multiple required parts ── */
.umount-and-divider {
	display:     flex;
	align-items: center;
	text-align:  center;
	gap:         0.75rem;
}
.umount-and-divider::before,
.umount-and-divider::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: #dee2e6;
}
.umount-and-divider span {
	font-size:      0.7rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          #6c757d;
	white-space:    nowrap;
}

/* ── Progress indicator ── */
.umount-prog-circle {
	width:           36px;
	height:          36px;
	border-radius:   50%;
	border:          2px solid #dee2e6;
	background:      transparent;
	color:           #dee2e6;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.8rem;
	font-weight:     700;
	transition:      background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.umount-prog-label {
	font-size:      0.68rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          #dee2e6;
	text-align:     center;
	transition:     color 0.25s ease;
}
.umount-prog-line {
	height:     2px;
	background: #dee2e6;
	align-self: flex-start;
	margin-top: 17px;
	transition: background 0.3s ease;
}
.umount-progress__step--done .umount-prog-circle { color: #fff !important; }