/*
 * Officeserv Landing Pages — shared widget styles
 * Design tokens lifted from officeserv-printers-hub-landing_1.html
 * (the live site's own colours / type / component conventions).
 *
 * Everything is scoped under .olp-scope so it never leaks onto the
 * rest of the site or other Elementor widgets.
 */

/*
 * Tokens are also defined on :root (not just .olp-scope) so that the
 * `olp-quote-form-card` utility class still resolves its colours when
 * applied to a widget that lives outside an OLP widget's own markup —
 * e.g. an Elementor Pro "Form" widget given this class manually.
 */
:root {
	--olp-blue: #075CA6;
	--olp-blue-dark: #054A87;
	--olp-blue-pale: #EAF2FA;
	--olp-orange: #F14705;
	--olp-orange-dark: #C93A03;
	--olp-ink: #1A1D22;
	--olp-text-muted: #667085;
	--olp-gray-bg: #F5F6F8;
	--olp-border: #E4E7EC;
	--olp-white: #FFFFFF;
	--olp-link-blue: #0066CC;
	--olp-success: #1FAA59;
	--olp-radius-sm: 4px;
	--olp-radius: 10px;
	--olp-radius-lg: 16px;
	--olp-shadow: 0 4px 16px rgba(16,38,64,0.06);
	--olp-shadow-lg: 0 20px 48px rgba(7,92,166,0.16);
}

.olp-scope {
	font-family: 'Work Sans', Arial, Helvetica, sans-serif;
	color: var(--olp-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.olp-scope *, .olp-scope *::before, .olp-scope *::after { box-sizing: border-box; }
.olp-scope img { max-width: 100%; display: block; }
.olp-scope a { text-decoration: none; color: inherit; }
.olp-scope ul { margin: 0; padding: 0; list-style: none; }
.olp-scope .olp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.olp-scope section, .olp-scope .olp-section { position: relative; }

/* ---------- Buttons ---------- */
.olp-scope .olp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; border-radius: var(--olp-radius-sm); font-weight: 700; font-size: 14.5px;
	border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	letter-spacing: .1px;
}
.olp-scope .olp-btn-orange { background: var(--olp-orange); color: #fff; }
.olp-scope .olp-btn-orange:hover { background: var(--olp-orange-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(241,71,5,.28); color:#fff; }
.olp-scope .olp-btn-blue { background: var(--olp-blue); color: #fff; }
.olp-scope .olp-btn-blue:hover { background: var(--olp-blue-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(7,92,166,.28); color:#fff; }
.olp-scope .olp-btn-outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.olp-scope .olp-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); color:#fff; }
.olp-scope .olp-btn-block { width: 100%; }

/* ---------- Header ---------- */
.olp-scope .olp-topbar { background: var(--olp-white); border-bottom: 1px solid var(--olp-border); padding: 14px 0; }
.olp-scope .olp-topbar .olp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.olp-scope .olp-logo img { height: 42px; width: auto; }
.olp-scope .olp-topbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.olp-scope .olp-phone-link { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--olp-ink); }
.olp-scope .olp-phone-link i, .olp-scope .olp-phone-link svg { flex: none; font-size: 14px !important; line-height: 1 !important; width: 14px !important; height: 14px !important; color: var(--olp-blue) !important; fill: var(--olp-blue) !important; }
.olp-scope .olp-social-row { display: flex; gap: 8px; }
.olp-scope .olp-social-row a { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; overflow: hidden; }
.olp-scope .olp-social-row a.fb { background: var(--olp-blue); }
.olp-scope .olp-social-row a.ig { background: #000; }
.olp-scope .olp-social-row a.mail { background: var(--olp-orange); }
.olp-scope .olp-social-row i, .olp-scope .olp-social-row svg { font-size: 13px !important; line-height: 1 !important; width: 13px !important; height: 13px !important; color: #fff !important; fill: #fff !important; }

.olp-scope .olp-section-nav { background: var(--olp-blue); }
.olp-scope .olp-section-nav .olp-wrap { display: flex; gap: 4px; flex-wrap: wrap; }
.olp-scope .olp-section-nav a { color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; padding: 14px 18px; display: inline-block; transition: background .15s ease; }
.olp-scope .olp-section-nav a:hover { background: rgba(255,255,255,.12); }

/* ---------- Hero ---------- */
.olp-scope .olp-hero {
	background: radial-gradient(ellipse at 15% 20%, rgba(255,255,255,.08) 0%, transparent 45%), linear-gradient(135deg,#062E52 0%, var(--olp-blue) 65%, #0A6FC2 100%);
	color: #fff; padding: 68px 0 52px;
}
.olp-scope .olp-hero-eyebrow { display: inline-block; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); }
.olp-scope .olp-hero h1 { font-size: clamp(30px,4vw,46px); font-weight: 800; line-height: 1.15; margin: 0 0 16px; max-width: 740px; color:#fff; }
.olp-scope .olp-hero p.olp-lead { font-size: 17.5px; color: rgba(255,255,255,.85); max-width: 600px; margin: 0 0 34px; }
.olp-scope .olp-hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.olp-scope .olp-segment-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.olp-scope .olp-segment-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--olp-radius); padding: 22px 20px; transition: background .15s ease, transform .15s ease, border-color .15s ease; display:block; }
.olp-scope .olp-segment-card:hover { background: rgba(255,255,255,.13); transform: translateY(-3px); border-color: rgba(255,255,255,.35); }
.olp-scope .olp-segment-card .olp-icon { width: 42px; height: 42px; border-radius: var(--olp-radius-sm); background: var(--olp-orange); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; }
/*
 * Icon glyphs are forced to an exact size/colour with !important — Font
 * Awesome (and some themes' own icon CSS) ship their own font-size/colour
 * rules on `i`/`svg` that otherwise win over plain inheritance from the
 * icon's container, which is what caused oversized black icons.
 */
.olp-scope .olp-icon i,
.olp-scope .olp-icon svg { font-size: 18px !important; line-height: 1 !important; width: 18px !important; height: 18px !important; color: #fff !important; fill: #fff !important; }
.olp-scope .olp-segment-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; color:#fff; }
.olp-scope .olp-segment-card p { margin: 0 0 14px; font-size: 13.5px; color: rgba(255,255,255,.75); }
.olp-scope .olp-segment-card .olp-go { font-size: 13px; font-weight: 700; color: #FFB088; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Trust bar ---------- */
.olp-scope .olp-trustbar { background: var(--olp-white); border-bottom: 1px solid var(--olp-border); padding: 20px 0; }
.olp-scope .olp-trustbar .olp-wrap { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; }
.olp-scope .olp-trust-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--olp-ink); }
.olp-scope .olp-trust-item i, .olp-scope .olp-trust-item svg { flex: none; font-size: 16px !important; line-height: 1 !important; width: 16px !important; height: 16px !important; color: var(--olp-success) !important; fill: var(--olp-success) !important; }

/* ---------- Section heading ---------- */
.olp-scope .olp-section-head { max-width: 660px; margin: 0 auto 38px; text-align: center; }
.olp-scope .olp-section-head .olp-kicker { color: var(--olp-orange); font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.olp-scope .olp-section-head h2 { font-size: clamp(23px,3vw,32px); margin: 0 0 12px; font-weight: 800; color: var(--olp-ink); }
.olp-scope .olp-section-head p { color: var(--olp-text-muted); font-size: 15px; margin: 0; }

/* ---------- Comparison guide ---------- */
.olp-scope .olp-compare { padding: 60px 0; background: var(--olp-gray-bg); }
.olp-scope .olp-compare-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.olp-scope .olp-compare-card { background: #fff; border: 1px solid var(--olp-border); border-radius: var(--olp-radius); padding: 26px 24px; box-shadow: var(--olp-shadow); }
.olp-scope .olp-compare-card h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--olp-ink); }
.olp-scope .olp-compare-card .olp-best-for { font-size: 12.5px; color: var(--olp-orange); font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .3px; }
.olp-scope .olp-compare-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.olp-scope .olp-compare-card td { padding: 8px 0; border-top: 1px solid var(--olp-border); color: var(--olp-text-muted); }
.olp-scope .olp-compare-card td:first-child { font-weight: 600; color: var(--olp-ink); width: 42%; }
.olp-scope .olp-compare-card a.olp-btn { margin-top: 20px; width: 100%; }

/* ---------- Segment sections ---------- */
.olp-scope .olp-segment { padding: 68px 0; }
.olp-scope .olp-segment.olp-alt { background: var(--olp-gray-bg); }
.olp-scope .olp-segment-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.olp-scope .olp-segment-head .olp-txt { max-width: 640px; }
.olp-scope .olp-segment-head .olp-kicker { color: var(--olp-orange); font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; display: block; margin-bottom: 10px; }
.olp-scope .olp-segment-head h2 { font-size: clamp(21px,3vw,28px); font-weight: 800; color: var(--olp-ink); margin: 0 0 10px; }
.olp-scope .olp-segment-head p { color: var(--olp-text-muted); font-size: 15px; margin: 0; }

.olp-scope .olp-brand-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.olp-scope .olp-brand-pill { background: var(--olp-white); border: 1px solid var(--olp-border); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--olp-blue); }

.olp-scope .olp-value-points { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 28px 0 32px; }
.olp-scope .olp-value-point { background: #fff; border: 1px solid var(--olp-border); border-radius: var(--olp-radius-sm); padding: 16px; display: flex; gap: 11px; align-items: flex-start; }
.olp-scope .olp-value-point i, .olp-scope .olp-value-point svg { flex: none; margin-top: 2px; font-size: 16px !important; line-height: 1 !important; width: 16px !important; height: 16px !important; color: var(--olp-orange) !important; fill: var(--olp-orange) !important; }
.olp-scope .olp-value-point span { font-size: 13px; font-weight: 600; color: var(--olp-ink); }

.olp-scope .olp-product-slot-label { display: flex; align-items: center; gap: 10px; justify-content: center; border: 1.5px dashed #C7D2DE; background: rgba(255,255,255,.7); border-radius: var(--olp-radius-sm); padding: 10px 16px; margin-bottom: 18px; font-size: 12px; font-weight: 700; color: var(--olp-blue-dark); letter-spacing: .2px; }

/* ---------- Live product cards (auto-pulled from WooCommerce) ---------- */
.olp-scope .olp-product-empty { padding: 24px; text-align: center; color: var(--olp-text-muted); font-size: 13px; border: 1.5px dashed #C7D2DE; border-radius: var(--olp-radius); margin-bottom: 18px; background: rgba(255,255,255,.7); }
.olp-scope .olp-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 28px; }
.olp-scope .olp-product-card { background: #fff; border: 1px solid var(--olp-border); border-radius: var(--olp-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.olp-scope .olp-product-card:hover { box-shadow: var(--olp-shadow); transform: translateY(-2px); }
.olp-scope .olp-product-card .olp-thumb { aspect-ratio: 4/3; background: #fff; position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--olp-border); }
.olp-scope .olp-product-card .olp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.olp-scope .olp-product-card .olp-ribbon { position: absolute; top: 10px; left: 10px; background: var(--olp-orange); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 3px; z-index: 1; }
.olp-scope .olp-product-card .olp-featured-tag { position: absolute; top: 10px; right: 10px; background: var(--olp-blue); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 3px; z-index: 1; }
.olp-scope .olp-product-card .olp-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.olp-scope .olp-product-card .olp-brand { font-size: 11.5px; font-weight: 600; color: var(--olp-text-muted); }
.olp-scope .olp-product-card .olp-name { font-size: 14.5px; font-weight: 700; color: var(--olp-link-blue); line-height: 1.35; }
.olp-scope .olp-product-card .olp-name:hover { text-decoration: underline; }
.olp-scope .olp-product-card .olp-spec { font-size: 12.5px; color: var(--olp-text-muted); }
.olp-scope .olp-product-card .olp-price-row { margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--olp-ink); }
.olp-scope .olp-product-card .olp-price-row ins { text-decoration: none; color: var(--olp-orange); }
.olp-scope .olp-product-card .olp-price-row del { color: var(--olp-text-muted); font-weight: 400; font-size: .8em; opacity: .8; }
/* margin-top:auto (inside the flex-column .olp-body, which has flex:1 to
   fill the grid-stretched card height) pins the button to the bottom of
   every card regardless of how many lines the name/spec text wraps to. */
.olp-scope .olp-product-card .olp-add-wrap { margin-top: auto; padding-top: 12px; }
.olp-scope .olp-product-card .olp-add-wrap a,
.olp-scope .olp-product-card .olp-add-wrap a.button,
.olp-scope .olp-product-card .olp-add-wrap a.added_to_cart {
	display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
	text-align: center; background: var(--olp-blue) !important; color: #fff !important;
	border: none !important; border-radius: var(--olp-radius-sm) !important; padding: 10px 14px !important;
	font-size: 13px !important; font-weight: 700 !important; cursor: pointer; width: 100%;
	transition: background .15s ease; line-height: normal !important;
}
.olp-scope .olp-product-card .olp-add-wrap a svg,
.olp-scope .olp-product-card .olp-add-wrap a i,
.olp-scope .olp-product-card .olp-add-wrap a .dashicons { margin: 0 !important; flex: none; }
.olp-scope .olp-product-card .olp-add-wrap a:hover { background: var(--olp-blue-dark) !important; }

.olp-scope .olp-segment-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- FAQ ---------- */
.olp-scope .olp-faq { padding: 68px 0; }
.olp-scope .olp-faq-list { max-width: 820px; margin: 0 auto; }
.olp-scope .olp-faq-item { border-bottom: 1px solid var(--olp-border); }
.olp-scope .olp-faq-item summary { cursor: pointer; list-style: none; padding: 20px 4px; font-weight: 700; font-size: 15.5px; color: var(--olp-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.olp-scope .olp-faq-item summary::-webkit-details-marker { display: none; }
.olp-scope .olp-faq-item summary .olp-plus { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--olp-blue-pale); display: flex; align-items: center; justify-content: center; color: var(--olp-blue); font-size: 16px; font-weight: 700; transition: transform .2s ease; }
.olp-scope .olp-faq-item[open] summary .olp-plus { transform: rotate(45deg); }
.olp-scope .olp-faq-item p { margin: 0 0 20px; padding: 0 4px; color: var(--olp-text-muted); font-size: 14.5px; max-width: 680px; }

/* ---------- Final CTA ---------- */
.olp-scope .olp-final-cta { background: linear-gradient(135deg,#062E52 0%, var(--olp-blue) 100%); color: #fff; padding: 60px 0; }
.olp-scope .olp-final-cta .olp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.olp-scope .olp-final-cta h2 { font-size: clamp(23px,3vw,30px); font-weight: 800; margin: 0 0 14px; color:#fff; }
.olp-scope .olp-final-cta p { color: rgba(255,255,255,.82); font-size: 15px; margin: 0 0 24px; max-width: 460px; }
.olp-scope .olp-final-cta .olp-contact-methods { display: flex; flex-direction: column; gap: 12px; }
.olp-scope .olp-contact-method { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.olp-scope .olp-contact-method a { color: inherit; }
.olp-scope .olp-contact-method i, .olp-scope .olp-contact-method svg { flex: none; font-size: 16px !important; line-height: 1 !important; width: 16px !important; height: 16px !important; color: var(--olp-orange) !important; fill: var(--olp-orange) !important; }
/*
 * .olp-quote-form-card is intentionally NOT scoped under .olp-scope —
 * it's a public utility class meant to be typed into any Elementor
 * widget's Advanced > CSS Classes field (e.g. an Elementor Pro "Form"
 * widget standing in for the OLP Final CTA widget's static preview
 * card) so it inherits the same white rounded card styling wherever
 * it's used on the page.
 */
.olp-quote-form-card { background: #fff; border-radius: var(--olp-radius-lg); padding: 28px; box-shadow: var(--olp-shadow-lg); font-family: 'Work Sans', Arial, Helvetica, sans-serif; }
.olp-quote-form-card h3 { margin: 0 0 4px; color: var(--olp-ink); font-size: 18px; font-weight: 800; }
.olp-quote-form-card .olp-form-sub { color: var(--olp-text-muted); font-size: 13px; margin: 0 0 20px; }
.olp-quote-form-card label { display: block; font-size: 12.5px; font-weight: 700; color: var(--olp-ink); margin: 0 0 6px; }
.olp-quote-form-card .olp-form-field { margin-bottom: 14px; }
.olp-quote-form-card input,
.olp-quote-form-card select,
.olp-quote-form-card textarea {
	width: 100%; padding: 11px 12px; border: 1px solid var(--olp-border); border-radius: var(--olp-radius-sm);
	font-family: inherit; font-size: 14px; color: var(--olp-ink); background: #FAFBFC;
}
.olp-quote-form-card textarea { resize: vertical; min-height: 70px; }
.olp-quote-form-card .olp-form-disclaimer { font-size: 11px; color: var(--olp-text-muted); margin: 10px 0 0; text-align: center; }

/* ---------- Mini footer ---------- */
.olp-scope .olp-mini-footer { background: linear-gradient(180deg,#fff 0%, var(--olp-gray-bg) 100%); border-top: 1px solid var(--olp-border); padding: 32px 0; }
.olp-scope .olp-mini-footer .olp-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.olp-scope .olp-mini-footer .olp-brand-block { display: flex; align-items: center; gap: 14px; }
.olp-scope .olp-mini-footer .olp-brand-block img { height: 30px; width: auto; }
.olp-scope .olp-mini-footer .olp-brand-block span { font-size: 12.5px; color: var(--olp-text-muted); }
.olp-scope .olp-mini-footer .olp-copyright { font-size: 12px; color: var(--olp-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.olp-scope .olp-segment-nav,
	.olp-scope .olp-compare-grid,
	.olp-scope .olp-value-points { grid-template-columns: 1fr 1fr; }
	.olp-scope .olp-final-cta .olp-grid { grid-template-columns: 1fr; }
	.olp-scope .olp-section-nav .olp-wrap { justify-content: center; }
}
@media (max-width: 640px) {
	.olp-scope .olp-segment-nav,
	.olp-scope .olp-compare-grid,
	.olp-scope .olp-value-points { grid-template-columns: 1fr; }
	.olp-scope .olp-topbar .olp-wrap { justify-content: center; text-align: center; }
	.olp-scope .olp-segment-head { align-items: flex-start; }
	.olp-scope .olp-mini-footer .olp-wrap { flex-direction: column; text-align: center; }
}