/* NAT Bangkok Night Glass Luxury: visual-only enhancement; retain original DOM and booking. */
:root{--nat-glass-gold:#e4c47f;--nat-glass-border:rgba(229,193,116,.26)}
html{scroll-behavior:smooth}
body{color:#f5f5f4!important}
body::after{background:linear-gradient(180deg,rgba(2,8,20,.20),rgba(2,10,24,.37) 45%,rgba(2,8,20,.31))!important}
.top{background:rgba(5,14,28,.89)!important;backdrop-filter:blur(20px) saturate(1.15)!important;-webkit-backdrop-filter:blur(20px) saturate(1.15)!important;border-bottom:1px solid rgba(233,199,132,.28)!important;box-shadow:0 10px 32px rgba(0,0,0,.23)!important}
.top .logo{border-color:rgba(231,195,116,.75)!important;box-shadow:0 0 0 5px rgba(219,179,103,.07)!important}
.nav a,.langs button{transition:background .2s ease,color .2s ease,border-color .2s ease!important}
.nav a:hover{background:rgba(223,183,105,.15)!important;color:#f2d494!important}
.langs button.active{background:#e4c47f!important;color:#0a1729!important;border-color:#e4c47f!important}
/* Preserve the original hero photograph; make it feel cinematic. */
main>.hero{position:relative!important;overflow:hidden!important;border-bottom:1px solid rgba(225,192,122,.35)!important;box-shadow:0 24px 65px rgba(0,0,0,.35)!important}
main>.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,12,25,.08),transparent 62%,rgba(4,12,25,.25));z-index:1}
main>.hero .nat-new-banner{display:block!important}
/* Separate each original content block with breathing room and true dark glass. */
main>section.section,main>section.booking,main>section:not(.hero):not(.section):not(.booking){
 background:linear-gradient(135deg,rgba(13,28,46,.80),rgba(5,15,29,.72))!important;
 border:1px solid rgba(225,191,119,.23)!important;
 border-radius:22px!important;
 box-shadow:0 20px 60px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.05)!important;
 backdrop-filter:blur(16px) saturate(1.13)!important;-webkit-backdrop-filter:blur(16px) saturate(1.13)!important;
 margin-top:38px!important;margin-bottom:38px!important;
}
main>section.section.shell{padding:clamp(27px,4.4vw,65px)!important}
main>section.booking{padding-top:clamp(35px,4vw,65px)!important;padding-bottom:clamp(35px,4vw,65px)!important}
main>section#destinations,main>section#prices{background:linear-gradient(135deg,rgba(12,29,49,.82),rgba(5,16,32,.74))!important}
.sectiontitle{margin-bottom:32px!important;padding-bottom:21px!important;border-bottom:1px solid rgba(223,189,120,.18)!important}
.sectiontitle h2,.fare-heading h2{font-family:Georgia,'Noto Sans Thai',serif!important;letter-spacing:-.35px!important;color:#f3d48f!important;font-size:clamp(29px,3.4vw,46px)!important;line-height:1.22!important}
.sectiontitle p,.fare-heading p{color:#c1c9d6!important;line-height:1.8!important}
/* Destination and pricing cards. Preserve image click/lightbox actions. */
#places,#priceCards{gap:20px!important}
#places .tile,#priceCards .tile,.tile,.card,.panel{border:1px solid rgba(228,196,127,.26)!important;border-radius:15px!important;background:linear-gradient(155deg,rgba(26,44,64,.86),rgba(9,22,37,.91))!important;box-shadow:0 12px 32px rgba(0,0,0,.28)!important;overflow:hidden!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important}
#places .tile:hover,#priceCards .tile:hover,.tile:hover{transform:translateY(-5px)!important;box-shadow:0 19px 42px rgba(0,0,0,.43)!important;border-color:rgba(237,203,135,.68)!important}
#places .tile img,#priceCards .tile img{transition:transform .4s ease!important}
#places .tile:hover img,#priceCards .tile:hover img{transform:scale(1.035)!important}
#places .tile .copy,#priceCards .tile .copy{padding:19px 18px!important}
#priceCards .tile strong,#places .tile strong{font-weight:700!important}
#priceCards .tile small,#places .tile small{color:#e7c786!important}
/* Dark-glass booking card with obvious focus and restrained gold. */
#booking .fare-panel{background:linear-gradient(145deg,rgba(20,38,57,.89),rgba(7,19,36,.94))!important;border:1px solid rgba(231,196,125,.43)!important;border-radius:19px!important;box-shadow:0 24px 58px rgba(0,0,0,.33)!important;padding:clamp(20px,3.2vw,44px)!important}
#booking input,#booking select,#booking textarea{background:rgba(8,20,39,.86)!important;color:#f9f8f5!important;border:1px solid rgba(143,163,189,.38)!important;border-radius:9px!important;transition:border-color .2s,box-shadow .2s!important}
#booking input:focus,#booking select:focus,#booking textarea:focus{border-color:#e5c47f!important;outline:none!important;box-shadow:0 0 0 3px rgba(226,192,123,.16)!important}
#booking .fare-tab{border-radius:9px!important;transition:background .2s,border-color .2s!important}
#booking .fare-tab.selected{border-color:#e4c47f!important;box-shadow:inset 0 0 0 1px rgba(231,195,116,.35)!important}
#fareAmount{color:#f3cd79!important;font-weight:800!important;font-variant-numeric:tabular-nums}
#booking button[type=submit],#booking .fare-submit,.btn.primary,.contacttop{background:linear-gradient(110deg,#f0d493,#c99945)!important;color:#0a1728!important;border:1px solid #e8c779!important;border-radius:9px!important;font-weight:800!important;box-shadow:0 8px 22px rgba(5,12,25,.28)!important;transition:transform .2s,filter .2s!important}
#booking button[type=submit]:hover,#booking .fare-submit:hover,.btn.primary:hover,.contacttop:hover{transform:translateY(-2px)!important;filter:brightness(1.08)!important}
.aboutrow{background:linear-gradient(120deg,rgba(20,41,61,.72),rgba(7,21,38,.81))!important;border:1px solid rgba(225,191,119,.21)!important;border-radius:18px!important;overflow:hidden!important}
.foot{background:rgba(4,12,25,.88)!important;backdrop-filter:blur(14px)!important;border-top:1px solid rgba(225,191,119,.25)!important}
.floating{box-shadow:0 10px 32px rgba(0,0,0,.4)!important;transition:transform .2s!important}
.floating:hover{transform:translateY(-3px)!important}
@media(max-width:700px){
 body::before{background-position:55% center!important;background-attachment:scroll!important}
 main>section.section,main>section.booking,main>section:not(.hero):not(.section):not(.booking){margin-top:18px!important;margin-bottom:18px!important;border-radius:14px!important;backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important}
 main>section.section.shell{padding:24px 16px!important}
 #booking .fare-panel{padding:19px!important}
 #places,#priceCards{gap:13px!important}
 .sectiontitle h2,.fare-heading h2{font-size:30px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#places .tile,#priceCards .tile,.tile,#booking button{transition:none!important}}