/**
 * KissTour — FAQs page booking widget enhancement styles.
 * Pairs with assets/js/faqs-booking-toggle.js.
 */

/* Service toggle: Book a Tour | Airport Fast Track */
.kt-svc-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}
.kt-svc-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid var(--primary, #e4367e);
  border-radius: 999px;
  background: #fff;
  color: var(--primary, #e4367e);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.kt-svc-tab.is-active { background: var(--primary, #e4367e); color: #fff; }
.kt-svc-tab:hover { opacity: .88; }

/* City toggle: Saigon | Da Nang */
.kt-loc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal city buttons, always one row */
  gap: 8px;
  margin: 0 0 14px;
}
.kt-loc-label {
  grid-column: 1 / -1;  /* label spans full width, on its own row above */
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.kt-loc-tab {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border: 1.5px solid #d9d9de;
  border-radius: 999px;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.kt-loc-tab.is-active {
  border-color: var(--primary, #e4367e);
  background: var(--primary, #e4367e);
  color: #fff;
}
.kt-loc-tab:not(.is-active):hover { border-color: var(--primary, #e4367e); }

/* Fast Track CTA card — only shown when the FT service tab is active */
.kt-ft-card { display: none; }
.vt-booking-form-wrapper.kt-show-ft .kt-ft-card { display: block; padding: 4px 2px; }
.vt-booking-form-wrapper.kt-show-ft form.vt-booking-form,
.vt-booking-form-wrapper.kt-show-ft .kt-loc-tabs { display: none; }
.kt-ft-lead {
  font-size: 14px;
  line-height: 1.55;
  color: #444;
  margin: 0 0 18px;
}
.kt-ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--primary, #e4367e);
  border-radius: 10px;
  transition: opacity .15s ease;
}
.kt-ft-btn:hover { opacity: .9; color: #fff; }

/* Small screens: stack the service tabs */
@media (max-width: 480px) {
  .kt-svc-tabs { flex-direction: column; }
  .kt-svc-tab { padding: 12px 10px; }
}