/* GENERATED by `npm run build` from src/client/styles/ — do not edit this file; edit the parts there and rebuild. */
/* styles.css — Base: fonts, colours, resets and shared layout. */
:root {
  --navy: #112f64;
  --navy2: #1b2a4c;
  --yellow: #f7c21b;
  --yellow2: #ffd54a;
  --bg: #f3f5f9;
  --card: #fff;
  --ink: #14213d;
  --muted: #6b7690;
  --line: #e3e8f1;
  --green: #14a44d;
  --red: #e5484d;
  --radius: 18px;
  --shadow: 0 6px 24px rgba(17, 47, 100, 0.1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #dfe5ef;
  color: var(--ink);
  font-family:
    Heebo,
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
input,
textarea {
  font: inherit;
}
a {
  color: var(--navy);
}
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 10px;
}
.app {
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
  box-shadow: 0 0 60px #112f642e;
}
[hidden] {
  display: none !important;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 13px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top, 0);
  background: var(--navy);
  color: #fff;
}
.logo {
  height: 34px;
  background: #fff;
  border-radius: 8px;
  padding: 2px 6px;
}
.topbar-title {
  flex: 1;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* styles.css — Customer home: icons, bell, greeting, order cards, badges and stats. */
.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
}
.icon-btn:active {
  background: #ffffff1f;
}
.bell {
  margin-inline-start: auto;
}
.bell .dot {
  position: absolute;
  top: 8px;
  left: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--navy);
}
.app.sub .logo {
  display: none;
}
main {
  padding-bottom: calc(84px + var(--safe-b));
}
.screen {
  display: none;
  animation: fadeIn 0.25s ease;
}
.screen.on {
  display: block;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero {
  background: linear-gradient(180deg, var(--navy) 0, var(--navy) 62%, var(--bg) 62%);
  padding: 14px 16px 6px;
  color: #fff;
}
.hello-sub {
  opacity: 0.8;
  font-size: 14px;
}
.hello-name {
  margin: 2px 0 6px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
}
.demo-tag {
  display: inline-block;
  font-size: 11px;
  background: #ffffff24;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.order-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 22px;
  padding: 18px;
  box-shadow:
    0 10px 30px #f7c21b73,
    0 2px #d9a70c inset;
  text-align: right;
  transition: transform 0.12s;
}
.order-cta:active {
  transform: scale(0.98);
}
.cta-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.cta-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cta-main {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
.cta-sub {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 3px;
}
.cta-arrow {
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}
.hero-note {
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  margin: 10px 0 2px;
}
.block {
  padding: 10px 16px 4px;
}
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 10px;
}
.block-head h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 800;
}
.link-btn {
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
}
.site-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  text-align: right;
  width: 100%;
}
.site .pin {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef2fa;
  display: grid;
  place-items: center;
  flex: none;
}
.site .meta {
  flex: 1;
  min-width: 0;
}
.site b {
  display: block;
  font-size: 15.5px;
}
.site span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site .chev {
  color: var(--muted);
  font-size: 22px;
}
.selectable .site.sel {
  border-color: var(--navy);
  background: #f7f9ff;
}
.selectable .site .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c3cbdb;
  flex: none;
  position: relative;
}
.selectable .site.sel .radio {
  border-color: var(--navy);
}
.selectable .site.sel .radio:after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--navy);
}
.ocard {
  display: block;
  width: 100%;
  text-align: right;
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.ocard .row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ocard .when {
  font-weight: 800;
  font-size: 15.5px;
}
.ocard .what {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 4px;
}
.ocard .so {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  direction: ltr;
  text-align: right;
}
.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: #eef2fa;
  color: var(--navy);
  white-space: nowrap;
}
.badge.green {
  background: #e3f6ea;
  color: #0e7a3a;
}
.badge.yellow {
  background: #fff4cc;
  color: #8a6500;
}
.badge.blue {
  background: #e5eeff;
  color: #1d4fb8;
}
.ocard .mini-tl {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.ocard .mini-tl i {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: #e3e8f1;
}
.ocard .mini-tl i.d {
  background: var(--green);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px;
}
.stat {
  background: var(--card);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat b {
  display: block;
  font-size: 18px;
  color: var(--navy);
}
.stat span {
  font-size: 11.5px;
  color: var(--muted);
}
.foot {
  padding: 14px 16px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-link {
  color: #8b95ab;
  font-size: 12px;
  text-decoration: none;
}
.steps {
  padding: 14px 16px 4px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 58px;
  z-index: 900;
}

/* styles.css — New order flow: steps, map, machines, day/time window, fields, summary and buttons. */
.step-bar {
  height: 6px;
  border-radius: 6px;
  background: #e7ebf3;
  overflow: hidden;
}
.step-bar span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--yellow);
  border-radius: 6px;
  transition: width 0.35s;
}
.step-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  margin: 6px 0 8px;
}
.step-labels span.on {
  color: var(--navy);
  font-weight: 700;
}
.ostep {
  padding: 6px 16px;
}
.q {
  font-size: 21px;
  font-weight: 800;
  margin: 12px 0;
}
.sub-q {
  font-size: 15px;
  margin: 18px 0 8px;
  font-weight: 700;
}
.map {
  background: #e6ebf2;
}
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.seg button {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 12px 4px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.seg button.on {
  border-color: var(--navy);
  background: #f5f8ff;
  color: var(--navy);
}
.pi {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: block;
}
.pi.diesel {
  background: linear-gradient(135deg, #f7c21b, #e0a800);
}
.pi.urea {
  background: linear-gradient(135deg, #4aa3ff, #1d6fd8);
}
.pi.both {
  background: linear-gradient(135deg, #f7c21b 50%, #4aa3ff 50%);
}
.mach {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}
.mach.on {
  border-color: #cfd9ee;
}
.mach-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chk {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid #c3cbdb;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: 15px;
}
.mach.on .chk {
  background: var(--navy);
  border-color: var(--navy);
}
.mach-name {
  flex: 1;
}
.mach-name b {
  display: block;
  font-size: 15px;
}
.mach-name span {
  font-size: 12.5px;
  color: var(--muted);
}
.mach-ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mode {
  display: flex;
  background: #eef1f7;
  border-radius: 12px;
  padding: 3px;
}
.mode button {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.mode button.on {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 4px #00000014;
}
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stepper button {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #eef1f7;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}
.stepper input {
  width: 70px;
  height: 36px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  direction: ltr;
}
.full-est {
  font-size: 13px;
  color: var(--muted);
}
.total-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff8dc;
  border: 1px solid #f4e1a1;
  border-radius: 14px;
  padding: 12px;
  margin: 6px 0 10px;
}
.total-bar b {
  font-size: 20px;
  color: var(--navy);
}
.days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.days::-webkit-scrollbar {
  display: none;
}
.day {
  flex: none;
  min-width: 74px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 9px 8px;
  text-align: center;
  position: relative;
}
.day b {
  display: block;
  font-size: 15px;
}
.day span {
  font-size: 12px;
  color: var(--muted);
}
.day.on {
  border-color: var(--navy);
  background: #f5f8ff;
}
.day .rec {
  position: absolute;
  top: -9px;
  right: 50%;
  transform: translate(50%);
  background: var(--yellow);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.windows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.windows button {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.windows button b {
  font-size: 15px;
}
.windows button span {
  font-size: 12.5px;
  color: var(--muted);
  direction: ltr;
}
.windows button.on {
  border-color: var(--navy);
  background: #f5f8ff;
}
.info-line {
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}
.field {
  background: #fff;
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1.5px solid var(--line);
}
.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.field input,
.field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 16px;
  padding: 2px 0;
  background: transparent;
  resize: none;
  color: var(--ink);
}
.field input[dir='ltr'] {
  text-align: right;
}
.summary {
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  margin: 14px 0;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.summary h4 {
  margin: 0 0 6px;
  font-size: 15px;
}
.summary .sr {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
.summary .sr:last-child {
  border: 0;
}
.summary .sr span:first-child {
  color: var(--muted);
}
.order-actions {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: #fffffff5;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  z-index: 1100;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 16.5px;
  padding: 0 18px;
  width: 100%;
  text-decoration: none;
}
.btn.primary {
  background: var(--navy);
  color: #fff;
}
.btn.primary:active {
  background: #0c2450;
}
.btn.ghost {
  background: #eef1f7;
  color: var(--navy);
}
.btn.big {
  height: 58px;
  font-size: 18px;
}
.btn.demo {
  background: #fff4cc;
  color: #7a5700;
  border: 1.5px dashed #e3b628;
  font-size: 15px;
}
.order-actions .btn.ghost {
  flex: 0 0 32%;
}
.app.ordering .bottomnav {
  display: none;
}
.confirm-hero {
  text-align: center;
  padding: 26px 16px 12px;
}
.check-anim {
  width: 86px;
  height: 86px;
  margin: 0 auto 10px;
}
.check-anim svg {
  width: 100%;
  height: 100%;
}
.check-anim circle {
  stroke: var(--green);
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: draw 0.7s ease forwards;
}
.check-anim path {
  stroke: var(--green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw 0.4s 0.6s ease forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.confirm-hero h2 {
  margin: 4px 0;
  font-size: 22px;
  font-weight: 800;
}
.so-num {
  font-size: 15px;
  margin: 6px 0;
}
.so-num b {
  direction: ltr;
  display: inline-block;
  background: #eef2fa;
  padding: 2px 10px;
  border-radius: 8px;
  color: var(--navy);
  letter-spacing: 0.5px;
}
.so-num b.prov::after {
  content: ' · מספר זמני';
  font-weight: 400;
  opacity: 0.7;
}
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 12px 16px;
  padding: 14px;
}
.card-title {
  margin: 0 0 10px;
  font-size: 16px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 16px;
}

/* styles.css — Order tracking: timeline, driver card, ETA, status and progress, truck on the map. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  position: relative;
  padding: 0 34px 16px 0;
  min-height: 38px;
}
.timeline li:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 22px;
  bottom: -2px;
  width: 2px;
  background: var(--line);
}
.timeline li:last-child:before {
  display: none;
}
.timeline li .tdot {
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cdd5e4;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
.timeline li.done .tdot {
  background: var(--green);
  border-color: var(--green);
}
.timeline li.done:before {
  background: var(--green);
}
.timeline li.now .tdot {
  border-color: var(--yellow);
  background: var(--yellow);
  box-shadow: 0 0 0 6px #f7c21b40;
  animation: pulse 1.4s infinite;
}
.timeline li b {
  display: block;
  font-size: 15px;
}
.timeline li span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}
.timeline li .src {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  background: #eef2fa;
  color: var(--navy);
  padding: 0 6px;
  border-radius: 6px;
  margin-inline-start: 6px;
  vertical-align: middle;
}
.timeline li:not(.done):not(.now) b {
  color: #9aa4b8;
}
.timeline.compact li {
  padding-bottom: 10px;
  min-height: 30px;
}
@keyframes pulse {
  0%,
  to {
    box-shadow: 0 0 0 4px #f7c21b59;
  }
  50% {
    box-shadow: 0 0 0 9px #f7c21b14;
  }
}
.drv-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drv-mini .avatar {
  width: 50px;
  height: 50px;
}
.track {
  position: relative;
}
.map.full {
  height: calc(100vh - 58px);
  height: calc(100dvh - 58px);
  width: 100%;
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translate(-50%);
  max-width: 480px;
  z-index: 1;
}
.app.tracking main {
  padding-bottom: 0;
}
.app.tracking .bottomnav {
  display: none;
}
.live-chip {
  position: fixed;
  top: 70px;
  right: max(12px, calc(50% - 228px));
  z-index: 500;
  background: #fff;
  border-radius: 20px;
  padding: 6px 12px 6px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 #14a44d99;
  animation: lp 1.6s infinite;
}
@keyframes lp {
  70% {
    box-shadow: 0 0 0 8px #14a44d00;
  }
  to {
    box-shadow: 0 0 #14a44d00;
  }
}
.sim-clock {
  position: fixed;
  top: 70px;
  left: max(12px, calc(50% - 228px));
  z-index: 500;
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  direction: ltr;
}
.sheet {
  position: relative;
  z-index: 600;
  margin-top: calc(100vh - 388px);
  margin-top: calc(100dvh - 388px);
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 30px #112f642e;
  padding: 8px 16px calc(16px + var(--safe-b));
  min-height: 340px;
}
.grab {
  width: 42px;
  height: 5px;
  border-radius: 5px;
  background: #d5dbe7;
  margin: 2px auto 10px;
}
.eta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.eta-label {
  font-size: 13px;
  color: var(--muted);
}
.eta-big {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  direction: rtl;
}
.status-pill {
  background: #fff4cc;
  color: #7a5700;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-pill.green {
  background: #e3f6ea;
  color: #0e7a3a;
}
.progress {
  height: 6px;
  border-radius: 6px;
  background: #eef1f7;
  margin: 12px 0;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--yellow), #f0a500);
  transition: width 0.4s;
}
.driver {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--navy);
  overflow: hidden;
  flex: none;
  border: 3px solid var(--yellow);
}
.avatar svg {
  width: 100%;
  height: 100%;
}
.driver-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13.5px;
}
.driver-info b {
  font-size: 16px;
}
.plate {
  direction: ltr;
  display: inline-block;
  background: #ffd200;
  color: #111;
  font-weight: 800;
  font-size: 12px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1.5px solid #111;
  letter-spacing: 0.5px;
}
.call-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 4px 12px #14a44d66;
}
.live-note {
  background: #f7f9ff;
  border: 1.5px solid #d8e2f6;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.ln-head {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
}
.rec {
  color: var(--red);
  font-size: 12px;
  animation: blink 1s infinite;
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}
.ln-litres {
  margin: 6px 0 4px;
}
.ln-litres b {
  font-size: 34px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.ln-line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 4px 0;
  border-top: 1px dashed #d8e2f6;
}
.ln-line b {
  font-variant-numeric: tabular-nums;
}
.ln-eh {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.ln-eh.got {
  color: #0b6b3a;
  font-weight: 700;
}
.dn-eh {
  display: block;
  font-size: 11.5px;
  color: #0b6b3a;
  font-weight: 700;
  margin-top: 2px;
}
.eh-opt {
  margin-top: 10px;
}
.ln-line.done b:after {
  content: ' \2713';
  color: var(--green);
}
.truck-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px #0000004d;
  display: grid;
  place-items: center;
  position: relative;
}
.truck-icon:before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: #f7c21b59;
  animation: lp2 1.8s infinite;
  z-index: -1;
}
@keyframes lp2 {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.site-icon {
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px #0000004d;
  display: grid;
  place-items: center;
}
.site-icon span {
  transform: rotate(45deg);
  color: #fff;
  font-size: 16px;
}
.depot-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  border: 2px solid var(--navy);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
}
.leaflet-container {
  font-family: inherit;
}
.note-sent {
  margin: 14px 16px 0;
  background: #e3f6ea;
  color: #0e7a3a;
  font-weight: 700;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
}

/* styles.css — Delivery notes (תעודות), tabs and the bottom bar. */
.dnote {
  background: #fff;
  margin: 12px 16px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  font-size: 13.5px;
  position: relative;
  overflow: hidden;
}
.dnote:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 30px, var(--yellow) 30px 60px);
}
.dn-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 12px;
}
.dn-head img {
  height: 44px;
}
.dn-head .t {
  text-align: left;
}
.dn-head h3 {
  margin: 0;
  font-size: 18px;
}
.dn-num {
  direction: ltr;
  font-weight: 800;
  color: var(--navy);
  font-size: 15px;
}
.dn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.dn-grid div span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}
.dn-grid div b {
  font-size: 14px;
}
.dn-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 12px;
}
.dn-table th {
  background: #f1f4fa;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  padding: 7px 6px;
  color: var(--muted);
}
.dn-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.dn-table tfoot td {
  font-weight: 800;
  border: 0;
  background: #fff8dc;
}
.dn-sign {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.dn-sign svg {
  width: 150px;
  height: 56px;
}
.dn-sign svg path {
  stroke: #1d4fb8;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
}
.dn-sign.drawing svg path {
  stroke-dashoffset: 600;
  animation: draw 1.6s 0.3s ease forwards;
}
.dn-foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.stamp {
  position: absolute;
  left: 16px;
  top: 96px;
  transform: rotate(-14deg);
  border: 3px solid var(--green);
  color: var(--green);
  font-weight: 900;
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 15px;
  opacity: 0.85;
}
.tabs {
  display: flex;
  gap: 6px;
  margin: 14px 16px;
  background: #e7ebf3;
  border-radius: 14px;
  padding: 4px;
}
.tabs button {
  flex: 1;
  padding: 9px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}
.tabs button.on {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 4px #00000014;
}
#ordersList {
  padding: 0 16px;
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 10px;
}
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(70px + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1100;
}
.bottomnav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 70px;
}
.bottomnav button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bottomnav button.on {
  color: var(--navy);
}
.bottomnav .nav-order span {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 30px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-top: -18px;
  box-shadow: 0 6px 16px #f7c21b8c;
}
.toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translate(-50%);
  z-index: 3000;
  background: var(--navy);
  color: #fff;
  padding: 11px 16px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 30px #00000040;
  width: calc(100% - 32px);
  max-width: 448px;
  animation: tin 0.3s ease;
}
@keyframes tin {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%);
  }
}

/* styles.css — Smaller screens: hero, cut-off, reorder, services, smart suggestions, switches, recurring, push, modal, rating, chips, splash. */
@media (min-width: 700px) {
  body {
    padding: 0;
  }
  .app {
    min-height: 100vh;
  }
}
@media print {
  body {
    background: #fff;
  }
  .app {
    box-shadow: none;
    max-width: none;
  }
  .topbar,
  .bottomnav,
  .no-print,
  .note-sent,
  .toast,
  .screen {
    display: none !important;
  }
  #screen-note {
    display: block !important;
  }
  .dnote {
    box-shadow: none;
    margin: 0;
  }
}
.logo {
  background: none;
  padding: 0;
  height: 36px;
}
.hero {
  position: relative;
  background: none;
  padding: 0 16px 6px;
  color: #fff;
}
.hero-photo {
  position: absolute;
  inset: 0 0 auto;
  height: 270px;
  background:
    linear-gradient(180deg, #112f648c, #112f6440 40%, #112f64eb),
    url(img/hero.jpg) center 62% / cover;
  z-index: 0;
}
.hero > *:not(.hero-photo) {
  position: relative;
  z-index: 1;
}
.hello {
  padding-top: 92px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.cutoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--navy);
  background: #fff;
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  box-shadow: var(--shadow);
}
.cutoff b {
  font-variant-numeric: tabular-nums;
}
.reorder {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 10px;
  margin: 0 -16px;
  padding-inline: 16px;
}
.reorder::-webkit-scrollbar {
  display: none;
}
.ro {
  flex: none;
  width: 230px;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
  text-align: right;
}
.ro b {
  display: block;
  font-size: 14.5px;
}
.ro span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.ro .ro-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: 11px;
}
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.svc {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow);
  padding: 0;
}
.svc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.svc:active img {
  transform: scale(1.05);
}
.svc span {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 8px 8px;
  background: linear-gradient(0deg, #112f64f2, #112f6400);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}
.smart {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #112f64, #1d4fb8);
  color: #fff;
  border-radius: 16px;
  padding: 12px;
  margin: 16px 0 4px;
}
.smart-ic {
  font-size: 22px;
}
.smart div {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.smart div b {
  font-size: 14px;
}
.smart div span {
  opacity: 0.85;
}
.smart button {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 11px;
  font-size: 14px;
}
.smart.applied button {
  background: #fff;
  color: var(--green);
}
.recur {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 14px 0 4px;
  border: 1.5px solid var(--line);
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.switch-row > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sw {
  width: 48px;
  height: 28px;
  border-radius: 20px;
  background: #d4dae6;
  position: relative;
  transition: background 0.2s;
  flex: none;
}
.sw:after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: right 0.2s;
}
.switch-row input:checked + .sw {
  background: var(--green);
}
.switch-row input:checked + .sw:after {
  right: 23px;
}
.switch-row input:focus-visible + .sw {
  outline: 3px solid var(--yellow);
}
.recur-days {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.recur-days button {
  flex: 1;
  height: 38px;
  border-radius: 11px;
  background: #eef1f7;
  font-weight: 700;
  color: var(--muted);
}
.recur-days button.on {
  background: var(--navy);
  color: #fff;
}
.push {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%);
  width: calc(100% - 20px);
  max-width: 460px;
  z-index: 4000;
  background: #fafafcf7;
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: 0 8px 24px #00000038;
  animation: pushIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.push img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: none;
}
.push > div {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.35;
  color: #111;
}
.push-top {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
}
.push-top span {
  color: #888;
  font-size: 12px;
}
@keyframes pushIn {
  0% {
    transform: translate(-50%, -120%);
  }
  to {
    transform: translate(-50%);
  }
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 3500;
  background: #0a14288c;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s;
}
.modal-card {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  padding: 22px 18px calc(18px + var(--safe-b));
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.modal-card h3 {
  margin: 4px 0;
  font-size: 19px;
}
.avatar.big {
  width: 72px;
  height: 72px;
}
.stars {
  display: flex;
  gap: 6px;
  direction: ltr;
}
.stars button {
  font-size: 38px;
  color: #d5dbe7;
  line-height: 1;
  transition:
    transform 0.15s,
    color 0.15s;
}
.stars button.on {
  color: var(--yellow);
  transform: scale(1.1);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
}
.chips button {
  background: #eef1f7;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}
.chips button.on {
  background: var(--navy);
  color: #fff;
}
.splash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.splash img {
  width: 220px;
  animation: pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.splash-sub {
  color: #cfd8ea;
  font-size: 14px;
}
.splash.out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* after a B38 retry the reloaded page shows its splash as the "טוען…" screen it came from (site/data.js r:1, index.html) */
.cdata-hold .splash > * {
  display: none;
}
.cdata-hold .splash::after {
  content: 'טוען…';
  color: #fff;
  font:
    600 18px system-ui,
    -apple-system,
    sans-serif;
}
@keyframes pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.photo-strip {
  height: 120px;
  border-radius: 16px;
  margin: 0 16px 4px;
  background: url(img/port.jpg) center/cover;
  position: relative;
  overflow: hidden;
}
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #0b1f45;
}
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}
.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  position: relative;
  flex: none;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

/* styles.css — App shell (v2): screens, bottom bar, home tiles, sheets, profile and integrations. */
.app.sub .bell {
  display: none;
}
.app.sub .topbar-title {
  text-align: center;
  margin-left: 40px;
}
main {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}
.screen {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: translate(-100%);
  visibility: hidden;
  transition:
    transform 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
    visibility 0s 0.34s;
  animation: none;
  will-change: transform;
}
.screen.on {
  transform: none;
  visibility: visible;
  transition:
    transform 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
    visibility 0s;
}
.screen.left {
  transform: translate(30%);
}
.screen.left.dim:after {
  content: '';
  position: absolute;
  inset: 0;
  background: #00000014;
}
.no-anim,
.no-anim .screen {
  transition: none !important;
}
.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.list-pad {
  padding: 14px 16px 24px;
}
.bottomnav {
  position: relative;
  left: auto;
  transform: none;
  flex: none;
  max-width: none;
  height: calc(64px + var(--safe-b));
}
.bottomnav button {
  min-width: 56px;
  font-size: 11.5px;
}
.bottomnav .nav-order span {
  width: 50px;
  height: 50px;
  margin-top: -22px;
}
.app.hide-nav .bottomnav {
  display: none;
}
.home {
  overflow: hidden;
}
.home .hero {
  flex: none;
  position: relative;
  height: clamp(150px, 26dvh, 220px);
  padding: 0 18px;
  display: flex;
  align-items: flex-end;
}
.home .hero-photo {
  height: 100%;
  inset: 0;
}
.home .hello {
  padding: 0 0 34px;
}
.home .hello-name {
  font-size: clamp(20px, 5.8vw, 24px);
  margin: 0 0 4px;
}
.home .demo-tag {
  margin: 0;
}
.home-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4dvh, 12px);
  padding: 0 16px clamp(8px, 1.6dvh, 14px);
  margin-top: -28px;
  position: relative;
  z-index: 2;
  min-height: 0;
}
.order-cta {
  padding: clamp(12px, 2dvh, 18px) 16px;
  border-radius: 22px;
}
.cta-main {
  font-size: clamp(22px, 6.4vw, 27px);
}
.cta-icon {
  width: 54px;
  height: 54px;
}
.cutoff {
  margin: 0;
  padding: 7px 12px;
  font-size: 12.5px;
}
.next {
  flex: none;
}
.next:empty {
  display: none;
}
.next .ocard {
  margin: 0;
  padding: 11px 13px;
}
.tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  min-height: 0;
  max-height: 260px;
}
.tile {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  transition: transform 0.12s;
}
.tile:active {
  transform: scale(0.95);
}
.tile b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.tile small {
  font-size: 11px;
  color: var(--muted);
}
.ti {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
}
.ti svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-track {
  background: #e3f6ea;
  color: #0e7a3a;
}
.t-orders {
  background: #e5eeff;
  color: #1d4fb8;
}
.t-notes {
  background: #fff4cc;
  color: #8a6500;
}
.t-reorder {
  background: #fde8e8;
  color: #c0392b;
}
.t-sites {
  background: #eef2fa;
  color: var(--navy);
}
.t-profile {
  background: #f1ecff;
  color: #6b46c1;
}
.steps {
  position: relative;
  top: auto;
  flex: none;
}
.order-actions {
  position: relative;
  left: auto;
  transform: none;
  max-width: none;
  flex: none;
}
.map.full {
  position: absolute;
  height: auto;
  inset: 0;
  transform: none;
  max-width: none;
  width: 100%;
}
.live-chip {
  position: absolute;
  top: 12px;
  right: 12px;
}
.sim-clock {
  position: absolute;
  top: 12px;
  left: 12px;
}
.sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  min-height: 0;
  max-height: 52%;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: max-height 0.35s ease;
}
.sheet.expanded {
  max-height: 88%;
}
.grab {
  display: block;
  width: 100%;
  height: 16px;
  background: none;
  position: relative;
  margin: 0 0 6px;
}
.grab:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translate(-50%);
  width: 42px;
  height: 5px;
  border-radius: 5px;
  background: #d5dbe7;
}
.stack.tight {
  padding: 0 0 12px;
}
.toast {
  top: calc(64px + env(safe-area-inset-top, 0px));
}
.lead {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 14px;
}
.sites-map {
  height: 230px;
}
.add-site {
  margin-top: 12px;
}
.profile-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, #112f64, #1d4fb8);
  color: #fff;
  border-radius: 18px;
  padding: 16px;
}
.profile-card b {
  display: block;
  font-size: 17px;
}
.profile-card span {
  display: block;
  font-size: 12.5px;
  opacity: 0.85;
}
.pc-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--yellow);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  flex: none;
}
.sec-h {
  font-size: 14px;
  color: var(--muted);
  margin: 18px 4px 8px;
}
.set-list {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.set {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.set:last-child {
  border: 0;
}
.set > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.integr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.integr div {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}
.integr b {
  color: var(--ink);
  font-size: 14px;
}
.integr i.ok {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px #e3f6ea;
}
.center {
  text-align: center;
}
#screen-profile .btn {
  margin-top: 8px;
}
.splash-bar {
  width: 120px;
  height: 4px;
  border-radius: 4px;
  background: #ffffff26;
  overflow: hidden;
}
.splash-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--yellow);
  animation: sbar 1.1s ease forwards;
}
@keyframes sbar {
  to {
    width: 100%;
  }
}
.ro-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.ro-card img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.ro-card .m {
  flex: 1;
  min-width: 0;
}
.ro-card b {
  display: block;
  font-size: 15px;
}
.ro-card span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}
.ro-card .go {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 12px;
  flex: none;
}
@media (min-width: 520px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .app {
    height: min(100dvh, 900px);
    border-radius: 28px;
    width: 430px;
  }
}
@media print {
  html,
  body {
    height: auto;
    overflow: visible;
  }
  .app {
    height: auto;
    display: block;
  }
  main {
    overflow: visible;
  }
  .screen {
    position: static;
    transform: none;
    visibility: visible;
  }
  #screen-note .scroll {
    overflow: visible;
  }
}
@media print {
  .screen {
    display: none !important;
  }
  #screen-note {
    display: block !important;
  }
  .bottomnav,
  .topbar,
  .splash,
  .modal,
  .push {
    display: none !important;
  }
}
.spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mini-pi {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  vertical-align: middle;
  margin-inline-end: 5px;
}
.card-acts {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.mini-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 10px;
  background: #eef1f7;
  color: var(--navy);
}
.mini-btn.y {
  background: var(--yellow);
}
.btn:disabled {
  opacity: 0.85;
}
.ocard {
  border: 0;
  font: inherit;
  color: inherit;
}
.recur-days {
  flex-wrap: wrap;
}
.recur-days .all {
  flex: 1 0 100%;
}
.prefill {
  font-size: 13px;
  font-weight: 600;
  color: #1d4fb8;
  background: #e5eeff;
  border-radius: 10px;
  padding: 7px 10px;
  margin: -2px 0 10px;
}
.app.auth .topbar {
  display: none;
}

/* styles.css — Login and one-time code. */
.login {
  background: var(--navy);
}
.login .scroll {
  display: flex;
  flex-direction: column;
}
.login-hero {
  text-align: center;
  color: #fff;
  padding: calc(36px + env(safe-area-inset-top, 0px)) 20px 26px;
  background:
    linear-gradient(180deg, #112f6499, #112f64f2),
    url(img/port.jpg) center/cover;
}
.login-hero img {
  width: 170px;
}
.login-hero h1 {
  margin: 10px 0 2px;
  font-size: 24px;
}
.login-hero p {
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}
.login-body {
  flex: 1;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  margin-top: -14px;
  padding: 6px 16px 24px;
  position: relative;
}
.login-body .btn {
  margin-top: 6px;
}
.otp-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
}
.otp-ic {
  font-size: 34px;
}
.otp-head b {
  font-size: 18px;
}
.otp-head span {
  color: var(--muted);
  font-size: 14px;
}
.otp {
  display: flex;
  gap: 8px;
  justify-content: center;
  direction: ltr;
}
.otp i {
  width: 46px;
  height: 56px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  transition: border-color 0.2s;
}
.otp i.f {
  border-color: var(--navy);
}
.otp-auto {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
}
.approver {
  margin-top: 14px;
  text-align: center;
  background: #e3f6ea;
  color: #0e7a3a;
  font-weight: 800;
  border-radius: 14px;
  padding: 12px;
  animation: fadeIn 0.3s;
}
.card-mock {
  background: linear-gradient(135deg, #112f64, #2a5bc4);
  color: #fff;
  border-radius: 16px;
  padding: 16px;
  margin: 6px 0 10px;
  box-shadow: var(--shadow);
}
.cm-top,
.cm-bot {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.9;
}
.cm-num {
  font-size: 20px;
  letter-spacing: 2px;
  margin: 18px 0 12px;
  font-weight: 700;
  text-align: left;
}
.who {
  background: #e3f6ea;
  color: #0e7a3a;
  font-weight: 700;
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 14px;
}
.sec-h.first {
  margin-top: 4px;
}
.rc {
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.rc .switch-row b {
  font-size: 15px;
}
.rc .nx {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: #f1f4fa;
  border-radius: 10px;
  padding: 6px 10px;
}
.rc.off .nx {
  color: var(--muted);
}
.rc .rdays {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.rc .rdays span {
  font-size: 12px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eef1f7;
  color: #9aa4b8;
}
.rc .rdays span.on {
  background: var(--navy);
  color: #fff;
}
.days {
  padding-top: 11px;
  margin-top: -6px;
}

/* styles.css — Order done screen, messages and chat. */
.done-st {
  margin-top: 8px;
  display: inline-block;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #eef2fa;
  color: #112f64;
  transition: background 0.4s;
}
.done-st.s1,
.done-st.s2,
.done-st.s3 {
  background: #e3f6ea;
  color: #0e7a3a;
}
.done-st b {
  font-weight: 800;
}
.dn-lic {
  display: block;
  font-size: 10.5px;
  color: #6b7690;
  font-weight: 600;
  text-align: right;
}
.dn-table th,
.dn-table td {
  padding: 6px 4px;
}
.dn-table.eh {
  font-size: 12px;
}
.dn-table.eh th {
  font-size: 10.5px;
  line-height: 1.2;
}
.dn-ok {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #0e7a3a;
}
.ro-val {
  font-weight: 800;
  color: #0e7a3a;
  font-size: 13px;
  white-space: nowrap;
}
.center-notes {
  margin: 6px 0 12px;
  border: 1px solid #e3e8f2;
  border-radius: 12px;
  padding: 8px 12px;
  background: #fafbfe;
}
.center-notes summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #112f64;
}
.center-notes .field {
  margin: 8px 0 0;
}
.dn-sign {
  position: relative;
}
.dn-sign .stamp {
  position: absolute;
  left: 38%;
  top: 14px;
  right: auto;
}
.dn-sub {
  display: block;
  font-size: 11px;
  color: #6b7690;
  font-weight: 600;
  text-align: right;
  margin-top: 1px;
}
.msg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: #eef3ff;
  color: var(--navy);
  font-weight: 800;
  font-size: 15px;
  border: 1.5px solid #d5e0f5;
  position: relative;
  cursor: pointer;
  font-family: inherit;
}
.msg-btn small {
  font-weight: 600;
  font-size: 12.5px;
  color: #7a869c;
}
.msg-btn.off {
  background: #f3f4f7;
  color: #9aa3b2;
  border-color: #e6e8ee;
  cursor: default;
}
#doneDriverCard .msg-btn {
  margin: 12px 0 0;
}
.ubadge {
  background: #e5322d;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  margin-inline-start: 4px;
}
.chat-modal {
  z-index: 3600;
}
.chat-card {
  background: #f4f6fa;
  width: 100%;
  max-width: 480px;
  height: 82vh;
  height: 82dvh;
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheetUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sheetUp {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
.chat-grab {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: #cfd5e0;
  margin: 8px auto 2px;
  flex: none;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 10px;
  background: #f4f6fa;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.chat-head .avatar.sm {
  width: 40px;
  height: 40px;
}
.ch-t {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ch-t b {
  font-size: 16px;
}
.ch-t span {
  font-size: 12.5px;
  color: #6b7690;
}
.chat-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e4e8f0;
  border: 0;
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
}
.chat-demo {
  font-size: 11.5px;
  color: #7a6200;
  background: #fff6d6;
  text-align: center;
  padding: 5px 10px;
  flex: none;
}
.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-day {
  align-self: center;
  font-size: 11.5px;
  color: #7a869c;
  background: #e7ebf2;
  border-radius: 10px;
  padding: 3px 10px;
  margin-bottom: 4px;
}
.chat-empty {
  align-self: center;
  text-align: center;
  font-size: 13px;
  color: #7a869c;
  margin-top: 14px;
  max-width: 240px;
}
.bub {
  max-width: 78%;
  padding: 7px 11px 5px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.2s;
}
.bub i {
  font-style: normal;
  font-size: 10.5px;
  opacity: 0.75;
  align-self: flex-end;
  margin-top: 2px;
}
.bub i em {
  font-style: normal;
  letter-spacing: -2px;
  color: #9aa3b2;
}
.bub i em.rd {
  color: #3aa0ff;
}
.bub.me {
  align-self: flex-start;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bub.me i em {
  color: #b8c4dc;
}
.bub.me i em.rd {
  color: #7cc4ff;
}
.bub.drv {
  align-self: flex-end;
  background: #fff;
  color: #14213d;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px #0000000f;
}
.bub.typing span {
  display: flex;
  gap: 4px;
  padding: 4px 2px;
}
.bub.typing b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aab3c3;
  animation: tdot 1s infinite;
}
.bub.typing b:nth-child(2) {
  animation-delay: 0.15s;
}
.bub.typing b:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes tdot {
  0%,
  60%,
  to {
    opacity: 0.3;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.chat-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 12px;
  flex: none;
  scrollbar-width: none;
}
.chat-chips::-webkit-scrollbar {
  display: none;
}
.chat-chips button {
  flex: none;
  white-space: nowrap;
  border: 1.5px solid #d5e0f5;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: 18px;
  font-family: inherit;
  cursor: pointer;
}
.chat-input {
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(10px + var(--safe-b));
  background: #fff;
  border-top: 1px solid var(--line);
  flex: none;
}
.chat-input input {
  flex: 1;
  border: 1.5px solid #dfe4ec;
  border-radius: 22px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  background: #f7f8fb;
  min-width: 0;
}
.chat-input button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
}
@media print {
  .chat-modal,
  .msg-btn {
    display: none !important;
  }
}

/* styles.css — Requests and approvals, users and their chips, forms, demo. */
.req-link {
  display: block;
  margin: 14px auto 0;
  font-size: 14.5px;
  color: var(--muted);
  background: none;
}
.req-link b {
  color: var(--navy);
  text-decoration: underline;
}
.hp-found {
  background: #e3f6ea;
  color: #0e7a3a;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 12px;
  padding: 8px 12px;
  margin: 2px 0 10px;
}
.hp-found.bad {
  background: #fdeaea;
  color: #b42318;
}
#lgReq .btn,
#lgCode .btn {
  margin-top: 8px;
}
.otp-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  border: 0;
  direction: ltr;
  caret-color: transparent;
}
.otp.bad {
  animation: shake 0.35s;
}
@keyframes shake {
  25% {
    transform: translate(-6px);
  }
  75% {
    transform: translate(6px);
  }
}
.code-demo {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
}
.set-btn {
  width: 100%;
  text-align: right;
  background: #fff;
  gap: 8px;
}
.chev {
  color: #b3bccd;
  font-size: 22px;
  line-height: 1;
}
.cnt-badge {
  background: #e5372b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  padding: 0 6px;
}
.seg.seg2 {
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.seg button small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.appr-head {
  background: #f1f5ff;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}
.appr-head b {
  color: var(--navy);
  font-size: 15px;
}
.appr-head span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.req-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 8px;
  border-right: 4px solid #f0a500;
}
.req-card .rc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.req-card b {
  font-size: 15.5px;
}
.req-card .rc-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.req-code {
  margin: 8px 0;
  background: #fff8e1;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  color: #7a5700;
}
.req-code b {
  direction: ltr;
  display: inline-block;
  letter-spacing: 2px;
  font-size: 15px;
}
.rc-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rc-btns .btn {
  height: 44px;
  font-size: 15px;
}
.btn.danger {
  color: #b42318;
}
.u-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.u-row:last-child {
  border: 0;
}
.u-row .u-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.u-row b {
  font-size: 15px;
}
.u-row .u-ph {
  font-size: 12px;
  color: var(--muted);
  direction: ltr;
}
.uchips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.uchip {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
  background: #eef1f7;
  color: var(--navy);
}
.uchip.r-admin {
  background: #112f64;
  color: #fff;
}
.uchip.r-ord {
  background: #e5eeff;
  color: #1d4fb8;
}
.uchip.r-view {
  background: #f1f3f7;
  color: #3a4660;
}
.uchip.lim {
  background: #fff4cc;
  color: #8a6500;
}
.uchip.wait {
  background: #fdeee0;
  color: #b54708;
}
.form-card {
  text-align: right;
  align-items: stretch;
  max-height: 88vh;
  overflow: auto;
}
.form-card h3 {
  text-align: center;
}
.form-card .chips {
  justify-content: flex-start;
}
.fl {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}
#apCap {
  width: 52px;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  padding: 0;
}
.oa-tag {
  font-size: 12px;
  font-weight: 800;
  color: #6b46c1;
  background: #f1ecff;
  border-radius: 20px;
  padding: 4px 10px;
}
.oa-box {
  background: #f6f8fc;
  border-radius: 14px;
  padding: 10px 12px;
  width: 100%;
  text-align: right;
  font-size: 13.5px;
  line-height: 1.6;
}
.oa-box .reason {
  display: inline-block;
  margin-top: 4px;
}
.oa-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.link-btn {
  background: none;
  color: var(--muted);
  font-size: 14px;
  padding: 4px;
}
.badge.orange {
  background: #fdeee0;
  color: #b54708;
}
.timeline li.wait .tdot {
  background: #f0a500;
  border-color: #f0a500;
}
.nw {
  white-space: nowrap;
  display: inline-block;
}
.demo-hint {
  margin: 14px 0 6px;
  padding: 10px 12px;
  border: 1px dashed #c9d3e6;
  border-radius: 14px;
  background: #f6f8fc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.demo-hint b {
  color: #112f64;
  font-size: 12px;
}
.demo-hint button {
  all: unset;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e3e8f2;
  color: #1d2a44;
}
.demo-hint button:active {
  background: #eef2fa;
}
.demo-hint bdi {
  color: #5b6782;
  font-variant-numeric: tabular-nums;
}
.auto-prod {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f3f6fb;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  color: #33415e;
  margin: -4px 0 12px;
  line-height: 1.45;
}
.auto-prod .pi {
  flex: none;
  margin-top: 2px;
}

/* styles.css — Machines and products, big numbers, clock and fee. */
.mach.sub {
  margin-top: -6px;
  margin-inline-start: 22px;
  border-style: dashed;
  background: #f7fbff;
}
.mach.sub .chk {
  background: #e7f1fb;
  color: #1d6fb8;
  border-color: #bcd7ef;
}
.mach.sub .mach-top {
  cursor: default;
}
.sr.sr-lines span:last-child {
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
}
.ltr-num {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
}
.otp-head .ltr-num,
.ltr-num {
  display: inline-block;
  direction: ltr;
  unicode-bidi: bidi-override;
}
.prod-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 4px;
}
.prod-row button {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 6px;
  font-size: 15.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}
.prod-row button.on {
  border-color: var(--navy);
  background: #f5f8ff;
  color: var(--navy);
}
.prod-row button:disabled {
  opacity: 0.45;
}
.pi-pair {
  display: flex;
  gap: 4px;
}
.prod-note {
  margin: 2px 2px 12px;
}
.day-big {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.dbig {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: right;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.dbig .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c3cbdb;
  position: relative;
  flex: none;
}
.dbig.on {
  border-color: var(--navy);
  background: #f7f9ff;
}
.dbig.on .radio {
  border-color: var(--navy);
}
.dbig.on .radio:after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--navy);
}
.dbig .dm {
  flex: 1;
  min-width: 0;
}
.dbig .dm b {
  display: block;
  font-size: 17px;
  color: var(--navy);
}
.dbig .dm span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}
.dbadges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.bdg {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.bdg.free {
  background: #e3f6ea;
  color: #0d7a37;
}
.bdg.rec {
  background: var(--yellow);
  color: var(--navy);
}
.bdg.fee {
  background: #fff1e0;
  color: #b35a00;
}
.sameday-note {
  background: #fff6e8;
  border: 1px solid #ffd9a8;
  color: #8a4a00;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.other-d {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin: 6px 2px;
}
.small-days .day {
  padding-top: 8px;
  padding-bottom: 8px;
}
.sr-fee span:last-child {
  color: #b35a00;
  text-align: left;
}
.sr-fee small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
}
.sd-fee {
  display: block;
  color: #b35a00;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 4px;
}
.mach.sub .mach-top {
  padding-inline-start: 4px;
}
.mach.sub.u-none {
  background: #f4f5f8;
  border-color: #dfe3ea;
  opacity: 0.92;
}
.mach.sub.u-none .mach-name b,
.mach.sub.u-none .mach-name span {
  color: #8a93a3;
}
.mach.sub.u-none .mini-pi {
  filter: grayscale(1);
  opacity: 0.55;
}
.mach.sub.u-none .full-est {
  color: #9aa3b2;
}
.mode.mode3 button {
  padding: 7px 9px;
  font-size: 12.5px;
  white-space: nowrap;
}
.mach.sub .mach-ctl {
  flex-wrap: wrap;
  gap: 8px;
}
.cut-info {
  background: #eef4ff;
  border: 1px solid #c9d8f5;
  color: #1d3566;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.seg3 {
  display: inline-flex;
  background: #eef1f6;
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.seg3 button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--ink);
  white-space: nowrap;
}
.seg3 button.on {
  background: #fff;
  box-shadow: 0 1px 3px #0000001f;
  font-weight: 700;
  color: var(--navy);
}
.dbig .dm i.late-line {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #b35a00;
  margin-top: 2px;
}
.fee-ack {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff6e8;
  border: 1.5px solid #ffd9a8;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13.5px;
  color: #8a4a00;
  cursor: pointer;
}
.fee-ack input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  accent-color: #b35a00;
}
.fee-ack.on {
  border-color: #0d7a37;
  background: #effaf3;
  color: #0d5a2a;
}
.fee-ack.need {
  border-color: #d93025;
  box-shadow: 0 0 0 3px #d9302526;
}
.recur-cut {
  margin-top: 8px;
}
.icon-btn.back {
  width: 52px;
  height: 52px;
  margin-inline-start: -6px;
  border-radius: 16px;
  background: #ffffff29;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn.back:before {
  content: '';
  position: absolute;
  inset: -6px -10px;
}
.icon-btn.back svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.8;
}
.icon-btn.back:active {
  background: #ffffff4d;
  transform: scale(0.94);
}

/* styles.css — Home tiles (v3), entry cards and the occasional-order entry (address, kind, litres, urea, summary). */
.home .hero {
  height: clamp(104px, 16dvh, 160px);
}
.home .hello {
  padding: 0 0 30px;
}
.home-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: clamp(6px, 1.1dvh, 10px);
  padding-bottom: 10px;
}
.home .order-cta {
  padding: clamp(10px, 1.5dvh, 15px) 14px;
}
.home .cta-icon {
  width: 46px;
  height: 46px;
}
.home .cutoff {
  font-size: 11.5px;
  padding: 6px 10px;
  line-height: 1.35;
}
.tiles {
  flex: none;
  grid-auto-rows: minmax(72px, auto);
  max-height: none;
  gap: 8px;
}
.tile {
  padding: 7px 4px;
  gap: 1px;
}
.tile b {
  font-size: 13px;
}
.tile small {
  font-size: 10.5px;
}
.ti {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  margin-bottom: 2px;
}
.ti svg {
  width: 20px;
  height: 20px;
}
.topbar {
  height: calc(60px + env(safe-area-inset-top, 0px));
  min-height: calc(60px + env(safe-area-inset-top, 0px));
}
html,
body,
button,
a {
  touch-action: manipulation;
}
.icon-btn.back {
  z-index: 5;
}
.icon-btn.back.pressed {
  background: #ffffff57;
  transform: scale(0.92);
}
.screen {
  transition-duration: 0.22s !important;
}
.lg-back {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 20;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff3;
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lg-back:active {
  background: #ffffff59;
}
.lg-back[hidden] {
  display: none;
}
.choose-q {
  margin: 18px 2px 12px;
  font-size: 19px;
  color: var(--ink);
  text-align: center;
}
.entry-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 20px;
  padding: 18px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  text-align: right;
  transition:
    transform 0.12s,
    border-color 0.15s;
}
.entry-card:active {
  transform: scale(0.98);
  border-color: var(--navy);
}
.ec-ic {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #e8eefb;
}
.ec-ic svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ec-ic.occ {
  background: #fff3c4;
}
.ec-ic.occ svg {
  stroke: #8a6200;
}
.ec-t {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ec-t b {
  font-size: 18px;
  color: var(--navy);
}
.ec-t small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.ec-arr {
  flex: none;
  font-size: 30px;
  color: var(--navy);
  opacity: 0.5;
  line-height: 1;
}
.choose-foot {
  margin-top: 6px;
}
.oc-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 4px;
  color: var(--muted);
}
.oc-links button {
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: underline;
  padding: 6px;
}
.oc-links[hidden] {
  display: none;
}
.tiles.tiles3 {
  flex: none;
  grid-auto-rows: minmax(92px, auto);
  max-height: none;
}
.ohome .next:empty {
  display: none;
}
#screen-oorder .scroll,
#screen-opay .scroll,
#screen-oprofile .scroll {
  padding-bottom: 16px;
}
.oq-labels span {
  flex: 1;
  text-align: center;
}
.oq-map {
  height: 200px;
}
.pin-hint {
  margin: -6px 2px 10px;
  text-align: center;
}
.loc-btn {
  margin-bottom: 10px;
  height: 48px;
  font-size: 15.5px;
}
.spin.dark {
  border-color: #112f6440;
  border-top-color: var(--navy);
}
.addr-sug {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 10px;
}
.addr-sug:empty {
  display: none;
}
.addr-sug button {
  text-align: right;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
}
.addr-sug button:active {
  background: #eef2fa;
}
.kind-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.kind {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 8px 2px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.1s;
}
.kind:active {
  transform: scale(0.95);
}
.kind .kic {
  font-size: 24px;
  line-height: 1.1;
}
.kind b {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.15;
  text-align: center;
}
.kind small {
  font-size: 10.5px;
  color: var(--muted);
}
.kind.on {
  border-color: var(--navy);
  background: #f5f8ff;
}
.kind i {
  position: absolute;
  top: -6px;
  left: -4px;
  background: var(--navy);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.oitem {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.25s;
}
.oi-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oi-top .kic {
  font-size: 22px;
}
.oi-top b {
  font-size: 16px;
  flex: 1;
}
.oi-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f3f8;
  color: var(--muted);
  font-size: 14px;
}
.seg2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #eef1f6;
  border-radius: 12px;
  padding: 3px;
}
.seg2 button {
  padding: 9px 4px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.seg2 button small {
  font-weight: 500;
  font-size: 11px;
}
.seg2 button.on {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 4px #0000001a;
}
.lit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.lit-row button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef1f7;
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
}
.lit-row input {
  width: 96px;
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}
.lit-row.sm input {
  width: 80px;
  height: 36px;
  font-size: 15px;
}
.lit-row span {
  color: var(--muted);
  font-size: 14px;
}
.urea-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 9px;
}
.urea-row .seg3 {
  align-self: flex-start;
}
.seg3.sm button {
  font-size: 12.5px;
  padding: 6px 9px;
}
.empty-sm {
  text-align: center;
  color: var(--muted);
  padding: 18px 8px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px dashed var(--line);
  margin-bottom: 10px;
}
#oqAckL {
  margin: 0 0 12px;
}
#oqAckL[hidden] {
  display: none;
}
#oqAckL i {
  font-style: normal;
}
.sum-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.sum-row:last-child {
  border: 0;
}
.sum-row span {
  flex: none;
  width: 76px;
  color: var(--muted);
}
.sum-row b {
  font-weight: 600;
  line-height: 1.45;
}
.price-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  font-size: 14px;
}
.pr-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f7;
}
.pr-row span {
  color: #3b4660;
}
.pr-row b {
  white-space: nowrap;
}
.pr-row.fee span,
.pr-row.fee b {
  color: #b35a00;
}
.pr-row.tot b {
  font-size: 20px;
  color: var(--navy);
}
.pr-row small {
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
}
.pr-row.hold {
  background: #eef4ff;
  margin: 2px -8px 0;
  padding: 9px 8px;
  border-radius: 10px;
  border: 0;
}
.pr-row.hold b {
  color: var(--navy);
}
.pr-demo {
  text-align: left;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.est-note {
  margin: 10px 0;
  background: #fff8dc;
  border: 1px solid #f4e1a1;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #6b5200;
}

/* styles.css — Occasional order: payment pages and how-it-works. */
.pay-how {
  background: #e9f7ef;
  border: 1px solid #bfe6cd;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0d5a2a;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.pay .scroll {
  background: #e9edf3;
}
.pg-frame {
  margin: 12px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px #0a142824;
  border: 1px solid #d9dfe9;
}
.pg-url {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  background: #f3f5f8;
  border-bottom: 1px solid #e3e7ee;
  padding: 8px 10px;
  font-size: 12px;
  color: #2c7a3f;
  font-family: ui-monospace, Menlo, monospace;
}
.pg-url span[dir] {
  color: #3b4660;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-label {
  background: #0f1f3a;
  color: #fff;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px;
}
.pg-body {
  padding: 14px 14px 16px;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
}
.pg-body[hidden] {
  display: none;
}
.pg-merchant {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-end;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #edf0f5;
}
.pg-merchant div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pg-merchant b {
  font-size: 14px;
}
.pg-amt {
  text-align: left;
  align-items: flex-end;
}
.pg-amt b {
  font-size: 22px;
  color: #0f1f3a;
}
.pg-field {
  margin-bottom: 10px;
  flex: 1;
}
.pg-field label {
  display: block;
  font-size: 12.5px;
  color: #4a5570;
  margin-bottom: 4px;
  font-weight: 600;
}
.pg-in {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #cfd6e2;
  border-radius: 10px;
  background: #fbfcfe;
}
.pg-in:focus-within {
  border-color: #2463eb;
  box-shadow: 0 0 0 3px #2463eb26;
  background: #fff;
}
.pg-in input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  padding: 11px 12px;
  min-width: 0;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.pg-in input[dir='ltr'] {
  text-align: left;
}
.pg-brand {
  position: absolute;
  right: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #1a3fa8;
}
.pg-row {
  display: flex;
  gap: 10px;
}
.pg-save {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: #3b4660;
  margin: 4px 0 12px;
}
.pg-save input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #2463eb;
}
.pg-err {
  background: #fdecec;
  color: #b42318;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  margin-bottom: 10px;
  font-weight: 600;
}
.btn.pg-btn {
  background: #1f8f4e;
  color: #fff;
  font-size: 17px;
}
.btn.pg-btn:active {
  background: #187540;
}
.pg-demo {
  display: block;
  margin: 10px auto 0;
  font-size: 13px;
  color: #7a5700;
  background: #fff4cc;
  border: 1.5px dashed #e3b628;
  border-radius: 10px;
  padding: 7px 12px;
}
.pg-facts {
  list-style: none;
  margin: 14px 0 6px;
  padding: 10px 12px;
  background: #f5f7fb;
  border-radius: 12px;
  font-size: 13px;
  color: #33405c;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.4;
}
.pg-badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.pg-badges span {
  font-size: 10.5px;
  font-weight: 800;
  color: #5b6782;
  border: 1px solid #d5dbe6;
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: 0.4px;
}
.pg-ok {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 16px 30px;
}
.pg-ok h2 {
  margin: 6px 0 2px;
  color: #0e7a3a;
}
.tds {
  align-items: center;
  z-index: 4000;
}
.tds-card {
  border-radius: 20px;
  max-width: 360px;
  margin: 16px;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.tds-top {
  width: 100%;
  background: #0f1f3a;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.tds-top span {
  font-size: 11.5px;
  opacity: 0.75;
}
.tds-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tds-ic {
  font-size: 36px;
}
.tds-code {
  width: 180px;
  height: 50px;
  border: 1.5px solid #cfd6e2;
  border-radius: 12px;
  text-align: center;
  font-size: 24px;
  letter-spacing: 6px;
  font-weight: 800;
  outline: 0;
}
.tds-code:focus {
  border-color: #2463eb;
}
.op-card {
  display: flex;
  gap: 14px;
  align-items: center;
}
.op-av {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  font-size: 24px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.op-card b {
  font-size: 18px;
}
.occ-chip {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #7a5200;
  background: #fff1c2;
  border: 1px solid #f1d27a;
  border-radius: 8px;
  padding: 2px 8px;
}
.tok-row {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #f6f8fc;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 8px;
}
.tok-row > div {
  flex: 1;
}
.tok-ic {
  font-size: 26px;
}
#opLogout {
  margin: 16px auto;
  width: calc(100% - 32px);
}
.pay-done {
  background: #e9f7ef;
  border: 1px solid #bfe6cd;
  color: #0d5a2a;
  font-size: 14px;
  line-height: 1.5;
}
.pay-done[hidden] {
  display: none;
}
@media (max-height: 700px) {
  .entry-card {
    padding: 14px;
  }
  .ec-ic {
    width: 50px;
    height: 50px;
  }
  .choose-q {
    margin: 14px 2px 10px;
  }
  .kind .kic {
    font-size: 21px;
  }
}
#screen-ohome,
#screen-oorder,
#screen-opay,
#screen-oprofile {
  overflow: clip;
}
.pg-row .pg-field {
  min-width: 0;
}
.pg-in input {
  width: 100%;
}
.oc-links {
  gap: 18px;
}
.how-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 13.5px;
}
.how-card b {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 14.5px;
}
.how-card ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #3b4660;
}
.how-card li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.how-card li span {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.app {
  overflow: clip;
}
main {
  overflow: clip;
}

/* styles.css — Occasional order: order details, price box, calculator, fuel and trust/help. */
.app.occ-mode #bottomnav {
  display: none;
}
.app:not(.occ-mode) #bottomnavOcc {
  display: none;
}
.app.hide-nav #bottomnavOcc {
  display: none;
}
.odash .scroll {
  padding-bottom: 18px;
  background: var(--bg);
}
.od-hero {
  position: relative;
  color: #fff;
  padding: 16px 18px 64px;
  overflow: hidden;
}
.od-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #112f64c7, #112f648c 45%, #112f64f5),
    url(img/hero.jpg) center 60% / cover;
  z-index: 0;
}
.od-hero > *:not(.od-photo) {
  position: relative;
  z-index: 1;
}
.od-hi {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  opacity: 0.92;
}
.od-hi b {
  font-size: 15px;
  font-weight: 700;
}
.od-title {
  margin: 10px 0 2px;
  font-size: clamp(27px, 8vw, 32px);
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.od-title:after {
  content: '';
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 3px;
  background: var(--yellow);
  margin-top: 8px;
}
.od-lead {
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
  max-width: 330px;
}
.od-loc {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: right;
  background: #ffffff24;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 10px 12px;
  color: #fff;
}
.od-loc:active {
  background: #ffffff38;
}
.od-loc-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--yellow);
  display: grid;
  place-items: center;
  color: var(--navy);
}
.od-loc-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.od-loc-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.od-loc-t small {
  font-size: 11.5px;
  opacity: 0.85;
}
.od-loc-t b {
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-loc-t em {
  font-style: normal;
  font-size: 12.5px;
  color: #ffe48a;
  font-weight: 700;
}
.od-loc.has-loc .od-loc-t em:before {
  content: '\1f69a  ';
}
.od-loc-go {
  font-size: 26px;
  opacity: 0.8;
  line-height: 1;
}
.od-body {
  position: relative;
  z-index: 2;
  margin-top: -46px;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.od-cta {
  margin: 0;
}
.od-cut {
  text-align: center;
  font-size: 12.5px;
  color: #3b4660;
  margin-top: -4px;
}
.od-cut b {
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.od-cut:empty {
  display: none;
}
.od-act-l {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  margin: 0 4px 6px;
}
#ohActive .ocard {
  margin: 0;
}
#ohActive:empty,
#ohLast:empty {
  display: none;
}
.pb {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  scroll-margin-top: 10px;
}
.pb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pb-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
}
.pb-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--green);
  font-weight: 700;
}
.pb-stamp:before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px #14a44d2e;
}
.pb-demo {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  color: #7a5200;
  background: #fff1c2;
  border: 1px solid #f1d27a;
  border-radius: 8px;
  padding: 3px 7px;
  margin-top: 2px;
}
.pb-table {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pb-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.8fr;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  border-bottom: 1px solid #eef1f6;
  text-align: right;
  font-size: 14.5px;
  background: #fff;
  transition: background 0.15s;
}
.pb-row:last-child {
  border-bottom: 0;
}
.pb-th {
  background: #f4f6fb;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  padding: 7px 12px;
}
.pb-row .pb-p {
  color: var(--navy);
}
.pb-row .pb-p b {
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pb-d {
  font-size: 13px;
  color: #3b4660;
  font-weight: 600;
}
.pb-d.free,
.free {
  color: var(--green) !important;
  font-weight: 800;
}
.pb-row.on {
  background: #fff8dc;
  box-shadow: inset -4px 0 0 var(--yellow);
}
.pb-row.best .pb-p:after {
  content: '\5d4\5db\5d9  \5de\5e9\5ea\5dc\5dd';
  display: inline-block;
  margin-inline-start: 5px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 6px;
  padding: 1px 5px;
  vertical-align: 2px;
}
.calc {
  margin-top: 12px;
  background: #f5f7fc;
  border-radius: 16px;
  padding: 12px;
}
.calc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.calc-l {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--navy);
}
.calc-q {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calc-q button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 1px 4px #112f641f;
}
.calc-q button:active {
  transform: scale(0.94);
}
.calc-num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0 8px;
  height: 40px;
}
.calc-num input {
  width: 66px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  color: var(--navy);
  padding: 0;
  height: 38px;
}
.calc-num span {
  font-size: 13px;
  color: var(--muted);
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
  margin: 6px 0 2px;
  --fill: 50%;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 7px;
  background: linear-gradient(to right, var(--navy) 0, var(--navy) var(--fill), #dfe4ee var(--fill));
}
input[type='range']::-moz-range-track {
  height: 7px;
  border-radius: 7px;
  background: #dfe4ee;
}
input[type='range']::-moz-range-progress {
  height: 7px;
  border-radius: 7px;
  background: var(--navy);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px #112f6459;
  margin-top: -9.5px;
}
input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px #112f6459;
}
.calc-chips {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.calc-chips button {
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  direction: ltr;
}
.calc-chips button.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.calc-out {
  margin-top: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
}
.co-tier {
  font-size: 13.5px;
  color: #3b4660;
  margin-bottom: 6px;
}
.co-tier b {
  color: var(--navy);
}
.co-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  font-size: 13.5px;
  color: #3b4660;
}
.co-rows b {
  text-align: left;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.co-tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px dashed var(--line);
  margin-top: 7px;
  padding-top: 7px;
}
.co-tot span {
  font-weight: 800;
  font-size: 14px;
}
.co-tot small {
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
}
.co-tot b {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.calc-up,
.tb-up {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #0d5a2a;
  background: #e9f7ef;
  border: 1px solid #bfe6cd;
  border-radius: 10px;
  padding: 7px 10px;
}
.calc-go {
  margin-top: 10px;
  height: 50px;
  background: var(--navy);
}
.pb-urea {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #eef6ff;
}
.pb-u-ic {
  font-size: 22px;
}
.pb-urea div {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.pb-urea small {
  font-size: 11.5px;
  color: var(--muted);
}
.pb-u-p {
  color: var(--navy);
  font-size: 17px;
  white-space: nowrap;
}
.pb-u-p small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.pb-foot {
  margin: 9px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.od-sec {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.od-h {
  margin: 0 0 9px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--navy);
}
.fuel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fuel {
  background: #f5f7fc;
  border-radius: 14px;
  padding: 9px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  transition: transform 0.1s;
}
.fuel:active {
  transform: scale(0.95);
  background: #eaf0fb;
}
.fuel span {
  font-size: 25px;
  line-height: 1.15;
}
.fuel b {
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
}
.fuel small {
  font-size: 10.5px;
  color: var(--muted);
}
.od-last {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 11px 13px;
}
.od-last div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.od-last small {
  font-size: 12px;
  color: var(--muted);
}
.od-last b {
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trust div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f5f7fc;
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #2a3655;
}
.trust b {
  font-size: 18px;
  line-height: 1;
}
.help-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.help-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}
.help-btn.wa {
  background: #1fae5b;
}
.help-btn span {
  font-size: 17px;
}
.oloc {
  background: #fff;
}

/* styles.css — Occasional order: order lists, kinds and tiers. */
.ol-map-wrap {
  position: relative;
  flex: none;
  height: 44%;
  min-height: 220px;
}
.ol-map {
  position: absolute;
  inset: 0;
}
.ol-center-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 500;
  transform: translate(-50%, -100%);
  pointer-events: none;
  transition: transform 0.15s;
}
.ol-center-pin span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--navy);
  border: 3px solid var(--yellow);
  box-shadow: 0 6px 16px #112f6466;
  font-size: 18px;
}
.ol-center-pin span:first-letter {
  display: inline-block;
}
.ol-center-pin.lift {
  transform: translate(-50%, -118%);
}
.ol-center-pin:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 5px;
  margin-left: -5px;
  border-radius: 50%;
  background: #00000040;
}
.ol-gps {
  position: absolute;
  z-index: 600;
  bottom: 14px;
  right: 50%;
  transform: translate(50%);
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  font-size: 15.5px;
  padding: 11px 18px;
  border-radius: 30px;
  box-shadow: 0 6px 18px #112f644d;
  white-space: nowrap;
}
.ol-gps:active {
  transform: translate(50%) scale(0.96);
}
.ol-gps.busy {
  opacity: 0.85;
}
.ol-gps-ic {
  font-size: 19px;
}
.ol-drag-hint {
  position: absolute;
  z-index: 600;
  top: 10px;
  right: 50%;
  transform: translate(50%);
  background: #112f64d9;
  color: #fff;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
}
.ol-sheet {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 20px 20px 0 0;
  margin-top: -16px;
  padding: 12px 16px 14px;
  box-shadow: 0 -6px 20px #112f6414;
}
.ol-saved {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 10px;
  padding: 0 16px;
}
.ol-saved::-webkit-scrollbar {
  display: none;
}
.ol-saved:empty {
  display: none;
}
.pl-chip {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  text-align: right;
  background: #f5f7fc;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px 10px;
  max-width: 210px;
}
.pl-chip span {
  grid-row: 1/3;
  font-size: 18px;
}
.pl-chip b {
  font-size: 13px;
}
.pl-chip small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-chip.on {
  border-color: var(--navy);
  background: #eef3ff;
}
.ol-search {
  margin-bottom: 6px;
}
.ol-nores {
  font-size: 12.5px;
  color: var(--muted);
  padding: 4px 4px 8px;
}
.ol-addr {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 2px 10px;
}
.ol-a-ic {
  font-size: 20px;
}
.ol-addr b {
  display: block;
  font-size: 15.5px;
  line-height: 1.35;
}
.ol-addr small {
  font-size: 11.5px;
  color: var(--muted);
  display: block;
  text-align: right;
}
.ol-empty {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.ol-cov {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.ol-cov:empty {
  display: none;
}
.ol-cov.ok {
  background: #e9f7ef;
  border: 1px solid #bfe6cd;
  color: #0d5a2a;
}
.ol-cov.no {
  background: #fdecec;
  border: 1px solid #f5c2c2;
  color: #9b1c1c;
}
.ol-cov b {
  font-weight: 800;
}
.ol-cov small {
  font-size: 11.5px;
  opacity: 0.85;
}
.ol-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}
.chips.sm {
  margin: 0;
  justify-content: flex-start;
}
.chips.sm button {
  font-size: 13px;
  padding: 6px 10px;
}
.ol-share {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  background: #eef3ff;
  border-radius: 12px;
  padding: 10px;
}
.ol-share.sm {
  margin-top: 8px;
  font-size: 13.5px;
  padding: 9px;
}
.ol-actions {
  background: #fff;
}
.ol-actions .btn:disabled {
  opacity: 0.45;
}
.kind-grid.k6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kind-grid.k6 .kind {
  padding: 10px 4px 8px;
}
.kind-grid.k6 .kind b {
  font-size: 12.5px;
}
.kind i {
  font-size: 12px;
}
.oq-mode,
.oq-urea,
.oq-who {
  margin-bottom: 8px;
}
.seg2 button:disabled {
  opacity: 0.4;
}
.oq-lit {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  margin-bottom: 6px;
}
.oq-lit .calc-q {
  justify-content: center;
}
.oq-lit .calc-q button {
  background: #eef1f7;
  box-shadow: none;
}
.oq-ulit {
  margin: 4px 0 8px;
}
.tier-bar {
  flex: none;
  position: relative;
  z-index: 3;
  margin: 0;
  background: var(--navy);
  color: #fff;
  border-radius: 18px 18px 0 0;
  padding: 10px 16px 9px;
  box-shadow: 0 -6px 18px #112f642e;
}
.tier-bar .tb-up {
  margin-top: 6px;
  padding: 5px 9px;
  font-size: 12px;
}
.tb-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
}
.tb-main b {
  font-size: 18px;
  font-weight: 900;
  color: var(--yellow);
  white-space: nowrap;
}
.tb-main span b {
  font-size: inherit;
  color: #fff;
}
.tb-sub {
  font-size: 12.5px;
  opacity: 0.85;
  margin-top: 2px;
}
.tier-bar .tb-up {
  background: #ffffff1f;
  border-color: #fff3;
  color: #e8ffef;
}
.oq-noloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 20px 16px 16px;
}
.oq-noloc-ic {
  font-size: 38px;
}
.oq-noloc b {
  font-size: 17px;
}
.oq-noloc span {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.oq-noloc .btn {
  height: 50px;
}
.oq-loc {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 10px;
  margin-bottom: 10px;
}
.oq-loc .oq-map {
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
}
.oq-loc-b {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 8px;
}
.oq-loc-a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.oq-loc-a b {
  font-size: 15.5px;
}
.oq-loc-a small {
  font-size: 12.5px;
  color: var(--muted);
}
.oq-loc .ol-cov {
  margin-bottom: 0;
}
.oq-saved {
  margin-top: 4px;
}
.oq-contact.me .field {
  background: #f6f8fc;
}
.oq-contact.me input {
  color: #3b4660;
}
.cut-info.sm {
  font-size: 12.5px;
  margin-top: 10px;
}
.pr-tier {
  font-size: 13px;
  color: #3b4660;
  padding: 4px 0 8px;
  border-bottom: 1px solid #f0f2f7;
}
.pr-tier b {
  color: var(--navy);
}
.pr-row.tot {
  border-bottom: 0;
  padding-top: 10px;
}
.pr-row.tot span {
  font-weight: 800;
  color: var(--ink);
}
.pr-row.tot small {
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
}
.pr-row.tot b {
  font-size: 21px;
  font-weight: 900;
  color: var(--navy);
}
.pr-row.sd span,
.pr-row.sd b {
  color: #b35a00;
}
.policy {
  margin: 4px 0 10px;
  padding: 0 18px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}
.pg-express {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 6px;
}
.pg-xp {
  height: 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  direction: ltr;
  font-family:
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}
.pg-xp.apple {
  background: #000;
  color: #fff;
}
.pg-xp.apple .xp-logo {
  width: 16px;
  height: 19px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath d='M14.1 10.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.3-.9C3.7 4.8 2.1 5.8 1.2 7.3c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.3-1.2 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.7-1-2.7-4zM11.6 3c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.1 1.2.1 2.3-.6 3.1-1.5z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath d='M14.1 10.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.3-.9C3.7 4.8 2.1 5.8 1.2 7.3c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.3-1.2 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.7-1-2.7-4zM11.6 3c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.1 1.2.1 2.3-.6 3.1-1.5z'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.pg-xp.google {
  background: #fff;
  color: #3c4043;
  border: 1.5px solid #dadce0;
}
.pg-xp.google .g {
  font-weight: 900;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pg-xp:disabled {
  opacity: 0.75;
}
.pg-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
  margin: 10px 0 8px;
}
.pg-or:before,
.pg-or:after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e3e7ee;
}
.pg-tokbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
  background: #f2f6ff;
  border: 1.5px solid #c9d8f5;
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 4px;
}
.pg-tokbtn > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pg-tokbtn small {
  font-size: 11.5px;
  color: var(--muted);
}
.pg-tokbtn em {
  font-style: normal;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  padding: 7px 14px;
}
#occRcpt:empty {
  display: none;
}
.rcpt {
  margin: 12px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 14px;
}
.rc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  color: var(--navy);
}
.rc-head span {
  font-size: 12.5px;
  color: var(--muted);
}
.rc-pay {
  background: #e9f7ef;
  color: #0d5a2a;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0 6px;
  font-size: 13px;
}
.op-add {
  height: 44px;
  font-size: 15px;
  margin-top: 8px;
}
@media (max-width: 380px) {
  .od-hero {
    padding: 14px 14px 60px;
  }
  .od-body {
    padding: 0 12px;
  }
  .pb {
    padding: 12px 11px 11px;
  }
  .pb-row {
    padding: 8px 9px;
    font-size: 13.5px;
    grid-template-columns: 1.3fr 1fr 0.75fr;
  }
  .pb-row .pb-p b {
    font-size: 16px;
  }
  .pb-row.best .pb-p:after {
    display: none;
  }
  .calc-num input {
    width: 58px;
  }
  .calc-q button {
    width: 36px;
    height: 36px;
  }
  .pb-head h2 {
    font-size: 16.5px;
  }
  .trust div {
    font-size: 12px;
  }
  .ol-gps {
    font-size: 14.5px;
    padding: 10px 15px;
  }
}
.ol-center-pin i {
  display: block;
  font-style: normal;
  transform: rotate(45deg);
}
.occ-sub {
  display: none;
}

/* styles.css — Occasional order: app-level pieces, kits, tracking and WhatsApp. */
.app.occ-mode.sub:not(.auth) .occ-sub {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid #e3e8f2;
  position: relative;
  z-index: 900;
}
.app.occ-mode.sub #backBtn {
  display: none !important;
}
.app.occ-mode.sub #topLogo {
  display: block !important;
}
.app.occ-mode.sub #topTitle {
  visibility: hidden;
}
.occ-back {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-width: 112px;
  padding: 0 8px 0 18px;
  border-radius: 26px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 4px 14px #112f6440;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: transform 0.08s;
}
.occ-back:before {
  content: '';
  position: absolute;
  inset: -8px -8px -8px -6px;
}
.occ-back .ob-ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display: grid;
  place-items: center;
}
.occ-back.pressed,
.occ-back:active {
  transform: scale(0.94);
  background: #0c2450;
}
.occ-sub-t {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-back {
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 54px;
  height: 54px;
  background: #ffffff3d;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.lg-back svg {
  width: 30px;
  height: 30px;
}
.kt-wrap:empty {
  display: none;
}
.kt-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 4px;
}
.kt-box {
  background: #fff;
  border: 2px solid var(--yellow);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
  animation: fadeIn 0.2s ease;
}
.kt-box.need {
  border-color: #e0413a;
  box-shadow: 0 0 0 4px #e0413a1f;
}
.kt-box label {
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 8px;
}
.kt-box label em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #b26b00;
  background: #fff4d1;
  border-radius: 8px;
  padding: 1px 7px;
  margin-inline-start: 4px;
}
.kt-box input {
  width: 100%;
  height: 48px;
  border: 1.5px solid #d5dcea;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 16px;
  font-family: inherit;
  background: #f8fafd;
}
.kt-box input:focus {
  outline: none;
  border-color: var(--navy);
  background: #fff;
}
.kt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.kt-chips button {
  height: 36px;
  padding: 0 13px;
  border-radius: 18px;
  background: #eef2f9;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid transparent;
}
.kt-chips button.on {
  background: var(--navy);
  color: #fff;
}
.rc-kinds {
  font-size: 13px;
  color: #3b4660;
  margin: -2px 0 8px;
}
.ol-geoerr {
  background: #fff6f5;
  border: 1.5px solid #f2b8b4;
  border-radius: 14px;
  padding: 12px;
  margin: 8px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5a1d1a;
}
.ol-geoerr b {
  display: block;
  font-size: 15px;
  color: #b3261e;
  margin-bottom: 2px;
}
.ol-geoerr ol {
  margin: 6px 0;
  padding-inline-start: 20px;
}
.ol-geoerr small {
  display: block;
  color: #5d6475;
}
.ol-addr.pending b {
  color: #8a93a6;
}
.ol-addr em.ol-gps-ok {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #137a3a;
  margin-top: 2px;
}
#olSug button {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: right;
}
#olSug .sg-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#olSug .sg-t small {
  font-size: 12px;
  color: #6b7385;
  font-weight: 400;
}
.ol-nores.searching {
  color: #6b7385;
}
.leaflet-control-attribution {
  font-size: 10px !important;
}
.trk-kinds {
  margin: 6px 14px 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f2f5fb;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.trk-kinds[hidden] {
  display: none;
}
.demo-b {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a5a00;
  background: #fff3cf;
  border-radius: 6px;
  padding: 1px 6px;
  vertical-align: middle;
}
.real-b {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: #0f6a3a;
  background: #e3f6ea;
  border-radius: 6px;
  padding: 1px 6px;
}
.tbd {
  color: #b35a00;
}
.wa-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #c9eed8;
  border-radius: 18px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 4px 14px #1fae5b1a;
  margin: 12px 0;
}
.wa-strip:active {
  transform: scale(0.985);
}
.wa-ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
}
.wa-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wa-t b {
  font-size: 15.5px;
  color: #0d5c32;
}
.wa-t small {
  font-size: 12.5px;
  color: var(--muted);
}
.wa-go {
  font-size: 24px;
  color: #1fae5b;
  font-weight: 700;
}
.wa-home {
  padding: 0 16px 8px;
}
.od-body .wa-home {
  padding: 0;
}
a.help-btn {
  text-decoration: none;
}

/* styles.css — Catalog: services strip, shop, cart and heating. */
#doneWa,
#bSumWa,
#oqSumWa {
  padding: 0;
}
#doneWa {
  padding: 0 16px 18px;
}
.svc {
  margin: 16px 0 6px;
}
.home-body .svc {
  margin: 18px 0 4px;
}
.svc-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 2px 10px;
}
.svc-h h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--navy);
}
.svc-h button {
  font-size: 13.5px;
  font-weight: 800;
  color: #1d6fe0;
  padding: 6px 2px;
}
.svc-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 10px;
  margin: 0 -2px;
  scrollbar-width: none;
}
.svc-row::-webkit-scrollbar {
  display: none;
}
.svc-c {
  flex: 0 0 138px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: right;
  display: flex;
  flex-direction: column;
  padding: 0 0 10px;
}
.svc-c:active {
  transform: scale(0.97);
}
.svc-c img {
  width: 100%;
  height: 86px;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
}
.svc-c b {
  font-size: 14px;
  color: var(--ink);
  padding: 0 11px;
  line-height: 1.25;
}
.svc-c small {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 11px 0;
}
.xcat .scroll {
  padding: 14px 16px 26px;
}
.cat-hero {
  background: linear-gradient(135deg, #112f64, #1d4a94);
  color: #fff;
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cat-hero b {
  font-size: 18px;
}
.cat-hero span {
  font-size: 13.5px;
  opacity: 0.88;
}
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-c {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 10px;
  text-align: right;
}
.cat-c:active {
  transform: scale(0.985);
}
.cat-c img {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
}
.cat-m {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cat-m b {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.25;
}
.cat-m small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.cat-go {
  font-size: 22px;
  color: #9aa6bd;
  padding: 0 4px;
}
.cat-enq {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 14px 6px;
  margin-top: 16px;
}
.enq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid #eef1f6;
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}
.enq:first-of-type {
  border-top: 0;
}
.enq em {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  color: #1fae5b;
}
.enq em svg {
  width: 16px;
  height: 16px;
}
.cat-src {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  margin: 12px 8px 0;
}
.xshop-s .sh-cats {
  flex: none;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.sh-cats::-webkit-scrollbar {
  display: none;
}
.sh-cats button {
  flex: none;
  height: 38px;
  padding: 0 15px;
  border-radius: 19px;
  background: #eef1f7;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.sh-cats button.on {
  background: var(--navy);
  color: #fff;
}
.xshop-s .scroll {
  padding: 12px 16px 20px;
}
.sh-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 10px;
  margin-bottom: 12px;
}
.sh-banner img {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  object-fit: cover;
}
.sh-banner div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sh-banner b {
  font-size: 15px;
  color: var(--navy);
}
.sh-banner small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.sh-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.sp-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sp-ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f2f5fb;
  display: grid;
  place-items: center;
  font-size: 21px;
}
.sp-m {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-m b {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.25;
}
.sp-m small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.sp-in {
  flex: none;
  font-size: 11.5px;
  font-weight: 800;
  background: #e3f6ea;
  color: #0f6a3a;
  border-radius: 8px;
  padding: 3px 8px;
}
.sp-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 2px;
}
.sp-packs button {
  height: 34px;
  padding: 0 11px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sp-packs button.on {
  border-color: var(--navy);
  background: #f2f6ff;
  color: var(--navy);
}
.sp-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.sp-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-price b {
  font-size: 19px;
  color: var(--navy);
}
.sp-price small {
  font-size: 11.5px;
  color: var(--muted);
}
.btn.sp-add {
  width: auto;
  flex: none;
  height: 44px;
  font-size: 15px;
  padding: 0 18px;
  border-radius: 14px;
}
.sh-wa {
  margin-top: 6px;
}
.sh-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + var(--safe-b));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px #112f641a;
  z-index: 5;
}
.sh-bar .sb-l {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sb-l b {
  font-size: 15px;
  color: var(--ink);
}
.sb-l small {
  font-size: 11.5px;
  color: var(--muted);
}
.sh-bar .btn {
  width: auto;
  flex: none;
  height: 48px;
  padding: 0 18px;
}
.sh-sheet {
  position: absolute;
  inset: 0;
  background: #0a142873;
  z-index: 20;
  display: flex;
  align-items: flex-end;
}
.sh-sheet[hidden] {
  display: none;
}
.sh-in {
  width: 100%;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 16px 16px calc(16px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: shUp 0.22s ease;
}
@keyframes shUp {
  0% {
    transform: translateY(40px);
    opacity: 0.4;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.sh-t {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 2px;
}
.sh-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  text-align: right;
}
.sh-opt > span:first-child {
  font-size: 24px;
}
.sh-opt span:last-child {
  display: flex;
  flex-direction: column;
}
.sh-opt b {
  font-size: 15px;
  color: var(--ink);
}
.sh-opt small {
  font-size: 12.5px;
  color: var(--muted);
}
.sh-opt:active {
  background: #f5f8ff;
  border-color: var(--navy);
}
.sh-x {
  height: 46px;
  font-weight: 700;
  color: var(--muted);
}
.xheat .scroll {
  padding: 0 0 22px;
}

/* styles.css — Work-at-height spec and the extras chips. */
.ht-hero {
  position: relative;
  height: 178px;
  overflow: hidden;
}
.ht-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.ht-hero-t {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 18px 14px;
  background: linear-gradient(to top, #0a1937e0, #0a193700);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ht-hero-t b {
  font-size: 22px;
}
.ht-hero-t span {
  font-size: 13.5px;
  opacity: 0.92;
}
.ht-pb {
  margin: -14px 16px 0;
  position: relative;
}
.ht-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 16px 4px;
}
.ht-notes div {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
}
.ht-notes b {
  font-size: 18px;
}
#htWa {
  padding: 0 16px;
}
.ht-tanks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ht-tanks button {
  height: 54px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.ht-tanks button small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.ht-tanks button.on {
  border-color: var(--navy);
  background: #f2f6ff;
  color: var(--navy);
}
.ht-quick {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}
.ht-quick button {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  background: #eef1f7;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
}
.ht-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  background: #f5f8ff;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ht-price span {
  font-size: 13px;
  color: var(--muted);
}
.ht-price b {
  font-size: 18px;
  color: var(--navy);
}
.ht-price b small {
  font-size: 12px;
}
.ht-price em {
  font-style: normal;
  font-size: 11.5px;
  color: #0f6a3a;
  font-weight: 700;
  margin-inline-start: auto;
}
.ht-every {
  display: flex;
  gap: 6px;
  margin: -2px 0 12px;
}
.ht-every[hidden] {
  display: none;
}
.ht-every button {
  flex: 1;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ht-every button.on {
  border-color: var(--navy);
  background: #f2f6ff;
  color: var(--navy);
}
.add-fuel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px dashed #b9c6de;
  border-radius: 16px;
  background: #fbfcff;
  padding: 12px;
  text-align: right;
  margin-bottom: 12px;
}
.af-ic {
  font-size: 22px;
}
.af-t {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.af-t b {
  font-size: 15px;
  color: var(--navy);
}
.af-t small {
  font-size: 12.5px;
  color: var(--muted);
}
.add-fuel em {
  font-style: normal;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
}
.x-box {
  margin-top: 14px;
}
.x-box[hidden] {
  display: none;
}
.xshop {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  padding: 12px 12px 10px;
}
.xs-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.xs-h b {
  font-size: 15px;
  color: var(--navy);
}
.xs-l {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #eef1f6;
}
.xs-ic {
  flex: none;
  font-size: 20px;
}
.xs-m {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.xs-m b {
  font-size: 14px;
  line-height: 1.25;
}
.xs-m small {
  font-size: 12px;
  color: var(--muted);
}
.qty.sm {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qty.sm button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef1f7;
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
}
.qty.sm span {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
}
.xs-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid #eef1f6;
  font-size: 14px;
}
.xs-t small {
  color: var(--muted);
  font-size: 11.5px;
}
.xs-t b {
  font-size: 16px;
  color: var(--navy);
}
.xs-empty {
  margin: 2px 0 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.spec {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  padding: 14px 12px 12px;
}
.spec.has {
  border-color: #f2c94c;
  box-shadow: 0 0 0 3px #f7c21b24;
}
.spec-h {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.spec-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff6d8;
  display: grid;
  place-items: center;
  font-size: 19px;
}
.spec-h div {
  display: flex;
  flex-direction: column;
}
.spec-h b {
  font-size: 15.5px;
  color: var(--navy);
}
.spec-h small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.spec-tg {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5f7fb;
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
  margin-bottom: 10px;
}
.spec-tg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.st-t {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.st-t b {
  font-size: 15px;
  color: var(--ink);
}
.st-t small {
  font-size: 12px;
  color: var(--muted);
}
.spec-tg .sw {
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: #cfd6e3;
  position: relative;
  transition: background 0.2s;
}
.spec-tg .sw:after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: transform 0.2s;
}
.spec-tg.on {
  background: #eef4ff;
}
.spec-tg.on .sw {
  background: var(--navy);
}
.spec-tg.on .sw:after {
  transform: translate(-18px);
}
.hgt {
  background: #fbfcfe;
  border: 1px solid #e6ebf3;
  border-radius: 16px;
  padding: 12px;
  margin: -2px 0 12px;
}
.hgt[hidden] {
  display: none;
}
.hgt-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.hgt-val {
  color: var(--navy);
  font-size: 14px;
  white-space: nowrap;
}
.hgt-val b {
  font-size: 28px;
  font-weight: 800;
}
.hgt-val small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.hgt-ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.hgt-ctl button {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px #112f6424;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}
.hgt-ctl input[type='range'] {
  flex: 1;
}
.hgt-scale {
  position: relative;
  margin: 2px 48px 0;
  height: 30px;
}
.hgt-bands {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
}
.hgt-bands i {
  display: block;
  height: 100%;
}
.hgt-bands .b0 {
  background: #7fd3a0;
}
.hgt-bands .b1 {
  background: #f7d36b;
}
.hgt-bands .b2 {
  background: #f5a05a;
}
.hgt-bands .b3 {
  background: #e76f6f;
}
.hgt-ticks {
  position: relative;
  height: 18px;
  margin-top: 3px;
}
.hgt-ticks span {
  position: absolute;
  transform: translate(-50%);
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
}
.hgt-fee {
  margin-top: 2px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: #e9f7ef;
  color: #0f6a3a;
}
.hgt-fee b {
  font-size: 16px;
}
.hgt-fee.f1 {
  background: #fff6d8;
  color: #7a5200;
}
.hgt-fee.f2 {
  background: #ffe9d6;
  color: #8a3d00;
}
.hgt-fee.f3 {
  background: #fde8e8;
  color: #9b1c1c;
}
.hgt-tbl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.hb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 6px 2px;
  background: #fff;
  cursor: pointer;
}
.hb b {
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
}
.hb em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}
.hb.on {
  border-color: var(--navy);
  background: #f2f6ff;
}
.hgt-demo {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
}
.spec-l {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin: 2px 2px 8px;
}
.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 19px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  text-align: right;
}
.sc span {
  font-size: 14px;
}
.sc.on {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.spec-note {
  display: block;
  margin-top: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
}
.spec-note span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.spec-note em {
  font-style: normal;
  font-weight: 500;
}
.spec-note textarea {
  width: 100%;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15.5px;
  resize: none;
  background: transparent;
  color: var(--ink);
  padding-top: 3px;
}
.spec-note:focus-within {
  border-color: var(--navy);
}
.xchips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.xchip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  background: #eef3ff;
  color: #123c8a;
  line-height: 1.45;
}
.xchip.h {
  background: #fff3d1;
  color: #7a4b00;
}
.xchip.n {
  background: #f3f4f6;
  color: #333;
  font-weight: 600;
}
.xdet {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.xd-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xd-row > span {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}
.xd-row > b {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}
.xcard {
  margin: 0 16px 12px;
}
.xdet.trk {
  background: #fffaf0;
  border: 1px solid #f4e3b5;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.xdet.note {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.xnote-h {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  margin: 12px 4px 6px;
}
#xNote {
  margin: 0 16px;
}
.ocx {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #7a4b00;
  background: #fff7e0;
  border-radius: 10px;
  padding: 5px 9px;
  line-height: 1.4;
}
.sr.sr-x span:last-child {
  line-height: 1.45;
}
.sr-note {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 4px;
  font-weight: 500;
}
.sum-row.x b {
  font-weight: 700;
}
.pr-row.shop span,
.pr-row.hf span {
  line-height: 1.35;
}
.pr-row.hf b {
  color: #8a3d00;
}
.dn-shop td {
  color: #11643a;
}
@media (max-width: 380px) {
  .svc-c {
    flex-basis: 128px;
  }
  .svc-c img {
    height: 78px;
  }
  .hgt-tbl {
    gap: 4px;
  }
  .hb b,
  .hb em {
    font-size: 10.5px;
  }
  .ht-tanks button {
    font-size: 13.5px;
    height: 50px;
  }
  .sc {
    font-size: 13px;
    padding: 6px 10px;
  }
  .sp-packs button {
    font-size: 12.5px;
    padding: 0 9px;
  }
  .ht-notes {
    grid-template-columns: 1fr;
  }
}
.hgt-ctl,
.hgt-tbl {
  direction: ltr;
}
.hgt-tbl .hb {
  direction: rtl;
}
.xs-t > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.xs-t b {
  white-space: nowrap;
}
.rep {
  margin: 12px 0 4px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 13px 12px;
  border: 1.5px solid #f3dd8c;
}

/* styles.css — Reports (first version), dashboard and duplicates. */
.rp-h {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 9px;
}
.rp-h b {
  font-size: 16.5px;
  color: var(--navy);
}
.rp-h small {
  font-size: 12.5px;
  color: var(--muted);
}
.rp-main {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
.rp-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.rp-where {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-top small {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}
.rp-chips,
.rp-fl {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rp-c {
  font-size: 12.5px;
  font-weight: 700;
  background: #eef2f9;
  color: var(--navy2);
  padding: 3px 8px;
  border-radius: 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-c.u {
  background: #e6f4ff;
  color: #0b4f87;
}
.ur-tag {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  background: #e6f4ff;
  color: #0b4f87;
  border-radius: 8px;
  padding: 1px 6px;
  margin-inline-start: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}
.rp-c.s {
  background: #e9f7ef;
  color: #11643a;
}
.rp-c.more {
  background: #fff;
  border: 1px solid var(--line);
}
.rp-fl {
  margin-top: 6px;
}
.rp-fl span {
  font-size: 11.5px;
  font-weight: 700;
  background: #fff3d1;
  color: #7a4b00;
  padding: 2px 7px;
  border-radius: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-go {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 14px;
  padding: 11px 12px;
  text-align: right;
  box-shadow: 0 3px 10px #f7c21b59;
}
.rp-go:active {
  transform: scale(0.985);
}
.rp-gi {
  font-size: 22px;
  flex: none;
}
.rp-go span:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.rp-go b {
  font-size: 16.5px;
}
.rp-go small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.rp-ar {
  font-size: 22px;
  font-weight: 800;
  flex: none;
}
.rp-more-h {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  margin: 12px 2px 6px;
}
.rp-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -13px;
  padding: 0 13px 4px;
  scrollbar-width: none;
}
.rp-list::-webkit-scrollbar {
  display: none;
}
.rp-mini {
  flex: 0 0 148px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 9px 10px;
}
.rp-mini b {
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-mini span {
  font-size: 12px;
  color: var(--navy2);
  font-weight: 600;
}
.rp-mini small {
  font-size: 11px;
  color: var(--muted);
}
.rp-mini button {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff6d6;
  color: var(--navy);
  border: 1px solid #f3dd8c;
}
.dup-ban {
  background: #fffaf0;
  border: 1.5px solid #f3dd8c;
  border-radius: 14px;
  padding: 10px 11px;
  margin: 0 0 12px;
}
.db-t {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.db-ic {
  font-size: 21px;
  line-height: 1.2;
}
.db-t b {
  font-size: 15px;
  color: var(--navy);
}
.db-t small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 1px;
}
.db-t small b {
  font-size: 12.5px;
}
.db-gone {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a4b00;
  background: #fff1d6;
  border-radius: 9px;
  padding: 5px 8px;
}
.db-loc {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}
.db-loc span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-loc button {
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy);
  background: #eef1f7;
  border-radius: 8px;
  padding: 4px 10px;
}
.db-price {
  margin-top: 7px;
  font-size: 12.5px;
  color: #11643a;
  font-weight: 600;
}
.db-price small {
  color: var(--muted);
  font-weight: 600;
}
.db-acts {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.db-acts button {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 4px;
}
.dup-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a4b00;
  background: #fff3d1;
  border-radius: 8px;
  padding: 3px 7px;
  align-self: center;
}
.dup-btn {
  width: 100%;
  margin-top: 10px;
}
.dup-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* styles.css — Home additions, cancel and confirm, SOS contact, demo, push. */
.home-body .svc,
.od-body .svc {
  margin: 12px 0 0;
}
.home-body .svc-h,
.od-body .svc-h {
  margin: 0 2px 6px;
}
.home-body .svc-h h3,
.od-body .svc-h h3 {
  font-size: 15px;
}
.home-body .svc-h button,
.od-body .svc-h button {
  font-size: 12.5px;
  padding: 4px 2px;
}
.home-body .svc-row,
.od-body .svc-row {
  gap: 7px;
  padding: 2px 2px 6px;
}
.home-body .svc-c,
.od-body .svc-c {
  flex: 0 0 104px;
  border-radius: 14px;
  padding: 0 0 7px;
}
.home-body .svc-c img,
.od-body .svc-c img {
  height: 60px;
  margin-bottom: 5px;
}
.home-body .svc-c b,
.od-body .svc-c b {
  font-size: 12.5px;
  padding: 0 8px;
}
.home-body .svc-c small,
.od-body .svc-c small {
  font-size: 10.5px;
  padding: 1px 8px 0;
  line-height: 1.3;
}
.home-body .tiles {
  margin-bottom: 0;
}
.wa-home .wa-strip {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 15px;
}
section.svc {
  aspect-ratio: auto;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
  position: static;
  padding: 0;
}
.rep {
  padding: 11px 11px 10px;
}
.rp-h {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.rp-h small {
  text-align: left;
}
.rp-main {
  padding: 9px;
}
.rp-top {
  margin-bottom: 6px;
}
.rp-fl {
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
  mask-image: linear-gradient(to left, #000 85%, transparent);
}
.rp-fl span {
  flex: none;
}
.rp-go {
  margin-top: 8px;
  padding: 9px 12px;
}
.rp-more-h {
  margin: 9px 2px 5px;
  font-size: 12.5px;
}
.rp-list {
  margin: 0 -11px;
  padding: 0 11px 2px;
}
.rp-mini {
  flex: 0 0 212px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
}
.rm-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.rm-t span {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-mini button {
  margin: 0;
  flex: none;
  padding: 6px 9px;
  font-size: 12.5px;
}
.od-body > div:empty,
.od-body > div[hidden] {
  display: none;
}
.od-body .svc,
.od-body .wa-home .wa-strip,
.od-body .rep {
  margin: 0;
}
.home-body .wa-home {
  padding: 0;
}
.badge.red {
  background: #fde8e8;
  color: #b42318;
}
.mini-btn.r {
  background: #fff;
  color: #b42318;
  border: 1px solid #f3c4c4;
}
.cx-info {
  font-size: 12px;
  font-weight: 700;
  color: #b42318;
  background: #fdf0f0;
  border-radius: 9px;
  padding: 5px 8px;
  margin-top: 6px;
  text-align: right;
}
.conf-ban {
  background: #fff4f0;
  border: 1.5px solid #f5b49a;
  border-radius: 14px;
  padding: 10px 11px;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.conf-ban.need {
  animation: shake 0.4s;
  border-color: #e5484d;
}
.conf-ban > b {
  font-size: 15px;
  color: #9a2b00;
}
.conf-ban > span {
  font-size: 12.5px;
  color: #4a3a33;
  line-height: 1.45;
}
.cf-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.cf-acts button {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 4px;
}
.cf-acts button[data-cf='any'] {
  grid-column: 1/-1;
  background: #fff;
  color: #9a2b00;
  border-color: #f5c7b4;
}
.cf-ack {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  background: #fff;
  border: 1.5px solid #f5c7b4;
  border-radius: 10px;
  padding: 8px 9px;
  margin-top: 4px;
}
.cf-ack.on {
  border-color: var(--green);
  background: #effaf3;
}
.cf-ack.need {
  border-color: #e5484d;
}
.cf-ack input {
  width: 20px;
  height: 20px;
  flex: none;
}
.dup-ban.ed {
  background: #eef4ff;
  border-color: #b8cdf5;
}
.open-ban {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff4f0;
  border: 1px solid #f5c7b4;
  border-radius: 13px;
  padding: 8px 10px;
  margin: 8px 0 0;
  text-align: right;
  font-size: 12.5px;
  color: #4a3a33;
  line-height: 1.4;
}
.open-ban b {
  color: #9a2b00;
}
.ob-go {
  margin-inline-start: auto;
  font-weight: 800;
  font-size: 18px;
  color: #9a2b00;
}
.cx-card {
  text-align: right;
  align-items: stretch;
}
.cx-card h3 {
  text-align: center;
}
.cx-sum {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: -4px;
}
.cx-sum b {
  color: var(--ink);
}
.cx-l {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  margin-top: 4px;
}
.cx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cx-chips button {
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 20px;
  background: #eef1f7;
  color: var(--navy);
  border: 1.5px solid transparent;
}
.cx-chips button.on {
  background: #fde8e8;
  color: #b42318;
  border-color: #f0a3a3;
}
.cx-chips.need {
  animation: shake 0.4s;
}
#cxNote {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  resize: none;
}
.cx-terms {
  font-size: 13px;
  font-weight: 700;
  color: #0e7a3a;
  background: #effaf3;
  border-radius: 11px;
  padding: 8px 10px;
  line-height: 1.45;
}
.cx-terms.late {
  color: #8a4b00;
  background: #fff4dc;
}
.cx-terms small {
  display: block;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}
.btn.cx-go {
  background: #e5484d;
  color: #fff;
}
.cx-link {
  display: block;
  margin: 10px auto 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #b42318;
  background: none;
  padding: 8px 14px;
  border: 1px solid #f3c4c4;
  border-radius: 12px;
}
@keyframes shake {
  0%,
  to {
    transform: none;
  }
  25% {
    transform: translate(-5px);
  }
  75% {
    transform: translate(5px);
  }
}
.topbar {
  height: calc(68px + env(safe-area-inset-top, 0px));
  min-height: calc(68px + env(safe-area-inset-top, 0px));
}
.logo,
#topLogo {
  height: 52px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.login-hero img {
  width: 250px;
  max-width: 72vw;
  height: auto;
}
.splash img {
  width: 280px;
  max-width: 76vw;
  height: auto;
}
.sos-truck {
  position: relative;
  width: 72px;
  height: 46px;
  pointer-events: auto;
}
.leaflet-container .sos-truck img.tk,
.sos-truck .tk {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 72px !important;
  height: auto !important;
  max-width: none !important;
  z-index: 2;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}
.sos-truck .gp {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #1a73e8;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px #00000059;
  z-index: 1;
}
.sos-truck .gp:after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: #1a73e847;
  animation: lp2 1.8s infinite;
}
.sos-truck:before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #00000047, #0000 70%);
  z-index: -1;
}
.demo-hint.top {
  margin: 12px 0 4px;
  padding: 9px 10px 10px;
  border: 1.5px dashed #f7c21b;
  background: #fffaea;
  gap: 7px;
}
.demo-hint.top > b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #112f64;
}
.demo-hint .dh-tag {
  display: inline-block;
  background: #f7c21b;
  color: #112f64;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.demo-hint .dh-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.demo-hint .dh-row button {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 600;
  min-height: 40px;
  box-sizing: border-box;
}
.demo-hint .dh-row button bdi {
  font-size: 11.5px;
  font-weight: 500;
}
.demo-hint.top button {
  border-color: #f1e1a6;
}
#ocHint button {
  align-items: center;
}
#ocHint + .otp-head {
  margin-top: 6px;
}
@media (max-height: 700px) {
  .login-hero {
    padding-top: calc(22px + env(safe-area-inset-top, 0px));
    padding-bottom: 22px;
  }
  .login-hero img {
    width: 220px;
  }
  .login-hero h1 {
    margin-top: 6px;
  }
}
.push {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 9000;
  width: calc(100% - 16px);
  max-width: 440px;
  background: #fffffffa;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 20px;
  padding: 12px 14px;
  gap: 11px;
  align-items: flex-start;
  box-shadow:
    0 10px 34px #0a142859,
    0 0 0 0.5px #00000014;
  animation: pushIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
.push img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  box-shadow: 0 1px 3px #0000002e;
}
.push > div {
  font-size: 14.5px;
  line-height: 1.4;
  color: #111;
  min-width: 0;
}
.push-top {
  font-size: 13px;
  margin-bottom: 2px;
  gap: 8px;
}
.push-top b {
  font-weight: 700;
  color: #111;
}
.push-top span {
  color: #8a8a8e;
  font-size: 12.5px;
  flex: none;
}
#pushText {
  font-weight: 500;
}
.push-hint {
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0a64d8;
}
.push.tap:active {
  transform: translate(-50%) scale(0.98);
}
@keyframes pushIn {
  0% {
    transform: translate(-50%, calc(-100% - 60px));
    opacity: 0.4;
  }
  to {
    transform: translate(-50%);
    opacity: 1;
  }
}

/* styles.css — Accounts (people) screen. */
.ac-pad {
  padding-bottom: 40px;
}
.ac-intro {
  margin: 4px 2px 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.ac-open b {
  font-size: 16px;
}
.ac-form {
  padding: 14px;
}
.ac-lbl {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 2px;
}
.ac-seg {
  margin-bottom: 10px;
}
.ac-seg button {
  min-height: 48px;
  font-size: 15px;
}
.ac-form .btn {
  margin-top: 6px;
}
.ac-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.ac-av {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
}
.ac-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.ac-t b {
  width: 100%;
  font-size: 16px;
}
.ac-ph {
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ac-chip {
  font-size: 12px;
  background: #eef2fa;
  color: var(--navy);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 600;
}
.ac-chip.adm {
  background: var(--yellow);
  color: var(--navy);
  vertical-align: middle;
}
.ac-chip.hp {
  background: #f3f4f6;
  color: var(--muted);
}
.ac-del {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 14px;
  background: #fff1f1;
  color: var(--red);
  font-size: 20px;
}
.ac-del:active {
  background: #ffe0e0;
}
.ac-err {
  margin-top: 10px;
  background: #fff1f1;
  color: #b4232a;
  border: 1.5px solid #f5c2c4;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.spin.dark {
  border-color: #112f6433;
  border-top-color: var(--navy);
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
#oAccessSec {
  padding: 4px;
}
#oAccessSec .set-btn {
  width: 100%;
}
#lgHp:placeholder-shown,
#acHp:placeholder-shown {
  direction: rtl;
  text-align: right;
}
.ac-hint {
  margin: 2px 2px 12px;
  line-height: 1.45;
}

/* styles.css — Passkey (bio), site and manager groups, agents, dashboards. */
.bio-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  padding: 16px;
  margin: 14px 0 4px;
  box-shadow: var(--shadow);
  text-align: right;
}
.bio-btn:active {
  transform: scale(0.98);
}
.bio-btn.busy {
  opacity: 0.7;
}
.bio-ic {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 16px;
  background: #ffffff24;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bio-ic svg,
.bio-big svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bio-t {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bio-t b {
  font-size: 17px;
}
.bio-t small {
  font-size: 13px;
  opacity: 0.8;
}
.bio-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 -4px;
}
.bio-or:before,
.bio-or:after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.bio-big {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: #eef1f7;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bio-big svg {
  width: 40px;
  height: 40px;
}
.bio-card .btn {
  max-width: 420px;
}
.bio-sec .switch-row {
  padding-top: 4px;
}
.selectable .site .radio.cbx {
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}
.selectable .site.sel .radio.cbx {
  background: var(--navy);
}
.selectable .site.sel .radio.cbx:after {
  display: none;
}
.site-count {
  margin: 2px 2px 8px;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
}
.site-count.multi {
  color: var(--navy);
  font-weight: 800;
}
.site-icon.sel {
  background: var(--yellow);
  border-color: var(--navy);
  transform: rotate(-45deg) scale(1.18);
}
.site-icon.sel span {
  color: var(--navy);
  font-weight: 900;
}
.mgrp {
  margin-bottom: 14px;
}
.mgrp-h {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 4px 0 8px;
}
.mgrp-h b {
  flex: 1;
  font-size: 15px;
}
.mgrp-h > span:last-child {
  font-size: 13px;
  opacity: 0.85;
}
.mgrp-n,
.grp-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  flex: none;
}
.sr-site {
  display: inline-block;
  margin-top: 4px;
  color: var(--navy);
}
.grp-box {
  background: #f7f9ff;
  border: 1.5px solid #d9e1f2;
  border-radius: 16px;
  padding: 10px;
  margin: 10px 0;
  text-align: right;
}
.grp-h {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 2px 8px;
}
.grp-h span {
  font-size: 12.5px;
  color: var(--muted);
}
.grp-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  margin-top: 6px;
  border: 2px solid transparent;
  text-align: right;
}
.grp-row.on {
  border-color: var(--navy);
}
.grp-t {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grp-t small {
  font-size: 12px;
  color: var(--muted);
}
.spec-chips .sc em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9px;
  white-space: nowrap;
}
.sc em.sc-p {
  color: #0d7a3a;
  background: #e5f6ec;
}
.sc em.sc-a {
  color: #8a5d00;
  background: #fff1c7;
}
.sc.on em.sc-p,
.sc.on em.sc-a {
  background: #ffffff2e;
  color: #fff;
}
.spec-ag {
  background: #fff8e1;
  border-radius: 12px;
  padding: 9px 11px;
  margin: 8px 0 2px;
  font-size: 13.5px;
  line-height: 1.5;
}
.ag-tel {
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-row > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.agent-call {
  background: var(--green);
  color: #fff;
  border-radius: 12px;
  padding: 9px 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.ac-chip.ag {
  border: 0;
  cursor: pointer;
  background: #fff4cc;
  color: #7a5700;
}
.ag-btns,
.agent-btns {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  vertical-align: middle;
}
.ag-wa,
.agent-wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #25d366;
  color: #fff;
  border-radius: 10px;
  padding: 3px 9px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px;
}
.ag-wa svg {
  width: 15px;
  height: 15px;
  fill: #fff;
}
.agent-wa {
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 12px;
}
.ag-tel {
  background: #eef1f7;
  border-radius: 10px;
  padding: 3px 9px;
}
.dov {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(24px + var(--safe-b));
}
body.dov-on {
  overflow: hidden;
}
.dtop {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
}
.dtop b {
  font-size: 18px;
}
.dtop.cust {
  background: #0c2350;
}
.dx {
  background: #ffffff24;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 14px;
}
.dx.back {
  background: var(--yellow);
  color: var(--navy);
}
.dwrap {
  padding: 4px 0 8px;
}
.dnote {
  margin: 10px 16px;
  color: var(--muted);
  font-size: 12.5px;
}
.dh {
  margin: 16px 16px 6px;
  font-size: 16px;
  color: var(--navy);
}
.dcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 12px;
}
.dcol {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px 8px;
}
.dcol h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--navy);
}
.dcol h4 small {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  display: block;
}
.drow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.drow:last-child {
  border-bottom: 0;
}
.drow b {
  font-size: 14px;
  color: var(--ink);
}
.drow b.ok {
  color: var(--green);
}
.drow b.bad {
  color: var(--red);
}
.dcust {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dcust > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dcust b {
  color: var(--navy);
  font-size: 15.5px;
}
.dbtn {
  height: 48px;
  font-size: 15px;
  background: var(--yellow) !important;
  color: var(--navy) !important;
}
.dsoon {
  margin: 8px 16px;
}
.dshort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 16px;
}
.dshort .btn {
  flex: none;
  margin: 0;
}
.dbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
}
.dbl {
  flex: 0 0 34%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbt {
  flex: 1;
  height: 10px;
  background: #eef1f7;
  border-radius: 6px;
  overflow: hidden;
}
.dbt i {
  display: block;
  height: 100%;
  background: var(--navy);
  border-radius: 6px;
}
.dbar b {
  flex: 0 0 auto;
  min-width: 58px;
  text-align: left;
  font-size: 12.5px;
}
.dback {
  margin: 14px 16px 0;
  width: calc(100% - 32px);
}
.pc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pc-row.off {
  opacity: 0.55;
}
.pc-badge {
  display: inline-block;
  background: #e7f6ec;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 6px;
  margin-inline-start: 4px;
}
.pc-badge.no {
  background: #fdecec;
  color: var(--red);
}
.pc-tel {
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
}
.pc-note {
  margin: 6px 16px 0;
}

/* styles.css — New site request and order extras. */
.ns-tile {
  border: 2px dashed #c9d3e6;
  background: #f7f9fd;
}
.ns-tile .ns-plus {
  background: var(--yellow);
  font-size: 20px;
}
.ns-badge {
  display: inline-block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #fff4cc;
  color: #8a6500;
  margin-inline-start: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.ns-badge.ok {
  background: #e3f6ea;
  color: #0e7a3a;
}
.site b .ns-badge {
  display: inline-block;
}
.ns-ov {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  max-width: 520px;
  margin: 0 auto;
}
.ns-ov.on {
  transform: none;
}
.ns-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--navy);
  color: #fff;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.ns-top b {
  font-size: 17px;
}
.ns-top span {
  width: 36px;
}
.ns-x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #ffffff24;
  color: #fff;
  font-size: 16px;
}
.ns-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
  -webkit-overflow-scrolling: touch;
}
.ns-intro {
  margin: 2px 4px 6px;
}
.ns-map {
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #e8edf5;
}
.ns-locrow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ns-gps {
  height: 44px;
  font-size: 15px;
}
.ns-loc {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 4px 0;
}
.ns-loc.ok {
  color: #0e7a3a;
  font-weight: 600;
}
.ns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ns-2 .field {
  margin-bottom: 8px;
}
.ns-tx {
  height: 34px;
  width: 34px;
  border-radius: 10px;
  background: #eef1f7;
  color: var(--muted);
}
.ns-err {
  background: #fde8e8;
  color: #b42318;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0 0;
}
.ns-bad {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px #e5484d26;
}
.ns-foot {
  padding: 10px 14px calc(10px + var(--safe-b));
  background: #fff;
  box-shadow: 0 -4px 16px #112f6414;
}
.ns-ok {
  position: fixed;
  inset: 0;
  z-index: 3100;
  background: #0a142873;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ns-okc {
  background: #fff;
  border-radius: 22px;
  padding: 22px 18px 16px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow);
}
.ns-okc b {
  display: block;
  font-size: 18px;
  margin: 8px 0 6px;
}
.ns-okc span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.ns-okic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e3f6ea;
  color: #0e7a3a;
  font-size: 28px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.ns-adm {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 12px;
}
.ns-arow {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ns-arow:last-of-type {
  border-bottom: 0;
}
.ns-at {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.ns-abtn {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ns-abtn button {
  flex: 1;
  height: 38px;
  border-radius: 12px;
  background: #eef1f7;
  color: var(--navy);
  font-weight: 700;
}
.ns-abtn button.ok {
  background: var(--navy);
  color: #fff;
}
.ns-demo {
  margin: 6px 0 8px;
}
#oDup .rep {
  margin: 0 0 12px;
}
.rp-det summary {
  cursor: pointer;
  list-style: none;
}
.ns-cpk {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  text-align: start;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.ns-cpk.on {
  border-color: var(--navy);
  background: #f4f7fd;
}
.ns-cav {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
}
.ns-cav.e {
  background: #eef1f7;
  color: var(--navy);
}
.ns-cm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ns-cm b {
  font-size: 15.5px;
}
.ns-cm span {
  font-size: 12.5px;
  color: var(--muted);
}
.ns-ph {
  font-size: 14px;
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}
.ns-cm .ns-ph {
  font-size: 13.5px;
  color: var(--navy);
  text-align: right;
}
.ns-cch {
  font-size: 13px;
  color: var(--navy);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 10px;
  background: #e7edf9;
}
.ns-link {
  background: none;
  border: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
  padding: 2px 4px 8px;
  cursor: pointer;
}
.ns-cman {
  margin-bottom: 6px;
}
.ns-sh {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0a142866;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.2s;
}
.ns-sh.on {
  opacity: 1;
}
.ns-shc {
  background: #fff;
  width: 100%;
  max-height: 86%;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px #0000002e;
}
.ns-shh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.ns-shh b {
  font-size: 17px;
}
.ns-x2 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef1f7;
  color: var(--muted);
}
.ns-shb {
  overflow-y: auto;
  padding: 0 12px 12px;
  -webkit-overflow-scrolling: touch;
}
.ns-shf {
  padding: 10px 14px calc(10px + var(--safe-b));
  border-top: 1px solid var(--line);
}
.ns-crow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: start;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.ns-crow.dis {
  opacity: 0.4;
}
.ns-crow.other {
  border-bottom: 0;
}
.ns-crow.other b {
  color: var(--navy);
}
.ns-q {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.ns-tg {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  background: #f1f4fa;
  border-radius: 8px;
  padding: 5px 10px;
  margin: 10px 0 2px;
}
.ns-chk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.ns-chk input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ns-cb {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  border: 2px solid #b9c4d8;
  display: grid;
  place-items: center;
  background: #fff;
}
.ns-chk input:checked + .ns-cb {
  background: var(--navy);
  border-color: var(--navy);
}
.ns-chk input:checked + .ns-cb:after {
  content: '\2713';
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.ns-tm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ns-tm b {
  font-size: 15px;
}
.ns-tm span {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ns-chk .ns-tm b {
  text-align: right;
}
.ns-newt {
  margin: 2px 0 4px;
}
.ns-newf {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 6px;
  padding: 8px 0;
}
.ns-newf select,
.ns-newf input {
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  padding: 0 8px;
  min-width: 0;
  background: #fff;
}
.ns-newf .btn {
  height: 44px;
  padding: 0 14px;
}
.ns-newf .ns-ntx {
  grid-column: 1/-1;
}
.ns-trow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.ns-tic {
  font-size: 18px;
}
.ns-trow .ns-tm span {
  direction: ltr;
  text-align: right;
}
.ns-trow .ns-badge {
  align-self: flex-start;
  margin: 2px 0 0;
}
.ns-ur {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1.5px dashed #9fb0cf;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ns-ur i {
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.ns-ur.on {
  border: 0;
  background: #e3f6ea;
  color: #0e7a3a;
  cursor: default;
}
.ns-ur.on button {
  border: 0;
  background: none;
  color: #0e7a3a;
  font-size: 16px;
  font-weight: 800;
  padding: 0 0 0 2px;
  cursor: pointer;
}
.ns-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.ns-pb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 58px;
  padding: 9px 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  text-align: start;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.ns-pb b {
  font-size: 15px;
  color: var(--navy);
}
.ns-pb span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.ns-sub {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin: 4px 4px 6px;
}

.ox-host {
  position: fixed;
  inset: 0;
  z-index: 3000;
  max-width: 520px;
  margin: 0 auto;
}
.ox-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ox-b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  padding: 6px 8px;
}
.ox-b.pri {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.ox-b:disabled {
  opacity: 0.4;
}
.ox-card.t {
  margin: 10px 0;
}
.ox-dis {
  margin: 6px 2px 0;
}
.ox-req {
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #f3d98a;
}
.ox-req.approved {
  background: #e9f7ef;
  border-color: #a8dcbc;
}
.ox-req.rejected {
  background: #f4f5f8;
  border-color: var(--line);
}
.ox-req b {
  font-size: 14px;
}
.ox-req ul,
.ox-al {
  margin: 6px 0 2px;
  padding-inline-start: 18px;
  font-size: 13px;
}
.ox-cb {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8a6500;
}
.ox-cb.approved {
  color: #0e7a3a;
}
.ox-cb.rejected {
  color: var(--muted);
}
.ox-v h4 {
  margin: 14px 2px 6px;
  font-size: 14px;
  color: var(--navy);
}
.ox-r {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.ox-r span {
  color: var(--muted);
  flex: none;
}
.ox-r b {
  text-align: left;
}
.ox-r.tot {
  border: 0;
  font-size: 15px;
}
.ox-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 6px;
}
.ox-l > span {
  font-size: 13px;
  color: var(--muted);
}
.ox-l .ox-u {
  color: #0b6aa8;
}
.ox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ox-chips span {
  background: #eef2fa;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
}
.ox-tl {
  margin: 0;
}
.ox-head {
  display: flex;
  flex-direction: column;
  padding: 2px 2px 8px;
}
.ox-head span {
  font-size: 13px;
  color: var(--muted);
}
.ox-list .mach {
  margin-bottom: 8px;
}
.ox-in {
  opacity: 0.5;
}
.ox-note {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  font: inherit;
  font-size: 15px;
  margin-top: 6px;
}
.ox-disc {
  background: #fff8e1;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  color: #6b5200;
  margin: 0 0 8px;
  line-height: 1.45;
}

/* styles.css — Reports (v5) tiles, rankings, rows and details. */
.tile-wide {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(135deg, #112f64, #1d4fb8);
  color: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  text-align: right;
}
.tile-wide:active {
  transform: scale(0.98);
}
.tw-ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}
.tw-t {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tw-t b {
  font-size: 15px;
}
.tw-t small {
  font-size: 11.5px;
  opacity: 0.8;
}
.tile-wide .chev {
  color: #f7c21b;
  font-size: 22px;
}
.rp {
  padding-bottom: 40px;
}
.rp-load {
  padding: 40px 0;
}
.rp-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.rp-head > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.rp-head b {
  font-size: 14.5px;
}
.rp-head span {
  font-size: 11.5px;
  color: var(--muted);
}
.rp-mgr {
  background: #eef2fa;
  color: var(--navy);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rp-filt {
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.rp-seg {
  display: flex;
  background: #eef2fa;
  border-radius: 12px;
  padding: 3px;
}
.rp-seg button {
  flex: 1;
  padding: 7px 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
}
.rp-seg button.on {
  background: var(--navy);
  color: #fff;
}
.rp-rlab {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 6px 0 2px;
}
.rp-dates {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.rp-dates label {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: var(--muted);
}
.rp-dates input,
.rp-sels select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 8px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.rp-sels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.rp-sels select:last-child {
  grid-column: 1/-1;
}
.rp-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
.rk {
  background: #fff;
  border-radius: 14px;
  padding: 9px 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rk span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk b {
  font-size: 18px;
  color: var(--navy);
  line-height: 1.25;
}
.rk b small {
  font-size: 11px;
  color: var(--muted);
}
.rk.hi {
  background: var(--navy);
}
.rk.hi span,
.rk.hi b small {
  color: #c9d5ee;
}
.rk.hi b {
  color: #f7c21b;
}
.rk em {
  font-style: normal;
  font-size: 10px;
  color: #8a6500;
}
.rk.demo {
  background: #fffaf0;
}
.rp-warn {
  background: #fff6f5;
  border: 1.5px solid #f3b9b5;
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.rp-warn.ok {
  background: #effaf3;
  border-color: #b5e2c5;
}
.rw-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.rw-h b {
  font-size: 14.5px;
  color: #b42318;
}
.rp-warn.ok .rw-h b {
  color: #0e7a3a;
}
.rw-thr {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-thr select {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 4px;
  background: #fff;
}
.rw-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: right;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 6px;
}
.rw-row > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rw-row b {
  font-size: 13.5px;
}
.rw-row small {
  font-size: 11.5px;
  color: #7a2e2a;
}
.rw-row small.rw-n {
  display: inline;
  background: #fde8e8;
  border-radius: 6px;
  padding: 0 5px;
  color: #b42318;
}
.rw-row i {
  font-style: normal;
  color: var(--muted);
}
.rw-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fde8e8;
  flex: none;
}
.rw-ic.lph {
  background: #fff4cc;
}
.rw-note {
  font-size: 10.5px;
  color: var(--muted);
  margin: 8px 0 0;
}
.rp-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin-bottom: 8px;
  scrollbar-width: none;
}
.rp-tabs button {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.rp-tabs button.on {
  background: #f7c21b;
  color: var(--navy);
}
.rt-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.rt {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  white-space: nowrap;
}
.rt th {
  background: #eef2fa;
  color: var(--navy);
  font-weight: 700;
  padding: 8px 7px;
  font-size: 11.5px;
  position: sticky;
  top: 0;
}
.rt td {
  padding: 7px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.rt th:first-child,
.rt td:first-child {
  position: sticky;
  right: 0;
  background: #fff;
  text-align: right;
  box-shadow: -1px 0 0 var(--line);
}
.rt th:first-child {
  background: #eef2fa;
}
.rt-tool {
  display: table-cell;
  min-width: 118px;
}
.rt-tool b {
  display: block;
  font-size: 12.5px;
}
.rt-tool small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt tr.fl td {
  background: #fff8f7;
}
.rt tr.fl td:first-child {
  background: #fff1f0;
}
.rt-bar {
  min-width: 90px;
  position: relative;
}
.rt-bar i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #1d4fb8;
}
.rt-bar small {
  font-size: 10.5px;
  color: var(--muted);
}
.rt-hint {
  margin: 6px 2px;
}
.rt-sw {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}
.rt-sw input {
  opacity: 0;
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
}
.rt-sw i {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: #cfd6e4;
  transition: 0.15s;
}
.rt-sw i:after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: 0.15s;
}
.rt-sw input:checked + i {
  background: var(--green);
}
.rt-sw input:checked + i:after {
  right: 16px;
}
.rd-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 8px 8px;
  height: 210px;
  overflow-x: auto;
}
.rd-col {
  flex: 1;
  min-width: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.rd-col span {
  flex: 1;
  width: 70%;
  display: flex;
  align-items: flex-end;
}
.rd-col span i {
  display: block;
  width: 100%;
  background: linear-gradient(#1d4fb8, #112f64);
  border-radius: 6px 6px 2px 2px;
  min-height: 2px;
}
.rd-col small {
  font-size: 9.5px;
  color: var(--navy);
  font-weight: 700;
}
.rd-col b {
  font-size: 10px;
  color: var(--muted);
}
.rd-col.z span i {
  background: #e3e8f1;
}
.rn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rn {
  display: flex;
  gap: 8px;
  background: #fff;
  border-radius: 13px;
  padding: 9px 11px;
  box-shadow: var(--shadow);
}
.rn.fl {
  border-right: 4px solid #e5484d;
}
.rn-a {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rn-a b {
  font-size: 13.5px;
}
.rn-a small {
  font-size: 11.5px;
  color: var(--muted);
}
.rn-a .rn-m {
  font-size: 10.5px;
}
.rn-a .rn-h {
  color: #8a6500;
}
.rn-a .rn-f {
  color: #b42318;
  font-weight: 700;
}
.rn-ed {
  font-size: 12px;
  padding: 0 4px;
}
.rn-l {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rn-l b {
  font-size: 17px;
  color: var(--navy);
}
.rn-l small {
  font-size: 10px;
  color: var(--muted);
}
.rp-act {
  display: flex;
  gap: 8px;
  margin: 12px 0 6px;
}
.rp-act .btn {
  flex: 1;
}
.rp-foot {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.rp-demo {
  display: inline-block;
  background: #fff4cc;
  color: #8a6500;
  border-radius: 6px;
  padding: 0 6px;
  font-weight: 700;
}
#nextStep.off {
  opacity: 0.45;
}
.site-count.none {
  color: #b42318;
  font-weight: 700;
}
@media print {
  body {
    background: #fff;
  }
  body * {
    visibility: hidden;
  }
  #screen-reports,
  #screen-reports * {
    visibility: visible;
  }
  #screen-reports {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    transform: none !important;
    overflow: visible;
  }
  #screen-reports .scroll {
    overflow: visible;
    height: auto;
  }
  .rp-act,
  .rp-filt select,
  .rt-sw,
  .rn-ed,
  .rp-mgr,
  .rp-tabs button:not(.on) {
    display: none !important;
  }
  .rt-wrap {
    overflow: visible;
  }
  .rt {
    white-space: normal;
  }
  .rd-chart {
    overflow: visible;
  }
}
.sa-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #25d366;
  color: #fff;
  font-weight: 800;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}
.sa-wa.tel {
  background: var(--navy);
  box-shadow: none;
}
.sa-wn {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* styles.css — Range chips, 3-month scale and the month/day picker on delivery notes. */
/* v4v: range chips + 3-month scale */
.rp-chips button {
  font-size: 13px;
  white-space: nowrap;
  padding: 7px 2px;
}
.rp-scale {
  margin-top: 10px;
  padding: 0 2px;
}
.rp-scale input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
}
.rp-scale input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #dfe5f0;
}
.rp-scale input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #dfe5f0;
}
.rp-scale input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  margin-top: -9px;
}
.rp-scale input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
}
.rp-sl-l {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.rp-sl-l b {
  font-size: 12.5px;
  color: var(--navy);
}
/* v5f: month → day picker on תעודות משלוח (current month + 3 previous) */
#screen-notes .nf {
  padding: 12px 16px 0;
}
.nf-row {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.nf-box {
  position: relative;
  flex: 0 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 10px;
  cursor: pointer;
}
.nf-box small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.nf-box b {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nf-box i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.nf-box select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.nf-box.off {
  opacity: 0.5;
}
.nf-box:focus-within {
  border-color: #0b4fb3;
}
.nf-sum {
  margin: 10px 2px 8px;
  font-size: 13.5px;
  color: var(--ink);
}
.nf-sum b {
  color: var(--navy);
}
#notesList .nf-lead {
  font-size: 12.5px;
  color: var(--muted);
  margin: 14px 4px 4px;
  text-align: center;
}
#screen-notes .nf + .list-pad {
  padding-top: 10px;
}

/* styles.css — Reports (rpt.js, v5i). */
/* v5i reports (rpt.js) — clean, one line per row */
#rptBox.rp {
  padding-top: 12px;
}
.r5-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 10px;
}
.r5-head b {
  display: block;
  font-size: 15.5px;
  color: var(--navy);
  line-height: 1.25;
}
.r5-head span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.r5-per {
  align-items: center;
  margin-bottom: 10px;
}
.r5-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf1ff;
  color: var(--navy);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r5-chip i {
  font-style: normal;
  color: var(--muted);
}
.r5-tiles {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.75fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.r5-t {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 8px;
  min-width: 0;
}
.r5-t span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.r5-t b {
  display: block;
  font-size: 17px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.r5-t b small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.r5-t em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r5-t.hi b {
  color: var(--navy);
}
.r5-t.up b {
  color: #c2410c;
}
.r5-t.dn b {
  color: var(--green);
}
.r5-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.r5-card h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--navy);
}
.r5-ins p {
  display: flex;
  gap: 8px;
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.35;
}
.r5-ins p i {
  font-style: normal;
  flex: 0 0 auto;
}
.r5-ins p span {
  min-width: 0;
}
.r5-ins p small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.r5-al.ok {
  background: #effaf3;
  border-color: #bfe8cf;
}
.r5-al.ok .r5-alh b {
  color: var(--green);
}
.r5-al.bad {
  border-color: #f3c7c8;
}
.r5-alh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.r5-alh b {
  font-size: 14.5px;
  color: #b42318;
}
.r5-thr {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.r5-thr select {
  font: inherit;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 4px;
  background: #fff;
  color: var(--ink);
}
.r5-a {
  display: block;
  width: 100%;
  text-align: right;
  background: #fff5f5;
  border: 1px solid #f6d3d4;
  border-radius: 12px;
  padding: 9px 11px;
  margin-top: 8px;
}
.r5-ah {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.r5-ah b {
  font-size: 14px;
  color: var(--ink);
}
.r5-ah em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #b42318;
  white-space: nowrap;
}
.r5-as {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: 3px;
  color: #3b1d1d;
}
.r5-a small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}
.r5-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #eef1f7;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
.r5-grey {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 2px 0;
}
.r5-how {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.r5-how summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 700;
  font-size: 12.5px;
}
.r5-how ul {
  margin: 6px 0 0;
  padding: 0 16px 0 0;
  line-height: 1.45;
}
.r5-how li {
  margin: 3px 0;
}
.r5-how b {
  color: var(--ink);
  font-weight: 700;
}
.r5-tabs {
  display: flex;
  background: #e9edf4;
  border-radius: 12px;
  padding: 3px;
  margin: 4px 0 8px;
}
.r5-tabs button {
  flex: 1;
  padding: 7px 2px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.r5-tabs button.on {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 3px #112f641f;
}
.r5-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.r5-r {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid #eef1f6;
  min-height: 48px;
}
.r5-r:last-child {
  border-bottom: 0;
}
.r5-r.fl {
  background: #fff7f7;
}
.r5-r.z {
  opacity: 0.45;
}
.r5-n {
  flex: 1;
  min-width: 0;
}
.r5-n b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r5-n small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r5-v {
  flex: 0 0 auto;
  text-align: left;
}
.r5-v b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}
.r5-v small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.r5-bar {
  flex: 0 0 26%;
  height: 8px;
  background: #eef1f6;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}
.r5-bar i {
  display: block;
  height: 100%;
  background: #4f7fd1;
  border-radius: 6px;
}
.r5-days .r5-n {
  flex: 0 0 46px;
}
.r5-days .r5-bar {
  flex: 1;
}
.r5-days .r5-v {
  flex: 0 0 76px;
}
.r5-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  background: #c9d0dc;
}
.r5-dot.ok {
  background: var(--green);
}
.r5-dot.bad {
  background: var(--red);
}
.r5-dot.na {
  background: #c9d0dc;
}
.r5-dot.none {
  background: transparent;
}
.r5-leg {
  font-size: 11.5px;
  color: var(--muted);
  margin: 6px 4px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.r5-leg .r5-dot {
  width: 8px;
  height: 8px;
  margin-right: 4px;
}
.r5-act {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}
.r5-act button {
  flex: 1;
  padding: 9px;
  border-radius: 12px;
  background: #eef1f7;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
}
.r5-modal {
  position: fixed;
  inset: 0;
  z-index: 3600;
  background: #0a14288c;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.r5-modal[hidden] {
  display: none;
}
.r5-mc {
  background: #fff;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  max-height: 82dvh;
  border-radius: 20px 20px 0 0;
  padding: 12px 14px calc(14px + var(--safe-b));
  display: flex;
  flex-direction: column;
  direction: rtl;
}
.r5-mh {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.r5-mh b {
  font-size: 16px;
  color: var(--navy);
}
.r5-mh button {
  font-size: 18px;
  color: var(--muted);
  padding: 4px 8px;
}
.r5-mi {
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 8px;
  line-height: 1.45;
}
.r5-hl {
  overflow: auto;
  border-top: 1px solid #eef1f6;
}
.r5-h {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 2px;
  border-bottom: 1px solid #eef1f6;
}
.r5-h span {
  flex: 1;
  min-width: 0;
}
.r5-h span b {
  font-size: 13.5px;
}
.r5-h small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}
.r5-h small a {
  color: var(--navy);
}
.r5-h em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #b42318;
  margin-top: 2px;
}
.r5-h.fl {
  background: #fff5f5;
}
.r5-hv {
  font-size: 14px;
  color: var(--navy);
  white-space: nowrap;
}
.r5-mute {
  margin-top: 10px;
  padding: 9px;
  border-radius: 12px;
  background: #eef1f7;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
@media print {
  .r5-act,
  .r5-tabs,
  .r5-per select,
  .r5-how summary {
    display: none;
  }
}

/* styles.css — Urea reminder sheet and urea delivery notes in blue. */
/* v5k1 urea reminder sheet */
.urs-ov {
  position: fixed;
  inset: 0;
  z-index: 3200;
  background: rgba(15, 28, 56, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.25s ease;
}
.urs-ov.on {
  background: rgba(15, 28, 56, 0.42);
}
.urs {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px #112f642e;
  padding: 8px 18px calc(18px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(100%);
  transition: transform 0.26s ease;
  text-align: center;
}
.urs-ov.on .urs {
  transform: none;
}
.urs-grab {
  display: block;
  width: 42px;
  height: 5px;
  border-radius: 5px;
  background: #d5dbe7;
  margin: 2px auto 6px;
}
.urs-t {
  font-size: 18px;
  color: var(--ink);
  font-weight: 800;
}
.urs-p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.urs .btn {
  height: 50px;
}

/* v5k6: urea delivery notes in blue (exact, from the Priority part on the note) */
.ocard.note-urea {
  background: #eef4ff;
  box-shadow:
    inset -4px 0 0 #2563eb,
    var(--shadow);
}
.nu-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #dbe7ff;
  color: #1d4fb8;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 1px;
  white-space: nowrap;
}
.r5-r.r5-u,
.r5-h.r5-u {
  background: #f0f5ff;
  box-shadow: inset -3px 0 0 #2563eb;
}
.r5-r.r5-u.fl {
  background: #f0f5ff;
}
.r5-r.r5-u .r5-v b {
  color: #1d4fb8;
}
.r5-v small .nu-tag {
  margin: 0;
}

/* styles.css — Office alert review (חריגות לבדיקה) and the "corrected by SOS" tag. */
/* v5k7: office alert review (חריגות לבדיקה) + "corrected by SOS" tag */
.cor-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e6f4ea;
  color: #1b7a3d;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
  white-space: nowrap;
}
.cor-line {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}
.cor-line .cor-tag {
  margin: 0 0 0 6px;
}
.r5-pend {
  display: block;
  width: 100%;
  text-align: right;
  margin: 8px 0 4px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #fff7e0;
  color: #7a5600;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #f3dc9a;
}
.al-i {
  margin: 2px 2px 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.al-tabs {
  margin-bottom: 12px;
}
.al-f1 {
  margin-bottom: 12px;
}
.al-f1 .nf-box {
  flex: 1 1 auto;
}
.al-f1 .nf-box b {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.al-f1 .nf-box small {
  color: var(--muted);
  font-size: 12px;
}
.al-load {
  padding: 30px 0;
}
.al-c {
  background: #fff;
  border-radius: 16px;
  padding: 12px 13px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border-inline-start: 4px solid #e9a400;
}
.al-c.al-d {
  border-inline-start-color: #c9d2e3;
}
.al-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.al-h b {
  font-size: 15.5px;
}
.al-h em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff3d6;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.al-m {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-f {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 8px 0 0;
  color: var(--ink);
}
.al-b {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.al-b button {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
}
.al-ok {
  background: var(--navy);
  color: #fff;
}
.al-fx {
  background: #eef1f7;
  color: var(--navy);
}
.al-b button:disabled {
  opacity: 0.5;
}
.al-st {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.al-st.ok {
  background: #e6f4ea;
  color: #1b7a3d;
}
.al-st.fx {
  background: #e3ecff;
  color: #1d4fb8;
}
.al-w {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.al-w button {
  font-size: 12px;
  color: var(--navy);
  font-weight: 700;
  padding: 4px 0;
}
.al-ov {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.55);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.al-sh {
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  direction: rtl;
  position: relative;
}
.al-sh-h {
  padding: 14px 16px 10px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid var(--line);
}
.al-sh-h b {
  font-size: 17px;
}
.al-sh-h small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.al-sh-h button {
  position: absolute;
  left: 14px;
  top: 10px;
  font-size: 20px;
  color: var(--muted);
}
.al-sh-b {
  overflow: auto;
  padding: 12px 14px calc(18px + var(--safe-b));
}
.al-sh-b > .al-f {
  margin: 0 0 12px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
}
.al-n {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.al-nh {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.al-fl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.al-fl label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}
.al-fl label.w2 {
  grid-column: 1/-1;
}
.al-fl input,
.al-fl select {
  width: 100%;
  height: 42px;
  border: 1px solid #cdd5e4;
  border-radius: 10px;
  padding: 0 10px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.al-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 2px 4px;
  line-height: 1.45;
}

/* styles.css — Refuel forecast (חיזוי תדלוק). */
/* v5k8 חיזוי תדלוק */
#pdHome {
  flex: none;
}
#pdHome:empty {
  display: none;
}
.pd-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 8px 10px 8px 8px;
  margin: 0 0 10px;
}
#screen-reports .pd-card {
  margin: 10px 0;
  border: 1px solid #e6ebf3;
  box-shadow: none;
}
.pd-t {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
  color: inherit;
}
.pd-t > span:last-child {
  min-width: 0;
}
.pd-t b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
}
.pd-t small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.pd-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #fff6d6;
  display: grid;
  place-items: center;
  font-size: 19px;
  flex: none;
}
.pd-go {
  flex: none;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 12px;
  padding: 9px 13px;
  font-family: inherit;
}
.pd-go:disabled,
.pd-all:disabled {
  opacity: 0.4;
}
.pd {
  display: flex !important;
  align-items: center;
  gap: 5px;
  color: #3a4a66 !important;
}
.pd i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #c9d0dc;
}
.pd-high i {
  background: var(--green);
}
.pd-medium i {
  background: #e7a913;
}
small.pd-low,
.pd-x.pd-low,
.pd-r.pd-low .pd {
  color: #98a2b3 !important;
}
.pd-x {
  margin: 2px 0 8px;
  padding: 8px 10px;
  background: #f6f8fc;
  border-radius: 12px;
  font-size: 13.5px;
  align-items: flex-start;
}
.pd-x i {
  margin-top: 6px;
}
.pd-x small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}
.pd-x b {
  color: var(--navy);
}
.pd-x.pd-low b {
  color: #7d8799;
}
.pd-all {
  margin-top: 10px;
  width: 100%;
}

/* styles.css — Top bar and the language pill. */
/* v5k9o: topbar lower + clear language pill */
.topbar {
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  height: calc(80px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(80px + env(safe-area-inset-top, 0px)) !important;
}
#langBtn {
  width: auto !important;
  height: 38px;
  padding: 0 14px;
  display: flex !important;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 15px !important;
  font-weight: 700;
  margin-inline-end: 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#langBtn svg {
  width: 18px;
  height: 18px;
}

/* styles.css — Exceptional refuelling (cars / jerrycans). */
/* v5k9zv: exceptional refuelling (cars / jerrycans) — closed by default, amber when a request is set */
.exc {
  margin: 6px 0 12px;
  border: 1px solid #f0d38a;
  border-radius: 12px;
  padding: 8px 12px;
  background: #fffaf0;
}
.exc summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #8a4b00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.exc summary::-webkit-details-marker {
  display: none;
}
.exc summary::after {
  content: '‹';
  font-size: 18px;
  color: #b07a2a;
  transform: rotate(-90deg);
  transition: transform 0.15s;
}
.exc[open] summary::after {
  transform: rotate(90deg);
}
.exc-h small {
  font-weight: 500;
  color: #a06a1c;
}
.exc-meta {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: #8a4b00;
  background: #ffe7b8;
  border-radius: 9px;
  padding: 1px 8px;
}
.exc-meta:empty {
  display: none;
}
.exc.on {
  border-color: #e0a63c;
  background: #fff4dc;
}
.exc-note {
  margin: 8px 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #6b4a12;
  background: #fff1d1;
  border-radius: 9px;
  padding: 7px 10px;
}
.exc .switch-row {
  padding: 8px 0;
}
.exc-in {
  margin: 0 0 6px;
}
.exc-car {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}
.exc-car input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  padding: 9px 11px;
  border: 1px solid #d9dfeb;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  letter-spacing: 0.5px;
}
.exc-car.bad input {
  border-color: #d33;
  background: #fff5f5;
}
.exc-rm {
  border: 0;
  background: #f3f4f8;
  color: #667;
  border-radius: 9px;
  width: 36px;
  height: 38px;
  font-size: 15px;
  cursor: pointer;
}
.exc-add {
  border: 1px dashed #c99a45;
  background: none;
  color: #8a4b00;
  border-radius: 10px;
  padding: 7px 12px;
  font-weight: 600;
  font-size: 13.5px;
  margin-top: 4px;
  cursor: pointer;
}
.exc-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exc-step button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e0c48c;
  background: #fff;
  font-size: 20px;
  color: #8a4b00;
  cursor: pointer;
}
.exc-step b {
  min-width: 28px;
  text-align: center;
  font-size: 19px;
  color: #112f64;
}
.exc-err {
  color: #c22;
  font-size: 12.5px;
  font-weight: 600;
  margin: 4px 0;
}
.sr.sr-exc {
  background: #fff4dc;
  border-radius: 9px;
  padding: 6px 8px;
  border-bottom: 0;
  margin: 3px 0;
}
.sr.sr-exc span:first-child {
  color: #8a4b00;
  font-weight: 700;
  white-space: nowrap;
}
.sr.sr-exc span:last-child {
  text-align: left;
  color: #8a4b00;
}
.sr.sr-exc small {
  display: block;
  font-size: 12px;
  color: #6b4a12;
  margin-top: 2px;
  line-height: 1.45;
}
.exc-tag {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a4b00;
  background: #fff1d1;
  border: 1px solid #f0d38a;
  border-radius: 9px;
  padding: 3px 9px;
  display: inline-block;
}
.exc-card {
  border: 1px solid #f0d38a;
  background: #fffaf0;
}
.exc-st {
  font-weight: 700;
  color: #8a4b00;
  background: #fff1d1;
  border-radius: 9px;
  padding: 5px 10px;
  margin: 0 0 6px;
  display: inline-block;
}
.exc-h {
  white-space: nowrap;
}
.exc-meta {
  white-space: nowrap;
}

/* v5k9zx (Eliran 21:17): the exceptional-refuelling row is its own card in step 2, right above "תדלוק מיוחד והערות" — same card look; it is the customer's own approval */
#bExc .exc {
  margin: 0;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  padding: 14px 12px 12px;
}
#bExc .exc.on {
  border-color: #e0a63c;
  background: #fffaf0;
}
#bExc .exc summary {
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  color: inherit;
}
#bExc .exc-ic {
  background: #fff1d1;
}
#bExc .exc-h {
  display: flex;
  flex-direction: column;
  white-space: normal;
  flex: 1;
  min-width: 0;
}
#bExc .exc-h b {
  font-size: 15.5px;
  color: var(--navy);
}
#bExc .exc-h small {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
}
#bExc .exc-note {
  margin-top: 12px;
}
.exc-ok {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1.5px solid #e0a63c;
  border-radius: 12px;
  background: #fff4dc;
  font-size: 14px;
  font-weight: 600;
  color: #6b4a12;
  line-height: 1.4;
  cursor: pointer;
}
.exc-ok input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: #112f64;
}
.exc-ok.need {
  border-color: #d33;
  background: #fff5f5;
  animation: excShake 0.3s;
}
.exc-ok[hidden] {
  display: none;
}
@keyframes excShake {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* styles.css — Refuel without our representative on site. */
/* v5k9zy (Eliran 25/10 21:48): optional "refuel without our representative on site" — the customer's own tick, on his responsibility */
.nr-opt {
  margin-top: 10px;
}
.nr-opt.on {
  border-color: var(--navy);
  background: #f4f7fd;
}
.nr-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
}
.nr-row input {
  width: 24px;
  height: 24px;
  flex: none;
  margin: 2px 0 0;
  accent-color: #112f64;
  cursor: pointer;
}
.nr-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.nr-txt b {
  font-size: 15px;
  color: var(--navy);
}
.nr-opt-l {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: #eef1f7;
  border-radius: 8px;
  padding: 1px 7px;
  margin-inline-start: 4px;
  vertical-align: 1px;
}
.nr-lead {
  font-size: 13px;
  line-height: 1.45;
  color: #3d4863;
}
.nr-more {
  margin: 4px 35px 0 0;
  font-size: 12.5px;
  color: #4a5570;
}
.nr-more summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
  font-size: 12.5px;
  list-style: none;
  display: inline-block;
}
.nr-more summary::-webkit-details-marker {
  display: none;
}
.nr-more[open] summary {
  display: none;
}
.nr-more p {
  margin: 2px 0 0;
  line-height: 1.5;
}
.sr.sr-nr {
  background: #eef3fb;
  border-radius: 9px;
  padding: 6px 8px;
  border-bottom: 0;
  margin: 3px 0;
}
.sr.sr-nr span:first-child {
  color: var(--navy);
  font-weight: 700;
}
.sr.sr-nr small {
  display: block;
  font-size: 12px;
  color: #4a5570;
  margin-top: 2px;
  line-height: 1.45;
}
.nr-tag {
  color: #112f64;
  background: #eaf0fb;
  border-color: #c5d3ee;
  margin-inline-start: 4px;
}
.nr-card {
  border: 1px solid #c5d3ee;
  background: #f7f9fe;
}
.nr-card .exc-st {
  color: #112f64;
  background: #eaf0fb;
}