/* 景点详情页与预约弹层（/destinations/:destinationId）——对应 src/pages/destination-page.js */
.destination-hero { height: 266px; margin: 0 15px; overflow: hidden; border-radius: 20px; }
.destination-hero img { width: 100%; height: 100%; object-fit: cover; }
.destination-copy { padding: 15px 18px 10px; }
.destination-heading { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.destination-heading h1 { font: 800 24px/1.2 var(--font-serif); }
.destination-heading button { font-size: 22px; }
.destination-copy > p { margin-top: 10px; color: #4e4741; font-size: 11px; line-height: 1.7; }
.destination-facts { margin: 0 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; }
.destination-facts > div { min-height: 43px; padding: 9px 12px; display: grid; grid-template-columns: 26px 94px 1fr; gap: 6px; align-items: center; }
.destination-facts > div + div { border-top: 1px solid var(--line); }
.destination-facts span { color: var(--orange); }
.destination-facts strong { font-size: 11px; }
.destination-facts p { color: var(--muted); font-size: 10px; }
.audio-guide-card { margin: 13px 17px; min-height: 116px; padding: 15px; display: grid; grid-template-columns: 1fr 110px; align-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(110deg, #299dde, #99e9ed); color: white; }
.audio-guide-card h2 { font: 700 20px/1.2 var(--font-serif); }
.audio-guide-card p { margin-top: 5px; font-size: 10px; }
.audio-guide-card button { margin-top: 11px; padding: 7px 10px; border-radius: 15px; background: white; color: #1880b7; font-size: 10px; font-weight: 700; }
.audio-guide-card img { width: 112px; height: 90px; object-fit: contain; }
.destination-actions { padding: 0 17px 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.destination-actions button { min-height: 68px; padding: 7px 4px; border-radius: 16px; background: linear-gradient(145deg, #f18a35, #f25b1f); color: white; font-size: 10px; font-weight: 700; }
.destination-actions button:nth-child(2) { background: linear-gradient(145deg, #63ba76, #40a066); }
.destination-actions button:nth-child(3) { background: linear-gradient(145deg, #61aee9, #428add); }
.destination-actions button:nth-child(4) { background: linear-gradient(145deg, #f5c23d, #eaa92c); }

.booking-card { margin-top: 15px; padding: 10px; display: grid; grid-template-columns: 47% 1fr; gap: 12px; align-items: center; border-radius: 17px; background: white; }
.booking-card img { width: 100%; height: 150px; border-radius: 14px; object-fit: cover; }
.booking-card h3 { font-size: 18px; }
.booking-card p { margin-top: 8px; color: var(--muted); font-size: 11px; }
.booking-group { margin-top: 17px; }
.booking-group h3 { margin-bottom: 9px; font-size: 15px; }
.booking-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.booking-options button { min-height: 43px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.booking-options button.is-active { border-color: var(--orange); background: var(--orange); color: white; }
.booking-options.booking-times button.is-active { border-color: var(--jade); background: var(--jade); }
.counter-row { display: flex; justify-content: space-between; align-items: center; }
.counter { display: grid; grid-template-columns: repeat(3, 42px); align-items: center; border: 1px solid var(--line); border-radius: 16px; background: white; }
.counter b { text-align: center; }
.booking-contact { width: 100%; height: 43px; padding: 0 13px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.booking-actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.gateway-card { padding: 20px 0 8px; text-align: center; }
.gateway-card b { width: 64px; height: 64px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-size: 30px; }
.gateway-card h3 { margin-top: 14px; font-size: 20px; }
.gateway-card p { margin: 9px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.destination-page .destination-hero { height: 255px; }
.destination-pager { position: absolute; left: 50%; bottom: 9px; display: flex; gap: 5px; transform: translateX(-50%); }
.destination-pager i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); }
.destination-pager i.is-active { width: 22px; border-radius: 5px; background: white; }
.destination-page .destination-heading { align-items: center; }
.destination-page .destination-heading h1 { font-size: 25px; }
.destination-title-actions { display: flex; gap: 9px; }
.destination-title-actions button { display: grid; justify-items: center; color: var(--muted); font-size: 9px; }
.destination-title-actions span { font-size: 18px; }
.destination-tags { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.destination-tags span { padding: 4px 8px; border-radius: 9px; background: var(--orange-soft); color: var(--orange-dark); font-size: 9px; }
.destination-facts > button { width: 100%; min-height: 48px; padding: 9px 12px; display: grid; grid-template-columns: 28px 88px 1fr 15px; gap: 7px; align-items: center; text-align: left; }
.destination-facts > button + button { border-top: 1px solid var(--line); }
.fact-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: white; }
.fact-icon.is-time { background: var(--jade); }
.fact-icon.is-ticket { background: var(--orange); }
.fact-icon.is-address { background: var(--blue); }
.audio-guide-card { position: relative; grid-template-columns: 1fr 45px 92px; }
.audio-guide-copy small { font-size: 11px; font-weight: 700; }
.audio-guide-copy h2 { margin-top: 3px; font-size: 18px; }
.audio-language-actions { margin-top: 8px; display: flex; gap: 5px; }
.audio-language-actions button { margin: 0; padding: 5px 7px; font-size: 8px; }
.audio-play { width: 40px; height: 40px; margin: 0 !important; border-radius: 50% !important; font-size: 17px !important; }
.source-note { margin: -5px 18px 11px; color: var(--muted); font-size: 9px; }
.destination-action { display: grid; justify-items: center; align-content: center; gap: 2px; }
.destination-action > span { font-size: 23px; }
.destination-action strong, .destination-action small { display: block; }
.destination-action strong { font-size: 10px; }
.destination-action small { font-size: 8px; opacity: .9; }

@media (max-width: 380px) {
  .destination-actions { gap: 5px; }
}

/* 联系人必填校验反馈 */
.booking-contact { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.booking-contact:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241, 90, 26, 0.12); outline: none; }
.booking-contact.is-invalid { border-color: #d43a2a; animation: shake 320ms ease; }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.booking-options button { transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }