/* OnsenConnect Blue & Gold V3 - aligned with Vietnam tech hero.
   Load AFTER onsen-futuristic-pages-v2.css. Pure visual overrides. */
:root{
 --of-ink:#eaf3ff;--of-navy:#061631;--of-deep:#030e25;
 --of-teal:#1475e9;--of-aqua:#5fd9ff;--of-gold:#ffca62;
 --of-line:#284b7e;--of-bg:#07152d;
 --of-shadow:0 18px 45px rgba(0,4,24,.35);
 color-scheme:dark;
}
body{background:radial-gradient(ellipse at 95% 10%,#103a77 0%,transparent 36%),#07152d!important;color:#eaf3ff!important}
body:not(:has(.oc-future-home)) main{background:transparent}
.oc-topbar{background:linear-gradient(95deg,#041126,#0a2554 68%,#123f7c)!important;border-bottom:1px solid #2c5c9c!important;box-shadow:0 6px 28px #0005}
.oc-topbar .oc-main-nav a:hover{color:#ffcc70!important}
body footer{color:#a7bad9!important}
.ocbk-heading,.ocw-hero,.spa-heading,.oc-dashboard .oc-hero,.oa-dashboard .oa-hero{
 background:linear-gradient(100deg,rgba(3,13,39,.92),rgba(5,32,83,.84) 65%,rgba(9,72,142,.75)),url('images/onsen-hero-vietnam.png') center 45%/cover!important;
 border:1px solid #416ca8!important;box-shadow:0 20px 48px #0005!important;
}
.ocbk-heading:before{border-color:#ffca6266;box-shadow:0 0 0 35px #eebd2b12,0 0 0 85px #27b5ff0b}
.ocbk-eyebrow,.ocw-kicker,.spa-eyebrow{color:#ffd16d!important}
.ocbk-heading p,.ocw-hero p{color:#d6e9ff!important}
.ocbk-card,.ocbk-summary,.ocbk-login,.ocw-tools,.ocw-card,.ocw-feature,.ocw-aside,.ocw-content,.ocw-story,
.spa-toolbar,.spa-side,.oc-stat,.oa-stat,.oc-booking,.oa-panel{
 background:linear-gradient(150deg,#112b55,#091c3d)!important;
 border:1px solid #345b90!important;color:#edf5ff!important;
 box-shadow:0 12px 34px #0004!important;
}
.ocbk-card h1,.ocbk-card h2,.ocbk-card h3,.ocbk-card-title h2,.ocbk-login h2,
.ocw-content h2,.ocw-content h3,.ocw-card h3,.ocw-feature h3,.ocw-aside h2,
.spa-toolbar h2,.spa-side h2{color:#fff!important}
.ocbk-card p,.ocbk-login p,.ocw-card p,.ocw-feature p,.ocw-content p,.ocw-meta,.ocw-lead,
.spa-toolbar p,.spa-side p{color:#bbcee8!important}
.ocbk-number,.ocbk-login-icon{background:linear-gradient(135deg,#0a64d3,#27caff)!important}
.ocbk-mode-choice{background:#102b52!important;border:1px solid #315b91!important;color:#eff8ff!important}
.ocbk-mode-choice.active,.ocbk-mode-choice.selected,[data-mode].is-active{background:#193b66!important;border-color:#ffca62!important;box-shadow:inset 0 0 0 1px #ffca62}
.ocbk-wrap input:not([type=hidden]),.ocbk-wrap select,.ocbk-wrap textarea,
.ocw-tools input,.ocw-tools select,
main>.card:has(form input[name="action"]) input,main>.card:has(form input[name="action"]) select{
 background:#091b3b!important;border:1px solid #3b6090!important;color:#fff!important;color-scheme:dark;
}
.ocbk-wrap input::placeholder,.ocw-tools input::placeholder{color:#9fb7d8}
.ocbk-gps-panel{background:#112f59!important;border-color:#3c77b3!important}
.ocbk-summary-head,.ocw-cta{background:linear-gradient(120deg,#061632,#174c91)!important;border-color:#3769ac!important}
.ocbk-login a,#booking-submit,.ocw-tools button,.ocw-cta a,
main>.card:has(form input[name="action"]) button{
 background:linear-gradient(115deg,#ffe3a2,#e8a936)!important;color:#071a3c!important;
 border:0!important;box-shadow:0 7px 20px #c88c292a!important;
}
.ocw-cats a{background:#112c55!important;border-color:#345b90!important;color:#e5f3ff!important}
.ocw-cats a.active,.ocw-cats a:hover{background:#f7c563!important;color:#071a3c!important;border-color:#f7c563!important}
.ocw-content{color:#d8e8fa!important}
.ocw-content a,.ocw-story a{color:#ffcf79!important}
.ocw-content blockquote{background:#132f59!important;border-left-color:#ffc763!important;color:#d9e9ff!important}
.ocw-article h1{color:#fff!important}
.ocw-cta a{color:#071a3c!important}
.spa-locate{background:#ffcf72!important;color:#081a3d!important}
.spa-result{background:#112b53!important;color:#eaf4ff!important;border:1px solid #355e93!important}
.spa-result:hover,.ocw-card:hover,.ocw-feature:hover{border-color:#eab65b!important;box-shadow:0 16px 42px #0006!important}
main>.card:has(form input[name="action"][value="login"]),main>.card:has(form input[name="action"][value="register"]){
 background:linear-gradient(155deg,#102d59,#071934)!important;border-color:#345c91!important;color:#fff!important
}
main>.card:has(form input[name="action"]) label{color:#dceaff!important}
main>.card:has(form input[name="action"][value="login"]) h2,
main>.card:has(form input[name="action"][value="register"]) h2{color:#fff!important}
.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{
 background:#102b52!important;border:1px solid #3b6090!important;color:#fff!important;min-height:42px
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#fff!important;line-height:40px}
.select2-dropdown{background:#0b2146!important;border-color:#3b6090!important;color:#fff!important}
.select2-search__field{background:#071935!important;color:#fff!important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:#1a64bc!important}
:focus-visible{outline:2px solid #ffcc70!important;outline-offset:3px}
@media(max-width:760px){
 .ocbk-heading,.ocw-hero,.spa-heading{background-position:62% center!important}
 .ocbk-card,.ocw-content{box-shadow:0 8px 24px #0003!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}