/* ==========================================================================
   EasyGen Inspiration tab — account-page fragment styling

   Loaded by controller/account/account.php when easygen_status=1. Scoped to
   .inspiration* classes; no global selectors that could leak into other
   account tabs.

   The lightbox MUST start display:none — the fragment renders it inline
   in the DOM next to the cards, so without this rule the close/prev/next
   controls float visibly under the empty state.
   ========================================================================== */

.inspiration {
	padding: 20px 4px;
}

/* Override common.css `#main section:first-of-type { padding-top: 80px }`
 * when the Inspiration fragment is loaded — the default 80px crowds the
 * cards down too far. Other account tabs keep the global value. */
#main section:first-of-type:has(.inspiration) {
	padding-top: 20px;
}

/* --- empty state --- */

.inspiration-empty {
	text-align: center;
	padding: 80px 20px;
	color: var(--default-text-color);
}

.inspiration-empty-icon {
	font-size: 72px !important;
	color: #c7cdd9;
	display: block;
	margin-bottom: 20px;
}

.inspiration-empty-title {
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 24px;
	color: var(--text-color);
}

.inspiration-empty-cta {
	display: inline-block;
	background: linear-gradient(135deg, #ff5a8a 0%, #ff8c42 50%, #ffd84f 100%);
	color: #fff;
	padding: 12px 28px;
	border-radius: 24px;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: opacity 0.2s, transform 0.1s;
}

.inspiration-empty-cta:hover {
	opacity: 0.92;
	color: #fff;
	text-decoration: none;
}

.inspiration-empty-cta:active {
	transform: translateY(1px);
}

/* --- filter bar (search + pill dropdowns + sort) ---
   pill dropdowns + sort + search are visual placeholders awaiting commit 3
   wiring; rendered disabled so they communicate "coming soon" rather than
   "broken". layout: search left, pill row middle, sort pushed right. */

.inspiration-filterbar {
	display: flex;
	align-items: center;
	/* wrap to a second row once the pills + search overflow — last sort
	   pill was getting clipped at 4+ active filters (van round 2 #9). */
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.inspiration-filterbar-group {
	display: flex;
	align-items: center;
	gap: 10px;
	/* pills inside the group must also wrap individually — outer-bar wrap
	   alone only lets the sort group drop to a new row, but at narrower
	   widths the middle pill group (kategori/logotyp/märkning/färg) was
	   still clipping the trailing pill on its own line (van round 2 #9
	   follow-up). search/sort groups have a single child so wrap has no
	   visual effect there. */
	flex-wrap: wrap;
}

.inspiration-filterbar-right {
	margin-left: auto;
	flex-shrink: 0;
}

.inspiration-search {
	position: relative;
	flex: 1 1 200px;
	min-width: 160px;
	max-width: 280px;
}

.inspiration-search .material-icons-outlined {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--default-text-color);
	pointer-events: none;
}

/* #account-content prefix needed to beat the global rule
   `input:not([type=checkbox]):not([type=range]):not(.form-control)` in
   common.css (specificity 0,3,1) which otherwise overrides padding-left
   with padding:12px 16px, making the leading magnifier collide with the
   placeholder text. same prefix-bump pattern used for the heading
   override above. */
#account-content .inspiration-search input {
	width: 100%;
	height: 40px;
	padding: 0 16px 0 40px;
	border: 1px solid var(--border-color);
	border-radius: var(--input-border-radius);
	background: var(--background-color);
	font-family: inherit;
	font-size: 14px;
	color: var(--input-text-color);
	transition: border-color 0.15s ease-out;
}

.inspiration-search input::placeholder {
	color: var(--input-placeholder-color);
}

.inspiration-search input:focus {
	outline: none;
	border-color: var(--info-color);
}

.inspiration-search input:disabled {
	cursor: not-allowed;
	opacity: 0.85;
}

.inspiration-pill-wrapper {
	position: relative;
}

.inspiration-pill-dropdown,
.inspiration-sort-select {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 9999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
	cursor: pointer;
	transition: border-color 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}

.inspiration-pill-dropdown:hover:not(:disabled),
.inspiration-sort-select:hover:not(:disabled) {
	border-color: var(--default-text-color);
}

.inspiration-pill-dropdown:disabled,
.inspiration-sort-select:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.inspiration-pill-dropdown .material-icons-outlined,
.inspiration-pill-dropdown .material-icons,
.inspiration-sort-select .material-icons-outlined {
	font-size: 16px;
	color: var(--default-text-color);
}

.inspiration-pill-dropdown .clear {
	font-size: 16px;
	margin-left: 2px;
	opacity: 0.9;
}

.inspiration-pill-dropdown.is-active {
	background: var(--info-color);
	color: var(--inverse-text-color);
	border-color: var(--info-color);
}

.inspiration-pill-dropdown.is-active:hover {
	background: var(--info-secondary-color);
}

.inspiration-pill-dropdown.is-active .material-icons-outlined,
.inspiration-pill-dropdown.is-active .material-icons {
	color: var(--inverse-text-color);
}

/* --- pill dropdown menu (absolute, below the pill) ---
   menus start with the html `hidden` attr so they reveal via removeAttr in
   js; the explicit `[hidden]` rule below restates `display: none` because
   some upstream rule defeats the UA default on buttons (see clear-all). */

.inspiration-pill-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 10;
	min-width: 200px;
	max-width: 320px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inspiration-pill-menu[hidden] {
	display: none;
}

.inspiration-pill-menu-right {
	left: auto;
	right: 0;
}

.inspiration-pill-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-color);
	text-align: left;
	cursor: pointer;
	transition: background 0.1s ease-out;
}

.inspiration-pill-option:hover {
	background: var(--menu-background-color);
}

.inspiration-pill-option.is-selected {
	background: var(--menu-background-color);
	font-weight: 700;
}

.inspiration-pill-option-swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}

.inspiration-pill-menu-empty {
	padding: 12px;
	font-size: 13px;
	color: var(--default-text-color);
	font-style: italic;
}

/* --- meta row (chips + clear-all + counter + view switch) ---
   chip strip is empty in commit 2 (no client-side filter state); commit 3
   populates chips here, toggles clear-all out of [hidden], and updates the
   counter to show filtered/total. */

.inspiration-meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.inspiration-chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.inspiration-chips:empty {
	display: none;
}

.inspiration-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 6px 0 12px;
	background: var(--menu-background-color);
	border: 1px solid var(--border-color);
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
}

.inspiration-chip-key {
	color: var(--default-text-color);
	font-weight: 500;
}

.inspiration-chip button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--default-text-color);
	cursor: pointer;
	padding: 0;
}

.inspiration-chip button:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--text-color);
}

.inspiration-chip button .material-icons {
	font-size: 16px;
}

.inspiration-clear-all {
	background: transparent;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--anchor-color);
	cursor: pointer;
}

/* explicit override — some upstream rule defeats the UA `[hidden]` default
   on buttons in this project (verified: a bare `<button hidden>` in body
   still computes display:block on the deployed sandbox). class+attr
   selector here (0,2,1) is enough to claw display:none back. */
.inspiration-clear-all[hidden] {
	display: none;
}

.inspiration-clear-all:hover {
	color: var(--dark-anchor-color);
	text-decoration: underline;
}

.inspiration-counter {
	margin-left: auto;
	font-size: 13px;
	color: var(--default-text-color);
}

.inspiration-view-switch {
	display: inline-flex;
	background: var(--menu-background-color);
	border-radius: 9999px;
	padding: 3px;
	border: 1px solid var(--border-color);
	flex-shrink: 0;
}

.inspiration-view-switch button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 32px;
	background: transparent;
	border: 0;
	border-radius: 9999px;
	color: var(--default-text-color);
	cursor: pointer;
	transition: background 0.15s ease-out, color 0.15s ease-out;
}

.inspiration-view-switch button:hover {
	color: var(--text-color);
}

.inspiration-view-switch button[aria-pressed="true"] {
	background: var(--info-color);
	color: var(--inverse-text-color);
}

.inspiration-view-switch button .material-icons {
	font-size: 18px;
}

/* --- grouped cards --- */

.inspiration-groups {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.inspiration-group-label {
	font-size: 20px;
	font-weight: 800;
	color: var(--text-color);
	margin: 0 0 16px;
}

/* --- generation card --- */

.inspiration-card {
	position: relative;
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 0;
}

.inspiration-group + .inspiration-group {
	margin-top: 0;
}

.inspiration-group .inspiration-card + .inspiration-card {
	margin-top: 20px;
}

/* --- card header (title + compact meta) --- */

.inspiration-card-header {
	display: block;
	margin-bottom: 20px;
}

.inspiration-card-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--info-color);
	text-decoration: none;
	line-height: 1.2;
	transition: color 0.15s ease-out;
}

.inspiration-card-title:hover {
	color: var(--anchor-color);
}

.inspiration-card-title .material-icons-outlined {
	font-size: 16px;
	color: var(--default-text-color);
	transition: color 0.15s ease-out, transform 0.15s ease-out;
}

.inspiration-card-title:hover .material-icons-outlined {
	color: var(--anchor-color);
	transform: translate(1px, -1px);
}

/* common.css's span.underline::after sits at bottom: 0.6em which lands
   inside the text body at 18px font-size — looks like a strikethrough.
   nudge it down to true under-text position. */
.inspiration-card-title > span.underline::after {
	bottom: 0;
}

.inspiration-meta-compact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--text-color);
}

.inspiration-color-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}

.inspiration-meta-color {
	margin-left: -6px;
	color: var(--default-text-color);
	font-weight: 500;
}

.inspiration-meta-color strong {
	color: var(--text-color);
	font-weight: 700;
}

.inspiration-method-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: var(--menu-background-color);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
}

.inspiration-meta-logotype {
	color: var(--default-text-color);
	font-weight: 500;
}

.inspiration-meta-logotype strong {
	color: var(--text-color);
	font-weight: 700;
}

.inspiration-meta-sep {
	width: 3px;
	height: 3px;
	background: var(--border-color);
	border-radius: 50%;
	flex-shrink: 0;
}

/* --- image grid (data-view drives column count: grid=2x2, row=1x4) --- */

.inspiration-card-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.inspiration-card[data-view="row"] .inspiration-card-images {
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.inspiration-mockup {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	overflow: hidden;
	background: var(--menu-background-color);
	cursor: zoom-in;
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.inspiration-mockup:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.inspiration-mockup img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- mockup hover overlay (download action) ---
   sits bottom-right inside each mockup tile; opacity-faded until the tile
   is hovered. clicks on the action are stopped from bubbling to the
   lightbox handler in the inline script. */

.inspiration-mockup-actions {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 9999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
	pointer-events: none;
}

.inspiration-mockup:hover .inspiration-mockup-actions,
.inspiration-mockup:focus-within .inspiration-mockup-actions {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.inspiration-mockup-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--text-color);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease-out, color 0.15s ease-out;
}

.inspiration-mockup-action:hover {
	background: var(--menu-background-color);
	color: var(--info-color);
}

.inspiration-mockup-action .material-icons-outlined {
	font-size: 18px;
}

/* --- card-level delete (top-right corner, discreet — visible on card hover) --- */

.inspiration-card-delete {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--default-text-color);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
	z-index: 1;
}

.inspiration-card:hover .inspiration-card-delete,
.inspiration-card-delete:focus-visible {
	opacity: 1;
}

.inspiration-card-delete:hover {
	background: rgba(222, 35, 44, 0.08);
	color: var(--danger-color);
}

.inspiration-card-delete .material-icons-outlined {
	font-size: 20px;
}

/* --- lightbox ---
   critical: starts display:none. fragment renders the lightbox DOM inline
   next to the cards, so omitting this rule leaks the close/prev/next buttons
   visibly under the empty state. */

.inspiration-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	background: rgba(0, 0, 0, 0.92);
	align-items: center;
	justify-content: center;
}

.inspiration-lightbox.active {
	display: flex;
}

.inspiration-lightbox-backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.inspiration-lightbox-img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	position: relative;
	z-index: 1;
	border-radius: 8px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.inspiration-lightbox-close,
.inspiration-lightbox-prev,
.inspiration-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.15s;
}

.inspiration-lightbox-close .material-icons,
.inspiration-lightbox-prev .material-icons,
.inspiration-lightbox-next .material-icons {
	font-size: 28px;
}

.inspiration-lightbox-close:hover,
.inspiration-lightbox-prev:hover,
.inspiration-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.22);
}

.inspiration-lightbox-close {
	top: 24px;
	right: 24px;
}

.inspiration-lightbox-prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.inspiration-lightbox-next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

/* --- no-results state (filtered to zero) ---
   shown when a customer has mockups but none match the active filters.
   visually distinct from the truly-empty state so the user knows their
   filters are the problem, not their library. */

.inspiration-no-results {
	text-align: center;
	padding: 56px 24px;
	border: 1px dashed var(--border-color);
	border-radius: 12px;
	color: var(--default-text-color);
	font-size: 14px;
}

.inspiration-no-results .material-icons-outlined {
	font-size: 48px;
	color: var(--default-text-color);
	display: block;
	margin: 0 auto 12px;
}

.inspiration-no-results p {
	margin: 0 0 16px;
	color: var(--text-color);
	font-weight: 500;
}

.inspiration-no-results .inspiration-clear-all {
	display: inline-block;
}

/* --- ajax loading state ---
   tab-wide fade while refreshFragment is in flight. groups + chips fade
   together so the user gets a unified "thinking…" signal without losing
   the filter bar interaction (it stays at full opacity since the user's
   click/keystroke is what triggered the refresh). */

.inspiration.is-loading .inspiration-groups,
.inspiration.is-loading .inspiration-no-results,
.inspiration.is-loading .inspiration-meta-row {
	opacity: 0.5;
	transition: opacity 0.15s ease-out;
	pointer-events: none;
}

/* --- narrow / tablet viewport adjustments ---
   below 900px the row-view (1x4) becomes too cramped to be useful, so the
   view switch is hidden and both data-view values fall back to the 2-col
   grid. account.js's setContentHeight is mobile-aware already (early-returns
   on common.isMobile) so no JS change needed at the breakpoint. */

@media (max-width: 900px) {

	.inspiration-view-switch {
		display: none;
	}

	.inspiration-card[data-view="row"] .inspiration-card-images,
	.inspiration-card[data-view="grid"] .inspiration-card-images {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

/* --- mobile viewport adjustments ---
   pills + sort hide entirely (none of them are touch-friendly placeholders);
   search expands to full row width. image grids collapse to a single column
   so each mockup gets the full viewport width. */

@media (max-width: 786px) {

	.inspiration {
		padding: 12px 0;
	}

	.inspiration .header h1 {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.inspiration-card {
		padding: 16px;
	}

	.inspiration-card-images,
	.inspiration-card[data-view="row"] .inspiration-card-images,
	.inspiration-card[data-view="grid"] .inspiration-card-images {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.inspiration-card-title {
		font-size: 16px;
	}

	.inspiration-empty {
		padding: 48px 16px;
	}

	.inspiration-empty-icon {
		font-size: 56px !important;
	}

	.inspiration-filterbar {
		flex-wrap: wrap;
	}

	.inspiration-pill-wrapper,
	.inspiration-filterbar-right {
		display: none;
	}

	.inspiration-search {
		flex: 1 1 100%;
		max-width: none;
	}

	.inspiration-mockup-actions {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.inspiration-lightbox-close,
	.inspiration-lightbox-prev,
	.inspiration-lightbox-next {
		width: 40px;
		height: 40px;
	}
}