/* YM Tour Design A v1.2.0 — Verified Pro — Buttons & Cards for the yj tour detail template.
   Palette: white #FFFFFF, light grey #F4F5F7, red #C1121F, charcoal #1A1A1A.
   Scoped to the tour detail wrapper (main.yj-detail) so nothing else moves. */

/* ---------- Kickers & headings ---------- */
.yj-detail .yj-k {
  color: #C1121F;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.yj-detail .yj-dsec h2 { color: #1A1A1A; }
.yj-detail .yj-dsec h2 i { color: #C1121F; }

/* ---------- Facts strip -> pill buttons ---------- */
.yj-detail .yj-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.yj-detail .yj-facts span {
  background: #F4F5F7;
  border: 1.5px solid #dfe2e6;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1A1A1A;
  white-space: nowrap;
}
.yj-detail .yj-facts i { display: none; }

/* ---------- Key facts -> tiles ---------- */
.yj-detail .yj-keyfacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.yj-detail .yj-keyfacts article {
  background: #F4F5F7;
  border-radius: 14px;
  padding: 14px;
}
.yj-detail .yj-keyfacts small {
  color: #C1121F;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.yj-detail .yj-keyfacts strong {
  display: block;
  font-size: 16px;
  margin: 3px 0 2px;
  color: #1A1A1A;
}
.yj-detail .yj-keyfacts span { color: #666; font-size: 12px; }
@media (min-width: 900px) {
  .yj-detail .yj-keyfacts { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Road-day snapshot -> soft red panel ---------- */
.yj-detail .yj-routenote {
  background: #fdf3f3;
  border: 1.5px solid #f3d7d9;
  border-radius: 14px;
  padding: 14px 16px;
}
.yj-detail .yj-routenote p { color: #333; line-height: 1.6; }

/* ---------- Experience prose ---------- */
.yj-detail .yj-prose p { color: #333; line-height: 1.65; }

/* ---------- Fit lists -> two panels ---------- */
.yj-detail .yj-fit { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .yj-detail .yj-fit { grid-template-columns: 1fr 1fr; }
}
.yj-detail .yj-fit > div {
  background: #fff;
  border: 1.5px solid #e6e8eb;
  border-radius: 14px;
  padding: 14px 16px;
}
.yj-detail .yj-fit h3 { font-size: 14px; margin-bottom: 6px; color: #1A1A1A; }
.yj-detail .yj-fit ul { list-style: none; margin: 0; padding: 0; }
.yj-detail .yj-fit li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}
.yj-detail .yj-fit li:last-child { border-bottom: 0; }
.yj-detail .yj-fit > div:first-child li::before {
  content: "\2713";
  position: absolute; left: 2px; top: 6px;
  color: #C1121F; font-weight: 900;
}
.yj-detail .yj-fit > div:last-child li::before {
  content: "\2013";
  position: absolute; left: 2px; top: 6px;
  color: #888; font-weight: 900;
}

/* ---------- Said plainly -> grey panel (never a dark block) ---------- */
.yj-detail .yj-reality {
  background: #F4F5F7;
  border: 1.5px solid #e2e4e7;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 12px;
  color: #1A1A1A;
}
.yj-detail .yj-reality p { color: #333; line-height: 1.6; }
.yj-detail .yj-reality span { color: #C1121F; }

/* ---------- Itinerary -> numbered stop cards ---------- */
.yj-detail ol.yj-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ymstop;
}
.yj-detail ol.yj-timeline > li {
  position: relative;
  background: #fff;
  border: 1.5px solid #e6e8eb;
  border-radius: 14px;
  padding: 14px 14px 14px 62px;
  margin: 0 0 10px;
  min-height: 0;
  display: block;
}
.yj-detail ol.yj-timeline > li::before {
  counter-increment: ymstop;
  content: counter(ymstop);
  position: absolute;
  left: 14px; top: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #C1121F;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yj-detail ol.yj-timeline > li::after { display: none; }
.yj-detail ol.yj-timeline > li > div::before { display: none; }
.yj-detail ol.yj-timeline time:empty { display: none; }
.yj-detail ol.yj-timeline time:not(:empty) {
  display: inline-block;
  background: #fdf3f3;
  color: #C1121F;
  font-weight: 800;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.yj-detail ol.yj-timeline h3 { font-size: 15.5px; margin: 0 0 3px; color: #1A1A1A; }
.yj-detail ol.yj-timeline p { color: #444; font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ---------- Format variants -> cards ---------- */
.yj-detail .yj-variantgrid article {
  border: 1.5px solid #e6e8eb;
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
}

/* ---------- What is covered -> two panels ---------- */
.yj-detail .yj-incl { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .yj-detail .yj-incl { grid-template-columns: 1fr 1fr; }
}
.yj-detail .yj-incl > div { border-radius: 14px; padding: 14px 16px; }
.yj-detail .yj-incl > div:first-child { background: #fdf3f3; border: 1.5px solid #f3d7d9; }
.yj-detail .yj-incl > div:last-child { background: #F4F5F7; border: 1.5px solid #e2e4e7; }
.yj-detail .yj-incl h3 {
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #1A1A1A;
}
.yj-detail .yj-incl ul { list-style: none; margin: 0; padding: 0; }
.yj-detail .yj-incl li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.yj-detail .yj-incl li:last-child { border-bottom: 0; }
.yj-detail ul.yj-yes li::before {
  content: "\2713";
  position: absolute; left: 2px; top: 6px;
  color: #C1121F; font-weight: 900;
}
.yj-detail ul.yj-no li::before {
  content: "\2013";
  position: absolute; left: 2px; top: 6px;
  color: #888; font-weight: 900;
}

/* ---------- Before you book -> cards ---------- */
.yj-detail .yj-practical { display: grid; gap: 10px; }
@media (min-width: 900px) {
  .yj-detail .yj-practical { grid-template-columns: 1fr 1fr; }
}
.yj-detail .yj-practical article {
  border: 1.5px solid #e6e8eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.yj-detail .yj-practical h3 { font-size: 14px; margin: 0 0 4px; color: #1A1A1A; }
.yj-detail .yj-practical p { color: #444; font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ---------- FAQ -> button rows ---------- */
.yj-detail .yj-faq details {
  border: 1.5px solid #e3e5e8;
  border-radius: 12px;
  margin: 0 0 8px;
  overflow: hidden;
  background: #fff;
  padding: 0;
}
.yj-detail .yj-faq summary {
  background: #F7F8F9;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yj-detail .yj-faq summary::-webkit-details-marker { display: none; }
.yj-detail .yj-faq summary span {
  color: #C1121F;
  font-weight: 900;
  font-size: 18px;
  transition: transform .2s ease;
}
.yj-detail .yj-faq details[open ] summary span { transform: rotate(45deg); }
.yj-detail .yj-faq details p {
  padding: 12px 14px;
  color: #333;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

/* ---------- Buttons: gold is out, red is the brand ---------- */
.yj-detail a.yj-btn-gold,
.yj-dcta a.yj-btn-gold,
.yj-mbook a.yj-btn-gold {
  background: #C1121F !important;
  border-color: #C1121F !important;
  color: #fff !important;
  border-radius: 12px;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: .04em;
}
.yj-detail .yj-gbtn {
  background: #fff;
  border: 1.5px solid #dfe2e6;
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 700;
  color: #1A1A1A;
}

/* ---------- Section nav book link -> red pill ---------- */
.yj-detail .yj-dnav-book {
  background: #C1121F !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
}

/* ---------- Booking card -> price card ---------- */
.yj-detail aside.yj-book {
  background: #fff;
  border: 2px solid #f0d9db;
  border-top: 5px solid #C1121F;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.yj-detail .yj-save {
  color: #C1121F;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.yj-detail .yj-bigprice .yj-ticket {
  font-size: 30px;
  font-weight: 900;
  color: #1A1A1A;
}
.yj-detail .yj-bigprice s { color: #999; font-size: 16px; }
.yj-detail .yj-sub { color: #555; font-size: 12.5px; }
.yj-detail aside.yj-book ul { list-style: none; margin: 12px 0; padding: 0; }
.yj-detail aside.yj-book li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 13px;
  color: #333;
}
.yj-detail aside.yj-book li::before {
  content: "\2713";
  position: absolute; left: 2px; top: 5px;
  color: #C1121F; font-weight: 900;
}
.yj-detail aside.yj-book a.yj-btn { padding: 14px; text-align: center; }
.yj-detail .yj-secure { color: #777; font-size: 12px; }

/* ---------- Sticky mobile booking bar ---------- */
@media (max-width: 860px) {
  .yj-detail .yj-mbook {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9990;
    background: #fff;
    border-top: 2px solid #f0d9db;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .yj-detail .yj-mbook strong { font-size: 19px; font-weight: 900; color: #1A1A1A; }
  .yj-detail .yj-mbook small { color: #777; font-weight: 700; display: block; font-size: 10px; }
  .yj-detail .yj-mbook a.yj-btn { flex: 1; text-align: center; padding: 12px; }
  .yj-detail { padding-bottom: 66px; }
}
@media (min-width: 861px) {
  .yj-detail .yj-mbook { display: none; }
}

/* ===== Verified Pro layer (Sample 1, approved by Haider 2026-10-30) ===== */

/* Trust strip across the top of every tour page */
.yj-detail::before {
  content: "\2713  Verified operator    \2713  Instant confirmation    \2713  Free cancellation";
  display: block;
  background: #1A1A1A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  padding: 9px 10px;
  line-height: 1.6;
}

/* Title-area kicker becomes a tinted chip */
.yj-detail .yj-titlerow .yj-k {
  display: inline-block;
  background: #fdf3f3;
  border: 1.5px solid #f3d7d9;
  color: #C1121F;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Verified operator seal under the short pitch */
.yj-detail .yj-pitch::after {
  content: "\2713  Verified local operator \2014  Yamaguchi Motors \5408\540C\4F1A\793E\A Registered company in Japan \00B7 also bookable on GetYourGuide";
  white-space: pre-line;
  display: block;
  background: #F4F5F7;
  border-left: 4px solid #C1121F;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.55;
}

/* Icons on the four key-facts tiles (template order: Duration / Where / Walking / Cancellation) */
.yj-detail .yj-keyfacts article:nth-child(1) small::before { content: "\231A  "; }
.yj-detail .yj-keyfacts article:nth-child(2) small::before { content: "\1F4CD  "; }
.yj-detail .yj-keyfacts article:nth-child(3) small::before { content: "\1F6B6  "; }
.yj-detail .yj-keyfacts article:nth-child(4) small::before { content: "\21A9  "; }

/* Secure-payment line in the booking card */
.yj-detail .yj-book .yj-secure { text-align: center; font-weight: 700; color: #555; }

/* Gallery: thumbnail row + photo counter pill (phone) */
@media (max-width: 860px) {
  .yj-detail .yj-gallery { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .yj-detail .yj-gallery .yj-gmain { grid-column: 1 / -1; }
  .yj-detail .yj-gallery figure:not(.yj-gmain) { height: 52px; overflow: hidden; border-radius: 8px; margin: 0; }
  .yj-detail .yj-gallery figure:not(.yj-gmain) img { width: 100%; height: 100%; object-fit: cover; }
  .yj-detail .yj-gallery figure:nth-of-type(n+7) { display: none; }
  .yj-detail .yj-gbtn {
    position: absolute;
    right: 10px;
    bottom: 66px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
  }
}

/* ===== Prestige Plus layer (v1.2.0, owner-approved 2026-10-30) =====
   White/red Toyota-grade tuning over the Verified Pro base:
   the verified strip goes light, display type becomes Archivo,
   the booking price takes the 2.3rem Prestige size, the
   itinerary gains its connector line, and primary buttons get
   the Prestige red shadow + lift. */

/* Verified strip: light panel, red left rule (was charcoal) */
.yj-detail::before {
  background: #F4F5F7;
  border: 1.5px solid #e3e5e8;
  border-left: 5px solid #C1121F;
  border-radius: 12px;
  color: #1A1A1A;
  margin: 0 0 14px;
}

/* Display type */
.yj-detail h2, .yj-detail h3, .yj-detail .yj-bigprice .yj-ticket {
  font-family: 'Archivo', 'Noto Sans JP', sans-serif;
}

/* Key-facts tiles: bordered, lifted */
.yj-detail .yj-keyfacts article {
  border: 1.5px solid #e3e5e8;
  box-shadow: 0 6px 18px rgba(12, 12, 16, .05);
}

/* Itinerary: vertical connector line between stop cards */
.yj-detail ol.yj-timeline > li::after {
  display: block;
  content: "";
  position: absolute;
  left: 30px;
  top: 58px;
  bottom: -12px;
  width: 2px;
  background: #f0d9db;
}
.yj-detail ol.yj-timeline > li:last-child::after { display: none; }
.yj-detail ol.yj-timeline > li {
  box-shadow: 0 6px 18px rgba(12, 12, 16, .04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.yj-detail ol.yj-timeline > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(12, 12, 16, .09);
}

/* Booking card: Prestige price size + red-shadow primary button */
.yj-detail .yj-bigprice .yj-ticket { font-size: 37px; letter-spacing: -.015em; }
.yj-detail a.yj-btn-gold,
.yj-dcta a.yj-btn-gold,
.yj-mbook a.yj-btn-gold {
  box-shadow: 0 12px 26px rgba(193, 18, 31, .28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.yj-detail a.yj-btn-gold:hover,
.yj-dcta a.yj-btn-gold:hover,
.yj-mbook a.yj-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(193, 18, 31, .34);
}
.yj-detail aside.yj-book { box-shadow: 0 18px 40px rgba(12, 12, 16, .09); }

/* Verified seal: white card treatment */
.yj-detail .yj-pitch::after {
  background: #fff;
  border: 1.5px solid #e3e5e8;
  border-left: 4px solid #C1121F;
  box-shadow: 0 6px 18px rgba(12, 12, 16, .05);
}

/* Mobile booking bar: Prestige price type */
@media (max-width: 860px) {
  .yj-detail .yj-mbook strong { font-family: 'Archivo', 'Noto Sans JP', sans-serif; font-size: 21px; }
}