/* Smoothlift Core public UI. Designed to remain usable with any standards-based theme. */
:root {
	--sl-navy: #071b33;
	--sl-navy-2: #0d2e52;
	--sl-orange: #f47a20;
	--sl-orange-dark: #c9530b;
	--sl-ink: #142033;
	--sl-muted: #58677a;
	--sl-line: #dce4ec;
	--sl-soft: #f4f7fa;
	--sl-white: #fff;
	--sl-success: #177245;
	--sl-warning: #8a5a00;
	--sl-danger: #a52222;
	--sl-radius: 16px;
	--sl-shadow: 0 18px 48px rgba(7, 27, 51, .1);
}

.sl-app,
.sl-app * { box-sizing: border-box; }
.sl-app { color: var(--sl-ink); font-family: Montserrat, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
.sl-app h1,
.sl-app h2,
.sl-app h3,
.sl-app h4 { color: var(--sl-navy); line-height: 1.18; margin: 0 0 .7rem; }
.sl-app a { color: var(--sl-navy-2); }
.sl-app img { display: block; height: auto; max-width: 100%; }
.sl-app :focus-visible { outline: 3px solid rgba(244, 122, 32, .52); outline-offset: 3px; }
.sl-eyebrow { color: var(--sl-orange-dark); font-size: .76rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 .5rem; text-transform: uppercase; }

.sl-button-row { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; }
.sl-button,
.sl-app button.sl-button {
	align-items: center;
	appearance: none;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: .9rem;
	font-weight: 800;
	justify-content: center;
	line-height: 1.2;
	min-height: 46px;
	padding: .8rem 1.25rem;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sl-button:hover { transform: translateY(-1px); }
.sl-button--primary { background: var(--sl-orange); box-shadow: 0 9px 20px rgba(244, 122, 32, .22); color: #111 !important; }
.sl-button--primary:hover { background: #ff8b39; }
.sl-button--secondary { background: var(--sl-navy); color: #fff !important; }
.sl-button--secondary:hover { background: var(--sl-navy-2); }
.sl-button--ghost { background: transparent; border-color: var(--sl-line); color: var(--sl-navy) !important; }
.sl-link-button { appearance: none; background: none; border: 0; color: var(--sl-navy-2); cursor: pointer; font: inherit; font-weight: 800; padding: .25rem 0; text-decoration: underline; text-underline-offset: 3px; }
.sl-app button[disabled] { cursor: wait; opacity: .65; }

.sl-form-shell,
.sl-auth-card,
.sl-product-enquiry,
.sl-tracking-form,
.sl-form-panel { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); padding: clamp(1.15rem, 3vw, 2.1rem); }
.sl-auth-card { margin-inline: auto; max-width: 620px; }
.sl-form-intro { border-bottom: 1px solid var(--sl-line); margin-bottom: 1.5rem; padding-bottom: 1rem; }
.sl-form { display: grid; gap: 1.15rem; }
.sl-form fieldset { border: 0; border-top: 1px solid var(--sl-line); display: grid; gap: 1rem; margin: 0; padding: 1.5rem 0 0; }
.sl-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.sl-form legend { color: var(--sl-navy); float: left; font-size: 1.08rem; font-weight: 800; margin-bottom: 1rem; padding: 0; width: 100%; }
.sl-form legend + * { clear: both; }
.sl-grid { display: grid; gap: 1rem; }
.sl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-field { display: grid; gap: .42rem; min-width: 0; }
.sl-field > span { color: var(--sl-navy); font-size: .84rem; font-weight: 750; }
.sl-field small,
.sl-form-help { color: var(--sl-muted); font-size: .82rem; margin: 0; }
.sl-field input,
.sl-field select,
.sl-field textarea,
.sl-catalogue-filter input,
.sl-catalogue-filter select {
	appearance: none;
	background: #fff;
	border: 1px solid #bac7d4;
	border-radius: 10px;
	color: var(--sl-ink);
	font: inherit;
	min-height: 48px;
	padding: .72rem .82rem;
	width: 100%;
}
.sl-field textarea { min-height: 120px; resize: vertical; }
.sl-field input:focus,
.sl-field select:focus,
.sl-field textarea:focus,
.sl-catalogue-filter input:focus,
.sl-catalogue-filter select:focus { border-color: var(--sl-orange); box-shadow: 0 0 0 3px rgba(244, 122, 32, .14); outline: none; }
.sl-check { align-items: flex-start; color: var(--sl-muted); display: flex; font-size: .87rem; gap: .65rem; }
.sl-check input { accent-color: var(--sl-orange); height: 18px; margin-top: .2rem; width: 18px; }
.sl-hp { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; }
.sl-item-row { background: var(--sl-soft); border: 1px solid var(--sl-line); border-radius: 12px; margin-bottom: .8rem; padding: 1rem; }
.sl-item-row__number { color: var(--sl-navy); display: block; font-size: .78rem; font-weight: 800; margin-bottom: .65rem; text-transform: uppercase; }
.sl-reference { align-items: center; background: #e9f7ef; border: 1px solid #a9dbc0; border-radius: 12px; display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.25rem; padding: 1rem; }
.sl-reference strong { color: var(--sl-success); font-size: 1.15rem; letter-spacing: .04em; }

.sl-notice { border-left: 4px solid var(--sl-navy); border-radius: 8px; margin: 0 0 1.2rem; padding: .85rem 1rem; }
.sl-notice p { margin: 0; }
.sl-notice--success { background: #e9f7ef; border-color: var(--sl-success); color: #0e5633; }
.sl-notice--warning { background: #fff7dd; border-color: #d89800; color: #654300; }
.sl-notice--error { background: #fff0f0; border-color: var(--sl-danger); color: #781818; }
.sl-notice--info { background: #edf5ff; border-color: #2c6daa; color: #174a79; }

.sl-catalogue-filter { align-items: end; background: var(--sl-soft); border: 1px solid var(--sl-line); border-radius: 14px; display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) auto; margin-bottom: 1.5rem; padding: 1rem; }
.sl-catalogue-filter label { display: grid; gap: .35rem; }
.sl-catalogue-filter label span { font-size: .8rem; font-weight: 800; }
.sl-product-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-product-card { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.sl-product-card:hover { box-shadow: var(--sl-shadow); transform: translateY(-3px); }
.sl-product-card__image { aspect-ratio: 4 / 3; background: #eaf0f5; display: block; overflow: hidden; }
.sl-product-card__image img { height: 100%; object-fit: cover; width: 100%; }
.sl-image-placeholder { align-items: center; background: linear-gradient(135deg, var(--sl-navy), var(--sl-navy-2)); color: var(--sl-orange); display: flex; font-size: 2rem; font-weight: 900; height: 100%; justify-content: center; }
.sl-product-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.1rem; }
.sl-product-card__body h2 { font-size: 1.08rem; }
.sl-product-card__body h2 a { color: inherit; text-decoration: none; }
.sl-product-card__seller { color: var(--sl-muted); font-size: .75rem; font-weight: 700; margin: 0 0 .35rem; }
.sl-product-card__price { color: var(--sl-orange-dark); font-weight: 850; }
.sl-product-card .sl-button { margin-top: auto; }
.sl-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.sl-pagination a { align-items: center; border: 1px solid var(--sl-line); border-radius: 8px; display: flex; height: 40px; justify-content: center; text-decoration: none; width: 40px; }
.sl-pagination a.is-current { background: var(--sl-navy); color: #fff; }

.sl-store-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-store-card { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); padding: 1.2rem; }
.sl-store-card__mark { align-items: center; background: var(--sl-navy); border-radius: 50%; color: var(--sl-orange); display: flex; font-size: 1.4rem; font-weight: 900; height: 52px; justify-content: center; margin-bottom: 1rem; width: 52px; }
.sl-store-hero { align-items: center; background: var(--sl-soft); border-radius: var(--sl-radius); display: flex; gap: 1.25rem; margin-bottom: 1.8rem; padding: clamp(1.2rem, 4vw, 2.5rem); }

.sl-dashboard__header { align-items: center; background: var(--sl-navy); border-radius: var(--sl-radius); color: #fff; display: flex; justify-content: space-between; margin-bottom: 1rem; padding: clamp(1rem, 3vw, 1.8rem); }
.sl-dashboard__header h1 { color: #fff; }
.sl-dashboard__header .sl-eyebrow { color: #ff9d58; }
.sl-role-switch { background: rgba(255, 255, 255, .1); border-radius: 999px; display: inline-flex; gap: .25rem; margin-top: .7rem; padding: .25rem; }
.sl-role-switch a { border-radius: 999px; color: #d8e5f1; font-size: .7rem; font-weight: 800; padding: .35rem .65rem; text-decoration: none; }
.sl-role-switch a[aria-current="page"] { background: #fff; color: var(--sl-navy); }
.sl-dashboard__layout { align-items: start; display: grid; gap: 1.2rem; grid-template-columns: 220px minmax(0, 1fr); }
.sl-dashboard__nav { background: var(--sl-soft); border: 1px solid var(--sl-line); border-radius: 14px; display: grid; overflow: hidden; position: sticky; top: 90px; }
.sl-dashboard__nav a { border-bottom: 1px solid var(--sl-line); color: var(--sl-navy); font-size: .87rem; font-weight: 750; padding: .82rem 1rem; text-decoration: none; }
.sl-dashboard__nav a:last-child { border-bottom: 0; }
.sl-dashboard__nav a.is-current { background: var(--sl-navy); color: #fff; }
.sl-dashboard__content { min-width: 0; }
.sl-stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.sl-stat { background: #fff; border: 1px solid var(--sl-line); border-radius: 12px; display: grid; padding: 1rem; }
.sl-stat strong { color: var(--sl-navy); font-size: 1.75rem; }
.sl-stat span { color: var(--sl-muted); font-size: .8rem; }
.sl-next-actions { display: grid; gap: .8rem; }
.sl-next-actions h3 { margin-bottom: 0; }
.sl-action-card { background: var(--sl-soft); border: 1px solid var(--sl-line); border-radius: 12px; color: inherit !important; display: grid; padding: 1rem; text-decoration: none; }
.sl-action-card strong { color: var(--sl-navy); }
.sl-action-card span { color: var(--sl-muted); font-size: .86rem; }
.sl-section-heading,
.sl-record-card__top { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.sl-record-list { display: grid; gap: .85rem; }
.sl-record-card { align-items: center; background: #fff; border: 1px solid var(--sl-line); border-radius: 12px; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem; }
.sl-record-card p { margin: .15rem 0; }
.sl-record-card--stack { align-items: stretch; display: grid; }
.sl-badge { background: #eaf0f5; border-radius: 999px; color: var(--sl-navy); display: inline-flex; font-size: .72rem; font-weight: 800; padding: .4rem .68rem; white-space: nowrap; }
.sl-badge--approved,
.sl-badge--accepted,
.sl-badge--delivered,
.sl-badge--ready_for_smoothlift { background: #e4f6ec; color: var(--sl-success); }
.sl-badge--rejected,
.sl-badge--declined,
.sl-badge--cancelled,
.sl-badge--exception { background: #ffebeb; color: var(--sl-danger); }
.sl-badge--submitted,
.sl-badge--under_review,
.sl-badge--quote_preparing,
.sl-badge--quote_sent,
.sl-badge--processing,
.sl-badge--in_transit { background: #edf5ff; color: #185a91; }
.sl-callout,
.sl-empty { background: var(--sl-soft); border: 1px solid var(--sl-line); border-radius: 12px; margin-top: 1.25rem; padding: 1.25rem; }
.sl-empty { text-align: center; }
.sl-assigned-items { background: var(--sl-soft); border-radius: 10px; margin: 0; padding: .8rem 1rem .8rem 2rem; }

.sl-messages-layout { border: 1px solid var(--sl-line); border-radius: 14px; display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 440px; overflow: hidden; }
.sl-conversation-list { background: var(--sl-soft); border-right: 1px solid var(--sl-line); }
.sl-conversation-list a { border-bottom: 1px solid var(--sl-line); color: inherit; display: grid; padding: .8rem; text-decoration: none; }
.sl-conversation-list a.is-current { background: #fff; border-left: 4px solid var(--sl-orange); }
.sl-conversation-list span { color: var(--sl-muted); font-size: .72rem; }
.sl-thread { min-width: 0; padding: 1rem; }
.sl-thread__messages { display: grid; gap: .75rem; margin-bottom: 1rem; max-height: 480px; overflow: auto; padding-right: .4rem; }
.sl-message { background: var(--sl-soft); border-radius: 12px 12px 12px 3px; max-width: 82%; padding: .8rem; }
.sl-message.is-mine { background: #e7f1fb; border-radius: 12px 12px 3px 12px; justify-self: end; }
.sl-message p { margin: 0; }
.sl-message__meta { color: var(--sl-muted); font-size: .7rem; margin-bottom: .35rem !important; }

.sl-tracking { display: grid; gap: 1.2rem; }
.sl-tracking-form { align-items: end; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr auto; }
.sl-tracking-result { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); padding: clamp(1rem, 3vw, 2rem); }
.sl-tracking-summary { align-items: start; display: flex; justify-content: space-between; }
.sl-definition-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.2rem 0; }
.sl-definition-grid div { background: var(--sl-soft); border-radius: 10px; padding: .85rem; }
.sl-definition-grid dt { color: var(--sl-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.sl-definition-grid dd { color: var(--sl-navy); font-weight: 750; margin: .25rem 0 0; }
.sl-timeline { list-style: none; margin: 1rem 0 0; padding: 0; }
.sl-timeline li { display: grid; gap: .8rem; grid-template-columns: 18px 1fr; padding-bottom: 1.2rem; position: relative; }
.sl-timeline li::before { background: var(--sl-line); content: ""; left: 7px; position: absolute; top: 12px; bottom: -3px; width: 2px; }
.sl-timeline li:last-child::before { display: none; }
.sl-timeline__dot { background: var(--sl-orange); border: 4px solid #ffe0c9; border-radius: 50%; height: 16px; margin-top: 3px; width: 16px; z-index: 1; }
.sl-timeline__time { color: var(--sl-muted); font-size: .74rem; margin: 0; }
.sl-contact-layout { align-items: start; display: grid; gap: 1.3rem; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.5fr); }
.sl-contact-card { background: var(--sl-navy); border-radius: var(--sl-radius); color: #fff; padding: 1.4rem; }
.sl-contact-card h2,
.sl-contact-card a { color: #fff; }
.sl-faq-list { display: grid; gap: .75rem; }
.sl-faq { background: #fff; border: 1px solid var(--sl-line); border-radius: 12px; }
.sl-faq summary { color: var(--sl-navy); cursor: pointer; font-weight: 800; padding: 1rem 3rem 1rem 1rem; position: relative; }
.sl-faq summary::after { color: var(--sl-orange-dark); content: "+"; font-size: 1.5rem; position: absolute; right: 1rem; top: .55rem; }
.sl-faq[open] summary::after { content: "−"; }
.sl-faq > div { border-top: 1px solid var(--sl-line); padding: .2rem 1rem .8rem; }

@media (max-width: 860px) {
	.sl-product-grid,
	.sl-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-dashboard__layout,
	.sl-contact-layout { grid-template-columns: 1fr; }
	.sl-dashboard__nav { display: flex; overflow-x: auto; position: static; }
	.sl-dashboard__nav a { border-bottom: 0; border-right: 1px solid var(--sl-line); flex: 0 0 auto; }
	.sl-tracking-form { grid-template-columns: 1fr 1fr; }
	.sl-tracking-form .sl-button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
	.sl-grid--2,
	.sl-grid--3,
	.sl-product-grid,
	.sl-store-grid,
	.sl-stat-grid,
	.sl-definition-grid,
	.sl-tracking-form,
	.sl-messages-layout { grid-template-columns: 1fr; }
	.sl-dashboard__header,
	.sl-section-heading,
	.sl-record-card,
	.sl-record-card__top,
	.sl-tracking-summary { align-items: stretch; flex-direction: column; }
	.sl-conversation-list { border-bottom: 1px solid var(--sl-line); border-right: 0; max-height: 210px; overflow: auto; }
	.sl-message { max-width: 94%; }
	.sl-catalogue-filter { grid-template-columns: 1fr; }
	.sl-store-hero { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.sl-app *,
	.sl-app *::before,
	.sl-app *::after { scroll-behavior: auto !important; transition: none !important; }
}