.wtw-wizard {
  --wtw-primary: #0c83ff;
  --wtw-primary-deep: #0a4fa8;
  --wtw-primary-soft: #d8ebff;
  --wtw-ink: #0f1f34;
  --wtw-ink-soft: #55657d;
  --wtw-border: #cddff5;
  --wtw-surface: #ffffff;
  --wtw-surface-soft: #f6fbff;
  --wtw-radius: 18px;
  --wtw-shadow: 0 24px 64px rgba(8, 44, 94, 0.2);
  width: 100%;
  min-height: 100vh;
  padding: 14px;
  box-sizing: border-box;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% -18%, rgba(12, 131, 255, 0.28), transparent 44%),
    radial-gradient(circle at 120% 110%, rgba(0, 110, 255, 0.16), transparent 38%),
    linear-gradient(135deg, #eaf4ff 0%, #f5faff 50%, #ffffff 100%);
  color: var(--wtw-ink);
}

.wtw-card {
  max-width: 1060px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--wtw-shadow);
  backdrop-filter: blur(7px);
}

.wtw-hero {
  position: relative;
  min-height: 230px;
  overflow: hidden;
}

.wtw-hero-track {
  position: absolute;
  inset: 0;
}

.wtw-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.65s ease, transform 1.2s ease;
}

.wtw-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.wtw-hero-layer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(8, 16, 30, 0.82), rgba(9, 33, 66, 0.52) 58%, rgba(7, 66, 132, 0.62));
}

.wtw-hero-content {
  position: relative;
  z-index: 2;
  padding: 28px 18px 20px;
  color: #fff;
}

.wtw-hero-kicker {
  margin: 0;
  letter-spacing: 0.24em;
  font-size: 0.7rem;
  font-weight: 700;
  color: #a6d3ff;
}

.wtw-hero-content h2 {
  margin: 8px 0 6px;
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.wtw-hero-content p {
  margin: 0;
  font-size: 0.94rem;
  color: #deecff;
}

.wtw-hero-dots {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 14px;
  display: flex;
  gap: 8px;
}

.wtw-hero-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
}

.wtw-hero-dot.is-active {
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(12, 131, 255, 0.44);
}

.wtw-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px 18px 0;
}

.wtw-progress span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #d8e8fb;
}

.wtw-progress span.is-active {
  background: linear-gradient(90deg, #0090ff, #31b6ff);
}

.wtw-form {
  padding: 14px 18px 18px;
}

.wtw-step {
  display: none;
  animation: wtwFade 0.28s ease;
}

.wtw-step.is-active {
  display: block;
}

@keyframes wtwFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wtw-step h3 {
  margin: 2px 0 16px;
  font-size: 1.16rem;
  color: var(--wtw-ink);
  font-weight: 800;
}

.wtw-grid {
  display: grid;
  gap: 12px;
}

.wtw-grid-route,
.wtw-grid-meta,
.wtw-grid-final {
  grid-template-columns: 1fr;
}

.wtw-grid-route {
  grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
  align-items: end;
}

.wtw-route-presets {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid #d5e6fb;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
}

.wtw-route-presets-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #23456f;
}

.wtw-route-presets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wtw-route-chip {
  border: 1px solid #c7dcf5;
  border-radius: 999px;
  background: #fff;
  color: #1f436e;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
}

.wtw-route-chip.is-active {
  border-color: #0d7af0;
  background: #e9f4ff;
  color: #0f5fb5;
}

.wtw-field {
  display: grid;
  gap: 6px;
}

.wtw-field label {
  font-size: 0.84rem;
  color: var(--wtw-ink-soft);
  font-weight: 700;
}

.wtw-field input {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: 1.5px solid #bfd4ec;
  background: #fff;
  color: var(--wtw-ink);
  font-size: 0.96rem;
  font-weight: 600;
  padding: 0 14px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wtw-field input:focus {
  outline: none;
  border-color: var(--wtw-primary);
  box-shadow: 0 0 0 3px rgba(12, 131, 255, 0.18);
}

.wtw-swap {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 999px;
  border: 1.5px solid #bdd6f2;
  background: #eef6ff;
  color: var(--wtw-primary-deep);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  align-self: end;
  justify-self: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wtw-swap:hover {
  border-color: #8eb8e7;
  box-shadow: 0 8px 18px rgba(15, 98, 181, 0.18);
}

.wtw-swap:active {
  transform: rotate(180deg) scale(0.98);
}

.pac-container {
  z-index: 999999 !important;
  border-radius: 12px;
  border: 1px solid #bcd5ef;
  box-shadow: 0 12px 24px rgba(8, 34, 66, 0.16);
}

.wtw-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wtw-toggle {
  width: 58px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.wtw-toggle input {
  display: none;
}

.wtw-toggle span {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #bfd3ea;
  position: relative;
  transition: background 0.2s ease;
}

.wtw-toggle span::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(3, 20, 38, 0.25);
}

.wtw-toggle input:checked + span {
  background: linear-gradient(180deg, #0d8cff, #0566cb);
}

.wtw-toggle input:checked + span::after {
  transform: translateX(26px);
}

.wtw-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.wtw-btn {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  font-size: 0.96rem;
  font-weight: 800;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.wtw-btn:hover {
  transform: translateY(-1px);
}

.wtw-btn:active {
  transform: translateY(0);
}

.wtw-btn-primary {
  flex: 1;
  color: #fff;
  background: linear-gradient(180deg, #1ca1ff 0%, #0a6fd7 100%);
  box-shadow: 0 12px 24px rgba(6, 88, 173, 0.28);
}

.wtw-btn-offer {
  color: #7c3f00;
  background: linear-gradient(180deg, #ffe3bf 0%, #ffc987 100%);
  border: 1px solid #ffb861;
}

.wtw-btn-ghost {
  color: var(--wtw-primary-deep);
  background: #edf6ff;
  border: 1px solid #c7def7;
}

.wtw-btn:disabled,
.wtw-btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.wtw-selection-tools {
  margin-top: 10px;
}

.wtw-vehicle-list {
  display: grid;
  gap: 12px;
}

.wtw-vehicle-card {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #d4e2f4;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 31, 52, 0.07);
}

.wtw-vehicle-card.is-selected {
  border-color: #0c83ff;
  box-shadow: 0 12px 28px rgba(10, 92, 180, 0.22);
}

.wtw-vehicle-card.is-selected [data-vehicle-select] {
  background: linear-gradient(180deg, #ff9e2f 0%, #f07a00 100%);
  box-shadow: 0 10px 22px rgba(240, 122, 0, 0.34);
}

.wtw-vehicle-card.is-dim {
  display: none;
}

.wtw-vehicle-image {
  width: 120px;
  height: 74px;
  object-fit: cover;
  border-radius: 12px;
  background: #eef5ff;
}

.wtw-vehicle-meta h4 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: #10243d;
}

.wtw-vehicle-meta p {
  margin: 0;
  color: #61738e;
  font-size: 0.84rem;
}

.wtw-vehicle-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #1d5ea3;
  font-size: 0.74rem;
  font-weight: 800;
}

.wtw-vehicle-price {
  text-align: right;
  color: #0e1f34;
  font-size: 1.24rem;
  font-weight: 900;
}

.wtw-vehicle-price small {
  display: block;
  font-size: 0.7rem;
  color: #6e7f95;
  font-weight: 700;
}

.wtw-summary,
.wtw-confirm-box {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d3e1f4;
  background: linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%);
  color: #12243d;
  margin-bottom: 12px;
}

.wtw-passenger-list {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d3e1f4;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  display: grid;
  gap: 10px;
}

.wtw-passenger-list h4 {
  margin: 0;
  font-size: 0.95rem;
  color: #17304f;
  font-weight: 800;
}

.wtw-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.wtw-share-btn {
  border: 1px solid #bed8f5;
  background: #f4f9ff;
  color: #184a80;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.wtw-share-btn:hover {
  border-color: #84baf0;
  background: #e7f2ff;
}

.wtw-summary-row,
.wtw-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed #d6e4f7;
}

.wtw-summary-row:last-child,
.wtw-confirm-row:last-child {
  border-bottom: 0;
}

.wtw-summary-warning {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff3e2;
  color: #985a00;
  border: 1px solid #ffd6a0;
  font-size: 0.84rem;
}

.wtw-map {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  border: 1px solid #cfe1f7;
  background: #e7f2ff;
  overflow: hidden;
}

.wtw-error {
  border-color: #db3e3e !important;
  box-shadow: 0 0 0 3px rgba(219, 62, 62, 0.14) !important;
}

.wtw-inline-note {
  margin-top: 4px;
  color: #ca2d2d;
  font-size: 0.82rem;
  font-weight: 700;
}

.is-hidden {
  display: none !important;
}

@media (min-width: 760px) {
  .wtw-wizard {
    min-height: 0;
    padding: 24px;
  }

  .wtw-card {
    border-radius: 24px;
  }

  .wtw-hero {
    min-height: 275px;
  }

  .wtw-hero-content {
    max-width: 56%;
    padding: 34px 26px 20px;
  }

  .wtw-hero-content h2 {
    font-size: 2rem;
  }

  .wtw-form {
    padding: 18px 22px 22px;
  }

  .wtw-grid-route {
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
    align-items: end;
  }

  .wtw-grid-meta {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
  }

  .wtw-grid-final {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .wtw-actions {
    justify-content: flex-end;
  }

  .wtw-btn-primary {
    flex: 0 0 230px;
  }
}

.wtw-fleet {
  margin: 20px 0;
}

.wtw-fleet-title {
  margin: 0 0 10px;
  font-size: 1.24rem;
  color: #10243d;
}

.wtw-fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.wtw-fleet-card {
  border: 1px solid #d6e5f7;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 43, 75, 0.08);
}

.wtw-fleet-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.wtw-fleet-card-body {
  padding: 10px 12px 12px;
}

.wtw-fleet-card-body h4 {
  margin: 0 0 6px;
  color: #10243d;
  font-size: 1rem;
}

.wtw-fleet-card-body p {
  margin: 0;
  color: #5f7188;
  font-size: 0.82rem;
}

.wtw-fleet-price {
  margin-top: 8px !important;
  color: #0d5fb8 !important;
  font-weight: 800;
}

.wtw-compare {
  margin: 20px 0;
}

.wtw-compare-title {
  margin: 0 0 10px;
  color: #10243d;
  font-size: 1.24rem;
}

.wtw-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid #d3e3f6;
  border-radius: 12px;
  background: #fff;
}

.wtw-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
}

.wtw-compare-table th,
.wtw-compare-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e3edf9;
  color: #203955;
  font-size: 0.88rem;
}

.wtw-compare-table th {
  background: #f1f7ff;
  font-weight: 800;
}

.wtw-compare-table tr.is-primary td {
  background: #e8f3ff;
  font-weight: 700;
}

.wtw-iframe-wrap {
  width: 100%;
  border: 1px solid #d5e5f7;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.wtw-iframe {
  width: 100%;
  display: block;
  border: 0;
}

.wtw-partner-register,
.wtw-driver-portal,
.wtw-operation-board {
  margin: 20px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #d5e5f7;
  background: #fff;
}

.wtw-partner-register input,
.wtw-driver-portal input,
.wtw-driver-portal textarea {
  width: 100%;
  max-width: 540px;
  border: 1px solid #c9dbf1;
  border-radius: 10px;
  padding: 8px 10px;
}

.wtw-partner-register button,
.wtw-driver-portal button {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2698ff 0%, #0d73dd 100%);
  color: #fff;
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 700;
}

.wtw-register-note {
  padding: 8px 10px;
  border-radius: 9px;
  font-weight: 700;
}

.wtw-register-note.is-success {
  background: #e8f8ec;
  color: #176538;
  border: 1px solid #b9e4c8;
}

.wtw-register-note.is-error {
  background: #fdecec;
  color: #942a2a;
  border: 1px solid #f3b8b8;
}

.wtw-driver-vehicles-table,
.wtw-operation-table {
  width: 100%;
  border-collapse: collapse;
}

.wtw-driver-vehicles-table th,
.wtw-driver-vehicles-table td,
.wtw-operation-table th,
.wtw-operation-table td {
  border-bottom: 1px solid #e3edf9;
  padding: 8px;
  text-align: left;
  font-size: 0.86rem;
}

.wtw-commission-report p {
  margin: 6px 0 14px;
  color: #29415f;
  font-weight: 600;
}

.wtw-n8n-templates h4 {
  margin: 16px 0 8px;
  font-size: 0.98rem;
  color: #123a67;
}

.wtw-n8n-templates pre {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #1c3f6b;
  background: linear-gradient(180deg, #0c1c30 0%, #102742 100%);
  color: #e7f1ff;
  font-size: 0.76rem;
  line-height: 1.48;
  overflow: auto;
}

@media (min-width: 1180px) {
  .wtw-card {
    max-width: 980px;
  }

  .wtw-map {
    height: 430px;
  }
}