/* Quick Delivery — website / portal branding
   This file is loaded by web_include_css on EVERY website page, so anything
   not scoped to an auth page leaks into portal pages such as /me.
   Auth-only treatment (blue canvas, hidden footer, oversized logo) is therefore
   scoped to body[data-path="login"] / body.qd-auth-page, which qd_login.js sets.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
	--qd-blue: #0c499c;
	--qd-blue-hover: #083a7d;
	--qd-blue-soft: #e8eef8;
	--qd-blue-mid: #c2d2ee;
	--qd-orange: #f67a0d;
	--qd-orange-hover: #d8680a;
	--qd-ink: #1e293b;
	--qd-muted: #64748b;
	--qd-line: #e2e8f0;
	--qd-canvas: #f8fafc;
	--primary: #0c499c;
	--primary-color: #0c499c;
	--btn-primary: #0c499c;
}

html,
body {
	font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
}

/* ============================================================
   Portal pages (default)
   ============================================================ */

body {
	background: var(--qd-canvas);
	color: var(--qd-ink);
	min-height: 100vh;
}

.page_content,
.page-content-wrapper,
.web-page-content {
	color: var(--qd-ink);
}

.page_content h1,
.page_content h2,
.page_content h3,
.page_content h4,
.my-account-header {
	color: var(--qd-blue);
	font-weight: 650;
	letter-spacing: -0.02em;
}

.page_content a:not(.btn) {
	color: var(--qd-blue);
}

.page_content a:not(.btn):hover {
	color: var(--qd-orange);
}

/* Sidebar — the blue-on-blue text was the main visibility failure */
.web-sidebar {
	background: #fff;
	border: 1px solid var(--qd-line);
	border-radius: 12px;
	padding: 12px 10px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.web-sidebar .title,
.web-sidebar .sidebar-group h6 {
	color: var(--qd-muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 10px;
	margin: 0;
	list-style: none;
}

.web-sidebar .sidebar-items ul {
	margin-bottom: 4px;
}

.web-sidebar .sidebar-item a {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	border-left: 3px solid transparent;
	color: #334155;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.web-sidebar .sidebar-item a:hover,
.web-sidebar .sidebar-item a:focus-visible {
	background: var(--qd-blue-soft);
	color: var(--qd-blue);
	text-decoration: none;
}

.web-sidebar .sidebar-item a.active {
	background: var(--qd-blue-soft);
	border-left-color: var(--qd-orange);
	color: var(--qd-blue);
	font-weight: 650;
}

/* My Account card */
.my-account-container .account-info {
	background: #fff;
	border: 1px solid var(--qd-line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 8px 4px;
	margin: 0;
}

.my-account-container .account-info > .col {
	padding: 16px 20px;
	border-bottom: 1px solid var(--qd-line);
}

.my-account-container .account-info > .col:last-child {
	border-bottom: 0;
}

.my-account-name,
.my-account-item {
	color: var(--qd-ink);
	font-weight: 600;
}

.my-account-item-desc {
	color: var(--qd-muted);
	font-size: 12px;
}

.my-account-item-link a {
	color: var(--qd-blue) !important;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.my-account-item-link a:hover {
	color: var(--qd-orange) !important;
}

.my-account-item-link .icon {
	--icon-stroke: currentColor;
}

/* Portal buttons keep brand primary blue; orange stays the login CTA accent */
body:not([data-path="login"]):not(.qd-auth-page) .btn-primary {
	background: var(--qd-blue) !important;
	border-color: var(--qd-blue) !important;
	color: #fff !important;
	font-weight: 600;
	border-radius: 8px !important;
}

body:not([data-path="login"]):not(.qd-auth-page) .btn-primary:hover {
	background: var(--qd-blue-hover) !important;
	border-color: var(--qd-blue-hover) !important;
}

.form-control:focus {
	border-color: var(--qd-blue) !important;
	box-shadow: 0 0 0 3px rgba(12, 73, 156, 0.2) !important;
}

.navbar {
	background: #fff;
	border-bottom: 3px solid var(--qd-orange);
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover {
	color: var(--qd-blue) !important;
	font-weight: 700;
}

.navbar .navbar-brand img,
.navbar .app-logo {
	height: 28px;
	width: auto;
	border-radius: 6px;
}

.navbar .nav-link:hover {
	color: var(--qd-blue) !important;
}

/* ============================================================
   Auth pages only (login, and anything qd_login.js flags)
   ============================================================ */

body[data-path="login"],
body.qd-auth-page {
	background: var(--qd-blue) !important;
}

body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .web-page-content,
body.qd-auth-page .page-content-wrapper,
body.qd-auth-page .web-page-content {
	background: transparent;
}

body[data-path="login"] .web-footer,
body.qd-auth-page .web-footer {
	display: none !important;
}

body[data-path="login"] .navbar,
body.qd-auth-page .navbar {
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
}

body[data-path="login"] .page-card-head,
body.qd-auth-page .page-card-head {
	padding-top: max(6vh, 28px) !important;
}

body[data-path="login"] .page-card-head img,
body.qd-auth-page .page-card-head img {
	max-height: 168px !important;
	width: auto !important;
	height: auto !important;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	background: var(--qd-blue);
}

body[data-path="login"] .page-card-head h4,
body.qd-auth-page .page-card-head h4 {
	color: #fff !important;
	font-weight: 650 !important;
	margin-top: 1.1rem !important;
	letter-spacing: -0.02em;
}

.login-content.page-card,
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-login-with-email-link .page-card {
	border-radius: 16px !important;
	border: 0 !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22) !important;
	padding: 28px 18px 32px !important;
}

.btn-login,
body[data-path="login"] .btn-primary,
body.qd-auth-page .btn-primary {
	background: var(--qd-orange) !important;
	border-color: var(--qd-orange) !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	height: 38px;
}

.btn-login:hover,
body[data-path="login"] .btn-primary:hover,
body.qd-auth-page .btn-primary:hover {
	background: var(--qd-orange-hover) !important;
	border-color: var(--qd-orange-hover) !important;
}

.forgot-password-message a,
.sign-up-message a {
	color: var(--qd-blue) !important;
	font-weight: 600;
}