:root {
  --ink: #06101d;
  --navy: #091929;
  --navy-2: #0d2134;
  --paper: #f5f2eb;
  --muted: #9cabba;
  --line: rgba(225, 174, 75, .35);
  --gold: #e7ad43;
  --gold-light: #ffd07a;
  --green: #32c372;
  --white: #f8fafc;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --font: 'Noto Sans Thai', 'Noto Sans', system-ui, sans-serif;
  --serif: 'DM Serif Display', 'Noto Sans Thai', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; font-family: var(--font); color: var(--white); background: var(--ink); line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1476px, calc(100% - 64px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-glow { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 82% 10%, rgba(34, 76, 108, .18), transparent 28%), radial-gradient(circle at 8% 48%, rgba(221, 153, 49, .08), transparent 26%); }

.site-header { min-height: 108px; display: flex; align-items: center; gap: 24px; padding: 13px max(30px, calc((100vw - 1476px) / 2)); border-bottom: 1px solid rgba(216, 172, 83, .16); background: rgba(3, 12, 23, .90); backdrop-filter: blur(18px); position: relative; z-index: 30; }
.brand { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; width: 220px; min-width: 170px; position: relative; }
.brand-crown { grid-column: 1 / -1; justify-self: center; color: var(--gold); font-size: 25px; line-height: .65; transform: translateX(-20px); text-shadow: 0 0 24px rgba(231,173,67,.6); }
.brand-script { font: italic 44px/1 var(--serif); color: var(--gold-light); letter-spacing: -2px; grid-column: 1 / -1; justify-self: start; text-shadow: 0 2px 22px rgba(225,161,36,.23); }
.brand-sub { color: var(--gold-light); letter-spacing: 5px; font-size: 12px; font-weight: 700; grid-column: 1 / -1; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(17px, 2vw, 38px); flex: 1; }
.nav-link { font-size: 15px; color: rgba(248,250,252,.86); padding: 12px 0 17px; position: relative; transition: color .2s ease; white-space: nowrap; }
.nav-link::after { content: ''; position: absolute; height: 2px; left: 0; right: 0; bottom: 7px; background: var(--gold); transform: scaleX(0); transition: transform .25s ease; transform-origin: left; }
.nav-link:hover, .nav-link.active { color: var(--gold-light); }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.language-switcher { display: inline-flex; position: relative; flex: 0 0 auto; z-index: 35; }
.language-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 11px; border: 1px solid rgba(229,170,65,.7); border-radius: 12px; color: #f4f6f8; background: rgba(3,13,24,.72); white-space: nowrap; transition: .2s; }
.language-toggle:hover, .language-toggle[aria-expanded="true"] { border-color: var(--gold-light); background: rgba(226,161,55,.12); }
.language-flag { display: inline-block; flex: 0 0 auto; font-family: system-ui, "Noto Color Emoji", sans-serif; font-size: 19px; line-height: 1; }
.language-current-code { color: var(--gold-light); font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.language-caret { color: var(--gold-light); font-size: 12px; transition: transform .2s; }
.language-toggle[aria-expanded="true"] .language-caret { transform: rotate(180deg); }
.language-options { position: absolute; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; width: min(310px, calc(100vw - 24px)); max-height: min(68vh, 520px); overflow: auto; padding: 8px; border: 1px solid rgba(231,173,67,.58); border-radius: 12px; background: rgba(4,15,27,.98); box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.language-options[hidden] { display: none !important; }
.language-option { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 6px 9px; border: 0; border-radius: 8px; color: #edf1f4; background: transparent; text-align: start; white-space: nowrap; font-size: 13px; cursor: pointer; }
.language-option:hover, .language-option[aria-pressed="true"] { color: var(--gold-light); background: rgba(226,161,55,.12); }
.mobile-language-switcher { display: none; }
.call-button { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--gold); border-radius: 12px; padding: 12px 20px; color: var(--gold-light); font-weight: 700; font-size: 20px; letter-spacing: .3px; white-space: nowrap; transition: .2s; }
.call-button:hover { color: var(--ink); background: var(--gold); box-shadow: 0 0 32px rgba(231,173,67,.25); }
.call-button svg { width: 24px; fill: currentColor; }
.menu-toggle { display: none; }
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .language-options { right: auto; left: 0; }
html[dir="rtl"] .language-option { text-align: right; }
html[dir="rtl"] .nav-link::after { transform-origin: right; }
html[dir="rtl"] .hero-copy { padding: 5px 52px 0 0; }
html[dir="rtl"] .twenty-four { padding-left: 16px; padding-right: 35px; }
html[dir="rtl"] .contact-method:nth-child(even)::before { left: auto; right: 0; }
html[dir="rtl"] .call-button, html[dir="rtl"] .large-call b, html[dir="rtl"] .contact-method b { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] { --font: 'Noto Sans Arabic', system-ui, sans-serif; }
html[lang="hi"] { --font: 'Noto Sans Devanagari', system-ui, sans-serif; }
html[lang="my"] { --font: 'Noto Sans Myanmar', system-ui, sans-serif; }
html[lang="km"] { --font: 'Noto Sans Khmer', system-ui, sans-serif; }

.hero { min-height: 645px; position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid rgba(226, 174, 75, .18); }
.hero-art { position: absolute; z-index: -3; inset: 0; background-image: linear-gradient(90deg, rgba(3, 13, 24, .96) 0%, rgba(3, 13, 24, .72) 35%, rgba(3, 13, 24, .22) 70%, rgba(3, 13, 24, .72) 100%), linear-gradient(0deg, rgba(3, 12, 21, .9) 0%, rgba(3, 12, 21, .08) 48%, rgba(3, 12, 21, .5) 100%), url('./assets/bangkok-night.webp'); background-position: center; background-size: cover; filter: saturate(1.08); }
.hero::after { content: ''; position: absolute; z-index: -2; inset: auto 0 0; height: 42%; background: linear-gradient(0deg, #071320 0%, transparent 100%); pointer-events: none; }
.hero-lines { position: absolute; z-index: -1; left: -100px; top: 6px; width: 460px; height: 270px; border-top: 1px solid rgba(241,190,87,.52); border-right: 1px solid rgba(241,190,87,.36); border-radius: 0 0 90% 0; transform: rotate(-8deg); opacity: .8; }
.hero-lines::after { content: ''; position: absolute; inset: 35px 28px auto auto; width: 320px; height: 160px; border-top: 1px solid rgba(241,190,87,.25); border-radius: 50%; transform: rotate(3deg); }
.hero-content { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(440px, .96fr); gap: clamp(34px, 6vw, 100px); padding: 78px 0 115px; align-items: start; position: relative; z-index: 2; }
.hero-copy { padding: 5px 0 0 52px; }
.eyebrow { color: var(--gold-light); letter-spacing: 5px; font-weight: 600; font-size: 15px; margin: 0 0 15px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(45px, 5.4vw, 75px); line-height: 1.16; letter-spacing: -1.9px; margin: 0 0 13px; font-weight: 700; max-width: 760px; }
h1 span, h1 em { display: block; }
h1 em { color: var(--gold-light); font-style: normal; }
.hero-description { font-size: 21px; line-height: 1.6; color: #f0f3f5; margin: 0 0 20px; }
.hero-points { display: flex; gap: clamp(18px, 2.8vw, 43px); padding-top: 0; }
.point { font-size: 14px; color: #eef2f7; text-align: center; line-height: 1.45; min-width: 76px; }
.icon-ring { display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid var(--gold); border-radius: 50%; margin: 0 auto 5px; color: var(--gold-light); font-size: 30px; font-weight: 600; box-shadow: inset 0 0 12px rgba(231,173,67,.1); }
.icon-ring.clock { font-size: 35px; }
.icon-ring.pin { font-size: 31px; }

.booking-zone { padding-top: 3px; }
.contact-strip { min-height: 156px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--gold); border-radius: 16px; background: rgba(4, 16, 29, .91); box-shadow: var(--shadow); overflow: hidden; margin: 0 0 15px; }
.twenty-four, .contact-method { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; }
.contact-method:nth-child(even)::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: rgba(231,173,67,.42); }
.contact-method:nth-child(n+3)::after { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: rgba(231,173,67,.24); }
.twenty-four { flex-direction: column; align-items: start; justify-content: center; padding-left: 35px; }
.twenty-four strong { font-size: 31px; color: var(--gold-light); line-height: 1; }
.twenty-four span { color: var(--gold-light); font-size: 14px; font-weight: 700; }
.contact-method { min-width: 0; transition: background .2s; }
.contact-method:hover { background: rgba(231,173,67,.10); }
.contact-icon { color: var(--gold-light); font-size: 30px; line-height: 1; flex: 0 0 auto; }
.contact-icon.line-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #06101d; background: #39c84a; font-size: 8px; font-weight: 900; }
.contact-method b, .contact-method small { display: block; white-space: nowrap; }
.contact-method b { font-size: 15px; font-weight: 600; }
.contact-method small { color: #f2f3f5; font-size: 12px; }
.contact-method.line-qr, .contact-method.wechat-qr { gap: 8px; padding: 8px 10px; }
.qr-frame { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; padding: 3px; border: 1px solid rgba(231,173,67,.62); border-radius: 8px; background: #fff; }
.qr-frame img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.contact-method.line-qr b, .contact-method.wechat-qr b { font-size: 12px; }
.contact-method.line-qr small, .contact-method.wechat-qr small { white-space: normal; font-size: 10px; }

.booking-card { background: rgba(3, 15, 27, .94); border: 1px solid var(--gold); border-radius: 17px; padding: 19px 20px 24px; box-shadow: var(--shadow); }
.form-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.calendar-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--gold-light); border: 2px solid var(--gold); border-radius: 6px; font-size: 24px; line-height: 1; }
.form-heading h2 { color: var(--gold-light); font-size: 22px; margin: 0; }
.form-heading p { margin: -1px 0 0; color: #e2e5e9; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field { height: 44px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(157, 180, 201, .38); border-radius: 7px; padding: 0 12px; background: rgba(0, 10, 21, .48); transition: .2s; }
.field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(231,173,67,.11); }
.field.full { grid-column: 1 / -1; }
.field-symbol { color: var(--gold); font-size: 18px; width: 18px; text-align: center; flex: 0 0 auto; }
.field input, .field select { color: #f5f7fa; background: transparent; border: 0; outline: 0; width: 100%; min-width: 0; font-size: 14px; }
.field input::placeholder { color: #abb4c0; opacity: 1; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 12px) 17px, calc(100% - 7px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.field option { color: var(--ink); }
.field.time-field { grid-column: 1 / -1; }
.time-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; flex: 1; min-width: 0; }
.time-selects select { padding: 0 18px 0 6px; text-align: center; font-variant-numeric: tabular-nums; }
input[type="date"] { color-scheme: dark; }
input[type="time"] { color-scheme: dark; }
.form-error { min-height: 18px; margin: 7px 0 2px; color: #ffb9a6; font-size: 12px; }
.submit-booking { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 7px; color: #101114; background: linear-gradient(90deg, #d4942f, #f5c65f); font-weight: 800; font-size: 18px; transition: transform .2s, box-shadow .2s; }
.submit-booking:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(231,173,67,.25); }

.service-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; position: relative; z-index: 3; }
.service-tile { display: flex; align-items: center; gap: 14px; min-height: 113px; padding: 18px; border-radius: 14px; border: 1px solid rgba(225,174,75,.56); background: linear-gradient(115deg, rgba(4,19,33,.94), rgba(14,30,44,.85)); overflow: hidden; position: relative; transition: transform .22s, border .22s; }
.service-tile::after { content: ''; position: absolute; inset: 0; opacity: .26; background: radial-gradient(circle at 98% 50%, var(--gold), transparent 42%); pointer-events: none; }
.service-tile:hover { transform: translateY(-4px); border-color: var(--gold-light); }
.tile-icon { color: var(--gold-light); font-size: 33px; line-height: 1; position: relative; z-index: 1; }
.service-tile h3 { color: var(--gold-light); font-size: 19px; margin: 0 0 2px; position: relative; z-index: 1; }
.service-tile p { font-size: 13px; margin: 0; color: #eef2f7; line-height: 1.5; position: relative; z-index: 1; }
.tile-arrow { color: var(--gold-light); margin-left: auto; position: relative; z-index: 1; }
.trust-bar { margin-top: 20px; border-block: 1px solid rgba(187, 139, 59, .22); background: #071524; }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.trust-grid > div { min-height: 80px; display: flex; align-items: center; gap: 13px; padding: 12px 22px; position: relative; }
.trust-grid > div + div::before { content: ''; position: absolute; left: 0; top: 17px; bottom: 17px; width: 1px; background: rgba(231,173,67,.32); }
.trust-grid > div > span { color: var(--gold-light); font-size: 33px; line-height: 1; }
.trust-grid p { margin: 0; line-height: 1.35; }
.trust-grid b, .trust-grid small { display: block; }
.trust-grid b { color: var(--gold-light); font-size: 16px; }
.trust-grid small { font-size: 12px; color: #eef2f6; }

.content-section { padding: 106px 0; }
.section-heading { max-width: 540px; }
.section-heading.centered { margin-inline: auto; text-align: center; max-width: 680px; }
.section-heading h2, .about-copy h2, .contact-section h2 { font: 52px/1.17 var(--serif); letter-spacing: -.7px; margin: 0 0 16px; color: var(--paper); }
.section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 17px; margin-bottom: 0; }
.fleet-section { background: linear-gradient(180deg, #071524 0%, #091929 100%); }
.fleet-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 43px; }
.vehicle-card { min-height: 330px; padding: 29px; border: 1px solid rgba(230, 176, 75, .24); border-radius: 16px; background: linear-gradient(150deg, rgba(14,37,55,.85), rgba(4,16,27,.85)); position: relative; overflow: hidden; }
.vehicle-card::before { content: ''; position: absolute; width: 250px; height: 250px; border-radius: 50%; right: -72px; top: -94px; background: radial-gradient(circle, rgba(230,176,75,.15), transparent 66%); }
.vehicle-card.featured { border-color: var(--gold); background: linear-gradient(150deg, rgba(27,55,70,.91), rgba(7,20,30,.95)); transform: translateY(-12px); box-shadow: 0 24px 55px rgba(0,0,0,.22); }
.vehicle-number { color: var(--gold); font-size: 14px; font-weight: 700; letter-spacing: 3px; }
.most-booked { float: right; background: var(--gold); color: var(--ink); padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.car-photo { position: relative; z-index: 1; display: block; width: 100%; height: 145px; object-fit: contain; margin: 8px auto 12px; filter: drop-shadow(0 16px 12px rgba(0,0,0,.35)); }
.vehicle-card h3, .vehicle-card p, .vehicle-card ul { position: relative; z-index: 1; }
.vehicle-card h3 { color: var(--gold-light); font-size: 23px; margin: 0 0 4px; }
.vehicle-card p { color: #c9d1db; margin: 0 0 13px; font-size: 14px; }
.vehicle-card ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #f0f3f7; }
.vehicle-card li::before { content: '•'; color: var(--gold); margin-right: 5px; }
.routes-section { background: #f3efe6; color: #192a37; }
.routes-section .section-heading h2 { color: #c4ac36; }
.routes-section .section-heading > p:not(.eyebrow) { color: #53616c; }
.routes-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 90px; align-items: center; }
.gold-link { display: inline-flex; align-items: center; gap: 18px; color: #a9660b; font-weight: 700; margin-top: 28px; }
.gold-link span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #b3751d; border-radius: 50%; }
.routes-layout .gold-link > span:nth-of-type(2) { padding-right: 50px; }
.route-list { border-top: 1px solid #d3c6ad; }
.route-list article { display: grid; grid-template-columns: 43px 1fr auto; gap: 17px; align-items: center; padding: 19px 0; border-bottom: 1px solid #d3c6ad; }
.route-index, .route-km { color: #aa721e; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.route-list h3 { margin: 0 0 2px; font-size: 19px; color: #142434; }
.route-list p { margin: 0; color: #6a747a; font-size: 14px; }
.about-section { background: radial-gradient(circle at 15% 25%, rgba(211,151,50,.15), transparent 23%), #071523; }
.about-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 120px; align-items: center; }
.about-stat { min-height: 345px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(231,173,67,.42); border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(231,173,67,.1), rgba(231,173,67,0)); position: relative; overflow: hidden; }
.about-stat b { font: 125px/.8 var(--serif); color: var(--gold-light); letter-spacing: -6px; }
.about-stat b span { font-size: 62px; }
.about-stat p { text-align: center; color: #e6ebef; margin: 15px 0 0; }
.stat-lines { position: absolute; width: 360px; height: 120px; bottom: -72px; border: 1px solid rgba(231,173,67,.45); border-radius: 50%; }
.about-copy { max-width: 650px; }
.about-copy > p:not(.eyebrow) { color: #c3ced8; font-size: 17px; }
.about-qualities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-qualities span { border: 1px solid rgba(231,173,67,.5); color: var(--gold-light); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.reviews-section { background: #0a1a2a; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 37px; }
.reviews-grid figure { margin: 0; padding: 30px; border: 1px solid rgba(231,173,67,.27); border-radius: 14px; background: rgba(14,37,55,.56); }
.reviews-grid blockquote { padding: 0; margin: 0 0 25px; color: #f3f5f7; font-size: 17px; line-height: 1.8; min-height: 118px; }
.reviews-grid figcaption { display: flex; align-items: center; gap: 12px; }
.reviews-grid figcaption > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(231,173,67,.17); color: var(--gold-light); font-weight: 700; font-size: 13px; }
.reviews-grid b, .reviews-grid small { display: block; }
.reviews-grid b { color: var(--gold-light); font-size: 14px; }
.reviews-grid small { color: #b8c4ce; font-size: 12px; }
.contact-section { padding: 92px 0; background: linear-gradient(105deg, rgba(2,10,18,.9), rgba(2,10,18,.48)), url('./assets/bangkok-night.webp') center 58% / cover; border-top: 1px solid rgba(231,173,67,.34); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.contact-section h2 { font-size: 57px; }
.contact-section h2 em { color: var(--gold-light); font-style: normal; }
.contact-section p:not(.eyebrow) { max-width: 500px; color: #c6d1db; font-size: 17px; }
.contact-actions { display: grid; gap: 16px; }
.large-call { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); background: linear-gradient(90deg, #d79730, #f9cf77); padding: 17px 22px; border-radius: 10px; font-weight: 700; }
.large-call b { font-size: 24px; }
.contact-socials { display: flex; align-items: center; gap: 14px; }
.social-icon-button { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(237,243,245,.3); border-radius: 14px; background: rgba(3,13,24,.72); transition: transform .2s, border-color .2s, background .2s; }
.social-icon-button svg { display: block; width: 42px; height: 42px; }
.social-icon-button:hover { transform: translateY(-2px); background: rgba(3,13,24,.95); }
.social-icon-button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.whatsapp-icon:hover { border-color: #25D366; }
.line-icon:hover { border-color: #06C755; }
.wechat-icon:hover { border-color: #09B83E; }
.facebook-icon:hover { border-color: #1877F2; }
.telegram-icon:hover { border-color: #229ED9; }
.site-footer { padding: 45px 0; background: #040b13; border-top: 1px solid rgba(231,173,67,.17); }
.site-footer .shell { display: flex; align-items: center; gap: 36px; }
.footer-brand { width: 155px; }
.footer-brand .brand-script { font-size: 33px; }
.footer-brand .brand-sub { font-size: 9px; letter-spacing: 3.6px; }
.footer-brand .brand-crown { font-size: 18px; }
.site-footer p { margin: 0; color: #aeb9c4; flex: 1; font-size: 14px; }
.site-footer small { color: #7e8b98; font-size: 12px; }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 100; background: #d79730; color: #071320; border-radius: 8px; padding: 12px 16px; font-weight: 700; box-shadow: var(--shadow); transform: translateY(80px); opacity: 0; transition: .3s; }
.toast.show { transform: translateY(0); opacity: 1; }
.booking-success { color: var(--white); background: #0b1d2e; border: 1px solid var(--gold); border-radius: 18px; width: min(450px, calc(100% - 34px)); max-height: 90vh; overflow-y: auto; padding: 38px; box-shadow: var(--shadow); text-align: center; }
.booking-success::backdrop { background: rgba(1,7,13,.72); backdrop-filter: blur(6px); }
.dialog-close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; color: #dbe3e9; font-size: 29px; }
.success-badge { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-light); margin: 0 auto 16px; font-size: 26px; }
.booking-success h2 { color: var(--gold-light); font-size: 27px; margin: 0 0 9px; }
.booking-success p:not(.eyebrow) { color: #ced8e1; margin-bottom: 14px; }
.reference { font-size: 13px; color: var(--gold-light); padding: 8px 12px; background: rgba(231,173,67,.12); margin-bottom: 18px; border-radius: 6px; }
.booking-actions { display: grid; gap: 9px; margin-bottom: 16px; }
.booking-channel { display: flex; justify-content: space-between; align-items: center; border-radius: 7px; padding: 12px 14px; font-size: 14px; font-weight: 700; text-align: left; }
.booking-channel.whatsapp { color: #071b13; background: #62d99b; }
.booking-channel.line { color: #07200b; background: #86df67; }
.booking-channel.wechat { color: #082119; background: #9ce2bc; }
.booking-channel.telegram { color: #05243b; background: #61c7f3; }
.booking-channel:hover { filter: brightness(1.08); }
.line-copy-feedback { color: var(--gold-light) !important; font-size: 13px; line-height: 1.6; text-align: left; }
.line-booking-text { display: block; width: 100%; min-height: 118px; margin: 0 0 14px; padding: 10px; border: 1px solid rgba(231,173,67,.5); border-radius: 7px; color: #f8fafc; background: rgba(3,13,24,.85); font: inherit; font-size: 12px; resize: vertical; }
.line-copy-feedback[hidden], .line-booking-text[hidden] { display: none; }
.dialog-button { width: 100%; border: 0; border-radius: 7px; padding: 12px; color: #071320; background: var(--gold); font-weight: 800; }

@media (max-width: 1230px) {
  .site-header { gap: 16px; }
  .brand { width: 172px; }
  .brand-script { font-size: 39px; }
  .main-nav { gap: 17px; }
  .nav-link { font-size: 13px; }
  .header-actions { gap: 9px; }
  .call-button { font-size: 15px; padding: 11px; }
  .hero-content { grid-template-columns: minmax(0,1fr) minmax(415px,.98fr); gap: 28px; }
  .hero-copy { padding-left: 10px; }
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-method.line { display: none; }
  .service-ribbon { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid > div:nth-child(4)::before { display: none; }
}
@media (min-width: 901px) {
  .header-actions { flex-direction: column; align-items: flex-end; gap: 6px; }
}
@media (max-width: 900px) {
  .shell { width: min(100% - 36px, 700px); }
  .site-header { min-height: 78px; padding: 8px 18px; justify-content: space-between; position: sticky; top: 0; gap: 8px; }
  .brand { width: 150px; }
  .brand-script { font-size: 33px; }
  .brand-sub { font-size: 9px; letter-spacing: 3.8px; }
  .brand-crown { font-size: 19px; }
  .header-actions { order: 2; margin-left: auto; }
  .header-actions .call-button { padding: 9px 11px; font-size: 14px; }
  .header-actions .call-button svg { width: 17px; }
  .language-switcher { display: none; }
  .mobile-language-switcher { display: block; width: calc(100% - 44px); margin: 12px 22px 16px; }
  .mobile-language-switcher .language-toggle { width: 100%; justify-content: space-between; }
  .mobile-language-switcher .language-options { position: static; width: 100%; max-height: min(44vh, 340px); margin-top: 6px; }
  .menu-toggle { order: 3; display: grid; gap: 5px; background: transparent; border: 1px solid rgba(231,173,67,.7); border-radius: 8px; padding: 10px; margin-left: 0; flex: 0 0 auto; }
  .menu-toggle span { display: block; width: 19px; height: 2px; background: var(--gold-light); transition: transform .2s, opacity .2s; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; gap: 0; max-height: 0; overflow: hidden; background: rgba(3,12,23,.98); border-bottom: 1px solid transparent; transition: max-height .3s, border .3s; }
  .main-nav.open { max-height: calc(100vh - 78px); overflow-y: auto; border-color: rgba(231,173,67,.4); }
  .nav-link { padding: 15px 22px; border-bottom: 1px solid rgba(231,173,67,.1); }
  .nav-link::after { display: none; }
  .hero { min-height: auto; }
  .hero-content { grid-template-columns: 1fr; padding: 55px 0 42px; gap: 31px; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(42px, 10vw, 66px); }
  .booking-zone { max-width: 630px; width: 100%; }
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-ribbon { margin-top: 18px; }
  .fleet-cards, .reviews-grid { grid-template-columns: 1fr; }
  .vehicle-card.featured { transform: none; }
  .routes-layout, .about-layout, .contact-layout { grid-template-columns: 1fr; gap: 42px; }
  .about-layout { gap: 50px; }
  .about-stat { min-height: 270px; max-width: 480px; }
  .reviews-grid figure { padding: 25px; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 30px); }
  .site-header { padding: 8px 15px; }
  .header-actions .call-button { width: 38px; padding: 9px; justify-content: center; }
  .header-actions .call-button span { display: none; }
  .hero-content { padding: 47px 0 32px; }
  .hero-art { background-position: 57% center; }
  .eyebrow { font-size: 11px; letter-spacing: 3.5px; }
  h1 { font-size: 42px; letter-spacing: -1.5px; }
  .hero-description { font-size: 17px; }
  .hero-points { gap: 10px; justify-content: space-between; }
  .point { font-size: 11px; min-width: 57px; }
  .icon-ring { width: 42px; height: 42px; font-size: 24px; }
  .icon-ring.clock { font-size: 29px; }
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-method.line-qr, .contact-method.wechat-qr { grid-column: auto; justify-content: flex-start; min-height: 68px; gap: 6px; padding: 6px; }
  .contact-method.line-qr .qr-frame, .contact-method.wechat-qr .qr-frame { width: 42px; height: 42px; flex-basis: 42px; padding: 2px; }
  .contact-method.line-qr b, .contact-method.wechat-qr b { font-size: 10px; white-space: normal; }
  .contact-method.line-qr small, .contact-method.wechat-qr small { font-size: 9px; }
  .twenty-four { padding-left: 18px; }
  .twenty-four strong { font-size: 26px; }
  .contact-method { padding: 10px; }
  .contact-method.phone::before { display: none; }
  .contact-method b { font-size: 12px; }
  .contact-method small { font-size: 10px; }
  .contact-icon { font-size: 23px; }
  .booking-card { padding: 17px 13px 18px; }
  .form-grid { gap: 8px; }
  .field { padding: 0 9px; }
  .field input, .field select { font-size: 12px; }
  .time-selects { gap: 4px; }
  .time-selects select { padding-right: 14px; padding-left: 3px; font-size: 12px; }
  .service-ribbon { grid-template-columns: 1fr; gap: 10px; }
  .service-tile { min-height: 95px; padding: 13px 15px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid > div { padding: 13px 4px; gap: 8px; }
  .trust-grid > div:nth-child(3)::before { display: none; }
  .trust-grid > div:nth-child(4)::before { display: block; }
  .trust-grid > div:last-child { grid-column: 1 / -1; justify-content: center; }
  .trust-grid > div > span { font-size: 25px; }
  .trust-grid b { font-size: 13px; }
  .trust-grid small { font-size: 10px; }
  .content-section { padding: 72px 0; }
  .section-heading h2, .about-copy h2, .contact-section h2 { font-size: 42px; }
  .vehicle-card { min-height: 289px; padding: 23px; }
  .car-photo { height: 130px; }
  .route-list article { grid-template-columns: 28px 1fr; gap: 9px; }
  .route-km { grid-column: 2; }
  .route-list h3 { font-size: 16px; }
  .about-stat b { font-size: 100px; }
  .contact-section h2 { font-size: 43px; }
  .contact-layout { gap: 30px; }
  .large-call { display: grid; gap: 1px; }
  .contact-socials { gap: 12px; }
  .social-icon-button { width: 62px; height: 62px; border-radius: 12px; }
  .social-icon-button svg { width: 40px; height: 40px; }
  .site-footer .shell { flex-direction: column; align-items: flex-start; gap: 18px; }
}


/* Compact spacing requested in the mobile Preview edits. */
@media (max-width: 600px) {
  #contact { padding-top: 23px; padding-bottom: 13px; }
  .site-footer { padding-top: 16px; }
  #reviews { padding-top: 11px; padding-bottom: 27px; }
  #about { padding-top: 42px; padding-bottom: 34px; }
  #routes { padding-top: 21px; padding-bottom: 1px; }
  #fleet { padding-top: 35px; padding-bottom: 43px; }
}


.site-footer .visitor-count-row {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 22px;
  padding-top: 13px;
  border-top: 1px solid rgba(231, 173, 67, .14);
}
.visitor-count {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-light);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#visitor-count-value { color: #f0f4f6; font-weight: 600; }
@media (max-width: 600px) {
  .site-footer .visitor-count-row { justify-content: flex-start; margin-top: 10px; padding-top: 10px; }
}


/* Booking time mode controls */
.time-field {
  height: auto;
  min-height: 48px;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}
.time-field .field-symbol { margin-top: 6px; }
.time-control { display: grid; flex: 1; min-width: 0; gap: 8px; }
.time-control input[type="text"] {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(225, 174, 75, .30);
  border-radius: 7px;
  color: #f8fafc;
  background: rgba(3, 13, 24, .72);
  font-size: 14px;
}
.time-format-hint { margin: 0 2px; color: #abb4c0; font-size: 11px; line-height: 1.45; }
.time-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.time-mode-button, .period-button {
  min-width: 0;
  min-height: 39px;
  padding: 7px 9px;
  border: 1px solid rgba(225, 174, 75, .34);
  border-radius: 7px;
  color: #e8eef4;
  background: rgba(3, 13, 24, .68);
  font-size: 12px;
  line-height: 1.35;
  transition: color .2s, background .2s, border-color .2s;
}
.time-mode-button[aria-pressed="true"], .period-button[aria-pressed="true"] {
  color: #071320;
  background: var(--gold);
  border-color: var(--gold-light);
  font-weight: 800;
}
.time-mode-button:focus-visible, .period-button:focus-visible, .dialog-secondary:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 2px;
}
.time-panel { display: grid; gap: 8px; }
.time-panel[hidden] { display: none; }
.time-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; }
.time-selects select, .time-control input[type="time"] {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 0 9px;
  border: 1px solid rgba(225, 174, 75, .30);
  border-radius: 7px;
  color: #f8fafc;
  background: rgba(3, 13, 24, .72);
  font-size: 13px;
}
.time-control input[type="time"] { color-scheme: dark; }
.period-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.period-button:disabled { opacity: .56; cursor: not-allowed; }

/* Localized calendar and passenger/luggage booking details. */
.field.date-field { position: relative; overflow: visible; }
.date-field:focus-within { z-index: 20; }
.date-picker { position: relative; flex: 1; min-width: 0; }
.date-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 0 1px; border: 0; color: #f5f7fa; background: transparent; text-align: left; font-size: 14px; }
.date-picker-trigger:focus-visible, .date-picker-header button:focus-visible, .calendar-day:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 4px; }
.date-picker-trigger #date-picker-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-picker-caret { color: var(--gold-light); }
.date-picker-popover { position: absolute; z-index: 30; top: calc(100% + 8px); left: -28px; width: min(312px, calc(100vw - 48px)); padding: 13px; border: 1px solid var(--gold); border-radius: 12px; color: var(--white); background: #0b1d2e; box-shadow: var(--shadow); }
.date-picker-popover[hidden] { display: none; }
.date-picker-header { display: grid; grid-template-columns: 36px 1fr 36px; gap: 8px; align-items: center; margin-bottom: 10px; }
.date-picker-header h3 { margin: 0; color: var(--gold-light); text-align: center; font-size: 15px; font-weight: 700; }
.date-picker-header button { width: 36px; height: 36px; border: 1px solid rgba(231,173,67,.35); border-radius: 7px; color: var(--gold-light); background: rgba(3,13,24,.72); font-size: 20px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.calendar-weekdays { margin-bottom: 5px; color: #bac6d0; font-size: 11px; }
.calendar-weekdays span { padding: 5px 0; }
.calendar-day, .calendar-day-empty { display: grid; place-items: center; min-width: 0; min-height: 34px; padding: 0; border: 1px solid transparent; border-radius: 7px; color: #f5f7fa; background: transparent; font-size: 12px; font-variant-numeric: tabular-nums; }
.calendar-day:hover { border-color: rgba(231,173,67,.48); background: rgba(231,173,67,.12); }
.calendar-day[aria-pressed="true"] { color: #071320; background: var(--gold); font-weight: 800; }
.calendar-day[aria-current="date"]:not([aria-pressed="true"]) { border-color: var(--gold-light); color: var(--gold-light); }
.luggage-field { height: auto; min-height: 76px; align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
.luggage-field > .field-symbol { margin-top: 3px; }
.luggage-control { display: grid; flex: 1; min-width: 0; gap: 7px; }
.luggage-title { color: #edf1f5; font-size: 12px; line-height: 1.4; }
.luggage-size-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.luggage-size-option { display: grid; gap: 4px; min-width: 0; color: #c8d2dc; text-align: center; font-size: 11px; }
.luggage-size-option input { width: 100%; min-height: 34px; padding: 4px 6px; border: 1px solid rgba(225,174,75,.30); border-radius: 6px; color: #f8fafc; background: rgba(3,13,24,.72); text-align: center; font-variant-numeric: tabular-nums; }
.luggage-size-option input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
@media (max-width: 480px) {
  .date-picker-popover { left: -28px; }
  .luggage-size-options { gap: 5px; }
  .luggage-size-option { font-size: 10px; }
}

/* WeChat QR fallback dialog: keep the add-friend flow on this site. */
.wechat-qr-dialog {
  position: relative;
  width: min(430px, calc(100% - 32px));
  max-height: min(90vh, 760px);
  overflow-y: auto;
  padding: 38px 30px 26px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  color: var(--white);
  background: #0b1d2e;
  box-shadow: var(--shadow);
  text-align: center;
}
.wechat-qr-dialog::backdrop { background: rgba(1, 7, 13, .76); backdrop-filter: blur(6px); }
.wechat-qr-dialog h2 { margin: 0 0 12px; color: var(--gold-light); font-size: 25px; line-height: 1.3; }
.wechat-qr-dialog > p:not(.eyebrow) { color: #ced8e1; font-size: 14px; line-height: 1.7; }
.wechat-modal-qr {
  display: block;
  width: min(252px, 70vw);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 18px auto;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}
.wechat-booking-copy { display: grid; gap: 9px; margin: 12px 0 16px; }
.wechat-booking-copy[hidden] { display: none; }
.wechat-booking-copy p { margin: 0; color: var(--gold-light); font-size: 13px; }
.dialog-secondary {
  min-height: 40px;
  border: 1px solid rgba(231, 173, 67, .65);
  border-radius: 7px;
  color: var(--gold-light);
  background: rgba(231, 173, 67, .10);
  font-weight: 700;
}
.wechat-booking-text {
  width: 100%;
  min-height: 112px;
  padding: 10px;
  border: 1px solid rgba(231, 173, 67, .4);
  border-radius: 7px;
  color: var(--white);
  background: rgba(3, 13, 24, .8);
  resize: vertical;
}
.wechat-booking-text[hidden] { display: none; }
@media (max-width: 600px) {
  .time-mode-button, .period-button { padding: 7px 5px; font-size: 11px; }
  .time-selects select, .time-control input[type="time"] { padding: 0 6px; font-size: 12px; }
  .wechat-qr-dialog { padding: 35px 18px 20px; }
  .wechat-qr-dialog h2 { font-size: 22px; }
  .wechat-modal-qr { width: min(220px, 66vw); margin: 14px auto; }
}


.submit-booking:disabled, .submit-booking:disabled:hover {
  opacity: .58;
  cursor: not-allowed;
  filter: saturate(.58);
  transform: none;
  box-shadow: none;
}
.wechat-save-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto 14px;
  padding: 10px 14px;
  color: var(--gold-light);
  text-decoration: none;
}


.time-mode-switch.single-mode {
  grid-template-columns: minmax(0, 1fr);
}
.site-footer .visitor-count {
  font-size: 14px;
  gap: 11px;
}
#visitor-count-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
}