@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/* ---------- Design tokens ----------
   Ink/graphite shell with a signal-amber accent — a freight-manifest,
   ops-console feel rather than a generic SaaS dashboard. Placeholder
   palette until JakeSwift's real brand assets/logo are supplied (swap the
   values below, nothing else needs to change). */
:root {
	--jw-ink: #16202A;
	--jw-slate: #1E2C39;
	--jw-slate-hover: #26374A;
	--jw-border: #E2E8ED;
	--jw-paper: #F5F7F8;
	--jw-card: #FFFFFF;
	--jw-text: #16202A;
	--jw-text-muted: #5B6B7A;
	--jw-amber: #E8871E;
	--jw-amber-dark: #A6570C;
	--jw-amber-hover: #D67D1A;
	--jw-green: #1F7A47;
	--jw-blue: #2E6FBB;
	--jw-yellow: #8A6000;
	--jw-red: #C23A3A;
	--jw-radius: 8px;
	--jw-font-display: 'Barlow Condensed', sans-serif;
	--jw-font-body: 'Inter', sans-serif;
	--jw-font-mono: 'JetBrains Mono', monospace;
}

/* ---------- Alerts / hints ---------- */
.jw-alert { padding: 12px 14px; border-radius: var(--jw-radius); font-size: 14px; margin-bottom: 16px; }
.jw-alert-error { background: #FDECEC; color: #8A2A2A; border: 1px solid #F3C6C6; }
.jw-alert-success { background: #EAF7EF; color: #1F6E43; border: 1px solid #BFE6CE; }
.jw-alert-warning { background: #FEF3E2; color: #8A5A00; border: 1px solid #F5D9A8; }
.jw-hint { font-size: 13px; color: var(--jw-text-muted); margin: 4px 0 12px; }

/* ---------- Forms ---------- */
.jw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 14px; }
.jw-field > span { font-weight: 600; color: var(--jw-text); }
.jw-field input, .jw-field select, .jw-field textarea {
	font-family: var(--jw-font-body);
	padding: 10px 12px;
	border: 1px solid var(--jw-border);
	border-radius: 6px;
	font-size: 15px;
	background: #fff;
	color: var(--jw-text);
}
.jw-field input:focus, .jw-field select:focus, .jw-field textarea:focus {
	border-color: var(--jw-amber-dark);
	outline: none;
	box-shadow: 0 0 0 3px rgba(232,135,30,.15);
}
.jw-field-password { position: relative; }
.jw-toggle-password {
	position: absolute; right: 10px; top: 32px;
	background: none; border: none; color: var(--jw-text-muted);
	font-size: 12px; font-weight: 600; cursor: pointer; text-transform: uppercase;
}
.jw-field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 14px; }
.jw-checkbox { display: flex; align-items: center; gap: 6px; color: var(--jw-text-muted); }
.jw-link { color: var(--jw-amber-dark); text-decoration: none; font-weight: 600; }
.jw-link:hover { text-decoration: underline; }
.jw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jw-step-heading {
	font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .04em;
	font-size: 15px; font-weight: 700; color: var(--jw-amber-dark);
	margin: 24px 0 10px; padding-top: 16px; border-top: 1px solid var(--jw-border);
}
.jw-register-form .jw-step-heading:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- Buttons ---------- */
.jw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 18px; border-radius: 6px; border: 1px solid transparent;
	font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.jw-btn-primary { background: var(--jw-amber); color: var(--jw-ink); }
.jw-btn-primary:hover { background: var(--jw-amber-hover); }
.jw-btn-secondary { background: #fff; color: var(--jw-text); border-color: var(--jw-border); }
.jw-btn-secondary:hover { border-color: var(--jw-text-muted); }
.jw-btn-danger { background: #fff; color: var(--jw-red); border-color: #F3C6C6; }
.jw-btn-danger:hover { background: #FDECEC; }
.jw-btn-block { width: 100%; }
.jw-btn-sm { padding: 7px 12px; font-size: 13px; }
.jw-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Auth screens (login / register) ---------- */
.jw-auth-shell {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: var(--jw-ink);
	background-image: radial-gradient(circle at 15% 20%, rgba(232,135,30,.12), transparent 40%),
	                   radial-gradient(circle at 85% 80%, rgba(46,111,187,.15), transparent 45%);
	padding: 32px 16px;
}
.jw-auth-card {
	width: 100%; max-width: 460px; background: var(--jw-card);
	border-radius: 14px; padding: 36px 32px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.jw-auth-brand { text-align: center; margin-bottom: 22px; }
.jw-auth-brand .jw-logo-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 10px; background: var(--jw-ink);
	color: var(--jw-amber); font-family: var(--jw-font-display); font-weight: 700; font-size: 20px;
	margin-bottom: 10px;
}
.jw-auth-brand h1 {
	font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .03em;
	font-size: 22px; margin: 0 0 4px;
}
.jw-auth-brand p { margin: 0; color: var(--jw-text-muted); font-size: 14px; }
.jw-auth-footer, .jw-auth-support { text-align: center; font-size: 13.5px; color: var(--jw-text-muted); margin-top: 8px; }
.jw-auth-card.jw-auth-wide { max-width: 620px; }

/* ---------- App shell ---------- */
.jw-app { display: flex; min-height: 100vh; }

.jw-sidebar {
	width: 240px; flex-shrink: 0; background: var(--jw-ink); color: #cbd5e1;
	display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0;
	transform: translateX(0); transition: transform .2s ease; z-index: 40;
}
.jw-sidebar-brand {
	display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px;
	font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .03em;
	font-weight: 700; color: #fff; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.jw-sidebar-brand .jw-logo-mark {
	width: 30px; height: 30px; border-radius: 7px; background: var(--jw-amber);
	color: var(--jw-ink); display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.jw-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.jw-nav-item {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px;
	color: #b6c2cf; text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 2px;
}
.jw-nav-item:hover { background: var(--jw-slate-hover); color: #fff; }
.jw-nav-item.is-active { background: var(--jw-slate); color: #fff; box-shadow: inset 3px 0 0 var(--jw-amber); }
.jw-nav-item .dashicons { font-size: 18px; width: 18px; height: 18px; }
.jw-sidebar-user {
	padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px;
}
.jw-sidebar-user strong { display: block; color: #fff; font-size: 13.5px; }
.jw-sidebar-user span { color: #8b9aa8; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.jw-sidebar-user-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.jw-sidebar-user-links a { color: var(--jw-amber); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.jw-sidebar-user-links a:hover { text-decoration: underline; }
.jw-sidebar-version { margin-top: 10px; font-size: 10.5px; color: #5b6b7a; font-family: var(--jw-font-mono); }

.jw-main { margin-left: 240px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.jw-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--jw-border);
	position: sticky; top: 0; z-index: 20;
}
.jw-topbar-title { font-family: var(--jw-font-display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.jw-topbar-right { display: flex; align-items: center; gap: 14px; }
.jw-offcanvas-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }
.jw-bottom-nav { display: none; }
.jw-notif-btn { position: relative; background: none; border: none; font-size: 19px; cursor: pointer; color: var(--jw-text); }
.jw-notif-dot {
	position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
	background: var(--jw-red); border: 2px solid #fff; display: none;
}
.jw-notif-panel {
	position: absolute; right: 24px; top: 56px; width: 300px; background: #fff;
	border: 1px solid var(--jw-border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.15);
	padding: 10px; display: none; z-index: 30;
}
.jw-notif-panel.is-open { display: block; }
.jw-notif-panel a { display: block; padding: 9px 10px; border-radius: 6px; font-size: 13.5px; color: var(--jw-text); text-decoration: none; }
.jw-notif-panel a:hover { background: var(--jw-paper); }
.jw-notif-empty { padding: 14px 10px; font-size: 13px; color: var(--jw-text-muted); text-align: center; }

.jw-content { padding: 24px; flex: 1; }

/* ---------- Cards / stats ---------- */
.jw-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.jw-stat-card { background: var(--jw-card); border: 1px solid var(--jw-border); border-radius: var(--jw-radius); padding: 16px 18px; }
.jw-stat-card .jw-stat-value { font-family: var(--jw-font-mono); font-size: 28px; font-weight: 500; }
.jw-stat-card .jw-stat-label { font-size: 12.5px; color: var(--jw-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ---------- Dashboard: icon stat pills + active-job cards ---------- */
.jw-stat-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.jw-stat-pill {
	display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--jw-border);
	border-radius: 999px; padding: 10px 18px 10px 14px; flex: 1 1 190px;
}
.jw-stat-pill .dashicons { color: var(--jw-amber-dark); font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; }
.jw-stat-pill-value { font-family: var(--jw-font-mono); font-size: 17px; font-weight: 600; }
.jw-stat-pill-label { font-size: 12px; color: var(--jw-text-muted); }

.jw-order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.jw-order-card { background: #fff; border: 1px solid var(--jw-border); border-radius: 10px; padding: 16px; }
.jw-order-card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.jw-order-ref { font-family: var(--jw-font-mono); font-size: 13px; color: var(--jw-text-muted); }
.jw-order-pct { font-family: var(--jw-font-mono); font-size: 20px; font-weight: 600; }
.jw-order-route { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: 13.5px; }
.jw-order-route > div { flex-shrink: 0; }
.jw-order-route strong { display: block; }
.jw-order-route-line { flex: 1; height: 16px; min-width: 40px; }
.jw-order-progress { height: 6px; border-radius: 999px; background: var(--jw-paper); overflow: hidden; }
.jw-order-progress-fill { height: 100%; background: var(--jw-amber); border-radius: 999px; }

.jw-card { background: var(--jw-card); border: 1px solid var(--jw-border); border-radius: var(--jw-radius); padding: 20px; margin-bottom: 20px; }
.jw-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.jw-card-header h2 { font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 18px; margin: 0; }

/* ---------- Table toolbar (search / sort) ---------- */
.jw-table-toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jw-table-search {
	flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid var(--jw-border);
	border-radius: 6px; font-size: 14px;
}

.jw-bulk-bar {
	display: flex; align-items: center; gap: 12px; background: var(--jw-paper);
	border: 1px solid var(--jw-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
}
.jw-bulk-count { font-size: 13px; font-weight: 600; color: var(--jw-text); margin-right: auto; }
.jw-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.jw-pagination-status { font-family: var(--jw-font-mono); font-size: 12.5px; color: var(--jw-text-muted); }

/* ---------- Tables ---------- */
table.jw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.jw-table th {
	text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
	color: var(--jw-text-muted); padding: 10px 12px; border-bottom: 2px solid var(--jw-border);
	cursor: pointer; user-select: none; white-space: nowrap;
}
table.jw-table th.is-sorted::after { content: ' \2195'; opacity: .5; }
table.jw-table td { padding: 12px; border-bottom: 1px solid var(--jw-border); vertical-align: middle; }
table.jw-table tbody tr:hover { background: var(--jw-paper); }
table.jw-table td[data-label] { }

/* ---------- Status badges (the "manifest stamp" signature) ---------- */
.jw-status {
	display: inline-block; font-family: var(--jw-font-mono); font-size: 11px; font-weight: 500;
	text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px;
	border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-1deg);
}
.jw-status-neutral { color: var(--jw-text-muted); }
.jw-status-pending { color: var(--jw-yellow); }
.jw-status-progress { color: var(--jw-blue); }
.jw-status-success { color: var(--jw-green); }
.jw-status-danger { color: var(--jw-red); }

/* ---------- Empty / coming soon / 403 ---------- */
.jw-empty-state { text-align: center; padding: 46px 20px; color: var(--jw-text-muted); }
.jw-empty-state h3 { color: var(--jw-text); margin-bottom: 6px; }
.jw-coming-soon { text-align: center; padding: 60px 20px; }
.jw-coming-soon .jw-badge {
	display: inline-block; font-family: var(--jw-font-mono); font-size: 12px; text-transform: uppercase;
	letter-spacing: .06em; color: var(--jw-amber-dark); border: 1.5px solid var(--jw-amber-dark); border-radius: 4px;
	padding: 4px 10px; margin-bottom: 14px;
}
.jw-403 { text-align: center; padding: 60px 20px; }
.jw-403 h2 { font-family: var(--jw-font-display); font-size: 26px; color: var(--jw-red); text-transform: uppercase; }

/* ---------- Skip link ---------- */
.jw-skip-link {
	position: absolute; top: -100px; left: 0; z-index: 1000;
	background: var(--jw-ink); color: #fff; padding: 12px 20px;
	text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 0 0 6px 0;
	transition: top .15s ease;
}
.jw-skip-link:focus { top: 0; }

/* ---------- Toasts ---------- */
.jw-toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.jw-toast {
	background: var(--jw-ink); color: #fff; padding: 12px 16px; border-radius: 8px;
	font-size: 13.5px; box-shadow: 0 10px 24px rgba(0,0,0,.25); max-width: 320px;
	animation: jw-toast-in .18s ease;
}
.jw-toast.jw-toast-error { background: var(--jw-red); }
.jw-toast.jw-toast-success { background: var(--jw-green); }
@keyframes jw-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Public / marketing site ---------- */
.jw-site-header { background: var(--jw-ink); color: #fff; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.jw-site-header .jw-logo-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--jw-amber); color: var(--jw-ink); display: flex; align-items: center; justify-content: center; font-family: var(--jw-font-display); font-weight: 700; }
.jw-site-header-brand { display: flex; align-items: center; flex-shrink: 0; }
.jw-site-header-brand-link {
	display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
	font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 18px;
}
.jw-custom-logo-header img { max-height: 40px; width: auto; display: block; }
.jw-custom-logo-sidebar img { max-height: 28px; width: auto; display: block; }
.jw-custom-logo-sidebar .custom-logo-link { display: flex; align-items: center; }

.jw-site-nav-wrap { flex: 1; }
.jw-site-nav { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.jw-site-nav a { color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500; }
.jw-site-nav a:hover { color: #fff; }
.jw-site-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.jw-site-nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }

.jw-hero {
	background: var(--jw-ink); color: #fff; padding: 90px 32px 110px; text-align: center;
	background-image: radial-gradient(circle at 20% 30%, rgba(232,135,30,.18), transparent 45%);
}
.jw-hero h1 { font-family: var(--jw-font-display); font-size: clamp(34px, 6vw, 58px); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 16px; }
.jw-hero p { color: #b6c2cf; max-width: 560px; margin: 0 auto 32px; font-size: 16.5px; }
.jw-route-line { width: 100%; max-width: 520px; margin: 0 auto 36px; }
.jw-features { max-width: 1000px; margin: -60px auto 0; padding: 0 24px 80px; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 18px; position: relative; z-index: 2; }
.jw-feature-card { background: #fff; border-radius: 10px; padding: 22px; box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.jw-feature-card .jw-feature-eyebrow { font-family: var(--jw-font-mono); font-size: 11px; text-transform: uppercase; color: var(--jw-amber-dark); letter-spacing: .06em; }
.jw-feature-card h3 { margin: 6px 0 6px; font-size: 17px; }
.jw-feature-card p { margin: 0; font-size: 13.5px; color: var(--jw-text-muted); }

/* Secondary-page hero (About / Services / Contact) — same brand language
   as the homepage hero, shorter, no route-line motif (that's the
   homepage's signature, not every page's). */
.jw-page-hero { background: var(--jw-ink); color: #fff; padding: 64px 32px; text-align: center; }
.jw-page-hero h1 { font-family: var(--jw-font-display); font-size: clamp(30px, 5vw, 44px); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 12px; }
.jw-page-hero p { color: #b6c2cf; max-width: 560px; margin: 0 auto; font-size: 15.5px; }

.jw-section { padding: 60px 24px; }
.jw-section-inner { max-width: 900px; margin: 0 auto; }
.jw-prose h2 { font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 22px; margin: 34px 0 10px; }
.jw-prose h2:first-child { margin-top: 0; }
.jw-prose p { font-size: 15px; line-height: 1.7; color: #3a4a58; margin: 0 0 14px; }

.jw-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.jw-cta-band { background: var(--jw-paper); border-top: 1px solid var(--jw-border); padding: 60px 24px; text-align: center; }
.jw-cta-band h2 { font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 24px; margin: 0 0 8px; }
.jw-cta-band p { color: var(--jw-text-muted); margin: 0 0 22px; }
.jw-cta-band-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.jw-home-services-teaser { text-align: center; max-width: 640px; }
.jw-home-services-teaser h2 { font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 24px; margin: 0 0 10px; }
.jw-home-services-teaser p { color: var(--jw-text-muted); margin: 0 0 20px; }

/* ---------- Homepage: hero actions, problem section, OS workflow strip ---------- */
.jw-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.jw-section-problem h2, .jw-section-os h2, .jw-section-alt h2 {
	font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 26px; margin: 0 0 14px; text-align: center;
}
.jw-section-problem p, .jw-section-os p {
	font-size: 15px; line-height: 1.7; color: #3a4a58; text-align: center; max-width: 680px; margin: 0 auto 20px;
}
.jw-centered-heading { text-align: center; }

.jw-section-problem { background: var(--jw-paper); }
.jw-problem-list {
	list-style: none; margin: 0 0 22px; padding: 0; max-width: 640px; margin-left: auto; margin-right: auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 22px;
}
.jw-problem-list li {
	font-size: 14px; color: var(--jw-text); padding-left: 22px; position: relative;
}
.jw-problem-list li::before { content: "\2715"; position: absolute; left: 0; color: var(--jw-red); font-size: 12px; top: 2px; }

.jw-workflow-strip {
	list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; counter-reset: jw-step;
}
.jw-workflow-strip li {
	font-family: var(--jw-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
	background: #fff; border: 1px solid var(--jw-border); border-radius: 999px; padding: 8px 14px; color: var(--jw-text);
}
.jw-workflow-strip li:not(:last-child)::after { content: "\2192"; margin-left: 10px; color: var(--jw-amber-dark); }
.jw-section-os { text-align: center; }
.jw-section-os .jw-btn { margin: 0 auto; }

.jw-section-alt { background: var(--jw-paper); }
.jw-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

/* ---------- Services page: detailed cards ---------- */
.jw-section-inner-wide { max-width: 1180px; }
.jw-services-grid-detailed { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.jw-service-card { background: #fff; border-radius: 10px; padding: 22px; box-shadow: 0 14px 34px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 4px; }
.jw-service-card h3 { margin: 4px 0 8px; font-size: 18px; }
.jw-service-card > p:not(.jw-service-meta) { font-size: 14px; color: var(--jw-text-muted); margin: 0 0 6px; }
.jw-service-meta { font-size: 12.5px; color: var(--jw-text-muted); margin: 0 0 4px; line-height: 1.5; }
.jw-service-meta strong { color: var(--jw-text); }
.jw-service-card .jw-btn { margin-top: 12px; align-self: flex-start; }

/* ---------- FAQ accordion (native <details>, no JS) ---------- */
.jw-faq { max-width: 760px; margin: 0 auto; }
.jw-faq-item {
	background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius);
	padding: 4px 18px; margin-bottom: 10px;
}
.jw-faq-item summary {
	font-weight: 600; font-size: 15px; padding: 16px 0; cursor: pointer; color: var(--jw-text); list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.jw-faq-item summary::-webkit-details-marker { display: none; }
.jw-faq-item summary::after { content: "+"; font-size: 20px; color: var(--jw-amber-dark); flex-shrink: 0; }
.jw-faq-item[open] summary::after { content: "\2212"; }
.jw-faq-item p { font-size: 14.5px; line-height: 1.65; color: #3a4a58; margin: 0 0 16px; }

/* ---------- Public tracking page ---------- */
.jw-track-section { max-width: 560px; }
.jw-track-form { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.jw-track-field { flex: 1; margin-bottom: 0; }
.jw-track-result {
	background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius);
	padding: 20px; margin-top: 20px;
}
.jw-track-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jw-track-ref { font-family: var(--jw-font-mono); font-size: 15px; font-weight: 600; }
.jw-track-timeline { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--jw-border); }
.jw-track-timeline li {
	display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px;
	padding: 10px 0; border-bottom: 1px solid var(--jw-border);
}
.jw-track-timeline-status { font-weight: 600; }
.jw-track-timeline-date { color: var(--jw-text-muted); font-family: var(--jw-font-mono); font-size: 12px; }
.jw-track-note { margin-top: 20px; text-align: center; }

@media (max-width: 560px) {
	.jw-track-form { flex-direction: column; align-items: stretch; }
}

/* ---------- Printable invoice document ---------- */
.jw-invoice-wrap { max-width: 720px; }
.jw-invoice-toolbar { text-align: right; margin-bottom: 16px; }
.jw-invoice-doc { background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius); padding: 40px; }
.jw-invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 2px solid var(--jw-ink); }
.jw-invoice-brand { display: flex; align-items: center; gap: 10px; font-family: var(--jw-font-display); font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.jw-invoice-meta { text-align: right; }
.jw-invoice-meta h1 { font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 22px; margin: 0; }
.jw-invoice-meta p { margin: 4px 0; font-family: var(--jw-font-mono); font-size: 14px; }
.jw-invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 30px; }
.jw-invoice-parties h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--jw-text-muted); }
.jw-invoice-parties p { margin: 0 0 4px; font-size: 14px; }
.jw-invoice-lines { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.jw-invoice-lines th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--jw-text-muted); padding: 8px 0; border-bottom: 1px solid var(--jw-border); }
.jw-invoice-lines td { padding: 14px 0; border-bottom: 1px solid var(--jw-border); font-size: 14.5px; }
.jw-invoice-lines tfoot td { border-bottom: none; border-top: 2px solid var(--jw-ink); font-size: 16px; padding-top: 14px; }
.jw-invoice-footnote { margin-top: 20px; }

@media print {
	.jw-site-header, .jw-site-footer-full, .jw-invoice-toolbar, .jw-skip-link { display: none !important; }
	.jw-invoice-doc { border: none; padding: 0; }
	body { background: #fff; }
}

.jw-contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.jw-contact-info-col { display: flex; flex-direction: column; gap: 16px; }
.jw-contact-info-col .jw-card h3 { margin: 0 0 10px; font-size: 15px; }
.jw-contact-info-col .jw-card p { margin: 0 0 10px; font-size: 13.5px; }

/* ---------- Footer ---------- */
.jw-site-footer-full { background: var(--jw-ink); color: #b6c2cf; padding: 50px 32px 24px; }
.jw-site-footer-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.jw-site-footer-grid h4 { color: #fff; font-family: var(--jw-font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 14px; margin: 0 0 12px; }
.jw-site-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jw-site-footer-grid a { color: #b6c2cf; text-decoration: none; font-size: 13.5px; }
.jw-site-footer-grid a:hover { color: #fff; }
.jw-footer-tagline { font-size: 13px; color: #8b9aa8; margin: 0; }
.jw-site-footer-bottom { max-width: 1000px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #7c8b99; text-align: center; }

/* WordPress's admin bar is fixed to the viewport at top:0 with a very
   high z-index, same as our own fixed/sticky shell elements — without
   this, it visually clips the top of the sidebar and topbar for anyone
   who has it showing (in practice, only Super Admin). WP adds the
   'admin-bar' body class itself when applicable; 782px matches WP core's
   own admin-bar breakpoint, not this theme's other breakpoints. */
body.admin-bar .jw-sidebar { top: 32px; }
body.admin-bar .jw-topbar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .jw-sidebar { top: 46px; }
	body.admin-bar .jw-topbar { top: 46px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.jw-content { padding: 18px; }
	.jw-site-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	.jw-sidebar { transform: translateX(-100%); box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
	.jw-sidebar.is-open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
	.jw-main { margin-left: 0; }
	.jw-offcanvas-toggle { display: inline-flex; }
	.jw-topbar-title { font-size: 18px; }
	.jw-content { padding-bottom: 104px; } /* clears the floating bottom nav — including the active item's circle, which pops up above the bar itself — so it never covers the last card on a page */

	.jw-bottom-nav {
		display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
		background: var(--jw-ink); border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
		padding: 8px 6px 6px; gap: 2px; overflow: visible; /* visible on purpose — the active item's circle deliberately breaks out above this box */
	}
	.jw-bottom-nav-item {
		flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
		padding: 0 2px 4px; border-radius: 14px; color: #9fb0bd; text-decoration: none;
		font-size: 10px; background: none; border: none; font-family: inherit; cursor: pointer;
	}
	.jw-bn-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
	.jw-bn-icon .dashicons { font-size: 20px; width: 20px; height: 20px; }
	.jw-bn-label { line-height: 1.2; }

	/* The one deliberate departure from the flat icon row: the active
	   tab's icon breaks out of the bar into its own floating circle,
	   the way a fintech app's bottom nav often marks "you are here" —
	   adapted into JakeSwift's own navy/amber identity rather than
	   copied wholesale (ring instead of a solid fill, on-brand amber
	   instead of purple). The label stays put in the bar, bold.
	   Bug fixed here: taking .jw-bn-icon out of flow with position:
	   absolute leaves .jw-bn-label as the item's only in-flow child, so
	   without help it rises to fill the vacated space — landing right
	   behind the circle's bottom edge instead of below it. padding-top
	   below reserves the space the icon used to occupy (its own height
	   plus the gap), so the label sits at the same line as every other
	   tab's label, not wherever the flex box happens to collapse to. */
	.jw-bottom-nav-item.is-active { color: var(--jw-amber); padding-top: 26px; }
	.jw-bottom-nav-item.is-active .jw-bn-label { font-weight: 700; }
	.jw-bottom-nav-item.is-active .jw-bn-icon {
		position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
		width: 46px; height: 46px; border-radius: 50%;
		background: var(--jw-paper); border: 3px solid var(--jw-amber);
		box-shadow: 0 8px 18px rgba(0,0,0,.3);
	}
	.jw-bottom-nav-item.is-active .jw-bn-icon .dashicons { font-size: 22px; width: 22px; height: 22px; color: var(--jw-amber); }

	/* Tables become stacked cards below tablet width. */
	table.jw-table thead { display: none; }
	table.jw-table, table.jw-table tbody, table.jw-table tr, table.jw-table td { display: block; width: 100%; }
	table.jw-table tr { border: 1px solid var(--jw-border); border-radius: 8px; margin-bottom: 10px; padding: 4px 0; background: #fff; }
	table.jw-table td { border-bottom: none; padding: 8px 12px; display: flex; justify-content: space-between; gap: 12px; }
	table.jw-table td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--jw-text-muted); font-size: 12px; text-transform: uppercase; }

	/* Public site nav becomes an offcanvas dropdown under the header. */
	.jw-site-nav-toggle { display: inline-flex; }
	.jw-site-nav-wrap {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--jw-ink); padding: 6px 24px 18px; border-top: 1px solid rgba(255,255,255,.08);
	}
	.jw-site-nav-wrap.is-open { display: block; }
	.jw-site-nav { flex-direction: column; gap: 4px; }
	.jw-site-nav a { display: block; padding: 10px 0; }
	.jw-site-header { position: relative; flex-wrap: wrap; }

	.jw-site-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
	.jw-contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
	.jw-auth-card { padding: 26px 20px; }
	.jw-grid-2 { grid-template-columns: 1fr; }
	.jw-site-footer-grid { grid-template-columns: 1fr; }
}