/* Start custom CSS for html, class: .elementor-element-9f11dc2 */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
.wrs-mailin *, .wrs-mailin *::before, .wrs-mailin *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--navy: #16283f; /* header / footer bar */
--hero-1: #12253d;
--hero-2: #1d4f80;
--cyan: #00b4f0; /* quote band + call button */
--cyan-dk: #0098cc;
--ink: #101820;
--body: #4a5560;
--gray-bg: #f0f0f0;
--line: #dcdcdc;
--white: #ffffff;
--gold: #f5b301;
}
.wrs-mailin {
font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
color: var(--ink);
background: var(--white);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.wrs-mailin h1, .wrs-mailin h2, .wrs-mailin h3, .wrs-mailin h4 { font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; }
.wrs-mailin .wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.wrs-mailin .narrow { max-width: 780px; }
/* ══ HEADER BAR ══ */
/* ══ HERO ══ */
.wrs-mailin .hero {
position: relative;
background: linear-gradient(135deg, var(--hero-2) 0%, var(--hero-1) 55%, #0d1a2b 100%);
color: var(--white);
text-align: center;
padding: 74px 0 78px;
overflow: hidden;
}
/* circuit-board texture suggestion */
.wrs-mailin .hero::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(120,190,255,.07) 2px, transparent 2px),
linear-gradient(90deg, rgba(120,190,255,.07) 2px, transparent 2px),
radial-gradient(circle at 18% 30%, rgba(0,180,240,.22), transparent 45%),
radial-gradient(circle at 82% 70%, rgba(0,140,220,.18), transparent 45%);
background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%;
}
.wrs-mailin .hero .wrap { position: relative; }
.wrs-mailin .hero h1 {
font-size: 56px; font-weight: 900; text-transform: uppercase;
letter-spacing: -1px; margin-bottom: 18px;
text-shadow: 0 3px 18px rgba(0,0,0,.4);
}
.wrs-mailin .hero-tags {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 10px 30px; margin-bottom: 32px;
font-size: 14.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.wrs-mailin .hero-lede {
max-width: 660px; margin: 0 auto 32px;
font-size: 16.5px; font-weight: 500; color: #d3e4f5; letter-spacing: 0;
text-transform: none;
}
/* Call Now button — mirrors homepage */
.wrs-mailin .call-btn {
display: inline-block; text-decoration: none;
background: var(--cyan); color: var(--white);
font-weight: 800; font-size: 17px; letter-spacing: .3px;
padding: 15px 42px; border-radius: 3px;
transition: background .18s, transform .18s;
text-transform: none;
}
.wrs-mailin .call-btn:hover { background: var(--cyan-dk); transform: translateY(-2px); }
.wrs-mailin .call-btn small { display: block; font-size: 20px; font-weight: 900; margin-top: 2px; }
.wrs-mailin .btn-outline {
display: inline-block; text-decoration: none;
border: 2px solid rgba(255,255,255,.55); color: #fff;
font-weight: 700; font-size: 15px;
padding: 14px 34px; border-radius: 3px;
transition: all .18s;
}
.wrs-mailin .btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
.wrs-mailin .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ══ SECTIONS ══ */
.wrs-mailin section { padding: 70px 0; }
.wrs-mailin .sec-gray { background: var(--gray-bg); }
.wrs-mailin .sec-head { text-align: center; margin-bottom: 48px; }
.wrs-mailin .sec-head h2 { font-size: 40px; font-weight: 900; margin-bottom: 14px; }
.wrs-mailin .sec-head p { color: var(--body); font-size: 16px; max-width: 640px; margin: 0 auto; }
/* ══ HORIZONTAL STEP TRACK ══ */
.wrs-mailin .track {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
/* connector line running behind the number badges */
.wrs-mailin .track-line {
position: absolute;
top: 26px; left: 10%; right: 10%;
height: 2px; background: #2b6cb0; opacity: .45;
z-index: 0;
}
.wrs-mailin .track-step { position: relative; z-index: 1; text-align: center; }
.wrs-mailin .track-num {
width: 52px; height: 52px; margin: 0 auto 16px;
background: var(--white);
border: 2px solid #2b6cb0;
display: grid; place-items: center;
font-weight: 900; font-size: 21px; color: var(--ink);
}
.wrs-mailin .track-step h3 {
font-size: 17px; font-weight: 800; margin-bottom: 8px;
text-transform: uppercase; letter-spacing: .2px;
}
.wrs-mailin .track-step p { font-size: 13.8px; color: var(--body); line-height: 1.6; }
/* ══ DEVICE CARDS ══ */
.wrs-mailin .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wrs-mailin .card {
background: var(--white); border: 1px solid var(--line);
border-top: 4px solid var(--cyan);
padding: 28px 24px; text-align: center;
}
.wrs-mailin .card-ico {
width: 52px; height: 52px; margin: 0 auto 15px;
background: rgba(0,180,240,.1); color: #1b5f9e;
display: grid; place-items: center; border-radius: 4px;
}
.wrs-mailin .card h3 { font-size: 19px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; }
.wrs-mailin .card p { color: var(--body); font-size: 14.5px; }
/* ══ QUOTE BAND (cyan, like homepage) ══ */
.wrs-mailin .band {
background: var(--cyan); color: var(--white);
text-align: center; padding: 62px 0;
}
.wrs-mailin .band h2 { font-size: 42px; font-weight: 900; margin-bottom: 12px; }
.wrs-mailin .band p { font-size: 16.5px; margin-bottom: 26px; opacity: .95; max-width: 620px; margin-left: auto; margin-right: auto; }
.wrs-mailin .band-btn {
display: inline-block; text-decoration: none;
background: var(--white); color: #0079a8;
font-weight: 800; font-size: 16px;
padding: 15px 40px; border-radius: 3px;
transition: transform .18s, box-shadow .18s;
}
.wrs-mailin .band-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
/* ══ CHECKLIST / SHIP SPLIT ══ */
.wrs-mailin .split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.wrs-mailin .blk-title { font-size: 30px; font-weight: 900; margin-bottom: 8px; }
.wrs-mailin .blk-sub { color: var(--body); font-size: 15.5px; margin-bottom: 24px; }
.wrs-mailin .checklist { list-style: none; }
.wrs-mailin .checklist li {
display: grid; grid-template-columns: 24px 1fr; gap: 13px;
padding: 13px 0; border-bottom: 1px solid var(--line);
font-size: 15px; color: var(--body);
}
.wrs-mailin .checklist li:last-child { border-bottom: none; }
.wrs-mailin .checklist strong { display: block; color: var(--ink); font-weight: 700; font-size: 15.5px; }
.wrs-mailin .tick {
width: 22px; height: 22px; border-radius: 50%; margin-top: 3px;
background: rgba(0,180,240,.15); color: #0079a8;
display: grid; place-items: center;
}
.wrs-mailin .tick.warn { background: rgba(245,179,1,.2); color: #a67500; }
/* ship panel */
.wrs-mailin .ship-panel { background: var(--navy); color: var(--white); padding: 32px 30px; }
.wrs-mailin .ship-panel h3 { font-size: 23px; margin-bottom: 4px; text-transform: uppercase; }
.wrs-mailin .ship-panel .hint { font-size: 13.5px; color: #9fb4cc; margin-bottom: 18px; }
.wrs-mailin .addr {
background: rgba(255,255,255,.07);
border: 1px dashed rgba(255,255,255,.3);
padding: 20px 22px; font-size: 16.5px; line-height: 1.8; font-weight: 500;
}
.wrs-mailin .addr b { font-weight: 800; }
.wrs-mailin .copy-btn {
margin-top: 15px; background: var(--cyan); color: #fff;
border: none; padding: 12px 26px; border-radius: 3px;
font-family: inherit; font-weight: 800; font-size: 14px;
cursor: pointer; transition: background .18s;
}
.wrs-mailin .copy-btn:hover { background: var(--cyan-dk); }
.wrs-mailin .panel-note {
margin-top: 18px; background: rgba(0,180,240,.12);
border-left: 3px solid var(--cyan); padding: 13px 15px;
font-size: 13.5px; color: #cfe2f2;
}
/* repair slip */
.wrs-mailin .slip { background: var(--white); border: 2px dashed #2b6cb0; padding: 28px 28px; margin-top: 22px; }
.wrs-mailin .slip h3 { font-size: 21px; margin-bottom: 6px; text-transform: uppercase; }
.wrs-mailin .slip .hint { font-size: 13.5px; color: var(--body); margin-bottom: 20px; }
.wrs-mailin .slip-print-head, .wrs-mailin .sp-rule, .wrs-mailin .sp-instruct, .wrs-mailin .sp-sec { display: none; }
.wrs-mailin .fld { margin-bottom: 14px; }
.wrs-mailin .fld label {
display: block; font-size: 11.5px; font-weight: 800;
letter-spacing: .9px; text-transform: uppercase;
color: var(--ink); margin-bottom: 5px;
}
.wrs-mailin .fld input, .wrs-mailin .fld textarea {
width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
background: #fafcfe; border: 1px solid #c9d4e0; border-radius: 3px;
padding: 9px 11px; outline: none; resize: vertical;
transition: border-color .15s, box-shadow .15s;
}
.wrs-mailin .fld input::placeholder, .wrs-mailin .fld textarea::placeholder { color: #9aa8b6; }
.wrs-mailin .fld input:focus, .wrs-mailin .fld textarea:focus {
border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,180,240,.15);
}
.wrs-mailin .fld input.missing, .wrs-mailin .fld textarea.missing { border-color: #e0533d; background: #fff6f4; }
.wrs-mailin .slip-sign { display: none; }
.wrs-mailin .slip-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.wrs-mailin .clear-btn {
background: none; border: 1px solid #c9d4e0; color: var(--body);
padding: 12px 22px; border-radius: 3px;
font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
transition: all .15s;
}
.wrs-mailin .clear-btn:hover { border-color: #9aa8b6; color: var(--ink); }
.wrs-mailin .slip-warn {
display: none; margin-top: 12px; font-size: 13px;
color: #c0392b; font-weight: 600;
}
.wrs-mailin .slip-warn.show { display: block; }
#printHost { display: none; }
/* ══ FAQ ══ */
.wrs-mailin .faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.wrs-mailin .faq-item { border-bottom: 1px solid var(--line); }
.wrs-mailin .faq-q {
width: 100%; background: none; border: none; text-align: left; cursor: pointer;
font-family: inherit; font-weight: 800; font-size: 17px; color: var(--ink);
padding: 19px 44px 19px 0; position: relative;
}
.wrs-mailin .faq-q::after {
content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
font-size: 25px; font-weight: 400; color: #2b6cb0;
}
.wrs-mailin .faq-item.open .faq-q::after { content: '\2212'; }
.wrs-mailin .faq-a { display: none; padding: 0 40px 20px 0; color: var(--body); font-size: 15px; }
.wrs-mailin .faq-item.open .faq-a { display: block; }
/* ══ INFO (address / hours) ══ */
.wrs-mailin .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.wrs-mailin .info-grid h3 { font-size: 19px; text-transform: uppercase; margin-bottom: 10px; }
.wrs-mailin .info-grid p { font-size: 15.5px; color: var(--body); }
.wrs-mailin .info-grid b { color: var(--ink); }
/* ══ FOOTER ══ */
/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
.wrs-mailin .grid-3 { grid-template-columns: 1fr 1fr; }
.wrs-mailin .split, .wrs-mailin .info-grid { grid-template-columns: 1fr; gap: 34px; }
.wrs-mailin .hero h1 { font-size: 42px; }
.wrs-mailin .sec-head h2, .wrs-mailin .band h2 { font-size: 32px; }
.wrs-mailin .track { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
.wrs-mailin .track-line { display: none; }
}
@media (max-width: 680px) {
.wrs-mailin .hero { padding: 52px 0 56px; }
.wrs-mailin .hero h1 { font-size: 31px; }
.wrs-mailin .hero-tags { font-size: 12px; gap: 8px 18px; }
.wrs-mailin .hero-lede { font-size: 15px; }
.wrs-mailin .call-btn { display: block; padding: 14px 20px; }
.wrs-mailin .hero-btns { flex-direction: column; }
.wrs-mailin .btn-outline { display: block; }
.wrs-mailin section { padding: 48px 0; }
.wrs-mailin .sec-head { margin-bottom: 34px; }
.wrs-mailin .sec-head h2, .wrs-mailin .band h2 { font-size: 26px; }
.wrs-mailin .grid-3 { grid-template-columns: 1fr; }
.wrs-mailin .track { grid-template-columns: 1fr; gap: 26px; text-align: left; }
.wrs-mailin .track-step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.wrs-mailin .track-num { width: 46px; height: 46px; margin: 0; font-size: 19px; }
.wrs-mailin .track-step h3 { grid-column: 2; font-size: 17px; margin-bottom: 5px; }
.wrs-mailin .track-step p { grid-column: 2; }
.wrs-mailin .blk-title { font-size: 25px; }
.wrs-mailin .slip-line { flex-direction: column; gap: 3px; }
.wrs-mailin .slip-line i { width: 100%; }
.wrs-mailin .faq-q { font-size: 15.5px; }
.wrs-mailin .band { padding: 48px 0; }
}
@media (max-width: 380px) {
.wrs-mailin .hero h1 { font-size: 26px; }
}
/* ═══════════════════════════════════════════════════════════════
WORDPRESS / ELEMENTOR EMBED COMPATIBILITY
Loaded last so it wins over theme and page-builder styles.
═══════════════════════════════════════════════════════════════ */
@media screen {
/* ── Container queries: size to the COLUMN, not the viewport ──
Media queries measure the browser window, but inside a page
builder the content column is narrower. This makes the layout
respond to the space it is actually given. */
.wrs-mailin { container-type: inline-size; container-name: wrs; }
/* Kill inherited theme spacing and constraints */
.wrs-mailin {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.wrs-mailin *, .wrs-mailin *::before, .wrs-mailin *::after { box-sizing: border-box !important; }
.wrs-mailin img, .wrs-mailin svg { max-width: 100%; height: auto; }
.wrs-mailin p, .wrs-mailin h1, .wrs-mailin h2, .wrs-mailin h3 { overflow-wrap: break-word; }
/* ── Make the containers holding this page full width ──
Instead of using 100vw to escape the column (which shifts the
layout sideways when the container is not centred in the window),
we widen the containers themselves. Elementor sizes its containers
with CSS variables, so those need resetting too. */
.elementor-widget-html:has(.wrs-mailin),
.elementor-widget-container:has(.wrs-mailin),
.elementor-widget-wrap:has(.wrs-mailin),
.elementor-column:has(.wrs-mailin),
.elementor-container:has(.wrs-mailin),
.elementor-section:has(.wrs-mailin),
.elementor-element:has(.wrs-mailin),
.e-con:has(.wrs-mailin),
.e-con-inner:has(.wrs-mailin),
.entry-content:has(.wrs-mailin),
.wp-block-html:has(.wrs-mailin),
.site-main:has(.wrs-mailin),
main:has(.wrs-mailin) {
--width: 100%;
--content-width: 100%;
--container-max-width: 100%;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: visible !important;
}
/* ── Bands fill whatever width they are given, no vw tricks ── */
.wrs-mailin .hero,
.wrs-mailin .band,
.wrs-mailin .sec-gray,
.wrs-mailin section {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
position: relative !important;
transform: none !important;
}
/* Inner content stays centred and readable */
.wrs-mailin .wrap {
width: 100% !important;
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 22px !important;
padding-right: 22px !important;
}
.wrs-mailin .wrap.narrow { max-width: 780px !important; }
/* ── Force our colors over theme and Elementor global styles ──
-webkit-text-fill-color is needed because some themes and
Elementor global typography set it, and it beats `color`. */
html body .wrs-mailin .hero h1,
html body .wrs-mailin .hero h1 * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
font-family: 'Montserrat', Arial, sans-serif !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: -1px !important;
margin: 0 0 18px !important;
text-shadow: 0 3px 18px rgba(0,0,0,.4) !important;
opacity: 1 !important;
}
html body .wrs-mailin .hero,
html body .wrs-mailin .hero .hero-tags,
html body .wrs-mailin .hero .hero-tags span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body .wrs-mailin .hero .hero-lede {
color: #d3e4f5 !important;
-webkit-text-fill-color: #d3e4f5 !important;
}
/* ── Kill theme link underlines on our buttons ── */
html body .wrs-mailin a.call-btn,
html body .wrs-mailin a.btn-outline,
html body .wrs-mailin a.band-btn,
html body .wrs-mailin a.call-btn:hover,
html body .wrs-mailin a.btn-outline:hover,
html body .wrs-mailin a.band-btn:hover {
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
background-image: none !important;
}
html body .wrs-mailin a.call-btn,
html body .wrs-mailin a.call-btn * {
color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html body .wrs-mailin a.btn-outline {
color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html body .wrs-mailin a.btn-outline:hover {
color: var(--cyan) !important; -webkit-text-fill-color: var(--cyan) !important;
}
html body .wrs-mailin a.band-btn {
color: #0079a8 !important; -webkit-text-fill-color: #0079a8 !important;
}
html body .wrs-mailin .band,
html body .wrs-mailin .band h2,
html body .wrs-mailin .band p {
color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
.wrs-mailin .ship-panel,
.wrs-mailin .ship-panel h3,
.wrs-mailin .ship-panel .addr { color: #ffffff !important; }
.wrs-mailin .ship-panel .hint { color: #9fb4cc !important; }
.wrs-mailin .ship-panel .panel-note { color: #cfe2f2 !important; }
.wrs-mailin .sec-head h2,
.wrs-mailin .blk-title,
.wrs-mailin .track-step h3,
.wrs-mailin .card h3,
.wrs-mailin .faq-q { color: #101820 !important; }
/* ── Fluid type so nothing overflows a narrow column ── */
.wrs-mailin .hero h1 { font-size: clamp(26px, 6cqi, 56px) !important; }
.wrs-mailin .hero-lede { font-size: clamp(14px, 1.7cqi, 16.5px) !important; }
.wrs-mailin .hero-tags { font-size: clamp(11px, 1.5cqi, 14.5px) !important; }
.wrs-mailin .sec-head h2,
.wrs-mailin .band h2 { font-size: clamp(24px, 4.2cqi, 42px) !important; }
.wrs-mailin .blk-title { font-size: clamp(22px, 3cqi, 30px) !important; }
.wrs-mailin .track-step h3{ font-size: clamp(15px, 1.8cqi, 18px) !important; }
/* ── Grids that reflow on container width, not window width ── */
.wrs-mailin .track {
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) !important;
gap: 26px 18px !important;
}
.wrs-mailin .grid-3 {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}
.wrs-mailin .split,
.wrs-mailin .info-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}
.wrs-mailin .track > *, .wrs-mailin .grid-3 > *,
.wrs-mailin .split > *, .wrs-mailin .info-grid > * { min-width: 0; }
/* ── Container-query breakpoints ── */
@container wrs (max-width: 900px) {
.wrs-mailin .track-line { display: none; }
}
@container wrs (max-width: 620px) {
.wrs-mailin section { padding: 46px 0 !important; }
.wrs-mailin .hero { padding: 48px 0 52px !important; }
.wrs-mailin .wrap { padding: 0 18px !important; }
.wrs-mailin .track { grid-template-columns: 1fr !important; text-align: left !important; }
.wrs-mailin .track-step {
display: grid !important; grid-template-columns: 46px 1fr !important;
gap: 16px !important; align-items: start !important;
}
.wrs-mailin .track-num { width: 46px !important; height: 46px !important; margin: 0 !important; }
.wrs-mailin .track-step h3, .wrs-mailin .track-step p { grid-column: 2 !important; }
.wrs-mailin .hero-btns { flex-direction: column !important; }
.wrs-mailin .call-btn, .wrs-mailin .btn-outline { display: block !important; }
.wrs-mailin .slip, .wrs-mailin .ship-panel { padding: 22px 18px !important; }
}
/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
@media (max-width: 620px) {
.wrs-mailin .track { grid-template-columns: 1fr !important; }
.wrs-mailin .hero-btns { flex-direction: column !important; }
}
}
}
@media print {
@page { margin: 0.5in; size: letter; }
/* Hide every top-level block so no blank pages are generated.
The slip is relocated into #printHost by printSlip() before printing. */
body:has(#printHost > #repairSlip) > *:not(#printHost) { display: none !important; }
#printHost { display: block !important; }
#printHost #repairSlip {
margin: 0; padding: 0;
border: none; background: #fff;
font-family: 'Montserrat', Arial, sans-serif;
color: #101820;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
#printHost .slip-screen-head, #printHost .slip-actions, #printHost .slip-warn { display: none !important; }
/* ── Branded header ── */
#printHost .slip-print-head {
display: flex !important;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
background: #16283f;
color: #fff;
padding: 11px 15px;
border-radius: 4px 4px 0 0;
}
#printHost .sp-brand { display: flex; align-items: center; gap: 11px; }
#printHost .sp-mark {
width: 40px; height: 40px; flex: 0 0 40px;
background: #00b4f0; color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 24px; font-style: italic;
border-radius: 3px;
}
#printHost .sp-title {
font-size: 19px; font-weight: 900; line-height: 1.05;
text-transform: uppercase; letter-spacing: -.4px; color: #fff;
}
#printHost .sp-tag {
font-size: 9.5px; font-weight: 700; letter-spacing: 2.4px;
text-transform: uppercase; color: #7fd8f7; margin-top: 3px;
}
#printHost .sp-contact {
text-align: right; font-size: 8.8px; line-height: 1.55;
color: #c3d6e8; font-weight: 500;
}
#printHost .sp-rule {
display: block !important;
height: 4px;
background: #00b4f0;
margin-bottom: 10px;
}
#printHost .sp-instruct {
display: block !important;
font-size: 8.5px; font-weight: 600; font-style: italic;
color: #4a5560; text-align: center;
padding-bottom: 8px; margin-bottom: 2px;
border-bottom: 1px solid #dcdcdc;
}
/* ── Section headings ── */
#printHost .sp-sec {
display: block !important;
font-size: 9px; font-weight: 900;
letter-spacing: 1.8px; text-transform: uppercase;
color: #16283f;
background: #eef3f8;
border-left: 3px solid #00b4f0;
padding: 4px 9px;
margin: 9px 0 7px;
page-break-after: avoid;
}
/* ── Fields ── */
#printHost .fld { margin-bottom: 6px; page-break-inside: avoid; }
#printHost .fld label {
display: block;
font-size: 7.5px; font-weight: 800; letter-spacing: .9px;
text-transform: uppercase; color: #5a6875; margin-bottom: 1px;
}
#printHost .fld input, #printHost .fld textarea {
display: block; width: 100%; box-sizing: border-box; resize: none;
border: none !important;
border-bottom: 1px solid #b8c4d0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 2px 2px !important;
font-family: 'Montserrat', Arial, sans-serif !important;
font-size: 10.5px !important; font-weight: 600 !important;
line-height: 1.35 !important;
color: #101820 !important;
overflow: hidden;
}
#printHost .fld input.missing, #printHost .fld textarea.missing { background: transparent !important; }
#printHost .fld input::placeholder, #printHost .fld textarea::placeholder { color: transparent !important; }
/* ── Terms + signature ── */
#printHost .slip-sign { display: block !important; page-break-inside: avoid; }
#printHost .sp-terms {
background: #f6f8fa; border: 1px solid #d5dee7;
padding: 7px 9px; margin-top: 10px;
}
#printHost .sp-terms-head {
font-size: 8px; font-weight: 900; letter-spacing: 1.4px;
text-transform: uppercase; color: #16283f;
border-bottom: 1px solid #c5d1dc; padding-bottom: 3px; margin-bottom: 5px;
}
#printHost .sp-terms-grid { display: flex; gap: 13px; }
#printHost .sp-terms-grid > div { flex: 1; font-size: 6.9px; line-height: 1.45; color: #4a5560; }
#printHost .sp-terms-grid b { color: #101820; font-weight: 800; }
#printHost .sp-ack {
font-size: 6.9px; line-height: 1.45; color: #101820;
font-weight: 700; font-style: italic;
border-top: 1px solid #c5d1dc; padding-top: 4px; margin-top: 5px;
}
#printHost .sign-row { display: flex; gap: 22px; margin-top: 12px; }
#printHost .sign-line { flex: 1; }
#printHost .sign-line.date { flex: 0 0 30%; }
#printHost .sign-line i { display: block; border-bottom: 1px solid #101820; height: 16px; }
#printHost .sign-line span {
display: block; font-size: 7px; font-weight: 800;
letter-spacing: 1.1px; text-transform: uppercase;
color: #5a6875; margin-top: 2px;
}
/* ── Shop use box ── */
#printHost .sp-office {
margin-top: 10px;
border: 1px dashed #9aa8b6;
padding: 6px 9px 7px;
page-break-inside: avoid;
}
#printHost .sp-office-lbl {
font-size: 6.8px; font-weight: 900; letter-spacing: 1.8px;
text-transform: uppercase; color: #8a97a5; margin-bottom: 5px;
}
#printHost .sp-office-grid { display: flex; gap: 13px; }
#printHost .sp-office-grid > div { flex: 1; }
#printHost .sp-office-grid i { display: block; border-bottom: 1px solid #b8c4d0; height: 12px; }
#printHost .sp-office-grid span {
display: block; font-size: 6.3px; font-weight: 700;
letter-spacing: .8px; text-transform: uppercase;
color: #8a97a5; margin-top: 2px;
}
#printHost .sp-foot {
margin-top: 9px; padding-top: 5px;
border-top: 2px solid #16283f;
text-align: center; font-size: 6.8px; font-weight: 700;
letter-spacing: .6px; text-transform: uppercase; color: #5a6875;
}
}/* End custom CSS */