/* HOB Obagi Skin Quiz — self-contained styles.
   Layout/typography reuse the theme's Tailwind utility classes (loaded site-wide);
   this file only styles component states the utilities can't express. */

:root {
	--hobq-onyx: #000000;
	--hobq-white: #ffffff;
	--hobq-stone: #a9a9a9;
	--hobq-primary: #40d1db;
	--hobq-surface: #f3f3f3;
	--hobq-variant: #3c494a;
	--hobq-error: #ba1a1a;
}

.hobq-modal { position: fixed; inset: 0; z-index: 60; }
.hobq-modal.hidden { display: none; }
.hobq-modal .hobq-panel { border-radius: 2px; }

/* Selected option state (single + multi). */
.hobq-option { cursor: pointer; background: transparent; }
.hobq-option:hover { border-color: var(--hobq-onyx); }
.hobq-option.is-selected {
	background-color: var(--hobq-onyx);
	color: var(--hobq-white);
	border-color: var(--hobq-onyx);
}
.hobq-option.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Progress bar active segments. */
.hobq-progress [data-bar].is-active { background-color: var(--hobq-onyx); }

/* Results ------------------------------------------------------------- */
.hobq-results-head { margin-bottom: 2rem; }
.hobq-results-eyebrow {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--hobq-primary);
	display: block;
	margin-bottom: 0.75rem;
}
.hobq-results h2 {
	font-family: "Playfair Display", serif;
	font-size: 32px;
	line-height: 1.3;
	color: var(--hobq-onyx);
	margin: 0 0 0.5rem;
}
.hobq-results-intro {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hobq-variant);
}

.hobq-section { margin-top: 2.5rem; }
.hobq-section-title {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hobq-onyx);
	margin: 0 0 1rem;
}

.hobq-card {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid rgba(169, 169, 169, 0.2);
}
.hobq-card:last-child { border-bottom: 1px solid rgba(169, 169, 169, 0.2); }
.hobq-card-check { flex: 0 0 auto; padding-top: 0.25rem; }
.hobq-card-check input { width: 18px; height: 18px; accent-color: var(--hobq-onyx); cursor: pointer; }
.hobq-card-media {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	background: var(--hobq-surface);
	overflow: hidden;
}
.hobq-card-media img { width: 100%; height: 100%; object-fit: cover; }
.hobq-card-body { flex: 1 1 auto; min-width: 0; }
.hobq-card-step {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hobq-stone);
}
.hobq-card-name {
	font-family: "Playfair Display", serif;
	font-size: 17px;
	line-height: 1.3;
	color: var(--hobq-onyx);
	margin: 0.15rem 0;
}
.hobq-card-price {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 15px;
	color: var(--hobq-onyx);
	margin-bottom: 0.35rem;
}
.hobq-card-price del { color: var(--hobq-stone); margin-right: 6px; }
.hobq-why {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: var(--hobq-variant);
	margin: 0 0 0.75rem;
}
.hobq-why b {
	display: block;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hobq-stone);
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.hobq-add {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--hobq-onyx);
	background: transparent;
	color: var(--hobq-onyx);
	cursor: pointer;
	transition: all 0.25s ease;
}
.hobq-add:hover { background: var(--hobq-onyx); color: var(--hobq-white); }
.hobq-add:disabled { border-color: var(--hobq-stone); color: var(--hobq-stone); cursor: default; background: transparent; }
.hobq-add.is-added { background: var(--hobq-onyx); color: var(--hobq-white); }

.hobq-unavailable {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hobq-stone);
}

.hobq-bulk { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hobq-bulk .hobq-add-primary {
	background: var(--hobq-onyx);
	color: var(--hobq-white);
	padding: 0.85rem 2rem;
}
.hobq-bulk .hobq-add-primary:hover { background: var(--hobq-primary); }

/* Kit highlight. */
.hobq-kit {
	background: var(--hobq-surface);
	padding: 1.5rem;
	margin-top: 2.5rem;
}
.hobq-kit .hobq-card { border: 0; padding-top: 0.5rem; }

/* Advisory messages. */
.hobq-message {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	padding: 1rem 1.25rem;
	margin-top: 1.5rem;
	border-left: 3px solid var(--hobq-primary);
	background: var(--hobq-surface);
	color: var(--hobq-variant);
}
.hobq-message.is-warning { border-left-color: var(--hobq-error); }
.hobq-message strong { color: var(--hobq-onyx); display: block; margin-bottom: 0.25rem; }

.hobq-disclaimer {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 12px;
	line-height: 1.6;
	color: var(--hobq-stone);
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(169, 169, 169, 0.2);
}

.hobq-consult {
	display: inline-block;
	margin-top: 1.25rem;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.85rem 2rem;
	border: 1px solid var(--hobq-onyx);
	color: var(--hobq-onyx);
	text-decoration: none;
	transition: all 0.25s ease;
}
.hobq-consult:hover { background: var(--hobq-onyx); color: var(--hobq-white); }