/*
 * Lusiv selector — styles.
 * All rules scoped to .lusiv-selector to avoid conflicts with theme/Elementor.
 * Colour variables at the top — update to match brand.
 */

.lusiv-selector {
	--ls-blue:        #3b29ab;
	--ls-blue-hover:  #2e208a;
	--ls-blue-light:  #eff6ff;
	--ls-blue-border: #bfdbfe;
	--ls-border:      #e5e7eb;
	--ls-bg:          #f9fafb;
	--ls-text:        #111827;
	--ls-muted:       #6b7280;
	--ls-radius:      6px;
	--ls-radius-lg:   8px;
	font-family: inherit;
	color: var(--ls-text);
}

/* ── Pack size row ────────────────────────────────────────────────────────── */

.lusiv-selector .ls-pack-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.lusiv-selector .ls-pack-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ls-muted);
	white-space: nowrap;
}

.lusiv-selector .ls-pack-btns {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.lusiv-selector .ls-pack-btn {
	padding: 6px 14px;
	border-radius: var(--ls-radius);
	border: 1.5px solid var(--ls-border);
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	color: #374151;
	transition: border-color .15s, color .15s;
	white-space: nowrap;
}

.lusiv-selector .ls-pack-btn:hover {
	border-color: var(--ls-blue);
	color: var(--ls-blue);
}

.lusiv-selector .ls-pack-btn.active {
	background: var(--ls-blue);
	border-color: var(--ls-blue);
	color: #fff;
}

/* ── Eyes grid ───────────────────────────────────────────────────────────── */

.lusiv-selector .ls-eyes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

@media ( max-width: 520px ) {
	.lusiv-selector .ls-eyes { grid-template-columns: 1fr; }
}

/* ── Eye panel ───────────────────────────────────────────────────────────── */

.lusiv-selector .ls-eye {
	border: 1.5px solid var(--ls-border);
	border-radius: var(--ls-radius-lg);
	overflow: visible;
	transition: border-color .15s;
}

.lusiv-selector .ls-eye.active {
	border-color: var(--ls-blue);
}

.lusiv-selector .ls-eye-header {
	background: var(--ls-bg);
	border-bottom: 1.5px solid var(--ls-border);
	border-radius: calc( var(--ls-radius-lg) - 1px ) calc( var(--ls-radius-lg) - 1px ) 0 0;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background .15s, border-color .15s;
}

.lusiv-selector .ls-eye.active .ls-eye-header {
	background: var(--ls-blue-light);
	border-color: var(--ls-blue-border);
}

.lusiv-selector .ls-eye-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ls-muted);
	transition: color .15s;
}

.lusiv-selector .ls-eye.active .ls-eye-label {
	color: var(--ls-blue);
}

/* ── Qty control ──────────────────────────────────────────────────────────── */

.lusiv-selector .ls-qty-ctrl {
	display: flex;
	align-items: center;
}

.lusiv-selector .ls-qty-btn {
	width: 26px;
	height: 26px;
	border: 1.5px solid var(--ls-border);
	background: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	color: #374151;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .1s, border-color .1s, color .1s;
}

.lusiv-selector .ls-qty-btn:first-child { border-radius: 4px 0 0 4px; border-right: none; }
.lusiv-selector .ls-qty-btn:last-child  { border-radius: 0 4px 4px 0; border-left: none; }

.lusiv-selector .ls-qty-btn:hover:not(:disabled) {
	background: var(--ls-blue-light);
	border-color: var(--ls-blue);
	color: var(--ls-blue);
}

.lusiv-selector .ls-qty-btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.lusiv-selector .ls-qty-val {
	min-width: 30px;
	height: 26px;
	border: 1.5px solid var(--ls-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
}

/* ── Eye body / fields ───────────────────────────────────────────────────── */

.lusiv-selector .ls-eye-body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lusiv-selector .ls-field label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ls-muted);
	margin-bottom: 3px;
}

.lusiv-selector .ls-field select {
	width: 100%;
	padding: 7px 26px 7px 9px;
	border: 1.5px solid var(--ls-border);
	border-radius: var(--ls-radius);
	font-size: 13px;
	color: var(--ls-text);
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}

.lusiv-selector .ls-field select:focus {
	outline: none;
	border-color: var(--ls-blue);
	box-shadow: 0 0 0 3px rgba( 59, 41, 171, .1 );
}

.lusiv-selector .ls-hidden { display: none !important; }

/* ── Two-column power picker ──────────────────────────────────────────────── */

.lusiv-selector .ls-power-picker {
	position: relative;
}

.lusiv-selector .ls-power-trigger {
	width: 100%;
	padding: 7px 9px;
	border: 1.5px solid var(--ls-border);
	border-radius: var(--ls-radius);
	font-size: 13px;
	color: var(--ls-muted);
	background: #fff;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	transition: border-color .15s, border-radius .1s;
	user-select: none;
}

.lusiv-selector .ls-power-trigger.has-value { color: var(--ls-text); }

.lusiv-selector .ls-power-trigger:focus {
	outline: none;
	border-color: var(--ls-blue);
	box-shadow: 0 0 0 3px rgba( 59, 41, 171, .1 );
}

.lusiv-selector .ls-power-trigger.open {
	border-color: var(--ls-blue);
	border-radius: var(--ls-radius) var(--ls-radius) 0 0;
}

.lusiv-selector .ls-power-trigger svg {
	flex-shrink: 0;
	transition: transform .15s;
}

.lusiv-selector .ls-power-trigger.open svg { transform: rotate(180deg); }

.lusiv-selector .ls-power-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1.5px solid var(--ls-blue);
	border-top: none;
	border-radius: 0 0 var(--ls-radius) var(--ls-radius);
	max-height: 240px;
	overflow-y: auto;
	z-index: 9999;
	box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.lusiv-selector .ls-power-panel.open { display: block; }

.lusiv-selector .ls-power-panel::-webkit-scrollbar { width: 4px; }
.lusiv-selector .ls-power-panel::-webkit-scrollbar-track { background: var(--ls-bg); }
.lusiv-selector .ls-power-panel::-webkit-scrollbar-thumb { background: var(--ls-border); border-radius: 2px; }

.lusiv-selector .ls-power-cols-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ls-blue);
	padding: 6px 0;
	position: sticky;
	top: 0;
	z-index: 1;
}

.lusiv-selector .ls-power-cols-header span {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.lusiv-selector .ls-power-plano {
	text-align: center;
	padding: 7px 8px;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
	border-bottom: 1px solid #f3f4f6;
	transition: background .1s;
}

.lusiv-selector .ls-power-plano:hover,
.lusiv-selector .ls-power-plano.selected {
	background: var(--ls-blue-light);
	color: var(--ls-blue);
	font-weight: 600;
}

.lusiv-selector .ls-power-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid #f3f4f6;
}

.lusiv-selector .ls-power-row:last-child { border-bottom: none; }

.lusiv-selector .ls-power-cell {
	padding: 7px 8px;
	text-align: center;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
	transition: background .1s;
}

.lusiv-selector .ls-power-cell:first-child { border-right: 1px solid #f3f4f6; }
.lusiv-selector .ls-power-cell:empty        { cursor: default; }

.lusiv-selector .ls-power-cell:not(:empty):hover,
.lusiv-selector .ls-power-cell.selected {
	background: var(--ls-blue-light);
	color: var(--ls-blue);
}

.lusiv-selector .ls-power-cell.selected { font-weight: 600; }

/* ── Summary ─────────────────────────────────────────────────────────────── */

.lusiv-selector .ls-summary {
	background: var(--ls-blue-light);
	border: 1.5px solid var(--ls-blue-border);
	border-radius: var(--ls-radius-lg);
	padding: 12px 16px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.lusiv-selector .ls-summary-lines {
	font-size: 13px;
	color: #4b5563;
	line-height: 1.8;
}

.lusiv-selector .ls-summary-lines b { color: var(--ls-text); font-weight: 600; }

.lusiv-selector .ls-total-wrap { text-align: right; white-space: nowrap; }

.lusiv-selector .ls-total-label {
	font-size: 10px;
	color: var(--ls-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.lusiv-selector .ls-total-amount {
	font-size: 26px;
	font-weight: 700;
	color: var(--ls-text);
	line-height: 1.1;
}

.lusiv-selector .ls-total-note {
	font-size: 11px;
	color: #9ca3af;
}

/* ── Error message ───────────────────────────────────────────────────────── */

.lusiv-selector .ls-error {
	background: #fef2f2;
	border: 1.5px solid #fecaca;
	border-radius: var(--ls-radius);
	padding: 8px 12px;
	margin-bottom: 12px;
	font-size: 13px;
	color: #dc2626;
	display: none;
}

.lusiv-selector .ls-error.visible { display: block; }

/* ── Add to cart button ──────────────────────────────────────────────────── */

.lusiv-selector .ls-atc {
	width: 100%;
	padding: 13px;
	border-radius: var(--ls-radius-lg);
	border: none;
	background: var(--ls-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
	letter-spacing: .01em;
}

.lusiv-selector .ls-atc:hover:not(:disabled) {
	background: var(--ls-blue-hover);
}

.lusiv-selector .ls-atc:disabled {
	background: #a5b4fc;
	cursor: not-allowed;
}

/* ── Meta pills ([lusiv_meta]) ───────────────────────────────────────────── */

.lusiv-meta {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 99px;
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
}

.lusiv-meta--lens_type  { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.lusiv-meta--base_curve,
.lusiv-meta--diameter   { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }