/* TaxiBrain mobile refresh v326
   Focused overrides for the driver bottom sheets and protected login. */

:root {
  --tb-modern-ink: #102033;
  --tb-modern-muted: #637489;
  --tb-modern-line: #dce4ed;
  --tb-modern-soft: #f4f7fa;
  --tb-modern-blue: #176bd5;
  --tb-modern-teal: #12a8a0;
  --tb-modern-red: #dc3e4f;
  --tb-modern-shadow: 0 24px 70px rgba(8, 28, 52, 0.24);
}

/* Driver dialogs */

html body .driver-app .driver-modal-backdrop {
  align-items: end !important;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  background: rgba(8, 20, 34, 0.56) !important;
  -webkit-backdrop-filter: blur(8px) saturate(0.9) !important;
  backdrop-filter: blur(8px) saturate(0.9) !important;
}

html body .driver-app .driver-modal {
  position: relative !important;
  width: min(520px, 100%) !important;
  max-height: min(88dvh, 760px) !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--tb-modern-ink) !important;
  box-shadow: var(--tb-modern-shadow) !important;
}

html body .driver-app .driver-modal::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 42px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #cbd5df;
}

html body .driver-app .driver-modal-head {
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px 20px 14px !important;
  border: 0 !important;
}

html body .driver-app .driver-modal-head > div {
  min-width: 0;
}

html body .driver-app .driver-modal-head span {
  width: fit-content;
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  margin-bottom: 7px;
  border-radius: 999px;
  background: #eef5ff !important;
  color: #2866aa !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
}

html body .driver-app .driver-modal-head strong {
  margin: 0 !important;
  color: var(--tb-modern-ink) !important;
  font-size: clamp(24px, 7vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

html body .driver-app .driver-modal-head .drawer-close-button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 2px !important;
  border: 1px solid #e2e8ef !important;
  border-radius: 50% !important;
  background: #f4f7fa !important;
  color: #26384c !important;
  padding: 0 0 3px !important;
  font-size: 27px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

html body .driver-app .driver-modal-body {
  padding: 7px 20px 18px !important;
  overscroll-behavior: contain;
}

html body .driver-app .driver-modal-done {
  min-height: 50px !important;
  margin: 0 20px max(18px, env(safe-area-inset-bottom)) !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 15px !important;
  background: #f2f5f8 !important;
  color: #34475c !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

html body .driver-app .driver-modal-form {
  gap: 15px !important;
}

html body .driver-app .driver-modal-form label {
  gap: 8px !important;
  color: #2b3a4c !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

html body .driver-app .driver-modal-form :is(input, select, textarea) {
  width: 100% !important;
  min-height: 56px !important;
  border: 1px solid var(--tb-modern-line) !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  color: var(--tb-modern-ink) !important;
  padding: 13px 15px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  outline: none !important;
}

html body .driver-app .driver-modal-form textarea {
  min-height: 128px !important;
}

html body .driver-app .driver-modal-form :is(input, select, textarea):focus {
  border-color: rgba(23, 107, 213, 0.68) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(23, 107, 213, 0.11) !important;
}

html body .driver-app .driver-modal-form :is(input, textarea)::placeholder {
  color: #8996a6 !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

html body .driver-app .driver-modal-form button.primary {
  min-height: 58px !important;
  margin-top: 1px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, var(--tb-modern-blue), #0f91d0) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 30px rgba(23, 107, 213, 0.22) !important;
}

html body .driver-app .driver-modal-form button.primary:active,
html body .driver-app .driver-modal-done:active,
html body .driver-app .driver-quick-action-menu button:active {
  transform: translateY(1px) scale(0.992) !important;
}

/* Quick actions */

html body .driver-app .driver-modal.is-quick-actions {
  max-width: 500px !important;
}

html body .driver-app .driver-quick-action-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body .driver-app .driver-quick-action-menu button {
  min-width: 0 !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #e0e7ef !important;
  border-radius: 17px !important;
  background: #f7f9fb !important;
  color: #26384c !important;
  padding: 11px !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body .driver-app .driver-quick-action-menu button strong {
  min-width: 0;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere;
}

html body .driver-app .driver-quick-action-icon {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: #e6eef8 !important;
  color: #2f679f !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body .driver-app .driver-quick-action-menu :is(.mini-call, .mini-sms) .driver-quick-action-icon {
  background: #def6f3 !important;
  color: #07887f !important;
}

html body .driver-app .driver-quick-action-menu .mini-schedule .driver-quick-action-icon {
  background: #fff1d5 !important;
  color: #a86408 !important;
}

html body .driver-app .driver-quick-action-menu .mini-contact .driver-quick-action-icon {
  background: #e1f7e9 !important;
  color: #168254 !important;
}

html body .driver-app .driver-quick-action-menu .mini-transfer .driver-quick-action-icon {
  background: #e4edff !important;
  color: #376dcc !important;
}

html body .driver-app .driver-quick-action-menu .mini-reminder .driver-quick-action-icon {
  background: #eee8ff !important;
  color: #7252c7 !important;
}

html body .driver-app .driver-quick-action-menu .is-danger {
  grid-column: 1 / -1 !important;
  min-height: 58px !important;
  border-color: #f4d2d7 !important;
  background: #fff4f5 !important;
  color: #bf2f40 !important;
}

html body .driver-app .driver-quick-action-menu .is-danger .driver-quick-action-icon {
  background: #ffe1e5 !important;
  color: #c82f42 !important;
}

/* Dark driver mode */

html[data-theme="night"] body .driver-app .driver-modal {
  border-color: rgba(143, 170, 204, 0.16) !important;
  background: rgba(13, 25, 41, 0.985) !important;
  color: #f2f7fd !important;
}

html[data-theme="night"] body .driver-app .driver-modal::before {
  background: #52657c;
}

html[data-theme="night"] body .driver-app .driver-modal-head strong,
html[data-theme="night"] body .driver-app .driver-modal-form label {
  color: #f2f7fd !important;
}

html[data-theme="night"] body .driver-app .driver-modal-head span {
  background: rgba(55, 132, 221, 0.16) !important;
  color: #8bc4ff !important;
}

html[data-theme="night"] body .driver-app .driver-modal-head .drawer-close-button,
html[data-theme="night"] body .driver-app .driver-modal-done {
  border-color: rgba(143, 170, 204, 0.18) !important;
  background: #17283d !important;
  color: #dce8f5 !important;
}

html[data-theme="night"] body .driver-app .driver-modal-form :is(input, select, textarea),
html[data-theme="night"] body .driver-app .driver-quick-action-menu button {
  border-color: rgba(143, 170, 204, 0.18) !important;
  background: #14243a !important;
  color: #eef5fc !important;
  box-shadow: none !important;
}

html[data-theme="night"] body .driver-app .driver-quick-action-menu button strong {
  color: #eef5fc !important;
}

html[data-theme="night"] body .driver-app .driver-quick-action-menu .is-danger {
  border-color: rgba(255, 105, 126, 0.24) !important;
  background: rgba(198, 47, 66, 0.16) !important;
  color: #ff9aa9 !important;
}

/* Protected login */

body.auth-only-page {
  background:
    linear-gradient(145deg, rgba(6, 17, 31, 0.83), rgba(10, 42, 68, 0.58)),
    url("assets/login-taxibrain-hero-v2.png") center / cover fixed,
    #07111f !important;
}

body.auth-only-page .auth-login-box {
  position: relative;
  width: min(480px, 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.965) !important;
  padding: 24px !important;
  box-shadow: 0 28px 80px rgba(3, 17, 32, 0.34) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
}

body.auth-only-page .auth-login-box .brand-line {
  padding-right: 106px;
  margin-bottom: 22px;
}

body.auth-only-page .auth-login-box .brand-dot {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(213, 150, 22, 0.18);
}

body.auth-only-page .auth-login-box .brand-line strong {
  color: var(--tb-modern-ink) !important;
  font-size: 20px;
  letter-spacing: -0.02em;
}

body.auth-only-page .auth-login-box .brand-line span {
  color: var(--tb-modern-muted) !important;
}

body.auth-only-page .auth-login-box .theme-switch {
  position: absolute;
  top: 25px;
  right: 24px;
  width: auto;
  min-height: 40px;
  margin: 0;
  border: 1px solid #dce5ee;
  border-radius: 999px;
  background: #f4f7fa;
  color: #42556b;
  padding: 8px 13px;
  font-size: 12px;
  box-shadow: none;
}

body.auth-only-page .auth-login-box .company-choice {
  gap: 8px;
  margin-bottom: 18px;
  color: #2b3a4c;
  font-size: 13px;
  font-weight: 850;
}

body.auth-only-page .auth-login-box .company-choice small {
  color: #718197 !important;
  font-weight: 650;
}

body.auth-only-page .auth-login-box :is(input, select) {
  min-height: 56px;
  border: 1px solid #dce4ed;
  border-radius: 16px;
  background: #f8fafc;
  color: var(--tb-modern-ink);
  padding: 13px 15px;
  font-size: 16px;
  font-weight: 750;
  box-shadow: none;
}

body.auth-only-page .auth-login-box :is(input, select):focus {
  border-color: rgba(23, 107, 213, 0.68);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(23, 107, 213, 0.11);
}

body.auth-only-page .auth-login-box .tabs {
  gap: 4px;
  margin-bottom: 18px;
  border: 0;
  border-radius: 16px;
  background: #eef2f6;
  padding: 4px;
}

body.auth-only-page .auth-login-box .tab {
  min-height: 48px;
  border-radius: 13px;
  color: #607287;
  box-shadow: none;
}

body.auth-only-page .auth-login-box .tab.active {
  background: #ffffff;
  color: #16334f;
  box-shadow: 0 5px 16px rgba(22, 51, 79, 0.10);
}

body.auth-only-page .auth-login-box .login-form {
  gap: 15px;
}

body.auth-only-page .auth-login-box .login-form label {
  gap: 8px;
  color: #2b3a4c;
  font-size: 13px;
  font-weight: 850;
}

body.auth-only-page .auth-login-box .login-form button[type="submit"] {
  min-height: 58px;
  margin-top: 2px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--tb-modern-blue), #0f91d0);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(23, 107, 213, 0.22);
}

body.auth-only-page .auth-login-box .passkey-login-panel {
  gap: 10px;
  margin-top: 17px;
  border-top: 1px solid #e2e8ef;
  padding-top: 17px;
}

body.auth-only-page .auth-login-box .passkey-login-button {
  min-height: 56px;
  border: 1px solid #bcd7f0;
  border-radius: 17px;
  background: #edf7ff;
  color: #1762a5;
  font-size: 15px;
  box-shadow: none;
}

body.auth-only-page .auth-login-box .passkey-login-button span {
  width: 26px;
  height: 26px;
}

body.auth-only-page .auth-login-box .login-owner-note {
  margin-top: 18px;
  border-top: 1px solid #e5ebf1;
  padding-top: 16px;
  color: #718197 !important;
  font-size: 12px;
  line-height: 1.55;
}

html[data-theme="night"] body.auth-only-page .auth-login-box {
  border-color: rgba(143, 170, 204, 0.18) !important;
  background: rgba(11, 23, 39, 0.965) !important;
}

html[data-theme="night"] body.auth-only-page .auth-login-box :is(.brand-line strong, label) {
  color: #f1f7fd !important;
}

html[data-theme="night"] body.auth-only-page .auth-login-box :is(input, select),
html[data-theme="night"] body.auth-only-page .auth-login-box :is(.tabs, .theme-switch) {
  border-color: rgba(143, 170, 204, 0.18);
  background: #15263b;
  color: #eef5fc;
}

html[data-theme="night"] body.auth-only-page .auth-login-box .tab.active {
  background: #223a55;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="night"] body.auth-only-page .auth-login-box .passkey-login-button {
  border-color: rgba(90, 167, 232, 0.28);
  background: rgba(38, 119, 187, 0.16);
  color: #9ed3ff;
}

@media (max-width: 560px) {
  html body .driver-app .driver-modal {
    max-height: calc(92dvh - env(safe-area-inset-top)) !important;
    border-radius: 26px !important;
  }

  html body .driver-app .driver-modal-head {
    padding-inline: 18px !important;
  }

  html body .driver-app .driver-modal-body {
    padding-inline: 18px !important;
  }

  html body .driver-app .driver-modal-done {
    margin-inline: 18px !important;
  }

  body.auth-only-page .auth-login-page {
    align-items: start !important;
    padding: 86px 10px 24px !important;
  }

  body.auth-only-page .auth-login-box {
    border-radius: 26px !important;
    padding: 20px !important;
  }

  body.auth-only-page .auth-login-box .theme-switch {
    top: 21px;
    right: 20px;
  }
}

@media (max-width: 380px) {
  html body .driver-app .driver-quick-action-menu {
    gap: 8px !important;
  }

  html body .driver-app .driver-quick-action-menu button {
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  html body .driver-app .driver-quick-action-icon {
    width: 31px !important;
    height: 31px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  html body .driver-app .driver-quick-action-menu button strong {
    font-size: 13px !important;
  }
}

/* v327: tactile glass dock for the three primary driver controls. */

html body .driver-app .driver-bottom-actionbar {
  isolation: isolate !important;
  gap: 7px !important;
  padding: 8px !important;
  border: 1px solid rgba(127, 178, 224, 0.22) !important;
  border-radius: 27px !important;
  background:
    linear-gradient(180deg, rgba(16, 35, 57, 0.96), rgba(7, 20, 37, 0.96)) !important;
  box-shadow:
    0 18px 48px rgba(2, 12, 25, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
}

html body .driver-app .driver-bottom-actionbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(86, 210, 244, 0.7), transparent);
  pointer-events: none;
}

html body .driver-app .driver-bottom-actionbar .sheet-action-button {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid transparent !important;
  border-radius: 19px !important;
  background: transparent !important;
  color: #dfeaf6 !important;
  padding: 8px 9px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease !important;
}

html body .driver-app .driver-bottom-actionbar .sheet-action-button[hidden] {
  display: none !important;
}

html body .driver-app .driver-bottom-actionbar .sheet-action-button::before {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

html body .driver-app .driver-bottom-actionbar .map-mode-toggle-button::before {
  content: "\25a6";
  background: rgba(48, 139, 229, 0.18);
  color: #65b7ff;
}

html body .driver-app .driver-bottom-actionbar .map-mode-toggle-button.is-active {
  border-color: rgba(70, 165, 242, 0.22) !important;
  background: rgba(44, 124, 202, 0.14) !important;
  color: #f3f8fd !important;
}

html body .driver-app .driver-bottom-actionbar .pause-action-button {
  border-color: rgba(242, 171, 64, 0.2) !important;
  background: rgba(229, 133, 35, 0.11) !important;
  color: #ffe2b0 !important;
}

html body .driver-app .driver-bottom-actionbar .pause-action-button::before {
  content: "\2161";
  background: linear-gradient(145deg, #ffb23e, #ef6b2e);
  color: #ffffff;
  box-shadow:
    0 7px 16px rgba(239, 107, 46, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html body .driver-app .driver-bottom-actionbar .pause-action-button.is-paused {
  border-color: rgba(78, 211, 139, 0.24) !important;
  background: rgba(31, 160, 99, 0.14) !important;
  color: #a9f3cc !important;
}

html body .driver-app .driver-bottom-actionbar .pause-action-button.is-paused::before {
  content: "\25b6";
  background: linear-gradient(145deg, #35cf84, #15965a);
  box-shadow:
    0 7px 16px rgba(21, 150, 90, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

html body .driver-app .driver-bottom-actionbar .pause-action-button.is-blocked {
  border-color: rgba(243, 83, 105, 0.24) !important;
  background: rgba(201, 45, 67, 0.13) !important;
  color: #ffb4bf !important;
}

html body .driver-app .driver-bottom-actionbar .pause-action-button.is-blocked::before {
  content: "!";
  background: linear-gradient(145deg, #f35b70, #c52f45);
}

html body .driver-app .driver-bottom-actionbar #quickManualOrderButton {
  border-color: rgba(45, 205, 195, 0.2) !important;
  background: rgba(25, 167, 159, 0.11) !important;
  color: #a9f1eb !important;
}

html body .driver-app .driver-bottom-actionbar #quickManualOrderButton::before {
  content: "+";
  background: linear-gradient(145deg, #2fd3c5, #0b92ad);
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  box-shadow:
    0 7px 16px rgba(11, 146, 173, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html body .driver-app .driver-bottom-actionbar .sheet-action-button:active {
  transform: translateY(1px) scale(0.975) !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar {
  border-color: rgba(74, 114, 158, 0.15) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.98)) !important;
  box-shadow:
    0 16px 42px rgba(25, 58, 91, 0.18),
    inset 0 1px 0 #ffffff !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar .sheet-action-button {
  color: #31465d !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar .map-mode-toggle-button.is-active {
  background: #eaf4ff !important;
  color: #1a5f9f !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar .pause-action-button {
  background: #fff5e8 !important;
  color: #a65318 !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar .pause-action-button.is-paused {
  background: #eaf8f0 !important;
  color: #137148 !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar .pause-action-button.is-blocked {
  background: #fff0f2 !important;
  color: #ac3043 !important;
}

html[data-theme="day"] body .driver-app .driver-bottom-actionbar #quickManualOrderButton {
  background: #eaf9f7 !important;
  color: #08766f !important;
}

@media (max-width: 380px) {
  html body .driver-app .driver-bottom-actionbar {
    gap: 5px !important;
    padding: 7px !important;
  }

  html body .driver-app .driver-bottom-actionbar .sheet-action-button {
    min-height: 58px !important;
    gap: 6px !important;
    padding-inline: 6px !important;
    border-radius: 17px !important;
    font-size: 12.5px !important;
  }

  html body .driver-app .driver-bottom-actionbar .sheet-action-button::before {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 10px;
    font-size: 16px;
  }

  html body .driver-app .driver-bottom-actionbar #quickManualOrderButton::before {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .driver-app .driver-modal-form button,
  html body .driver-app .driver-quick-action-menu button,
  body.auth-only-page .auth-login-box button {
    transition: none !important;
  }
}

body .driver-app .driver-live-call-in-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  width: 100% !important;
  border: 1px solid rgba(47, 219, 201, 0.58) !important;
  border-radius: 16px !important;
  background: rgba(24, 189, 175, 0.16) !important;
  color: #7ff3e7 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

/* v333: one-thumb call decision sheet. Logic and action hooks stay unchanged. */

html body .driver-app .driver-call-detail {
  gap: 14px !important;
  color: var(--tb-modern-ink) !important;
}

html body .driver-app .driver-call-detail-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 104px !important;
  overflow: hidden !important;
  border: 1px solid rgba(21, 132, 194, 0.16) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% -10%, rgba(50, 211, 194, 0.24), transparent 45%),
    linear-gradient(145deg, #0a2136 0%, #0c3043 100%) !important;
  padding: 17px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(12, 48, 67, 0.16) !important;
}

html body .driver-app .driver-call-detail-hero::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -52px;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(101, 231, 217, 0.16);
  border-radius: 50%;
}

html body .driver-app .driver-call-signal {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 243, 231, 0.42);
  border-radius: 18px;
  background: linear-gradient(145deg, #2fd8c7, #1598bc);
  color: #052434;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 10px 24px rgba(33, 196, 189, 0.28);
}

html body .driver-app .driver-call-signal svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .driver-app .driver-call-signal > span {
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(70, 226, 211, 0.36);
  border-radius: 23px;
  opacity: 0;
}

html body .driver-app .driver-call-detail.is-ringing .driver-call-signal > span {
  animation: tbCallSignal 1.55s ease-out infinite;
}

@keyframes tbCallSignal {
  0% {
    transform: scale(0.88);
    opacity: 0.8;
  }
  78%,
  100% {
    transform: scale(1.32);
    opacity: 0;
  }
}

html body .driver-app .driver-call-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

html body .driver-app .driver-call-hero-copy > span {
  color: #73e7dc !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.085em !important;
}

html body .driver-app .driver-call-hero-copy > strong {
  overflow: hidden;
  color: #ffffff !important;
  font-size: clamp(20px, 6vw, 27px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .driver-app .driver-call-hero-copy > small {
  overflow: hidden;
  color: rgba(228, 243, 250, 0.7) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .driver-app .driver-call-state {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  max-width: 112px;
  overflow: hidden;
  border: 1px solid rgba(120, 234, 221, 0.3);
  border-radius: 999px;
  background: rgba(30, 186, 174, 0.14);
  color: #a7f6ed;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .driver-app .driver-call-ringing-note {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #b8eee7;
  border-radius: 18px;
  background: #edfbf9;
  padding: 14px 15px;
}

html body .driver-app .driver-call-ringing-note > span {
  width: 11px;
  height: 11px;
  border: 3px solid rgba(18, 168, 160, 0.2);
  border-radius: 50%;
  background: #15b8aa;
  box-shadow: 0 0 0 5px rgba(18, 168, 160, 0.12);
  animation: tbCallDot 1.2s ease-in-out infinite;
}

@keyframes tbCallDot {
  50% {
    transform: scale(0.8);
    opacity: 0.58;
  }
}

html body .driver-app .driver-call-ringing-note div {
  display: grid;
  gap: 2px;
}

html body .driver-app .driver-call-ringing-note strong {
  color: #0a5d5b;
  font-size: 14px;
  font-weight: 900;
}

html body .driver-app .driver-call-ringing-note small {
  color: #4b7477;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
}

html body .driver-app .driver-call-linked-order {
  display: grid;
  gap: 4px;
  border: 1px solid #b9e5cb;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(53, 173, 107, 0.12), transparent 45%),
    #f1faf5;
  padding: 14px 15px;
}

html body .driver-app .driver-call-linked-order span {
  color: #248756;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
}

html body .driver-app .driver-call-linked-order strong {
  overflow: hidden;
  color: #173f2b;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .driver-app .driver-call-linked-order small {
  color: #5a7667;
  font-size: 12px;
  font-weight: 700;
}

html body .driver-app .driver-call-decision {
  display: grid;
  gap: 12px;
}

html body .driver-app .driver-call-decision > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.75fr);
  align-items: end;
  gap: 12px;
  padding: 0 2px;
}

html body .driver-app .driver-call-decision > header > div {
  display: grid;
  gap: 2px;
}

html body .driver-app .driver-call-decision > header span {
  color: #138a8d !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.075em;
}

html body .driver-app .driver-call-decision > header strong {
  color: var(--tb-modern-ink) !important;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

html body .driver-app .driver-call-decision > header > small {
  color: #718197 !important;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
  text-align: right;
}

html body .driver-app .driver-call-actions {
  display: grid;
  gap: 10px;
}

html body .driver-app .driver-call-action-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html body .driver-app .driver-call-action {
  width: 100%;
  min-height: 65px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid #dce5ee;
  border-radius: 18px;
  background: #f7f9fb;
  color: var(--tb-modern-ink);
  padding: 11px 13px;
  text-align: left;
  box-shadow: none;
  touch-action: manipulation;
}

html body .driver-app .driver-call-action > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

html body .driver-app .driver-call-action strong {
  color: inherit;
  font-size: 15px;
  font-weight: 930;
  line-height: 1.12;
}

html body .driver-app .driver-call-action small {
  color: #6d7e91;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
}

html body .driver-app .driver-call-action-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e8eef4;
  color: #38536e;
  font-size: 20px;
  font-weight: 950;
}

html body .driver-app .driver-call-action.is-primary {
  min-height: 72px;
  border: 0;
  background: linear-gradient(135deg, #176bd5 0%, #08a7c6 100%);
  color: #ffffff !important;
  padding: 13px 15px;
  box-shadow: 0 14px 28px rgba(23, 107, 213, 0.24);
}

html body .driver-app .driver-call-action.is-primary .driver-call-action-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff !important;
}

html body .driver-app .driver-call-action.is-primary strong {
  color: #ffffff !important;
  font-size: 17px;
}

html body .driver-app .driver-call-action.is-primary small {
  color: rgba(255, 255, 255, 0.82) !important;
}

html body .driver-app .driver-call-action.is-schedule {
  border-color: #f0d89b;
  background: #fff9e9;
  color: #493615;
}

html body .driver-app .driver-call-action.is-schedule .driver-call-action-icon {
  background: #ffe29a;
  color: #684600;
}

html body .driver-app .driver-call-action.is-transfer {
  border-color: #bcdff2;
  background: #eef9ff;
  color: #153e5d;
}

html body .driver-app .driver-call-action.is-transfer .driver-call-action-icon {
  background: #d3effe;
  color: #0f689a;
}

html body .driver-app .driver-call-action.is-new-order {
  border-color: #c2e8d0;
  background: #effaf3;
  color: #184a2d;
}

html body .driver-app .driver-call-action.is-new-order .driver-call-action-icon {
  background: #d2f2dd;
  color: #228551;
}

html body .driver-app .driver-call-action.is-neutral {
  min-height: 58px;
  border-style: dashed;
  background: #ffffff;
}

html body .driver-app .driver-call-action.is-neutral .driver-call-action-icon {
  background: #eef2f5;
  color: #627387;
}

html body .driver-app .driver-call-utilities {
  display: flex;
  gap: 9px;
}

html body .driver-app .driver-call-utilities button {
  min-width: 0;
  min-height: 46px;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dbe4ec;
  border-radius: 14px;
  background: #f2f6f9;
  color: #385069;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: none;
}

html body .driver-app .driver-call-utilities button span {
  color: #138a8d !important;
  font-size: 15px;
}

html body .driver-app .driver-call-utilities button:disabled {
  opacity: 0.48;
}

html body .driver-app .driver-call-availability {
  border-radius: 12px;
  background: #fff5df;
  color: #82601d !important;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.35;
}

html body .driver-app .driver-call-facts {
  border-top: 1px solid #e6ebf0;
  padding-top: 4px;
}

html body .driver-app .driver-call-facts > summary {
  width: fit-content;
  margin: 0 auto;
  color: #6c7d90;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 830;
  cursor: pointer;
}

html body .driver-app .driver-call-facts[open] {
  display: grid;
  gap: 9px;
}

html body .driver-app .driver-call-facts .driver-detail-note {
  border-color: #dce5ed !important;
  background: #f5f8fa !important;
  color: #30465d !important;
}

html body .driver-app .driver-call-facts .driver-detail-note p {
  color: #637489 !important;
}

html body .driver-app .driver-call-facts .driver-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body .driver-app .driver-call-facts .driver-detail-grid div {
  border-color: #e1e8ef !important;
  background: #f8fafc !important;
}

html body .driver-app .driver-call-facts .driver-detail-grid span {
  color: #718197 !important;
}

html body .driver-app .driver-call-facts .driver-detail-grid strong {
  color: #23394e !important;
}

html body .driver-app .driver-call-action:active,
html body .driver-app .driver-call-utilities button:active {
  transform: translateY(1px) scale(0.992);
}

@media (max-width: 390px) {
  html body .driver-app .driver-call-detail-hero {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 15px !important;
  }

  html body .driver-app .driver-call-signal {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  html body .driver-app .driver-call-state {
    display: none;
  }

  html body .driver-app .driver-call-decision > header {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  html body .driver-app .driver-call-decision > header > small {
    text-align: left;
  }

  html body .driver-app .driver-call-action {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 10px;
  }

  html body .driver-app .driver-call-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 17px;
  }

  html body .driver-app .driver-call-action strong {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .driver-app .driver-call-signal > span,
  html body .driver-app .driver-call-ringing-note > span {
    animation: none !important;
  }
}

/* v334: readable phone card on the map in both day and night themes. */

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call {
  position: relative !important;
  grid-template-columns: 60px minmax(0, 1fr) 108px !important;
  align-items: stretch !important;
  gap: 11px !important;
  min-height: 138px !important;
  overflow: hidden !important;
  border: 1px solid rgba(61, 213, 215, 0.58) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 88% -15%, rgba(48, 211, 197, 0.2), transparent 42%),
    linear-gradient(145deg, #071d31 0%, #0a2c43 58%, #07354a 100%) !important;
  color: #ffffff !important;
  padding: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 17px 38px rgba(2, 16, 31, 0.28) !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -46px;
  bottom: -64px;
  width: 156px;
  height: 156px;
  border: 1px solid rgba(105, 234, 222, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call > * {
  position: relative;
  z-index: 1;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-time {
  align-self: stretch !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  overflow-wrap: anywhere !important;
  border: 1px solid rgba(255, 227, 143, 0.72) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.44), transparent 38%),
    linear-gradient(155deg, #ffd85a 0%, #efa62e 100%) !important;
  color: #172133 !important;
  padding: 9px 6px !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 10px 22px rgba(238, 166, 46, 0.2) !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main {
  align-self: center !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main::before {
  content: "HOVOR Z CENTRÁLY";
  color: #5ee2d5 !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: clamp(17px, 4.8vw, 22px) !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-shadow: none !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main > small {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  color: rgba(220, 238, 247, 0.78) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main > small :is(b, em) {
  overflow: hidden !important;
  color: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main > i {
  max-width: 100% !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 1px 0 0 !important;
  border: 1px solid rgba(255, 207, 76, 0.2) !important;
  border-left: 3px solid #ffd24f !important;
  border-radius: 11px !important;
  background: rgba(255, 202, 58, 0.1) !important;
  color: #ffe6a0 !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-side {
  align-self: stretch !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: min-content !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: 10px !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-status {
  grid-column: auto !important;
  max-width: none !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 211, 113, 0.54) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #fff8e8 0%, #ffedc4 100%) !important;
  color: #8d3419 !important;
  padding: 7px 9px !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-phone {
  grid-column: auto !important;
  justify-self: end !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border: 1px solid rgba(100, 243, 226, 0.72) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #36dcc7 0%, #159fc5 100%) !important;
  color: #06283a !important;
  font-size: 23px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 11px 22px rgba(22, 179, 189, 0.25) !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-phone:disabled {
  border-color: rgba(173, 194, 209, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(219, 235, 244, 0.42) !important;
  box-shadow: none !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call.mode-history {
  opacity: 0.82 !important;
}

/* v338: the first post-call card has only the two decisions a driver needs. */

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call.has-quick-decision {
  min-height: 204px !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-call-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 1px !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-call-actions button {
  min-height: 56px !important;
  border-radius: 18px !important;
  padding: 10px 9px !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-call-accept {
  border-color: rgba(110, 255, 205, 0.62) !important;
  background: linear-gradient(135deg, #43e3a7 0%, #19ae74 100%) !important;
  color: #05291c !important;
}

html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-call-cancel {
  border-color: rgba(255, 143, 143, 0.62) !important;
  background: linear-gradient(135deg, #ff7373 0%, #dc3543 100%) !important;
  color: #ffffff !important;
}

@media (max-width: 520px) {
  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call {
    grid-template-columns: 52px minmax(0, 1fr) 94px !important;
    gap: 8px !important;
    min-height: 132px !important;
    padding: 10px !important;
  }

  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-time {
    border-radius: 17px !important;
    padding-inline: 4px !important;
    font-size: 11px !important;
  }

  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main > strong {
    font-size: 17px !important;
  }

  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-main > i {
    padding: 6px 7px !important;
    font-size: 10px !important;
  }

  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-status {
    min-height: 40px !important;
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call .driver-feed-phone {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 380px) {
  html body.driver-map-mode .driver-app .driver-map-feed-card.driver-feed-row.tone-call {
    grid-template-columns: 48px minmax(0, 1fr) 84px !important;
    gap: 7px !important;
    padding: 9px !important;
  }
}

/* v340: when the driver is free, keep the last completed fare available for inspection. */
html body .driver-app .transport-contract-paper.is-history::before {
  background: linear-gradient(180deg, #30c8a6 0%, #168ee2 100%) !important;
}

html body .driver-app .transport-contract-paper.is-history .transport-contract-topline > span {
  border-color: rgba(24, 142, 219, 0.24) !important;
  background: linear-gradient(135deg, #e8fbf5 0%, #e8f5ff 100%) !important;
  color: #087a72 !important;
}

html body .driver-app .transport-contract-history-note {
  border: 1px solid rgba(24, 142, 219, 0.18) !important;
  background: linear-gradient(135deg, rgba(48, 200, 166, 0.1), rgba(22, 142, 226, 0.08)) !important;
  color: #17465d !important;
  font-weight: 850 !important;
}