/* ===== Yolo AI Booking Agent - Dora — Tour Screens Styles ===== */
/* Load AFTER YRLChatAI-local.css.
   NOTE: This file ONLY defines classes that don't already exist elsewhere in Dora.
   Everything else (box inputs, rider rows, date row, book button, carousel,
   error messages, country picker) reuses your existing .yrl-local-* / .yrl-country-*
   classes so it matches Local MiniCab / Airport / Parcel screens exactly. */

/* ---------- Tour List — 2-up cards ---------- */

.yrl-tour-card {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  padding: 0 6px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease;
}

.yrl-tour-card:hover {
  transform: translateY(-2px);
}

.yrl-tour-card-name {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--yrl-black);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.yrl-tour-card-img-box {
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid var(--yrl-black);
  border-radius: 12px;
  height: 110px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.yrl-tour-card-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yrl-tour-card-price {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--yrl-black);
  margin-top: 8px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* ---------- Tour Detail — image slider ---------- */

.yrl-tour-slider-viewport {
  overflow: hidden;
  border-radius: 12px;
  border: 3px solid var(--yrl-black);
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.3);
}

.yrl-tour-slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.yrl-tour-slider-img {
  flex: 0 0 100%;
  height: 150px;
}

.yrl-tour-slider-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yrl-tour-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
}

.yrl-tour-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.2s ease;
}

.yrl-tour-slider-dot.active {
  background: var(--yrl-black);
}

/* ---------- Tour Detail — text blocks ---------- */

.yrl-tour-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.yrl-tour-duration-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--yrl-black);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.yrl-tour-eye-btn {
  width: 26px !important;
  height: 26px !important;
  position: relative;
  left: 5px;
}

.yrl-tour-eye-btn svg {
  width: 13px;
  height: 13px;
}

.yrl-tour-meta-row .yrl-icon-btn {
  flex-shrink: 0;
}

.yrl-tour-description {
  font-size: 12px;
  font-weight: 600;
  color: var(--yrl-black);
  line-height: 1.4;
  margin-bottom: 10px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.yrl-tour-keypoints {
  font-size: 12px;
  font-weight: 600;
  color: var(--yrl-black);
  line-height: 1.5;
  margin-bottom: 12px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.yrl-tour-keypoints strong {
  font-weight: 800;
}

.yrl-tour-via-line {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--yrl-black);
  opacity: 0.8;
  margin: -4px 0 10px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* ---------- Vehicle / Starting / Ending point row ---------- */

.yrl-tour-info-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 16px;
  box-sizing: border-box;
}

.yrl-tour-info-card {
  position: relative;
  background: #0ABAB5;
  border: 2px solid var(--yrl-black);
  border-radius: 14px;
  padding: 20px 16px 16px;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.yrl-tour-info-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 15px;
  height: 15px;
}

.yrl-tour-info-close svg {
  width: 12px;
  height: 12px;
}

.yrl-tour-point-box {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 480px) {
  .yrl-tour-card-img-box {
    height: 80px;
  }

  .yrl-tour-vehicle-row {
    flex-wrap: wrap;
  }

  .yrl-tour-vehicle-select,
  .yrl-tour-point-box {
    flex: 1 1 100%;
  }
}