/**
 * Structural/functional CSS for Widget Search (TICKET-022a) — layout
 * mechanics that must exist regardless of admin Style-tab choices
 * (step visibility, flex containers, spinner animation). Cosmetic
 * defaults (padding/border/color/typography) come from Elementor's
 * own Style tab control defaults instead of living here, so admin
 * overrides always win without fighting inline-style specificity.
 */

.akn-search-widget {
	display: flex;
	flex-direction: column;
}

.akn-search-widget__step {
	display: none;
}

.akn-search-widget__step.is-active {
	display: block;
}

/* Entrance Animation — Elementor control `step_entrance_anim` (Style tab
   > Step section), Premium-only (spec §9.1a/§15). Previously this
   animation ran unconditionally for everyone; it's now opt-in via the
   `--entrance-anim` modifier class the widget only renders when that
   setting is on. Toggling `.is-active` off then on (goToStep() always
   does both, even when landing on the same step twice in a row)
   re-triggers this on every step change, giving each tab a smooth
   entrance instead of an abrupt display:none -> block swap. */
.akn-search-widget--entrance-anim .akn-search-widget__step.is-active {
	animation: akn-search-widget-step-fade 0.35s ease;
}

@keyframes akn-search-widget-step-fade {
	0% {
		opacity: 0;
		transform: translateY(6px);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.akn-search-widget__breadcrumb {
	display: flex;
}

/* "Justify" alignment (breadcrumb_alignment Style control): stretch
   every crumb to an equal width filling the container — plain
   justify-content can't do this on its own, it only spaces
   content-sized boxes apart. */
.akn-search-widget__breadcrumb[data-align="justify"] .akn-search-widget__crumb {
	flex: 1 1 0;
	width: auto;
	text-align: center;
}

.akn-search-widget__crumb {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	/* gap + justify-content defaults come from the "Jarak Nomor & Label"
	   / "Posisi Konten" Style controls (crumb_content_gap /
	   crumb_content_align) — Elementor always outputs their default
	   value's CSS too, so no static fallback is needed here. */
}

/* Fixed box (Width/Height Style controls), NOT padding — "1"/"2"/"3"/"4"
   have different intrinsic glyph widths, so padding alone makes the
   badge lopsided instead of a clean circle. Centering + flex-shrink are
   a structural requirement of this approach, not a per-site design
   choice, so they're hardcoded here rather than exposed as controls. */
.akn-search-widget__crumb-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Mobile: breadcrumb items can outgrow the widget width (long custom
   labels, 4+ steps) — scroll horizontally instead of wrapping/squishing
   crumbs into an unreadable stack. Threshold matches Elementor's own
   default Mobile breakpoint (767px), same convention as the Tablet
   (1024px) one used for the form's wrap fix above. */
@media (max-width: 767px) {
	.akn-search-widget__breadcrumb {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Scrollable, but no visible scrollbar track — same "swipe to
		   scroll" pattern as most mobile carousels/tab bars. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.akn-search-widget__breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.akn-search-widget__breadcrumb .akn-search-widget__crumb {
		flex: 0 0 auto;
	}
}

/* Description (left) + status message (right) footer under each step's
   main content — see PHP render(), one instance per .akn-search-widget__step
   so a status message shown while a later step is active never gets
   written into an earlier, now-hidden (display:none) step's element. */
.akn-search-widget__step-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.akn-search-widget__step-description {
	margin: 0;
}

.akn-search-widget__message {
	margin: 0;
}

.akn-search-widget__step-title {
	/* bottom margin governed entirely by the "Gap ke Konten" Style
	   control (header_gap_to_content) — no default here so there's
	   only one source of truth for the value. */
	margin-top: 0;
}

/* Direction AND cross-axis alignment are both switched by the "Layout"
   Style control (nama_layout, live `selectors_dictionary` — Stack sets
   flex-direction:column + align-items:stretch (full-width fields/
   button), Inline sets row + align-items:flex-end (button sizes to
   its own content/JS min-height instead of stretching to the taller
   field block). No PHP-rendered class involved, so it live-updates
   instantly in the Elementor editor without a page refresh. */
.akn-search-widget__form {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* Desktop: never wrap — Lebar Field/Lebar Tombol values are trusted
	   to fit the row as configured. */
	flex-wrap: nowrap;
}

/* "Layout" (nama_layout) isn't itself responsive — Inline stays
   `flex-direction: row` at every breakpoint. Tablet/mobile is where
   Lebar Field/Lebar Tombol commonly get set to 100% to stack fields —
   wrap is what lets that actually drop to its own line instead of
   squeezing every child into one non-wrapping row. Threshold matches
   Elementor's own default Tablet breakpoint (1024px) so this lines up
   with the Tablet/Mobile icons on the responsive controls above. */
@media (max-width: 1024px) {
	.akn-search-widget__form {
		flex-wrap: wrap;
	}
}

.akn-search-widget__field {
	flex: 1 1 auto;
}

.akn-search-widget__form .akn-search-widget__button {
	flex: 0 0 auto;
}

.akn-search-widget__input {
	width: 100%;
	box-sizing: border-box;
}

.akn-search-widget__input:focus {
	outline: none;
	box-shadow: none;
}

.akn-search-widget__button {
	cursor: pointer;
	box-sizing: border-box;
}

.akn-search-widget__slug-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.akn-search-widget__slug-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.akn-search-widget__slug-divider {
	display: none;
	flex: 0 0 auto;
	width: 100%;
	height: 0;
	box-sizing: border-box;
	border-top: 1px solid transparent;
}

.akn-search-widget__packages {
	display: grid;
	/* Fallback only — "Langkah Paket" (package_columns) Style/Content
	   control owns the real, per-breakpoint value via generated CSS. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.akn-search-widget__package {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	cursor: pointer;
}

.akn-search-widget__package-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.akn-search-widget__package-badge {
	display: inline-block;
	box-sizing: border-box;
}

.akn-search-widget__templates {
	display: grid;
	/* Fallback only — "Langkah Template" (template_columns) Style/Content
	   control owns the real, per-breakpoint value via generated CSS. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Card is a role="button" div, not a real <button> — it now wraps the
   "Lihat Demo" <button> (see render()), and interactive elements can't
   nest. Click/keyboard wiring lives in search-widget.js. */
.akn-search-widget__template {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.akn-search-widget__template.is-disabled {
	pointer-events: none;
	opacity: 0.6;
}

.akn-search-widget__template-thumbnail {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.akn-search-widget__template-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No featured image set on the akn_template post — same gradient +
   initials fallback as the admin katalog page's .thumb-preview (see
   assets/css/admin.css), values matching Brand_Tokens::ACCENT_LIGHT /
   ACCENT_DARK, hardcoded here since the frontend doesn't load
   admin.css's --akn-accent-* custom properties. */
.akn-search-widget__template-thumbnail-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #E6C665, #A9872B);
	color: #3D3110;
	font-weight: 700;
	box-sizing: border-box;
}

/* Title+category are grouped on the left (.template-info), preview
   button alone on the right — restructured 2026-08-14, previously title
   sat above a .template-meta row that held both category AND preview
   together. */
.akn-search-widget__template-body {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-sizing: border-box;
}

.akn-search-widget__template-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.akn-search-widget__template-title {
	display: block;
}

.akn-search-widget__template-category {
	display: block;
}

.akn-search-widget__template-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	line-height: 1;
}

.akn-search-widget__spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: middle;
	animation: akn-search-widget-spin 0.6s linear infinite;
}

.akn-search-widget__button.is-loading .akn-search-widget__spinner {
	display: inline-block;
}

@keyframes akn-search-widget-spin {
	to {
		transform: rotate(360deg);
	}
}