/*
 * HCP Mini Cart — Exam Copy & Bulk Quote header flyout styles.
 *
 * Class names match the reference design (HCCA Website offline.html).
 * CSS custom properties are defined here with fallbacks so the component
 * works independently of whatever variables the surrounding theme defines.
 *
 * Exam Copy:  .util-exam   /  .examcopy-cart   /  .exam-flyout
 * Bulk Quote: .util-bulk   /  .bulkquote-cart  /  .bulk-flyout
 *
 * @package HCP_Christian
 */

/* ============================================================
   Design tokens (scoped to both mini-cart wrappers)
   ============================================================ */

.util-exam,
.util-bulk {
	/* Shared surface */
	--mc-paper:          #ffffff;
	--mc-border:         #e5e7eb;
	--mc-ink:            #1c1c1e;
	--mc-ink-2:          #6b7280;
	--mc-surface-muted:  #f9fafb;
	--mc-radius-sm:      4px;
	--mc-radius-md:      8px;
	--mc-radius-lg:      12px;
	--mc-radius-pill:    999px;
	--mc-shadow:         0 8px 24px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
	--mc-font-sans:      inherit;
	--mc-font-mono:      ui-monospace, 'Cascadia Code', monospace;

	/* Exam Copy — garnet red */
	--exam-fill:         #8b1a2b;
	--exam-fill-hover:   #701520;
	--exam-fill-deep:    #5e1019;
	--exam-tint:         #fdf2f4;
	--exam-ink:          #8b1a2b;
	--mc-on-exam:        #ffffff;

	/* Bulk Quote — pine green */
	--bulk-fill:         #1a6b3a;
	--bulk-fill-hover:   #155730;
	--bulk-fill-deep:    #0f4324;
	--bulk-tint:         #f0faf4;
	--bulk-ink:          #1a6b3a;
	--mc-on-bulk:        #ffffff;
}

/* ============================================================
   Trigger wrappers
   ============================================================ */

.util-exam,
.util-bulk {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* ============================================================
   Exam Copy trigger pill
   ============================================================ */

/*.examcopy-cart {*/
/*	display: inline-flex;*/
/*	align-items: center;*/
/*	gap: 8px;*/
/*	padding: 7px 14px;*/
/*	background: var(--exam-fill);*/
/*	color: var(--mc-on-exam);*/
/*	border: 0;*/
/*	border-radius: var(--mc-radius-md);*/
/*	font-family: var(--mc-font-sans);*/
/*	font-size: 12px;*/
/*	font-weight: 600;*/
/*	letter-spacing: 0.08em;*/
/*	text-transform: uppercase;*/
/*	text-decoration: none;*/
/*	cursor: pointer;*/
/*	white-space: nowrap;*/
/*	transition: background 0.15s ease;*/
/*	line-height: 1;*/
/*}*/

/*.examcopy-cart:hover { background: var(--exam-fill-hover); color: var(--mc-on-exam); text-decoration: none; }*/
/*.examcopy-cart:active { background: var(--exam-fill-deep); }*/

/* ============================================================
   Bulk Quote trigger pill
   ============================================================ */

/*.bulkquote-cart {*/
/*	display: inline-flex;*/
/*	align-items: center;*/
/*	gap: 8px;*/
/*	padding: 7px 14px;*/
/*	background: var(--bulk-fill);*/
/*	color: var(--mc-on-bulk);*/
/*	border: 0;*/
/*	border-radius: var(--mc-radius-md);*/
/*	font-family: var(--mc-font-sans);*/
/*	font-size: 12px;*/
/*	font-weight: 600;*/
/*	letter-spacing: 0.08em;*/
/*	text-transform: uppercase;*/
/*	text-decoration: none;*/
/*	cursor: pointer;*/
/*	white-space: nowrap;*/
/*	transition: background 0.15s ease;*/
/*	line-height: 1;*/
/*}*/

/*.bulkquote-cart:hover { background: var(--bulk-fill-hover); color: var(--mc-on-bulk); text-decoration: none; }*/
/*.bulkquote-cart:active { background: var(--bulk-fill-deep); }*/

/* ============================================================
   Count badge (inside the trigger pill)
   ============================================================ */

/*.exam-count,*/
/*.bq-count {*/
/*	display: inline-flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	min-width: 20px;*/
/*	height: 18px;*/
/*	padding: 0 5px;*/
/*	border-radius: var(--mc-radius-pill);*/
/*	background: rgba(255,255,255,.22);*/
/*	font-family: var(--mc-font-mono);*/
/*	font-size: 11px;*/
/*	font-weight: 500;*/
/*	letter-spacing: 0;*/
/*	color: inherit;*/
/*}*/

/* ============================================================
   Flyout panel (shared structure)
   ============================================================ */

.exam-flyout {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 360px;
	max-width: calc(100vw - 32px);
	background: var(--mc-paper);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	box-shadow: var(--mc-shadow);
	z-index: 9999;
	color: var(--mc-ink);
	overflow: hidden;
}

/* Exam-specific: garnet top border + tinted header */
.util-exam .exam-flyout {
	border-top: 3px solid var(--exam-fill);
}
.util-exam .exam-flyout .exam-flyout-head {
	background: var(--exam-tint);
}
.util-exam .exam-flyout .exam-flyout-head .eyebrow {
	color: var(--exam-ink);
}

/* Bulk flyout: pine top border + tinted header */
.bulk-flyout {
	border-top: 3px solid var(--bulk-fill);
}
.bulk-flyout .exam-flyout-head {
	background: var(--bulk-tint);
}
.bulk-flyout .exam-flyout-head .eyebrow {
	color: var(--bulk-ink);
}

/* ── Flyout head ─────────────────────────────────────────── */

.exam-flyout-head {
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--mc-border);
}

.exam-flyout-head .eyebrow {
	margin: 0;
	font-family: var(--mc-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ── Empty state ─────────────────────────────────────────── */

/* Visibility of .exam-flyout-empty is controlled entirely via style.display
   in mini-cart.js — no CSS override needed here. */

.exam-flyout-empty {
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.exam-flyout-empty p {
	margin: 0;
	font-size: 14px;
	color: var(--mc-ink-2);
}

/* ── Book list ───────────────────────────────────────────── */

.exam-flyout-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: 300px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mc-border) transparent;
}

.exam-flyout-list::-webkit-scrollbar { width: 4px; }
.exam-flyout-list::-webkit-scrollbar-thumb { background: var(--mc-border); border-radius: 2px; }

/* ── Book row ────────────────────────────────────────────── */

.exam-flyout-row {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 18px;
	transition: background 0.12s ease;
}

.exam-flyout-row:hover { background: var(--mc-surface-muted); }

/* Thumbnail */
.exam-flyout-thumb {
	width: 36px;
	height: 48px;
	flex-shrink: 0;
	background: #f3f4f6;
	border-radius: var(--mc-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mc-border);
}

.exam-flyout-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title & meta */
.exam-flyout-row-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--mc-ink);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.exam-flyout-row-meta {
	font-size: 11.5px;
	color: var(--mc-ink-2);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Remove button */
.exam-flyout-remove {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--mc-ink-2);
	padding: 5px;
	border-radius: var(--mc-radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.12s ease, background 0.12s ease;
	flex-shrink: 0;
}

.exam-flyout-remove:hover {
	color: var(--mc-ink);
	background: var(--mc-border);
}

/* ── Flyout footer ───────────────────────────────────────── */

.exam-flyout-foot {
	padding: 12px 18px 16px;
	border-top: 1px solid var(--mc-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Checkout button — full-width inside the flyout footer */
.exam-flyout-checkout {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* "Continue Browsing" text link */
.exam-flyout-view,
.exam-flyout-continue {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--mc-font-sans);
	font-size: 12px;
	color: var(--mc-ink-2);
	text-align: center;
	padding: 4px;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.12s ease;
	display: block;
}

.exam-flyout-view:hover,
.exam-flyout-continue:hover { color: var(--mc-ink); text-decoration: underline; }

/* ============================================================
   Responsive — on small screens flyout spans full width
   ============================================================ */

@media ( max-width: 480px ) {
	.exam-flyout {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		border-radius: var(--mc-radius-lg) var(--mc-radius-lg) 0 0;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}

	.util-exam .exam-flyout,
	.util-bulk .exam-flyout {
		border-top: 3px solid currentcolor;
	}
}