/* ==========================================================================
   JLS Computers — shared UI layer (loaded site-wide by inc/jls-ui.php)
   Tokens + primitives used by the account area, product page and popups.
   Page stylesheets build on these; nothing here restyles existing markup
   except through the jls-* classes below.
   ========================================================================== */

:root {
	/* Colour */
	--a-navy: #2C5697;
	--a-navy-600: #234578;
	--a-navy-50: #EEF3FA;
	--a-navy-100: #DCE6F4;
	--a-ink: #15203A;
	--a-ink-2: #1F3361;
	--a-text: #3B4660;
	--a-muted: #6B7590;
	--a-line: #E4E9F2;
	--a-line-2: #EEF1F6;
	--a-soft: #F6F8FC;
	--a-green: #16804A;  --a-green-50: #E5F5EC;
	--a-amber: #A0640B;  --a-amber-50: #FDF3E1;
	--a-teal: #0F7C86;   --a-teal-50: #E1F4F5;
	--a-violet: #5B47C4; --a-violet-50: #EEEBFB;
	--a-red: #B42318;    --a-red-50: #FDECEA;

	/* Shape + depth */
	--a-radius: 14px;
	--a-radius-sm: 10px;
	--a-radius-lg: 18px;
	--a-shadow: 0 1px 2px rgba(21, 32, 58, .04), 0 4px 16px rgba(21, 32, 58, .05);
	--a-shadow-lg: 0 2px 4px rgba(21, 32, 58, .05), 0 12px 32px rgba(21, 32, 58, .10);

	/* Type (the font itself comes from --jls-font-heading in style.css / jls-ui.php) */
	--jls-heading-tracking: -.01em;
}

/* ---------- Icons ---------- */
.jls-ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---------- Buttons ---------- */
.jls-btn {
	box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px; border-radius: 10px; border: 1.5px solid transparent;
	font: 600 14px/1.2 var(--jls-font, "Inter", sans-serif); text-transform: none; letter-spacing: 0;
	text-decoration: none !important; cursor: pointer; white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.jls-btn:active { transform: translateY(1px); }
.jls-btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.jls-btn--lg { min-height: 52px; padding: 13px 22px; font-size: 15px; }
.jls-btn--block { width: 100%; }
.jls-btn--primary { background: var(--a-navy) !important; color: #fff !important; }
.jls-btn--primary:hover { background: var(--a-navy-600) !important; box-shadow: 0 4px 12px rgba(44, 86, 151, .28); }
.jls-btn--success { background: var(--a-green) !important; color: #fff !important; }
.jls-btn--success:hover { background: #106B3C !important; }
.jls-btn--ghost { background: #fff !important; color: var(--a-ink) !important; border-color: var(--a-line) !important; }
.jls-btn--ghost:hover { border-color: var(--a-navy) !important; color: var(--a-navy) !important; }
.jls-btn--soft { background: var(--a-navy-50) !important; color: var(--a-navy) !important; }
.jls-btn--soft:hover { background: var(--a-navy-100) !important; }
.jls-btn[disabled], .jls-btn.is-loading { opacity: .65; pointer-events: none; }

/* ---------- Pills / tags ---------- */
.jls-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.jls-pill--amber  { background: var(--a-amber-50);  color: var(--a-amber); }
.jls-pill--blue   { background: var(--a-navy-50);   color: var(--a-navy); }
.jls-pill--violet { background: var(--a-violet-50); color: var(--a-violet); }
.jls-pill--teal   { background: var(--a-teal-50);   color: var(--a-teal); }
.jls-pill--green  { background: var(--a-green-50);  color: var(--a-green); }
.jls-pill--grey   { background: #EEF0F4;            color: #5E667A; }
.jls-pill--red    { background: var(--a-red-50);    color: var(--a-red); }
.jls-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.jls-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: var(--a-soft); color: var(--a-muted); border: 1px solid var(--a-line); }
.jls-tag b { color: var(--a-ink); font-weight: 600; }

/* ---------- Cards ---------- */
.jls-card { box-sizing: border-box; background: #fff; border: 1px solid var(--a-line); border-radius: var(--a-radius); box-shadow: var(--a-shadow); padding: 20px 22px; }
.jls-card--soft { background: var(--a-soft); box-shadow: none; }
.jls-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jls-card__head h3 { margin: 0; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; text-transform: none; color: var(--a-ink); }

/* ---------- Headings in jls components ---------- */
.jls-h { font-family: var(--jls-font-heading); letter-spacing: var(--jls-heading-tracking); color: var(--a-ink); text-transform: none; }
.jls-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--a-muted); }

/* ---------- Segmented tabs ---------- */
.jls-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--a-soft); border: 1px solid var(--a-line); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.jls-seg::-webkit-scrollbar { display: none; }
.jls-seg button {
	appearance: none; border: 0 !important; background: transparent !important; box-shadow: none !important;
	padding: 9px 16px; border-radius: 9px; font: 600 14px/1 var(--jls-font, "Inter", sans-serif) !important;
	color: var(--a-muted) !important; cursor: pointer; white-space: nowrap; text-transform: none !important; letter-spacing: 0 !important;
}
.jls-seg button:hover { color: var(--a-ink) !important; }
.jls-seg button.is-active { background: #fff !important; color: var(--a-ink) !important; box-shadow: 0 1px 3px rgba(21,32,58,.1) !important; }
.jls-seg button:focus-visible { outline: 2px solid var(--a-navy) !important; outline-offset: 2px; }

/* ---------- Breadcrumb ---------- */
.jls-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--a-muted); }
.jls-crumb a { color: var(--a-muted) !important; text-decoration: none; }
.jls-crumb a:hover { color: var(--a-navy) !important; }
.jls-crumb [aria-current] { color: var(--a-ink); font-weight: 600; }