/* ===========================================================================
   Product tour — the topbar trigger, plus driver.js restyled to match the demo.
   Loaded after driver.css so these overrides win. Class names taken from
   driver.js 1.8.0's own stylesheet, not guessed.

   Thai appears inside the popovers (฿ figures, zone names, the simulated
   question), so every text rule here runs at ≥21px line-height — the same trap
   already hit in css/omni.css.
   =========================================================================== */

/* ===== Topbar trigger ===== */
.topbar__tour {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.topbar__tour:hover {
  background: var(--bg);
  color: var(--text-1);
}

/* The play triangle is filled, unlike .topbar__settings' stroked gear, and
   mity.html's sprite rules would otherwise apply — so state both. */
.topbar__tour svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  stroke: none;
}

@media (max-width: 720px) {
  /* the label is the first thing to go when the topbar gets tight */
  .topbar__tour span { display: none; }
  .topbar__tour { width: 36px; padding: 0; justify-content: center; }
}

/* ===== driver.js popover ===== */
.driver-popover.tour-pop {
  max-width: 380px;
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .10), 0 12px 32px rgba(0, 0, 0, .12);
  font-family: var(--font-sans);
}

.driver-popover.tour-pop .driver-popover-title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  color: #212121;
}

.driver-popover.tour-pop .driver-popover-description {
  margin: 0;
  font-size: 14px;
  line-height: 23px;
  color: rgba(0, 0, 0, .65);
}

.driver-popover.tour-pop .driver-popover-description b {
  font-weight: 700;
  color: #212121;
}

/* the contact address on the closing step */
.driver-popover.tour-pop .tour-mail {
  font-size: 15px;
  font-weight: 600;
  color: #06C692;
  text-decoration: none;
}

.driver-popover.tour-pop .tour-mail:hover { text-decoration: underline; }

.driver-popover.tour-pop .driver-popover-arrow {
  border-color: #fff;
}

/* ===== footer ===== */
.driver-popover.tour-pop .driver-popover-footer {
  margin-top: 16px;
  gap: 10px;
  align-items: center;
}

.driver-popover.tour-pop .driver-popover-progress-text {
  font-size: 12px;
  line-height: 19px;
  color: rgba(0, 0, 0, .25);
}

.driver-popover.tour-pop .driver-popover-navigation-btns {
  gap: 8px;
}

/* by class, not `… .driver-popover-footer button` — a type selector there would
   out-specify the .driver-popover-next-btn rule below and keep Next white */
.driver-popover.tour-pop .driver-popover-footer-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border, #ECECEC);
  border-radius: 8px;
  background: #fff;
  text-shadow: none;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: #424242;
  cursor: pointer;
}

.driver-popover.tour-pop .driver-popover-footer-btn:hover {
  background: #F5F5F5;
}

/* the forward button is the one to press — green, and last in the row */
.driver-popover.tour-pop .driver-popover-next-btn {
  border-color: #06C692;
  background: #06C692;
  color: #fff;
}

.driver-popover.tour-pop .driver-popover-next-btn:hover {
  border-color: #05B384;
  background: #05B384;
}

.driver-popover.tour-pop .driver-popover-close-btn {
  width: 26px;
  height: 26px;
  color: rgba(0, 0, 0, .35);
  font-size: 20px;
  line-height: 26px;
}

.driver-popover.tour-pop .driver-popover-close-btn:hover {
  color: #212121;
}

/* No .driver-active-element rule here on purpose: driver.js *accumulates* that
   class rather than moving it, so styling it would restyle every element the
   tour has already visited. The cut-out's own radius comes from the
   `stageRadius` option in js/tour.js instead. */

@media (max-width: 720px) {
  .driver-popover.tour-pop {
    max-width: calc(100vw - 32px);
    padding: 14px 16px 12px;
  }
  .driver-popover.tour-pop .driver-popover-title { font-size: 16px; }
}