/**
 * Logo Variant Clicker — front-end component styles.
 * Inherits the site's Plus Jakarta Sans; references DAC brand tokens with
 * fallbacks so it renders correctly even outside a themed context.
 *
 * @package DAC_PDF_Hub
 * @version 1.18.0
 */

.dac-lv {
	--lv-blue:        var(--dac-blue, #0048B8);
	--lv-blue-hover:  var(--dac-blue-hover, #003FA3);
	--lv-blue-light:  var(--dac-blue-light, #EEF3FC);
	--lv-blue-border: var(--dac-blue-border, #BFDBFE);
	--lv-text:        var(--dac-text, #1E2A3A);
	--lv-surface:     #FFFFFF;
	--lv-surface-2:   #F5F7FB;
	--lv-border:      #E2E7F0;
	--lv-border-strong: #D3DAE6;
	--lv-muted:       #64708A;
	--lv-muted-2:     #8A93A8;
	--lv-stage-light: #F3F4F8;
	--lv-stage-dark:  #14183A;
	--lv-r-card: 18px;
	--lv-r-btn: 11px;
	--lv-r-stage: 14px;

	max-width: 460px;
	box-sizing: border-box;
	background: var(--lv-surface);
	border: 1px solid var(--lv-border);
	border-radius: var(--lv-r-card);
	box-shadow: 0 1px 2px rgba(10,8,59,.05), 0 12px 34px rgba(10,8,59,.10);
	padding: 20px;
	color: var(--lv-text);
}
.dac-lv *, .dac-lv *::before, .dac-lv *::after { box-sizing: border-box; }

.dac-lv-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--lv-muted-2); margin: 0 0 3px;
}
.dac-lv-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; line-height: 1.2; }

/* ---- stage ---- */
.dac-lv-stagewrap { display: flex; align-items: stretch; gap: 12px; }
.dac-lv-stagewrap--plain { display: block; }

.dac-lv-stage {
	flex: 1; min-width: 0; border-radius: var(--lv-r-stage); overflow: hidden;
	aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 26px;
	border: 1px solid var(--lv-border); transition: background .25s ease;
}
.dac-lv-stage[data-bg="light"] {
	background: var(--lv-stage-light)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='12' height='12' fill='%23e7eaf1'/%3E%3Crect x='12' y='12' width='12' height='12' fill='%23e7eaf1'/%3E%3C/svg%3E");
}
.dac-lv-stage[data-bg="dark"] { background: var(--lv-stage-dark); }
.dac-lv-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .2s ease; display: block; }

/* ---- carousel arrows ---- */
.dac-lv-arrow {
	flex: none; align-self: center; width: 40px; height: 40px; display: grid; place-items: center;
	border-radius: 50%; border: 1px solid var(--lv-border-strong); background: var(--lv-surface);
	color: var(--lv-text); cursor: pointer; box-shadow: 0 1px 2px rgba(10,8,59,.06); padding: 0;
	transition: background .18s, color .18s, transform .12s, border-color .18s;
}
.dac-lv-arrow:hover { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; transform: scale(1.06); }
.dac-lv-arrow:active { transform: scale(.96); }
.dac-lv-arrow:focus-visible { outline: 3px solid var(--lv-blue-border); outline-offset: 2px; }

/* ---- toolbar ---- */
.dac-lv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.dac-lv-meta { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.dac-lv-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.dac-lv-count { font-size: 12.5px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }

.dac-lv-bg { display: inline-flex; background: var(--lv-surface-2); border: 1px solid var(--lv-border); border-radius: 999px; padding: 3px; gap: 2px; }
.dac-lv-bg button {
	border: 0; background: transparent; color: var(--lv-muted); cursor: pointer;
	font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
	transition: background .16s, color .16s;
}
.dac-lv-bg button.is-active { background: var(--lv-surface); color: var(--lv-text); box-shadow: 0 1px 2px rgba(10,8,59,.10); }

/* ---- dots (carousel) ---- */
.dac-lv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.dac-lv-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: var(--lv-border-strong); cursor: pointer; transition: background .18s, width .22s; }
.dac-lv-dot:hover { background: var(--lv-muted-2); }
.dac-lv-dot.is-active { background: var(--lv-blue); width: 22px; }

/* ---- swatches ---- */
.dac-lv-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: 16px; }
.dac-lv-swatch {
	display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer;
	background: var(--lv-surface); border: 1.5px solid var(--lv-border); border-radius: var(--lv-r-btn);
	font: inherit; color: var(--lv-text); transition: border-color .16s, background .16s, transform .1s;
}
.dac-lv-swatch:hover { border-color: var(--lv-border-strong); background: var(--lv-surface-2); }
.dac-lv-swatch:active { transform: scale(.98); }
.dac-lv-swatch.is-active { border-color: var(--lv-blue); background: var(--lv-blue-light); }
.dac-lv-swatch:focus-visible { outline: 3px solid var(--lv-blue-border); outline-offset: 2px; }
.dac-lv-swatch-chip { width: 20px; height: 20px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(10,8,59,.18); }
.dac-lv-swatch-label { font-size: 13.5px; font-weight: 600; }

/* ---- download ---- */
.dac-lv-dl {
	margin-top: 18px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	background: var(--lv-blue); color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px;
	padding: 13px 18px; border-radius: var(--lv-r-btn);
	box-shadow: 0 1px 2px rgba(0,72,184,.28), 0 6px 16px rgba(0,72,184,.24);
	transition: background .18s, transform .1s;
}
.dac-lv-dl:hover { background: var(--lv-blue-hover); color: #fff; }
.dac-lv-dl:active { transform: translateY(1px); }
.dac-lv-dl:focus-visible { outline: 3px solid var(--lv-blue-border); outline-offset: 2px; }

.dac-lv-notice { font-size: 13px; color: #9a2436; padding: 10px 14px; border: 1px dashed #e2b4b4; border-radius: 8px; }

/* ---- mobile ---- */
@media (max-width: 480px) {
	.dac-lv { max-width: 100%; padding: 16px; }
	.dac-lv-arrow { width: 44px; height: 44px; }
	.dac-lv-dl { padding: 14px 18px; }
	.dac-lv-bg button { padding: 8px 14px; }
	.dac-lv-swatch { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.dac-lv * { transition: none !important; }
}