/* Online booking (pay.kingtocar.com/app) — Sky 6 Oct 2026: "make the Book online button stand out".
   Jev review (~/typesafe/kingtocar-site-booking/recommendation.md): brand champagne gold, the ONLY filled gold
   button on a screen (other gold buttons become outlined), at least 48px tall and full width on phones, a small line
   under it with the card / PromptPay marks, chat as a text link under it. Still: no glow, sheen, blinking or pop-up.
   Loaded last on every page type (bundle, route pages, older content pages). */

/* Every other gold button: outlined. */
.glass-site .button.gold:not(.book-online){background:transparent;border:1px solid #f0c985;color:#f0c985;box-shadow:none}
.glass-site .button.gold:not(.book-online):hover{background:#f0c98514;border-color:#ffe0a1;color:#ffe0a1}
/* (no fleet-section override: glass.css makes that section dark too, so the light-gold outline above reads there — Sky 6 Oct:
   "the car button is gone", it had dark text #17251e on the dark car cards) */

/* The online booking button. */
.book-online-cta{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.button.book-online,.ticket-book.book-online,.ktc-footer-book,.btn.book-online{background:linear-gradient(115deg,#f4d49d 0%,#fff4d5 38%,#d8b67c 72%,#edce95 100%);border:1px solid #f9eac499;color:#152228;font-weight:700;box-shadow:0 5px 25px #dfb76b22,inset 0 1px 0 #fff9,inset 0 -2px 0 #a9885538;animation:none}
.button.book-online{min-height:48px;justify-content:center;gap:10px;white-space:normal;text-align:center;line-height:1.3}
.button.book-online:hover,.ticket-book.book-online:hover,.ktc-footer-book:hover,.btn.book-online:hover{background:linear-gradient(115deg,#ffe1a9 0%,#fff5dd 38%,#e6c38b 72%,#f2d69f 100%);color:#0d1a1c;box-shadow:0 8px 28px #dfba7040,inset 0 1px 0 #fff9}
.book-online::before,.book-online::after{content:none!important}
.book-online svg{flex:none}
.book-online[aria-disabled=true]{opacity:.6}
.book-online:focus-visible,.book-chat-link:focus-visible{outline:2px solid #ffe1a2;outline-offset:3px}
.book-online-cta .book-online-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 7px;margin:0!important;font-size:12px;line-height:1.5;color:#b2c0c6;text-align:center}
.book-online-marks{display:inline-flex;align-items:center;gap:4px}
.book-online-marks img{display:block;width:auto;height:12px;padding:2px 4px;border-radius:3px;background:#fff}
.book-chat-link{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:2px 6px;font-size:13px;font-weight:400;line-height:1.4;color:#f0c985;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-align:center;background:none;border:0;box-shadow:none}
.book-chat-link:hover{color:#ffe0a1}

/* Header (desktop; phones use the bottom bar). */
.glass-site .header .nav-book.book-online{font-weight:700}

/* Homepage hero. */
.home-view .hero-actions{align-items:flex-start}
.home-view .hero-actions .hero-book-cta{flex:none}
.home-view .hero-actions .hero-book-cta .button{min-height:52px;font-size:15px;padding:12px 28px;gap:12px}
.home-view .hero-actions .hero-book-cta .book-online-note{justify-content:flex-start;max-width:none;font-size:13px;color:#dfe7e4;text-shadow:0 1px 4px #000c}
.home-view .hero-actions .hero-routes-button{min-height:52px}
.home-view .hero-actions .hero-gallery-link{margin-top:7px}

/* Fare-board pop-up. */
.ticket-book-cta{margin-top:2px}
.transfer-ticket-popup .ticket-book.book-online{justify-content:center;gap:10px;min-height:52px;font-size:16px}
.transfer-ticket-popup .book-chat-link{min-height:30px}

/* Pop-up: the arrow between From and To is a round swap button (Sky 6 Oct 2026: flip Bangkok → Pattaya to Pattaya → Bangkok). */
.transfer-ticket-popup .ticket-route{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:8px}
.transfer-ticket-popup .ticket-route-line{justify-content:center}
.transfer-ticket-popup .ticket-route-line>.ticket-route-arrow{display:inline-flex;width:auto;height:auto;background:none}
.ticket-swap{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #f0c985;border-radius:50%;background:#0f1b23;color:#f0c985;cursor:pointer;transition:background .2s,color .2s,transform .3s}
.ticket-swap svg{width:20px;height:20px;stroke-width:1.8}
.ticket-swap:hover{background:#f0c9851f;color:#ffe0a1}
.ticket-swap:active{transform:rotate(180deg)}
.ticket-swap:focus-visible{outline:2px solid #ffe1a2;outline-offset:3px}
.transfer-ticket-popup .ticket-route-arrow[hidden],.ticket-swap[hidden]{display:none!important}

/* Route page: "Plan your journey" box and the two price cards. */
.destination-page .route-booking .plan-book-cta{margin-top:2px;gap:5px}
.destination-page .route-booking .plan-book-cta .route-cta{min-height:50px;font-size:15px;padding:11px 16px}
.destination-page .route-booking .booking-note{margin-top:6px}
.destination-page .route-car .price-book-cta{margin-top:12px;gap:5px}
.destination-page .route-car .price-book-cta .button{width:100%;min-height:48px;font-size:14px;padding:9px 12px;gap:8px}
.destination-page .route-car .price-book-cta .book-online-note{font-size:11.5px}
.destination-page .route-car .price-book-cta .book-chat-link{font-size:12.5px}

/* Homepage: hourly planner, steps, FAQ "How do I book?", closing section. */
.hourly-summary .hourly-book-cta{flex:0 1 300px;margin-left:auto}
.hourly-summary .hourly-book-cta .button{width:100%;font-size:14px}
.steps-book-cta{max-width:420px;margin:34px auto 0}
.faq-book-cta{max-width:340px;margin-top:14px}
.closing-book-cta{max-width:420px;margin:24px auto 20px}
.closing-book-cta .book-online-note{color:#d4dde0}

/* Chat chooser: online booking is the first option. */
.contact-option.contact-online{border-color:#f0c98599;background:linear-gradient(115deg,#f4d49d1f,#f0c98508)}
.contact-online .contact-option-icon{background:linear-gradient(115deg,#f4d49d,#fff4d5 38%,#d8b67c 72%,#edce95);color:#152228}

/* Phone bottom bar: the centre item is a gold pill. */
.bottom-navigation a.bottom-book{color:#152228;font-weight:600;background:linear-gradient(115deg,#f4d49d 0%,#fff4d5 38%,#d8b67c 72%,#edce95 100%);box-shadow:inset 0 1px 0 #fff9,0 4px 16px #dfb76b33}
.bottom-navigation a.bottom-book>svg{stroke-width:2}
@media(hover:hover){.bottom-navigation a.bottom-book:hover{color:#0d1a1c;background-color:transparent}}

/* Footer. */
.ktc-footer .ktc-footer-book{color:#152228;display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin:2px 0 14px;padding:9px 24px;border-radius:100px;text-decoration:none;line-height:1.35}
.ktc-footer .ktc-footer-book>span{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#152228}
.ktc-footer .ktc-footer-book:hover{text-decoration:none}
.ktc-footer .ktc-footer-book>small{font-size:11px;font-weight:500;color:#33444a}

/* Older content pages (guides): "Book online" leads the hero buttons; the chat buttons beside it are outlined. */
.theme-v22-detail .header .nav-book.book-online{background:linear-gradient(115deg,#f4d49d 0%,#fff4d5 38%,#d8b67c 72%,#edce95 100%);color:#152228;font-weight:700}
.theme-v22-detail .hero-cta>.btn{max-width:100%;white-space:normal;text-align:center}
.theme-v22-detail .hero-cta>.btn.book-online{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.35;text-decoration:none}
.theme-v22-detail .hero-cta>.btn.book-online>small{font-size:11.5px;font-weight:500;color:#33444a}
.theme-v22-detail .btn[data-book-now],.theme-v22-detail .hero-cta>.btn:not(.book-online){background:transparent;border:1px solid #f0c985;color:#f0c985;box-shadow:none}

@media(max-width:768px){
 .home-view .hero-actions .hero-book-cta{flex:1 1 100%}
 .home-view .hero-actions .hero-book-cta .button{width:100%;min-height:50px;font-size:15px}
 .home-view .hero-actions .hero-routes-button{min-height:44px}
 /* phones: fare and button side by side, the small line and the chat link under both */
 .hourly-summary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px}
 .hourly-summary .hourly-book-cta{display:contents}
 .hourly-summary .hourly-book-cta .button{grid-column:2;grid-row:1;min-height:48px}
 .hourly-summary .hourly-book-cta .book-online-note,.hourly-summary .hourly-book-cta .book-chat-link{grid-column:1/-1;justify-self:center}
}
@media(max-width:600px){
 .theme-v22-detail .hero-cta>.btn.book-online{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.book-online,.ticket-swap{transition:none}.ticket-swap:active{transform:none}}