/**
 * Shared design-render styles — the CSS counterpart of shared/designRender.js and
 * the single source of truth for the rendered-design framework. Imported by BOTH
 * the admin builder preview (admin/src/style.scss) and the host's public frontend
 * (the plugin's frontend style), so a design looks identical in the builder and on
 * the live site.
 *
 * ONLY the generic, design-render framework lives here. NOT here: builder editor
 * chrome (`cb-*`), admin app chrome (`cliqthemes-ui-*`), host frontend chrome
 * (`cliq-sl-*`), or admin-only preview mocks (`cliq-widget-field*`, `cliq-w-*`).
 *
 * ── STYLESHEET CONTRACT ─────────────────────────────────────────────────────
 * The builder is the single source of a design's layout and look. This file may
 * ONLY contain:
 *   (a) resets — stripping browser/theme chrome (border:0, margin/padding:0,
 *       appearance:none, box-sizing, outline suppression, font:inherit);
 *   (b) structural rules whose every value is `var(--…, fallback)` fed by
 *       builder settings or theme tokens.
 * Any fixed layout/look literal outside a var() fallback on a design-rendered
 * path is a BUG — put a control/token behind it instead. Explicitly allowed:
 * focus-ring geometry (a11y affordance), @keyframes motion values, and
 * typographic em-defaults inside rich-text (.cliq-widget-html) content.
 * ────────────────────────────────────────────────────────────────────────────
 */

/* Reset — every rendered element carries the `.cliq-widget` base. Low specificity
   is intentional: scoped per-design rules must always beat this neutral base. */
.cliq-widget {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	outline: none;
	/* BASE transition for every rendered element — paint-only properties
	   (never layout: width/padding/etc would animate reflows), with one
	   shared timing (--cliq-transition-*, overridable by the consumer's
	   tokens). Hover looks (hoverBackground/hoverColor, tint, zoom, filter
	   effects) all animate through this — no per-effect transitions. */
	transition-property: transform, filter, background, background-color, color, border-color, box-shadow, opacity;
	transition-duration: var(--cliq-transition-duration, 0.4s);
	transition-timing-function: var(--cliq-transition-easing, ease-in-out);
	font-family: inherit;
	font-size: 100%;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: start;
	list-style: none;
	vertical-align: baseline;
	max-width: none;
}

/* Structure only — the "look" (colour/padding/size/weight) comes from the design
   (scoped per-element rules + renderer defaults), never hardcoded on these classes. */
.cliq-widget-design { width: 100%; }
.cliq-widget-design--linked { cursor: pointer; }
.cliq-widget-link { display: block; width: 100%; color: inherit; text-decoration: none; }
.cliq-widget-link:hover, .cliq-widget-link:focus { color: inherit; text-decoration: none; }
.cliq-widget-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	width: 100%;
	min-width: 0;
}
/* position:relative makes this the containing block for any absolutely-
   positioned cell within it (see cellLayoutStyle's `overlay` branch), so an
   overlay item anchors to — and overlays a sibling item within — its column. */
/* Column item gap: builder-controlled (Column settings → Item gap emits
   --cliq-col-gap into the column's scoped rule); 6px is only the fallback. */
.cliq-widget-col { grid-column: span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cliq-col-gap, 6px); min-width: 0; align-content: start; position: relative; }
.cliq-widget-cell { grid-column: span 12; min-width: 0; display: flex; flex-direction: column; }
/* Results-list container: structural base consuming the per-instance custom
   properties set by resultsContainerProps() (designRender.js) / its PHP SSR
   twin. Discrete layout modes are modifier classes; continuous values (gap,
   grid columns, scroll height) arrive as variables — never as inline CSS
   properties on the element. */
.cliq-widget-results { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--cliq-results-gap, 14px); min-width: 0; }
.cliq-widget-results--row { flex-direction: row; flex-wrap: wrap; }
.cliq-widget-results--grid {
	display: grid;
	grid-template-columns: var(--cliq-results-cols, repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - 42px) / 4))), 1fr)));
}
/* The results element is the sole scroll owner. Keep the content flush with
   its scroll edge so a styled/overlay scrollbar sits inside the card surface
   instead of looking detached in a blank lane beside it. */
.cliq-widget-results--scroll {
	max-height: var(--cliq-results-max-h, 620px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: auto;
	scrollbar-width: thin !important;
	/* Idle lists show no bar. Chrome now ignores ::-webkit-scrollbar in favour
	   of these standard properties, so the reveal has to live here — the gutter
	   is still reserved, so showing it on hover never shifts the cards. */
	scrollbar-color: transparent transparent;
	transition: scrollbar-color .18s ease;
	box-sizing: border-box;
}
.cliq-widget-results--scroll:hover,
.cliq-widget-results--scroll:focus-within {
	scrollbar-color: var(--cliq-results-scroll-thumb, #94a3b8) var(--cliq-results-scroll-track, transparent);
}
.cliq-widget-results--scroll::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
.cliq-widget-results--scroll::-webkit-scrollbar-track { background: var(--cliq-results-scroll-track, transparent) !important; }
.cliq-widget-results--scroll::-webkit-scrollbar-thumb { min-height: 32px; border: 0; border-radius: 999px; background: transparent !important; }
.cliq-widget-results--scroll:hover::-webkit-scrollbar-thumb,
.cliq-widget-results--scroll:focus-within::-webkit-scrollbar-thumb { background: var(--cliq-results-scroll-thumb, #94a3b8) !important; }
.cliq-widget-results--scroll::-webkit-scrollbar-corner { background: transparent !important; }
.cliq-widget-text svg { vertical-align: -2px; }
/* Open/closed is badge-shaped by default; all colors remain builder-owned. */
.cliq-widget-open-status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 0.35em 0.7em; border-radius: 999px; }
/* Rich-text (WYSIWYG) field: render its own markup with tidy block spacing. */
.cliq-widget-html { display: block; }
.cliq-widget-html > :first-child { margin-top: 0; }
.cliq-widget-html > :last-child { margin-bottom: 0; }
.cliq-widget-html p { margin: 0 0 0.75em; }
.cliq-widget-html ul, .cliq-widget-html ol { margin: 0 0 0.75em; padding-inline-start: 1.4em; }
.cliq-widget-html a { color: inherit; text-decoration: underline; }
/* The transparent border is load-bearing: an outlined button placed beside a
   filled one is otherwise 2px taller (its border adds to a content-height box),
   so every actions row renders visibly misaligned. Reserving the border on all
   buttons makes the metrics identical; an authored border wins on specificity. */
.cliq-widget-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cliq-btn-icon-gap, 6px); cursor: pointer; align-self: flex-start; border: 1px solid transparent; }
.cliq-widget-btn svg { flex-shrink: 0; }
/* Size is owned by the design (default logo width/height + scoped overrides) per
   the principle above — no hardcoded max-width here, so an explicit width wins. */
.cliq-widget-logo { display: block; object-fit: cover; }
.cliq-widget-logo--ph { display: flex; align-items: center; justify-content: center; background: var(--cliq-logo-ph-bg, #eef2ff); color: var(--cliq-logo-ph-color, #3858e9); font-weight: var(--cliq-logo-ph-weight, 700); font-size: var(--cliq-logo-ph-size, 20px); }
.cliq-widget-icon { display: inline-flex; align-items: center; justify-content: center; }
.cliq-widget-icon--empty { width: var(--cliq-icon-size, 24px); height: var(--cliq-icon-size, 24px); }

/* Gallery: a responsive thumbnail grid rendered by designRender.js (the live store
   detail upgrades it to a Swiper + lightbox via the host's own chrome). */
/* Gallery thumbs grid: columns/gap arrive as custom properties (GalleryView). */
.cliq-widget-gallery--grid { width: 100%; display: grid; grid-template-columns: repeat(var(--cliq-gallery-cols, 4), 1fr); gap: var(--cliq-gallery-gap, 8px); }
.cliq-widget-gallery--grid .cliq-widget-gallery__img { aspect-ratio: 1 / 1; }
/* Corner rounding resolves through the generic --cliq-radius token (0 by
   default — the consumer maps/overrides it, e.g. store-locator sets
   --cliq-radius: var(--cliq-sl-radius)); rounding is a theme choice. */
.cliq-widget-gallery__img { width: 100%; object-fit: cover; border-radius: var(--cliq-radius, 0); display: block; }
.cliq-widget-gallery--empty { padding: var(--cliq-gallery-empty-pad, 22px); text-align: center; color: var(--cliq-gallery-empty-color, #94a3b8); background: var(--cliq-gallery-empty-bg, #f1f5f9); border: 1px dashed var(--cliq-gallery-empty-border, #cbd5e1); border-radius: var(--cliq-radius, 0); font-size: var(--cliq-gallery-empty-font, 12px); }
/* Slider / slider+thumbs preview — mirrors the frontend Swiper structure. */
.cliq-widget-gallery--slider, .cliq-widget-gallery--slider-thumbs { width: 100%; }
.cliq-widget-gallery__main { position: relative; width: 100%; }
.cliq-widget-gallery__main .cliq-widget-gallery__img { aspect-ratio: 16 / 10; }
.cliq-widget-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--cliq-gallery-nav-size, 30px); height: var(--cliq-gallery-nav-size, 30px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cliq-gallery-nav-bg, rgba(255,255,255,0.9)); color: var(--cliq-gallery-nav-color, #0f172a); font-size: var(--cliq-gallery-nav-font, 18px); line-height: 1; box-shadow: var(--cliq-gallery-nav-shadow, 0 2px 8px rgba(15,23,42,0.18)); }
.cliq-widget-gallery__nav--prev { inset-inline-start: var(--cliq-gallery-nav-inset, 8px); }
.cliq-widget-gallery__nav--next { inset-inline-end: var(--cliq-gallery-nav-inset, 8px); }
.cliq-widget-gallery__thumbs { display: flex; gap: var(--cliq-gallery-gap, 8px); margin-top: var(--cliq-gallery-gap, 8px); overflow: hidden; }
.cliq-widget-gallery__thumb { width: var(--cliq-gallery-thumb-w, 72px); height: var(--cliq-gallery-thumb-h, 52px); object-fit: cover; border-radius: var(--cliq-radius, 0); opacity: 0.55; flex: 0 0 auto; }
.cliq-widget-gallery__thumb.is-active { opacity: 1; outline: 2px solid var(--cliq-gallery-active, #3858e9); }

/* Entrance animations, referenced by the renderer's `animType`. */
@keyframes cliq-widget-kf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cliq-widget-kf-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cliq-widget-kf-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes cliq-widget-kf-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* Expand-on-click reveal region (accordion) — smooth 0fr→1fr grid-height anim. */
.cliq-widget-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.cliq-widget-reveal.is-open { grid-template-rows: 1fr; }
.cliq-widget-reveal__inner { overflow: hidden; min-height: 0; }
