/* Elementor DOM adapter — Sales Rep Portal (21513) only. */

/* Grid classes now on containers must beat the .e-con flex default. */
.e-con.velp-ca-hero-grid,
.e-con.velp-ca-split,
.e-con.velp-ca-cards-4,
.e-con.vel-stats-grid,
.e-con.velp-ca-cta-card { display: grid; }

/* Row-flex hero actions (original: flex row + wrap). */
.e-con.velp-ca-actions { flex-direction: row; }

/* keydesign-framework forces text-editor <p> font metrics to inherit, and
   Elementor suppresses a trailing paragraph's margin-bottom — restore both
   on the widget wrappers (classed root <p>s carry their class there). */
.e-con .elementor-widget.velp-ca-hero-sub { margin-bottom: 24px; }
.elementor-widget-text-editor.velp-ca-hero-sub { font-size: 18px; line-height: 1.5; }
.elementor-widget.velp-ca-lead { font-size: 18px; line-height: 1.5; margin-bottom: 0; }
/* The lead p keeps its own 4px margin (0-2-1 beats p:last-child) but no
   longer collapses into the checklist's 24px across widget wrappers — zero it. */
.velp-ca-copy .elementor-widget-text-editor p.velp-ca-lead { margin-bottom: 0; }
/* Stat labels (bare <span>) inherited line-height:normal from body in the
   original flow; keydesign's text-editor wrapper 1.75 makes each stat taller. */
.vel-stat .elementor-widget-text-editor { line-height: normal; }
.velp-ca-cta-card .elementor-widget-text-editor:has(p) { font-size: 16px; line-height: 1.62; color: var(--vel-blue-light, #d7efff); }

/* The card must stay the positioned+clipping box for the vel-w-abs deco
   overlay. Elementor's per-element post CSS forces overflow:visible at
   0-3-0, so the clip needs a 0-3-0 selector (adapter loads later = wins).
   Same for the hero section's original overflow:hidden. */
.e-con.velp-ca-cta-card { position: relative; }
.e-con.velp-ca-cta-card.velp-ca-cta-card { overflow: hidden; }
.e-con.velp-ca-hero.velp-ca-hero { overflow: hidden; }

/* Sibling margin collapse is lost between widget wrappers — zero/reduce the
   facing margins so gaps equal the original collapsed values. */
.velp-ca-hero-title { margin-top: 0; }          /* eyebrow mb14 vs h1 mt12 collapsed to 14 */
.e-con.velp-ca-cards-4 { margin-top: 0; }       /* section-sub mb collapsed over the grid's mt6 */

/* CTA buttons: original align-items:stretch equalized the stacked anchors;
   anchors are now inside full-width widget wrappers, so stretch the anchor.
   Mirror the original breakpoints (≤900 shrink+center, ≤560 full width). */
.e-con.velp-ca-cta-actions .vel-btn { width: 100%; }

@media (max-width: 900px) {
	.e-con.velp-ca-cta-actions .vel-btn { width: auto; }
}

@media (max-width: 560px) {
	/* align-items:center shrinks the widget wrappers, so widen them too */
	.e-con.velp-ca-cta-actions > .elementor-widget { width: 100%; }
	.e-con.velp-ca-cta-actions .vel-btn { width: 100%; }
}

/* ==========================================================================
   Design-parity pass — client issues S1–S6 (2026-08-07)
   Figma: "Velocity by Medshift/Commerce — Sales Rep Portal@2x.png".
   Page-scoped: this file only loads for the sales-rep-portal slug, so the
   bare .vel-* overrides below cannot leak to other pages.
   ========================================================================== */

/* S1 — eyebrow orange measured #F8A581 in the design (site token #d98e63). */
.vel-eyebrow--orange { color: #f8a581; }

/* S2 — hero and the rep-portal band are pure white in the design; the tint
   belongs to the capabilities band (#F3F7FC). */
.e-con.velp-ca-hero { background: #fff; }
.e-con.velp-ca-soft { background: #fff; }
#velp-ca-capabilities { background: #f3f7fc; }

/* Hero chips: #EAF3FB in the design, not the grey #eceff4. */
.vel-pill { background: #eaf3fb; }

/* S5 — capability icon badges + resting card shadow. */
.velp-ca .vel-card-icon.vel-accent-orange { background: #d7efff; color: var(--vel-navy); }
#velp-ca-capabilities .vel-card { box-shadow: 0 6px 18px rgba(18, 32, 53, 0.05); }

/* S4 — checklist: no page override, the shared commerce-a spec is the design
   (16px on a 26px line, 10px item gap, bare 13px peach tick). */
.velp-ca-checklist li::before { background-color: transparent; }

/* S6 — CTA decoration: the canonical deco spec now lives in commerce-a.css
   (11px bars, 10px gap, heights 50/100/80/120, baseline 40px). No page
   override — the bars must be identical across every CTA card. */

/* --------------------------------------------------------------------------
   S3 — hero visual: the design shows the MedShift customer-detail screen.
   Rebuilt as markup (no bitmap available at usable resolution).
   -------------------------------------------------------------------------- */

.velp-ca-app {
	background: #fff;
	border: 1px solid #e6ebf2;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(18, 32, 53, 0.13);
	overflow: hidden;
	font-size: 10px;
	line-height: 1.35;
	color: var(--vel-navy);
}

.velp-ca-app-top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 14px;
	height: 34px;
	background: #2c3e59;
}

.velp-ca-app-top b { font-size: 9px; font-weight: 800; letter-spacing: 0.09em; color: #fff; }
.velp-ca-app-top i { font-size: 8.5px; font-style: normal; font-weight: 600; color: rgba(255, 255, 255, 0.82); }

.velp-ca-app-avatar {
	margin-left: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #f0a12e;
}

.velp-ca-app-crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	background: #f7f9fc;
	border-bottom: 1px solid #eef1f6;
	font-size: 8px;
	font-weight: 600;
	color: #8b96a6;
}

.velp-ca-app-crumb em { font-style: normal; }

.velp-ca-app-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px 16px 10px;
}

.velp-ca-app-kicker {
	display: block;
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #2f6fed;
	margin-bottom: 3px;
}

.velp-ca-app-head strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.velp-ca-app-head em { font-size: 7.5px; font-style: normal; font-weight: 700; color: #2f6fed; margin-left: 6px; }

.velp-ca-app-ghost {
	font-size: 8px;
	font-weight: 600;
	color: #5c6b80;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	padding: 5px 10px;
}

.velp-ca-app-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 0 16px 4px; }

.velp-ca-app-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.velp-ca-app-side li {
	font-size: 8px;
	font-weight: 600;
	color: #56687d;
	padding: 5px 8px;
	border-radius: 5px;
}

.velp-ca-app-side li.is-sel { background: #eef4ff; color: #2f6fed; font-weight: 800; }

.velp-ca-app-main-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.velp-ca-app-main-top strong { font-size: 13px; font-weight: 800; margin-right: auto; }

.velp-ca-app-filter { width: 22px; height: 15px; border: 1px solid #e2e8f0; border-radius: 4px; }

.velp-ca-app-btn {
	font-size: 8px;
	font-weight: 700;
	color: #fff;
	background: #2f6fed;
	border-radius: 4px;
	padding: 4px 9px;
}

.velp-ca-app-row {
	display: grid;
	grid-template-columns: 34px 52px 1fr 62px auto;
	gap: 6px;
	align-items: center;
	padding: 7px 0;
	border-top: 1px solid #eef1f6;
}

.velp-ca-app-row--head { border-top: 0; font-size: 8px; font-weight: 700; color: #7b8798; }
.velp-ca-app-row--head b { font-size: 8px; font-weight: 700; color: #7b8798; text-align: right; }

.velp-ca-app-oid a { font-size: 8px; font-weight: 700; color: #2f6fed; }
.velp-ca-app-oid em { display: block; font-size: 6px; font-style: normal; color: #9aa5b4; }
.velp-ca-app-date { font-size: 7.5px; color: #5c6b80; }
.velp-ca-app-date em { display: block; font-style: normal; }
.velp-ca-app-status { display: flex; align-items: center; gap: 4px; font-size: 7.5px; color: #41546b; }
.velp-ca-app-status u { width: 3px; height: 3px; border-radius: 50%; background: #2f6fed; }
.velp-ca-app-tags { display: flex; flex-wrap: wrap; gap: 3px; }

.velp-ca-app-tag {
	font-size: 6px;
	font-style: normal;
	font-weight: 700;
	color: #5c6b80;
	background: #eef1f5;
	border-radius: 3px;
	padding: 2px 4px;
}

.velp-ca-app-tag--warn { background: #fdf5d6; color: #a67c11; }
.velp-ca-app-tag--rec { background: #f1ecfd; color: #7c5cd6; }
.velp-ca-app-row b { font-size: 8.5px; font-weight: 800; text-align: right; }

@media (max-width: 900px) {
	.velp-ca-hero-visual { max-width: 520px; margin: 0 auto; }
}

/* Narrow screens: the mock is a fixed-density screenshot stand-in, so drop the
   sidebar and tighten the table rather than let it clip at the card edge. */
@media (max-width: 720px) {
	.velp-ca-app-top { gap: 10px; }
	.velp-ca-app-top i:nth-last-child(2),
	.velp-ca-app-top i:nth-last-child(3) { display: none; }
	.velp-ca-app-body { grid-template-columns: minmax(0, 1fr); }
	.velp-ca-app-side { display: none; }
	.velp-ca-app-row { grid-template-columns: 30px 48px minmax(0, 1fr) 58px auto; }
}

/* --------------------------------------------------------------------------
   S4 — phone mock: the design shows the rep app's Orders screen, not a
   skeleton. Own frame (the shared .vel-phone frame is content-less).
   -------------------------------------------------------------------------- */

.velp-ca-visual--phone { display: flex; justify-content: center; }

.velp-ca-phone {
	width: 258px;
	padding: 8px;
	background: var(--vel-navy);
	border-radius: 32px;
	box-shadow: 0 26px 60px rgba(18, 32, 53, 0.22);
}

.velp-ca-phone-screen { background: #fff; border-radius: 25px; overflow: hidden; }

.velp-ca-phone-top {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 12px 10px;
	background: #22344d;
}

.velp-ca-phone-top b { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #fff; margin-right: auto; }

.velp-ca-phone-tic {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.velp-ca-phone-tic.is-solid { background: rgba(255, 255, 255, 0.55); border-color: transparent; }
.velp-ca-phone-tic.is-box { border-radius: 4px; }

.velp-ca-phone-body { padding: 12px 11px 0; font-size: 9px; color: var(--vel-slate); }

.velp-ca-phone-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.velp-ca-phone-head strong { font-size: 18px; font-weight: 800; color: var(--vel-navy); }

.velp-ca-phone-btn {
	font-size: 8.5px;
	font-weight: 700;
	color: #fff;
	background: #2f6fed;
	border-radius: 6px;
	padding: 6px 11px;
}

.velp-ca-phone-search { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }

.velp-ca-phone-search span {
	flex: 1;
	font-size: 8.5px;
	color: #9aa5b4;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 6px 9px;
}

.velp-ca-phone-search i { width: 22px; height: 23px; border: 1px solid #e2e8f0; border-radius: 6px; }

.velp-ca-phone-card { border: 1px solid #eaeef4; border-radius: 8px; padding: 9px; margin-bottom: 10px; }

.velp-ca-phone-bar { display: flex; gap: 1px; margin-bottom: 9px; }

.velp-ca-phone-bar u {
	font-size: 6px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 13px;
	height: 13px;
}

.velp-ca-phone-bar .s1 { width: 35%; background: #4a89d0; border-radius: 3px 0 0 3px; }
.velp-ca-phone-bar .s2 { width: 33%; background: #e2802f; }
.velp-ca-phone-bar .s3 { width: 23%; background: #3f9e63; }
.velp-ca-phone-bar .s4 { width: 9%; background: #cf4747; border-radius: 0 3px 3px 0; }

.velp-ca-phone-leg { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; }
.velp-ca-phone-leg span { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; color: var(--vel-navy); }
.velp-ca-phone-leg b { font-size: 8.5px; font-weight: 800; color: var(--vel-navy); }
.velp-ca-phone-leg i { width: 4px; height: 4px; border-radius: 50%; }
.velp-ca-phone-leg .c1 { background: #4a89d0; }
.velp-ca-phone-leg .c2 { background: #e2802f; }
.velp-ca-phone-leg .c3 { background: #3f9e63; }
.velp-ca-phone-leg.is-total { border-top: 1px solid #eef1f6; margin-top: 4px; padding-top: 6px; }
.velp-ca-phone-leg.is-total span { color: #8b96a6; }

.velp-ca-phone-order {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid #eef1f6;
}

.velp-ca-phone-order.is-cut { max-height: 58px; overflow: hidden; }
.velp-ca-phone-order > a { font-size: 9px; font-weight: 700; color: #2f6fed; }
.velp-ca-phone-order-mid { display: grid; gap: 3px; }
.velp-ca-phone-order-mid span { font-size: 8.5px; color: var(--vel-navy); padding-left: 12px; position: relative; }

.velp-ca-phone-order-mid span::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 8px;
	height: 8px;
	border: 1px solid #a9b4c2;
	border-radius: 2px;
}

.velp-ca-phone-order-mid .ic-user::before,
.velp-ca-phone-order-mid .ic-cart::before { border-radius: 50%; }
.velp-ca-phone-order-mid .velp-ca-phone-flags { display: flex; gap: 5px; padding-left: 0; margin-top: 2px; }
.velp-ca-phone-order-mid .velp-ca-phone-flags::before { display: none; }

.velp-ca-phone-flags em {
	font-size: 7px;
	font-style: normal;
	font-weight: 700;
	border-radius: 4px;
	padding: 3px 6px;
}

.velp-ca-phone-flags .ok { background: #e6f6ec; color: #2f7d4c; }
.velp-ca-phone-flags .warn { background: #fdf5d6; color: #a67c11; }
.velp-ca-phone-order > b { font-size: 9.5px; font-weight: 800; color: var(--vel-navy); text-align: right; }
.velp-ca-phone-order > b i { display: block; font-style: normal; font-weight: 600; color: #9aa5b4; }

/* --------------------------------------------------------------------------
   S3/S7 — hero dashboard and rep-portal phone are the real product
   screenshots cropped from the @2x Figma export (attachments 21741 / 21742),
   replacing the hand-built .velp-ca-app / .velp-ca-phone markup imitations.
   -------------------------------------------------------------------------- */

.velp-ca-hero-shot img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 26px 60px -30px rgba(14, 32, 55, 0.38);
}

.velp-ca-phone-shot { text-align: center; }
.velp-ca-phone-shot img { width: 234px; max-width: 100%; height: auto; }

@media (max-width: 900px) {
	.velp-ca-hero-shot { max-width: 520px; }
}