/* ============================================================
   CertREV, Component classes
   ------------------------------------------------------------
   Interactive styling (hover / focus / active) for the React
   primitives. Components reference these classes so states work
   without JS. Shipped to consumers via styles.css.
   ============================================================ */

/* ---------------- Button ---------------- */
.cr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-weight: 600;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}
.cr-btn:focus-visible { outline: none; box-shadow: var(--ring-coral); }
.cr-btn--sm { padding: 10px 18px; font-size: 13px; }
.cr-btn--md { padding: 13px 26px; font-size: 14px; }
.cr-btn--lg { padding: 16px 34px; font-size: 16px; }

.cr-btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.cr-btn--navy:hover { background: var(--navy-90); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cr-btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-md); }
.cr-btn--primary:hover { background: var(--coral-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cr-btn--secondary { background: transparent; color: var(--coral); border-color: var(--coral); }
.cr-btn--secondary:hover { background: var(--coral); color: #fff; }
.cr-btn--outline { background: transparent; color: var(--navy); border-color: var(--navy-35); }
.cr-btn--outline:hover { background: var(--navy-03); border-color: var(--navy); }
.cr-btn--ghost { background: transparent; color: var(--navy); }
.cr-btn--ghost:hover { background: var(--navy-10); color: var(--coral); }
.cr-btn--danger { background: var(--danger); color: #fff; box-shadow: var(--shadow-md); }
.cr-btn--danger:hover { background: var(--danger-hover); }
.cr-btn:active { transform: translateY(0); }
.cr-btn[disabled], .cr-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.cr-btn.is-loading { opacity: 0.75; cursor: progress; }
.cr-btn__spin { animation: cr-spin 0.7s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ---------------- Badge ---------------- */
.cr-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.cr-badge--default { background: var(--navy-10); color: var(--navy); }
.cr-badge--coral { background: var(--coral-faint); color: var(--coral-deep); }
.cr-badge--navy { background: var(--navy); color: #fff; }
.cr-badge--lime { background: var(--lime); color: var(--lime-text); }
.cr-badge--success { background: var(--success-bg); color: var(--success-fg); }
.cr-badge--danger { background: var(--danger-light); color: var(--danger-fg); }
.cr-badge--warning { background: var(--warning-light); color: var(--warning-fg); }
.cr-badge--info { background: var(--info-light); color: var(--info-fg); }
.cr-badge--accent { background: var(--accent-light); color: var(--accent-fg); }

/* ---------------- Lime chip (mono) ---------------- */
.cr-limechip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--radius-xs);
	background: var(--lime);
	color: var(--navy);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}
.cr-limechip--md { font-size: 11px; padding: 4px 10px; }

/* ---------------- Card ---------------- */
.cr-card {
	border-radius: var(--radius-xl);
	border: 2px solid var(--navy-10);
	box-shadow: var(--shadow-lg);
	transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
	background: var(--surface);
}
.cr-card--padded { padding: 32px; }
.cr-card--beige { background: var(--beige); }
.cr-card--coral { background: var(--coral); color: #fff; }
.cr-card--navy { background: var(--navy); color: #fff; }
.cr-card--lime { background: var(--lime); color: var(--navy); }
.cr-card--interactive:hover { box-shadow: var(--shadow-xl); border-color: var(--navy-35); transform: translateY(-2px); }

/* ---------------- Field (input / select) ---------------- */
.cr-field { width: 100%; }
.cr-field__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cr-field__control {
	width: 100%;
	padding: 13px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--navy);
	background: var(--surface);
	border: 2px solid var(--navy-10);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
		background var(--dur-base) var(--ease-out);
}
.cr-field__control::placeholder { color: var(--text-placeholder); }
.cr-field__control:hover { border-color: var(--navy-35); }
.cr-field__control:focus { outline: none; border-color: var(--coral); box-shadow: var(--ring-coral); }
.cr-field__control:disabled { opacity: 0.5; cursor: not-allowed; background: var(--navy-03); }
.cr-field--error .cr-field__control { border-color: var(--coral); background: var(--coral-faint); }
.cr-field__msg { margin-top: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }
.cr-field__msg--error { color: var(--coral-deep); font-weight: 500; }
.cr-select-wrap { position: relative; }
.cr-select-wrap select { appearance: none; cursor: pointer; padding-right: 44px; }
.cr-select-wrap .cr-select__chevron {
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	pointer-events: none; color: var(--text-muted);
}

/* ---------------- Checkbox ---------------- */
.cr-check { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cr-check input {
	appearance: none; -webkit-appearance: none;
	flex-shrink: 0; width: 20px; height: 20px; margin: 0;
	border: 2px solid var(--navy-35); border-radius: 6px; background: var(--surface);
	cursor: pointer; position: relative;
	transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.cr-check input:hover { border-color: var(--navy-55); }
.cr-check input:focus-visible { outline: none; box-shadow: var(--ring-coral); }
.cr-check input:checked { background: var(--coral); border-color: var(--coral); }
.cr-check input:checked::after {
	content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cr-check input:disabled { opacity: 0.5; cursor: not-allowed; }
.cr-check__label { font-family: var(--font-sans); font-size: 14px; color: var(--navy); line-height: 1.5; }

/* ---------------- Inline link ---------------- */
.cr-link {
	color: var(--navy); text-decoration: underline; font-weight: 500;
	text-decoration-color: var(--coral-soft); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.cr-link:hover { text-decoration-color: var(--coral); }

/* ---------------- Custom select (CrSelect listbox) ---------------- */
.crsel { position: relative; width: 100%; }
.crsel-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: var(--surface); border: 2px solid var(--navy-10); border-radius: var(--radius-lg); font-family: var(--font-sans); font-size: 13.5px; color: var(--navy); cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.crsel-btn:hover { border-color: var(--navy-35); }
.crsel-btn:focus-visible { outline: none; border-color: var(--coral); box-shadow: var(--ring-coral); }
.crsel.open .crsel-btn { border-color: var(--coral); }
.crsel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crsel-chev { flex-shrink: 0; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.crsel.open .crsel-chev { transform: rotate(180deg); }
.crsel.disabled .crsel-btn { opacity: 0.55; cursor: not-allowed; }
.crsel-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; margin: 0; padding: 5px; list-style: none; background: var(--surface); border: 1px solid var(--navy-10); border-radius: 12px; box-shadow: var(--shadow-xl); max-height: 280px; overflow-y: auto; animation: crsel-in 0.14s var(--ease-out); }
@keyframes crsel-in { from { opacity: 0; transform: translateY(-4px); } }
.crsel-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; color: var(--navy-75); cursor: pointer; }
.crsel-opt-label { flex: 1; min-width: 0; }
.crsel-opt.hi { background: var(--navy-06); color: var(--navy); }
.crsel-opt.on { color: var(--navy); font-weight: 600; }
.crsel-opt.on svg { color: var(--coral); flex-shrink: 0; }