/* ==========================================================================
   TriKdanG App Shell & Commerce Engine — Frontend UI (Module D)
   Uses the same --surface-color / --text-primary / --border-color /
   --accent-color aliases the theme's app-header.css defines, so this
   stays correct in both Light and Dark mode without a second palette.
   ========================================================================== */

/* ---- Header cleanup: hide the theme's separate Saved Hangar icon
   button — the Pilot Account drawer's own "My Saved Hangar" row (see
   tkasc-frontend.js) is now the only entry point, per requirement 1. */
.site-app-header__icon-btn[data-tk-saved-toggle] {
	display: none !important;
}

/* Pilot Account badge — [ 👤 ] — this plugin injects the badge span
   itself (the theme's pilot button ships with no badge of its own).
   Rendered as a small dot (matching the theme's own
   .site-app-header__badge--dot pattern used on the Saved Hangar icon)
   rather than a numeral in a circle — a two-digit count badge sat
   directly on top of the 👤 glyph and obscured it. The count is still
   available to screen readers via the button's aria-label (updated in
   tkasc-frontend.js), it's just not printed visually on the icon. */
.site-app-header__icon-btn[data-tk-pilot-open] {
	position: relative;
}
.tkasc-pilot-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 9px;
	height: 9px;
	min-width: 0;
	padding: 0;
	border-radius: 999px;
	background: var(--accent-color, #e4002b);
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ---- Randomizer modal ---------------------------------------------- */
.tkasc-randomizer-modal {
	position: fixed;
	inset: 0;
	z-index: 230; /* above the theme's own drawers (max 220) so the modal always wins */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.16s ease;
}
/* Fixes the "can't close it" bug: the rule above sets display:flex as
   an author-origin style, which — per the CSS cascade — always beats
   the browser's own [hidden]{display:none} user-agent rule, regardless
   of selector specificity. Without this override the modal stayed
   laid out and interactive even after JS set the `hidden` attribute on
   close. This rule wins because it's more specific than the bare class
   selector above, so it applies whenever `hidden` is present. */
.tkasc-randomizer-modal[hidden] {
	display: none;
}
.tkasc-randomizer-modal.is-open {
	opacity: 1;
}
.tkasc-randomizer-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}
.tkasc-randomizer-modal__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--surface-color, #1c1d22);
	color: var(--text-primary, #f3efe4);
	border: 1px solid var(--border-color, rgba(243, 239, 228, 0.25));
	border-radius: 12px;
	padding: 1.5rem;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(10px) scale(0.98);
	transition: transform 0.16s ease;
}
.tkasc-randomizer-modal.is-open .tkasc-randomizer-modal__panel {
	transform: translateY(0) scale(1);
}
.tkasc-randomizer-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--border-color, rgba(243, 239, 228, 0.25));
}
.tkasc-randomizer-modal__head h2 {
	margin: 0;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.tkasc-randomizer-modal__head h2::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	background: var(--accent-color, #e4002b);
	transform: rotate(45deg);
}
.tkasc-randomizer-modal__close {
	background: none;
	border: none;
	color: var(--text-primary, #f3efe4);
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem;
	display: inline-flex;
}

/* Randomizer icon set (replaces the 🎲 / 🔖 / 🎥 / 📥 / ✕ emoji, which
   render inconsistently across platforms/fonts). Sized and aligned to
   sit inline with the button label text next to it. */
.tkasc-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: -0.15em;
}
.tkasc-randomizer-modal__close .tkasc-icon--close {
	width: 1.1rem;
	height: 1.1rem;
}
.tkasc-randomizer-card__actions .tkasc-btn .tkasc-icon,
.tkasc-randomizer-modal__reroll .tkasc-icon {
	width: 1.05em;
	height: 1.05em;
}
.tkasc-randomizer-modal__loading,
.tkasc-randomizer-modal__error {
	text-align: center;
	padding: 2rem 0;
	opacity: 0.75;
}

.tkasc-randomizer-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.tkasc-randomizer-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
}
.tkasc-randomizer-card__title {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
}
.tkasc-randomizer-card__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
/* Same clipped-corner primary / rounded-ghost secondary pairing used
   for the site's other paired CTAs (e.g. the game-embed "Play Now" /
   secondary pattern) — ties the modal back to the site's folded-paper
   visual language instead of reading as a generic pop-up. */
.tkasc-randomizer-card__actions .tkasc-btn {
	flex: 1 1 auto;
	text-align: center;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--border-color, rgba(243, 239, 228, 0.25));
	background: transparent;
	color: var(--text-primary, #f3efe4);
	text-decoration: none;
	cursor: pointer;
	font: inherit;
}
.tkasc-randomizer-card__actions .tkasc-btn--primary {
	background: var(--accent-color, #e4002b);
	border-color: var(--accent-color, #e4002b);
	color: #fff;
	border-radius: 4px;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.tkasc-randomizer-card__actions .tkasc-btn--primary:hover {
	filter: brightness(1.08);
}
.tkasc-randomizer-card__actions .tkasc-btn.is-saved {
	background: var(--accent-color, #e4002b);
	border-color: var(--accent-color, #e4002b);
	color: #fff;
}

.tkasc-randomizer-modal__foot {
	margin-top: 1rem;
	text-align: center;
}
.tkasc-randomizer-modal__reroll {
	background: none;
	border: 1px solid var(--border-color, rgba(243, 239, 228, 0.25));
	color: var(--text-primary, #f3efe4);
	border-radius: 999px;
	padding: 0.5rem 1.25rem;
	cursor: pointer;
	font: inherit;
}
.tkasc-randomizer-modal__reroll:hover {
	filter: brightness(1.15);
	border-color: var(--accent-color, #e4002b);
}

/* ---- v2.3.0: Pilot drawer "My Save Hangar" mini list + roll-up
   drawer + App Promo banner. Replaces the old categorized
   Templates/Videos/Articles/Free-Templates layout — with real
   ♥-saved products (any price, Module E) now mixed in, a flat
   "most recently saved" list reads better than grouping by kind. --- */
.tkasc-hangar-group__label {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 0.4rem;
}

/* Empty-state variant of the label above (see emptyHangarHtml() in
   tkasc-frontend.js) — normal case/spacing rather than the uppercase
   micro-label style, since this is a full sentence, and the inline
   bookmark icon spliced into the middle of it needs to sit on the same
   baseline as the surrounding text. */
.tkasc-hangar-empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em;
	font-size: 0.85rem;
	letter-spacing: normal;
	text-transform: none;
	opacity: 0.75;
	line-height: 1.5;
}
.tkasc-hangar-empty__icon {
	display: inline-flex;
	color: var(--accent-color, #e4002b);
}
.tkasc-hangar-empty__icon svg {
	width: 15px;
	height: 15px;
}

/* Shared row skeleton for both the mini list (.tkasc-hangar-mini__item)
   and the roll-up drawer (.tkasc-hangar-rollup__item) — thumb, an
   optional description column, then a review icon-link and a ✕ remove
   icon-button, both icon-only per requirement (no text action pill). */
.tkasc-hangar-mini__item,
.tkasc-hangar-rollup__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--border-color, rgba(243, 239, 228, 0.12));
}
/* v2.3.3 — bumped up again ("a little bit bigger"): drawer mini list
   32px -> 36px, roll-up 48px -> 56px. Kept as two separate rules (see
   v2.3.2) so each context can keep scaling independently. */
.tkasc-hangar-mini__thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.05);
}
.tkasc-hangar-rollup__thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.05);
}
.tkasc-hangar-mini__desc,
.tkasc-hangar-rollup__desc {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tkasc-hangar-mini__desc em,
.tkasc-hangar-rollup__desc em {
	font-style: normal;
	opacity: 0.7;
	font-size: 0.78rem;
	margin-left: 0.35rem;
}
/* v2.3.3 — the mini list now shows a description/name column too (see
   renderMiniList() in tkasc-frontend.js), same as the roll-up. An
   earlier version of this file had a mini-list-only override that let
   the thumbnail stretch to fill the row when there was no title text
   competing for space (up to 40px, wider than tall) — that's what
   made it look oversized next to the two small action icons. The
   thumbnail is a fixed square now regardless (see .tkasc-hangar-mini__thumb
   above), so no such override is needed here anymore. */
/* v2.3.1 (requirements 1 & 2) — review + remove live in their own
   `__actions` wrapper, pinned to the row's right edge regardless of
   whether the desc column is present, instead of just trailing the
   thumb in normal flex flow. `gap` widened from a near-invisible
   0.15rem to a clearly visible 0.6rem so the two icons read as two
   distinct controls instead of a single blob in the middle of the
   row. */
.tkasc-hangar-mini__actions,
.tkasc-hangar-rollup__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	flex-shrink: 0;
}
.tkasc-hangar-mini__review,
.tkasc-hangar-rollup__review,
.tkasc-hangar-mini__remove,
.tkasc-hangar-rollup__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 999px;
	border: none;
	background: none;
	color: var(--text-primary, #f3efe4);
	opacity: 0.75;
	cursor: pointer;
	text-decoration: none;
}
.tkasc-hangar-mini__review:hover,
.tkasc-hangar-rollup__review:hover,
.tkasc-hangar-mini__remove:hover,
.tkasc-hangar-rollup__remove:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.08);
}

/* ---- "My Save Hangar" roll-up drawer — a bottom sheet, opened by
   clicking the Pilot drawer's "My Save Hangar" row (see
   setupHangarDrawer() in tkasc-frontend.js). Same open/close/
   [hidden]-override pattern as .tkasc-randomizer-modal above. */
.tkasc-hangar-rollup {
	position: fixed;
	inset: 0;
	z-index: 235; /* above the Randomizer modal (230) and the theme's own drawers (max 220) */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.22s ease;
}
.tkasc-hangar-rollup[hidden] {
	display: none;
}
.tkasc-hangar-rollup.is-open {
	opacity: 1;
}
.tkasc-hangar-rollup__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}
.tkasc-hangar-rollup__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	background: var(--surface-color, #1c1d22);
	color: var(--text-primary, #f3efe4);
	border: 1px solid var(--border-color, rgba(243, 239, 228, 0.25));
	border-bottom: none;
	border-radius: 16px 16px 0 0;
	padding: clamp(1rem, 4vw, 1.5rem);
	display: flex;
	flex-direction: column;
	transform: translateY(24px);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.tkasc-hangar-rollup.is-open .tkasc-hangar-rollup__panel {
	transform: translateY(0);
}
.tkasc-hangar-rollup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--border-color, rgba(243, 239, 228, 0.25));
}
.tkasc-hangar-rollup__head h2 {
	margin: 0;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
/* v2.3.1 (requirement 3) — same bookmark glyph as the Pilot drawer's
   "My Saved Hangar" row (self::icon_svg('bookmark')), placed next to
   the roll-up's title so the two entry points visually match. */
.tkasc-hangar-rollup__head h2 .tkasc-icon--bookmark {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
}
.tkasc-hangar-rollup__close {
	background: none;
	border: none;
	color: var(--text-primary, #f3efe4);
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem;
	display: inline-flex;
}
.tkasc-hangar-rollup__body {
	overflow-y: auto;
}

/* v2.3.3 — used to fully hide .tkasc-hangar-rollup__desc under 480px so
   the row didn't get crushed; that also meant the product name simply
   never showed on phones. Replaced with a proper responsive scale-down
   instead of a hide: on narrow screens the thumbnail steps down a
   little and the row's gaps/padding tighten, freeing up just enough
   width for the (still-truncating, ellipsis'd) name to stay visible
   alongside the review/remove icons at every viewport width. */
@media (max-width: 480px) {
	.tkasc-hangar-rollup__item {
		gap: 0.4rem;
		padding: 0.45rem 0;
	}
	.tkasc-hangar-rollup__thumb {
		width: 44px;
		height: 44px;
	}
	.tkasc-hangar-rollup__desc {
		font-size: 0.8rem;
	}
	.tkasc-hangar-rollup__actions {
		gap: 0.4rem;
	}
}
@media (max-width: 360px) {
	.tkasc-hangar-rollup__thumb {
		width: 36px;
		height: 36px;
	}
}

/* "Checkout Saved Templates" footer link — shown only when the drawer
   has at least one $0 WC template saved, so a Pilot can clear a whole
   batch of freebies in one go instead of one-at-a-time. */
.tkasc-hangar-checkout-all {
	display: block;
	text-align: center;
	margin-top: 0.75rem;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: var(--accent-color, #e4002b);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}
.tkasc-hangar-checkout-all:hover {
	filter: brightness(1.08);
}

.tkasc-app-promo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--surface-color, #1c1d22);
	border: 1px solid var(--border-color, rgba(243, 239, 228, 0.2));
	border-radius: 10px;
	padding: 0.85rem;
	margin-bottom: 1rem;
}
.tkasc-app-promo__copy {
	flex: 1 1 auto;
	font-size: 0.8rem;
}