:root{
 --brand-navy:#0b2a5b;--brand-navy-dark:#071e42;--brand-gold:#ffc61a;--brand-gold-dark:#e5aa00;
 --brand-red:#e53935;--whatsapp:#25d366;--whatsapp-dark:#1eaf55;--bg:#ffffff;--surface:#f5f7fa;
 --surface-blue:#f3f6fb;--text:#26313f;--muted:#707987;--border:#e3e8ef;--shadow:0 12px 32px rgba(11,42,91,.08);
}
html{scroll-behavior:smooth}body{color:var(--text);background:var(--bg)}a{transition:.2s ease}.preloader .spinner-rotate{border-color:var(--brand-gold) transparent var(--brand-navy) transparent}
header{background:var(--brand-navy-dark);color:#eaf0f8}header p,header a,header span{color:#eaf0f8!important}header i{color:var(--brand-gold)}
.navbar-default{background:#fff;border:0;border-bottom:1px solid var(--border)}.navbar-default .navbar-brand{color:var(--brand-navy);font-weight:700}.navbar-brand .icon-a{color:var(--brand-gold)}
.navbar-default .navbar-nav>li>a{color:#39475a;font-weight:500}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:var(--brand-navy)}.navbar-default .navbar-nav>li.active>a{color:var(--brand-navy);background:transparent;border-bottom:2px solid var(--brand-gold)}
.promo-strip{background:var(--brand-gold);color:var(--brand-navy-dark);font-size:13px}.promo-strip[hidden]{display:none!important}.promo-strip .container{display:flex;align-items:center;justify-content:center;gap:14px;min-height:38px}.promo-strip strong{font-weight:700}.promo-strip a{color:var(--brand-navy-dark);font-weight:700;text-decoration:underline}.promo-strip button{margin-left:auto;background:transparent;border:0;color:var(--brand-navy-dark);font-size:18px;line-height:1;padding:5px 0 5px 12px}
.slider .item{background-position:center;background-size:cover}.slider .item-first{background-image:linear-gradient(90deg,rgba(7,30,66,.88),rgba(7,30,66,.45)),url('../images/cars/toyota-fortuner.svg')}.slider .item-second{background-image:linear-gradient(90deg,rgba(7,30,66,.86),rgba(7,30,66,.42)),url('../images/cars/toyota-avanza.svg')}.slider .item-third{background-image:linear-gradient(90deg,rgba(7,30,66,.86),rgba(7,30,66,.42)),url('../images/cars/byd-dolphin.svg')}.slider .caption h1,.slider .caption h2{color:#fff;font-weight:700}.slider .caption h3{color:var(--brand-gold);font-weight:600}.section-btn{background:var(--brand-gold)!important;color:var(--brand-navy-dark)!important;border:0!important;font-weight:700}.section-btn:hover{background:#fff!important;color:var(--brand-navy)!important}
.section-pad{padding:64px 0}.section-pad-sm{padding:48px 0}.section-heading{margin-bottom:34px}.section-kicker,.eyebrow{display:inline-block;color:var(--brand-navy);font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:7px}.section-heading h2{font-size:34px;color:var(--brand-navy-dark);font-weight:700;margin:4px 0 10px}.section-heading p{max-width:700px;margin:0 auto;color:var(--muted)}
.about-rental{background:#fff}.about-visual{background:var(--surface-blue);border:1px solid var(--border);min-height:330px;display:flex;align-items:center;justify-content:center;overflow:hidden}.about-visual img{width:100%;height:330px;object-fit:cover}.about-copy{padding:10px 0 10px 25px}.about-copy h2{font-size:34px;color:var(--brand-navy-dark);font-weight:700;margin:4px 0 14px}.about-copy>p{color:var(--muted);line-height:1.8}.about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.about-point{border-top:2px solid var(--brand-gold);padding-top:12px}.about-point i{color:var(--brand-navy);font-size:20px}.about-point strong{display:block;color:var(--brand-navy-dark);font-size:13px;margin:7px 0 4px}.about-point span{font-size:12px;color:var(--muted);line-height:1.5;display:block}
.cars-section{background:var(--surface)}.car-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}.filter-btn{background:#fff;border:1px solid #cfd6df;color:#4f5d70;border-radius:3px;padding:9px 16px;font-size:12px;font-weight:700}.filter-btn:hover,.filter-btn.active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}.filter-btn[data-filter=promo]{border-color:var(--brand-gold);color:var(--brand-navy)}.filter-btn[data-filter=promo].active,.filter-btn[data-filter=promo]:hover{background:var(--brand-gold);color:var(--brand-navy-dark);border-color:var(--brand-gold)}.filter-btn[hidden]{display:none!important}
.car-card{height:100%;background:#fff;border:1px solid var(--border);box-shadow:0 5px 18px rgba(11,42,91,.045);transition:.3s ease;overflow:hidden;margin-bottom:24px}.car-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.car-image-wrap{position:relative;background:#edf2f8;overflow:hidden}.car-image{display:block;width:100%;height:210px;object-fit:cover;transition:transform .45s ease}.car-card:hover .car-image{transform:scale(1.025)}.car-badges{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.car-badge{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:3px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.11)}.badge-promo{background:var(--brand-gold);color:var(--brand-navy-dark);animation:promoPulse 2.6s ease-in-out infinite}.badge-new{background:var(--brand-red);color:#fff;position:relative;overflow:hidden}.badge-new:after{content:'';position:absolute;top:-40%;left:-70%;width:40%;height:180%;background:rgba(255,255,255,.48);transform:skewX(-20deg);animation:newShimmer 3.4s ease-in-out infinite}.badge-ev{background:var(--brand-navy);color:#fff}.car-body{padding:19px}.car-meta{display:flex;flex-wrap:wrap;gap:7px 12px;color:#637084;font-size:11px;text-transform:uppercase;font-weight:700}.car-meta .ev-meta{color:var(--brand-navy)}.car-body h3{font-size:20px;margin:8px 0 7px}.car-body h3 a{color:var(--brand-navy-dark)}.car-body p{color:var(--muted);font-size:13px;line-height:1.65;min-height:43px}.car-price{min-height:48px;margin-top:12px}.price-old{display:block;width:max-content;color:#8a8f98;text-decoration:line-through;font-size:12px;position:relative}.price-current{display:block;color:var(--brand-navy);font-size:20px;font-weight:800}.price-current small{font-size:11px;color:var(--muted);font-weight:500}.car-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;border-top:1px solid var(--border);padding-top:14px;margin-top:13px}.btn-detail,.btn-wa{min-height:39px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:12px;font-weight:700}.btn-detail{background:#fff;border:1px solid var(--brand-navy);color:var(--brand-navy)!important}.btn-detail:hover{background:var(--brand-navy);color:#fff!important}.btn-wa{background:var(--whatsapp);border:1px solid var(--whatsapp);color:#fff!important}.btn-wa:hover{background:var(--whatsapp-dark);color:#fff!important}.btn-outline-brand{display:inline-block;border:1px solid var(--brand-navy);color:var(--brand-navy);font-weight:700;padding:10px 18px;border-radius:3px}.btn-outline-brand:hover{background:var(--brand-navy);color:#fff}
@keyframes promoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes newShimmer{0%,45%{left:-70%}72%,100%{left:135%}}
.services-section{background:#fff}.service-card{height:100%;border:1px solid var(--border);padding:28px 22px;text-align:center;margin-bottom:20px;transition:.3s ease}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.service-card i{font-size:28px;color:var(--brand-navy);margin-bottom:12px}.service-card h3{font-size:18px;color:var(--brand-navy-dark)}.service-card p{font-size:13px;color:var(--muted);line-height:1.65}
.process-section{background:var(--surface-blue)}.process-row{display:flex;flex-wrap:wrap}.process-row-five{justify-content:center}.process-row-five .process-item{width:20%;padding-left:15px;padding-right:15px}.process-item{text-align:center;margin-bottom:16px}.process-number{width:48px;height:48px;line-height:48px;margin:0 auto 12px;border-radius:50%;background:var(--brand-navy);color:var(--brand-gold);font-weight:800}.process-item h4{color:var(--brand-navy-dark);font-size:16px}.process-item p{font-size:12px;color:var(--muted)}
.reviews-section{background:#fff}.google-rating{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}.google-stars,.review-stars{color:var(--brand-gold-dark);letter-spacing:1px}.google-rating strong{color:var(--brand-navy-dark);font-size:18px}.google-rating span:last-child{font-size:12px;color:var(--muted)}.review-card{height:100%;border:1px solid var(--border);padding:22px;background:#fff;margin-bottom:20px;transition:.3s ease}.review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.review-top{display:grid;grid-template-columns:40px 1fr auto;gap:9px;align-items:center;margin-bottom:13px}.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--surface-blue);color:var(--brand-navy);display:flex;align-items:center;justify-content:center;font-weight:800}.review-top strong{display:block;color:var(--brand-navy-dark);font-size:13px}.review-top small{display:block;color:#8a94a2;font-size:10px}.review-card p{color:var(--muted);font-size:13px;line-height:1.7;font-style:italic}.review-source{font-size:10px;color:#8b95a3}
.area-section{background:var(--surface)}.area-card{background:#fff;border:1px solid var(--border);padding:28px}.area-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.area-list span{background:var(--surface-blue);border:1px solid #dce3ed;padding:8px 12px;color:var(--brand-navy);font-size:12px;font-weight:700}.area-list i{color:var(--brand-gold-dark)}.area-side{background:var(--brand-navy);color:#fff;padding:28px;text-align:center}.area-side i{color:var(--brand-gold);font-size:28px}.area-side h3{color:#fff;font-size:18px}.area-side p{color:#dbe5f2;font-size:12px}.area-side .btn-wa{display:inline-flex;padding:0 16px;margin-top:4px}
.location-section{background:#fff}.location-map{height:100%;min-height:355px;border:1px solid var(--border);overflow:hidden}.location-map iframe{width:100%;height:355px;border:0;display:block}.location-card{height:355px;border:1px solid var(--border);padding:28px;background:var(--surface-blue)}.location-card h3{color:var(--brand-navy-dark);font-size:20px;margin-top:0}.location-address{color:var(--muted);line-height:1.7}.vehicle-pickup{display:flex;align-items:flex-start;border-top:1px solid #dfe5ed;margin-top:20px;padding-top:18px}.vehicle-pickup i{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--brand-navy);display:flex;align-items:center;justify-content:center;margin-right:10px}.vehicle-pickup h4{font-size:14px;color:var(--brand-navy-dark);margin:0 0 4px}.vehicle-pickup p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}.map-btn{width:100%;display:block;text-align:center;margin-top:22px;background:var(--brand-navy);color:#fff!important;padding:10px 14px;border-radius:3px;font-weight:700;font-size:12px}.map-btn:hover{background:var(--brand-navy-dark)}
.faq-section{background:var(--surface)}.faq-wrap{max-width:930px;margin:0 auto}.faq-item{border-bottom:1px solid #dce2ea}.faq-question{width:100%;border:0;background:transparent;text-align:left;padding:17px 0;color:var(--brand-navy-dark);font-weight:700;font-size:14px}.faq-question i{float:right;color:var(--brand-gold-dark)}.faq-answer{padding:0 26px 17px 0;color:var(--muted);font-size:13px;line-height:1.7}
.cta-section{padding:58px 0;background:var(--brand-navy);color:#fff}.cta-section .section-kicker{color:var(--brand-gold)}.cta-section h2{color:#fff;font-size:32px;font-weight:700}.cta-section p{color:#dce6f2}.cta-section .btn-wa{display:inline-flex;padding:0 20px;height:43px}
.rental-footer{background:var(--brand-navy-dark);color:#b9c4d2;padding-top:50px}.rental-footer-main{padding-bottom:30px}.footer-column{margin-bottom:22px}.footer-brand{color:#fff!important;font-size:21px;font-weight:700}.footer-description{font-size:12px;color:#aeb8c6;line-height:1.75}.footer-location{display:flex;color:#b9c4d2;font-size:12px;line-height:1.6}.footer-location i{color:var(--brand-gold);width:20px;margin-top:3px}.rental-footer h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;position:relative;padding-bottom:8px}.rental-footer h4:after{content:'';position:absolute;bottom:0;left:0;width:28px;height:2px;background:var(--brand-gold)}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:7px}.footer-links a{color:#b9c4d2;font-size:12px}.footer-links a:hover{color:var(--brand-gold)}.footer-contact-item{display:flex;align-items:center;color:#fff!important;margin-bottom:12px}.footer-contact-item>i{width:32px;height:32px;border:1px solid rgba(255,255,255,.13);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brand-gold);margin-right:9px}.footer-contact-item span{font-size:12px}.footer-contact-item small{display:block;color:#8492a5;font-size:9px;text-transform:uppercase}.footer-social{margin-top:14px}.footer-social a{display:inline-flex!important;width:31px;height:31px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;margin-right:5px}.footer-social a:hover{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--brand-navy-dark)}.rental-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:17px 0}.rental-footer-bottom p{font-size:11px;color:#8290a4;margin:0}.footer-bottom-links{text-align:right}.footer-bottom-links a{color:#8290a4;font-size:11px;margin-left:12px}.footer-bottom-links a:hover{color:var(--brand-gold)}
.floating-wa,.back-to-top{position:fixed;right:18px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.18);border:0}.floating-wa{bottom:18px;background:var(--whatsapp);color:#fff!important}.floating-wa i{font-size:25px}.floating-wa span{position:absolute;right:62px;background:var(--brand-navy-dark);color:#fff;padding:6px 9px;border-radius:3px;font-size:10px;white-space:nowrap;opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none}.floating-wa:hover span{opacity:1;transform:none}.back-to-top{bottom:18px;background:var(--brand-navy);color:#fff;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}.has-back-to-top .floating-wa{bottom:80px}.floating-wa{transition:bottom .25s ease,transform .2s}.floating-wa:hover{transform:scale(1.04)}
.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:1200;background:#fff;border:1px solid var(--border);box-shadow:0 12px 36px rgba(7,30,66,.18);padding:13px 15px;display:flex;align-items:center;gap:14px;max-width:980px;margin:0 auto}.cookie-banner[hidden],.cookie-panel[hidden]{display:none!important}.cookie-banner p{margin:0;flex:1;color:#566275;font-size:11px;line-height:1.5}.cookie-banner p a{color:var(--brand-navy);font-weight:700}.cookie-actions{display:flex;gap:6px;flex-wrap:wrap}.cookie-actions button{border-radius:3px;padding:8px 11px;font-size:10px;font-weight:700}.cookie-reject,.cookie-settings{background:#fff;border:1px solid #cfd6df;color:#4f5d70}.cookie-accept{background:var(--brand-navy);border:1px solid var(--brand-navy);color:#fff}.cookie-panel{position:fixed;inset:0;background:rgba(7,30,66,.54);z-index:1250;display:flex;align-items:center;justify-content:center;padding:18px}.cookie-panel-card{max-width:480px;width:100%;background:#fff;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:22px;position:relative}.cookie-panel-card h3{color:var(--brand-navy-dark);margin-top:0}.cookie-panel-card p{color:var(--muted);font-size:12px;line-height:1.65}.cookie-toggle{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:13px 0;margin:14px 0}.cookie-toggle strong{font-size:13px}.cookie-toggle small{display:block;color:var(--muted);font-size:10px}.cookie-panel-close{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:20px;color:#6d7785}.cookie-save{width:100%;background:var(--brand-navy);color:#fff;border:0;padding:10px;font-weight:700;border-radius:3px}
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .62s ease,transform .62s ease}.reveal-up.is-visible{opacity:1;transform:none}.reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .52s ease,transform .52s ease}.reveal-stagger.is-visible>*{opacity:1;transform:none}.reveal-stagger.is-visible>*:nth-child(2){transition-delay:.06s}.reveal-stagger.is-visible>*:nth-child(3){transition-delay:.12s}.reveal-stagger.is-visible>*:nth-child(4){transition-delay:.18s}.reveal-stagger.is-visible>*:nth-child(5){transition-delay:.24s}.reveal-stagger.is-visible>*:nth-child(6){transition-delay:.3s}.reveal-stagger.is-visible>*:nth-child(7){transition-delay:.36s}.reveal-stagger.is-visible>*:nth-child(8){transition-delay:.42s}
/* Inner pages */
.page-hero{padding:46px 0;background:var(--surface-blue);border-bottom:1px solid var(--border)}.page-hero h1{color:var(--brand-navy-dark);font-weight:700;font-size:34px;margin:5px 0 9px}.page-hero p{color:var(--muted);max-width:700px}.content-wrap{max-width:900px;margin:0 auto}.privacy-item{padding:22px 0;border-bottom:1px solid var(--border)}.privacy-item h2{color:var(--brand-navy-dark);font-size:20px;font-weight:700}.privacy-item p,.privacy-item li{color:var(--muted);font-size:13px;line-height:1.8}.privacy-item ul{padding-left:18px}.privacy-note{background:var(--surface-blue);border-left:3px solid var(--brand-gold);padding:15px;margin-top:18px}
.payment-main{background:var(--surface)}.payment-security{display:flex;align-items:flex-start;background:#fff;border:1px solid var(--border);padding:20px;margin-bottom:22px}.payment-security>i{font-size:25px;color:var(--brand-navy);margin-right:13px}.payment-security h2{font-size:18px;color:var(--brand-navy-dark);margin:0 0 5px}.payment-security p{font-size:12px;color:var(--muted);margin:0}.bank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.bank-card{background:#fff;border:1px solid var(--border);padding:20px}.bank-head{display:flex;justify-content:space-between;align-items:center}.bank-name{color:var(--brand-navy);font-size:20px}.official-badge{background:var(--surface-blue);color:var(--brand-navy);font-size:10px;font-weight:700;padding:5px 7px}.bank-info{margin:17px 0}.bank-info small{display:block;color:#8a94a3;font-size:10px;text-transform:uppercase}.bank-info strong{display:block;color:var(--brand-navy-dark);font-size:17px;margin-bottom:10px}.copy-bank{width:100%;border:1px solid var(--brand-navy);background:#fff;color:var(--brand-navy);padding:9px;font-size:11px;font-weight:700}.copy-bank:hover{background:var(--brand-navy);color:#fff}.copy-notice{margin-top:12px;background:#eef8f2;color:#23633c;padding:9px;font-size:11px}.payment-warning{background:#fff7d8;border:1px solid #f2d26d;padding:20px;margin-top:22px}.payment-warning h3{color:var(--brand-navy-dark);font-size:17px;margin-top:0}.payment-warning p{color:#6d6447;font-size:12px;line-height:1.7}.payment-warning .btn-wa{display:inline-flex;padding:0 15px}
/* Vehicle detail adapted to Bootstrap 3 */
.breadcrumb-bar{padding:14px 0;background:#fff;border-bottom:1px solid var(--border)}.breadcrumb-simple{font-size:11px;color:#8792a2;margin:0}.breadcrumb-simple a{color:var(--brand-navy);font-weight:600}.vehicle-section{padding:44px 0 30px;background:#fff}.vehicle-gallery{position:relative}.main-image-wrap{position:relative;background:var(--surface);border:1px solid var(--border);overflow:hidden}.main-image-wrap img{width:100%;height:420px;object-fit:cover;transition:opacity .15s}.detail-badges{position:absolute;left:14px;top:14px;display:flex;gap:6px;flex-wrap:wrap}.vehicle-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:8px}.thumb{border:2px solid transparent;background:#fff;padding:0;overflow:hidden}.thumb.active{border-color:var(--brand-gold)}.thumb img{width:100%;height:74px;object-fit:cover;display:block}.vehicle-copy{padding-left:20px}.vehicle-copy h1{color:var(--brand-navy-dark);font-size:34px;font-weight:700;margin:5px 0 8px}.vehicle-tags{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.vehicle-tags span{background:var(--surface-blue);color:var(--brand-navy);font-size:10px;font-weight:700;padding:6px 8px}.vehicle-short-desc{color:var(--muted);font-size:13px;line-height:1.75}.color-options{margin:20px 0}.color-options h3{font-size:13px;color:var(--brand-navy-dark);font-weight:700}.color-choice{display:inline-flex;align-items:center;margin-right:10px;font-size:11px;color:#556174}.color-choice input{margin-right:4px}.quick-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0}.quick-spec{border:1px solid var(--border);padding:10px}.quick-spec small{display:block;color:#8a94a3;font-size:9px;text-transform:uppercase}.quick-spec strong{font-size:12px;color:var(--brand-navy-dark)}.rental-card{border:1px solid var(--border);background:var(--surface-blue);padding:20px;margin-top:18px}.rental-card h2{color:var(--brand-navy-dark);font-size:18px;margin:0 0 12px}.rental-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.rental-option{background:#fff;border:1px solid var(--border);padding:10px;cursor:pointer}.rental-option.selected{border-color:var(--brand-navy);box-shadow:0 0 0 1px var(--brand-navy)}.rental-option input{margin-right:4px}.rental-option span{font-size:11px}.rental-option strong{color:var(--brand-navy);font-size:14px}.rental-old-price{color:#8a8f98;text-decoration:line-through;font-size:10px;margin-left:3px}.travel-options{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}.travel-options label{font-size:11px;color:#596579}.selected-price{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid #dbe1e9;margin-top:14px;padding-top:14px;gap:12px}.selected-price-info span{display:block;font-size:10px;color:#8a94a3;text-transform:uppercase}.selected-price-info small{color:#647084}.selected-price-value{text-align:right}.main-old-price{display:block;color:#8a8f98;text-decoration:line-through;font-size:11px}.selected-price-value strong{color:var(--brand-navy);font-size:21px}.selected-price-value small{font-size:10px;color:var(--muted)}.saving-text{display:block;color:#8b6200;font-size:10px;font-weight:700}.detail-wa{width:100%;border:0;margin-top:13px;height:42px;background:var(--whatsapp);color:#fff;font-weight:700;border-radius:3px}.detail-wa:hover{background:var(--whatsapp-dark)}
.info-card{background:var(--surface);padding:44px 0}.info-panel{background:#fff;border:1px solid var(--border);padding:22px;margin-bottom:16px}.info-panel h2{font-size:20px;color:var(--brand-navy-dark);font-weight:700;margin-top:0}.info-panel p,.info-panel li{font-size:12px;color:var(--muted);line-height:1.75}.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.spec-box{border:1px solid var(--border);padding:14px;background:#fff}.spec-box i{color:var(--brand-navy);font-size:20px}.spec-box small{display:block;color:#8a94a3;font-size:9px;text-transform:uppercase;margin-top:7px}.spec-box strong{color:var(--brand-navy-dark);font-size:12px}.upgrade-card{display:grid;grid-template-columns:42% 1fr;border:1px solid var(--border);background:#fff;overflow:hidden;margin-top:18px}.upgrade-card img{width:100%;height:100%;min-height:170px;object-fit:cover}.upgrade-body{padding:18px}.upgrade-body h3{font-size:17px;color:var(--brand-navy-dark);margin:4px 0 7px}.upgrade-body p{font-size:11px;color:var(--muted)}.compact-price .old{color:#8a8f98;text-decoration:line-through;font-size:10px;display:block}.compact-price strong{color:var(--brand-navy);font-size:16px}.upgrade-body .btn-detail{display:inline-flex;padding:0 13px;margin-top:9px}.ev-info-section{background:#fff}.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.ev-box{background:var(--surface-blue);border:1px solid var(--border);padding:16px}.ev-box i{color:var(--brand-navy);font-size:21px}.ev-box small{display:block;color:#8a94a3;text-transform:uppercase;font-size:9px;margin-top:7px}.ev-box strong{color:var(--brand-navy-dark);font-size:13px}.related-section{background:#fff}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.related-card{border:1px solid var(--border);background:#fff;overflow:hidden}.related-card img{width:100%;height:150px;object-fit:cover}.related-body{padding:14px}.related-body h3{font-size:15px;color:var(--brand-navy-dark);margin:5px 0}.related-body p{font-size:11px;color:var(--muted);min-height:34px}.related-body .btn-detail{height:34px;min-height:34px;margin-top:8px}.view-all-wrap{text-align:center;margin-top:22px}
@media(max-width:991px){.about-copy{padding-left:0;margin-top:25px}.about-points{grid-template-columns:1fr}.location-card{height:auto;min-height:355px}.vehicle-copy{padding-left:0;margin-top:24px}.spec-grid,.ev-grid{grid-template-columns:repeat(2,1fr)}.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px) and (max-width:991px){.process-row-five .process-item{width:33.333333%}}
@media(max-width:767px){.process-row-five .process-item{width:100%;padding-left:15px;padding-right:15px}.section-pad{padding:44px 0}.section-pad-sm{padding:36px 0}.section-heading{margin-bottom:26px}.section-heading h2{font-size:28px}.promo-strip .container{justify-content:flex-start;padding-right:28px;position:relative}.promo-strip button{position:absolute;right:15px}.slider .caption h1{font-size:34px}.about-visual,.about-visual img{height:240px;min-height:240px}.car-image{height:190px}.car-actions{grid-template-columns:1fr}.process-row{display:block}.review-top{grid-template-columns:40px 1fr}.review-stars{grid-column:2}.location-map{margin-bottom:16px;min-height:290px}.location-map iframe{height:290px}.location-card{min-height:auto;height:auto}.rental-footer{padding-top:38px}.footer-column{margin-bottom:28px}.footer-bottom-links{text-align:center;margin-top:7px}.rental-footer-bottom{text-align:center}.cookie-banner{display:block}.cookie-banner p{margin-bottom:10px}.cookie-actions{justify-content:flex-end}.floating-wa,.back-to-top{right:14px;width:48px;height:48px}.has-back-to-top .floating-wa{bottom:72px}.floating-wa span{display:none}.main-image-wrap img{height:300px}.vehicle-thumbs{grid-template-columns:repeat(5,90px);overflow-x:auto}.thumb img{height:62px}.vehicle-copy h1{font-size:28px}.rental-options{grid-template-columns:1fr}.selected-price{display:block}.selected-price-value{text-align:left;margin-top:8px}.upgrade-card{grid-template-columns:1fr}.upgrade-card img{height:190px}.related-grid{grid-template-columns:1fr}.bank-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-up,.reveal-stagger>*,.reveal{opacity:1!important;transform:none!important;transition:none!important}.badge-promo,.badge-new:after{animation:none!important}.car-image,.service-card,.review-card,.floating-wa{transition:none!important}}


/* ==========================================================
   REVISION 01 — approved integration corrections
   Header alignment, brand options, anchor offset, approved
   detail layout, responsive color placement, radio alignment,
   and related-card CTA consistency.
   ========================================================== */

/* Same-page section anchors must remain visible below sticky navigation. */
#home,#tentang-kami,#rental-mobil,#layanan,#cara-sewa,#area-layanan,#lokasi-rental,#faq{scroll-margin-top:82px}

/* Top header: explicit vertical alignment overrides broad Tooplate span rules. */
header{height:auto;min-height:45px}
header .row{display:flex;align-items:center;min-height:45px}
header p{margin:0!important;padding:0!important;line-height:1.4!important}
header .text-align-right{display:flex;align-items:center;justify-content:flex-end;min-height:45px}
header span.phone-icon,header span.date-icon{position:relative;display:inline-flex!important;align-items:center;min-height:32px;padding:0 15px!important;line-height:1.4!important;border:0!important}
header span.phone-icon{padding-left:0!important}
header span.phone-icon a{display:inline-flex;align-items:center;line-height:1.4}
header .header-wa-number{display:inline!important;padding:0!important;margin:0!important;font-size:12px;line-height:1.4!important;font-weight:500;color:#eaf0f8!important}
header span.date-icon::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;transform:translateY(-50%);background:var(--border)}
header span i{padding:0!important;line-height:1!important;margin-right:6px}

/* Brand can be text (default) or an image by comment/uncomment in HTML. */
.navbar-brand.brand-image{display:flex;align-items:center;padding-top:10px;padding-bottom:10px}
.navbar-brand.brand-image img{display:block;width:auto;max-width:190px;height:auto;max-height:40px;object-fit:contain}

/* Approved detail version: independent desktop columns, reordered on tablet/mobile. */
.approved-detail{padding:22px 0 56px;background:#fff}
.vehicle-detail-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:28px;align-items:start}
.vehicle-left-stack,.vehicle-right-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.vehicle-gallery,.detail-info-card,.rental-card,.upgrade-card,.about-vehicle-card{border:1px solid var(--border);background:#fff;box-shadow:0 8px 26px rgba(11,42,91,.055)}
.vehicle-gallery{overflow:hidden}
.main-image-wrap{background:#f3f6fa}
.main-image-wrap .main-vehicle-image{width:100%;height:420px;display:block;object-fit:cover;transition:opacity .18s ease,transform .35s ease}
.main-image-wrap:hover .main-vehicle-image{transform:scale(1.015)}
.vehicle-thumbs{padding:12px;gap:9px;background:#fff}
.thumb{min-width:72px;min-height:58px;touch-action:manipulation}
.thumb:focus,.thumb:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}

.detail-info-card{padding:22px}
.detail-card-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.detail-heading-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;background:var(--surface-blue);border:1px solid var(--border);color:var(--brand-navy);font-size:18px}
.detail-card-heading h2{font-size:20px;color:var(--brand-navy-dark);font-weight:700;margin:0}
.benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.benefit-item{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);background:#fbfcfe;padding:12px;min-height:76px}
.benefit-item>i{color:var(--brand-navy);font-size:18px;margin-top:2px;min-width:18px}
.benefit-item strong,.benefit-item small{display:block}
.benefit-item strong{font-size:12px;color:var(--brand-navy-dark);margin-bottom:3px}
.benefit-item small{font-size:10px;color:var(--muted);line-height:1.45}
.vehicle-spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.vehicle-spec-grid>div{padding:12px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:66px}
.vehicle-spec-grid span,.vehicle-spec-grid strong{display:block}
.vehicle-spec-grid span{font-size:10px;color:#8a94a3;text-transform:uppercase;letter-spacing:.3px}
.vehicle-spec-grid strong{font-size:12px;color:var(--brand-navy-dark);margin-top:3px}

.rental-card{padding:24px;margin-top:0}
.rental-card>h1{font-size:32px;color:var(--brand-navy-dark);font-weight:700;margin:2px 0 8px}
.vehicle-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.vehicle-meta span{font-size:10px;color:var(--brand-navy);background:var(--surface-blue);border:1px solid #dce6f2;padding:5px 8px;font-weight:700}
.rental-card .vehicle-short-desc{color:var(--muted);font-size:12px;line-height:1.7;margin:12px 0 4px}
.option-block{padding:16px 0;border-top:1px solid var(--border)}
.option-title{font-weight:700;font-size:12px;color:var(--brand-navy-dark);margin-bottom:9px}
.color-options{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px}
.color-option{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;font-size:12px;color:#536174;cursor:pointer;touch-action:manipulation}
.color-option input,.travel-options input{flex:0 0 auto;margin:0!important;position:static!important;vertical-align:middle;accent-color:var(--brand-navy)}
.color-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--swatch-color,#c8ced6);border:1px solid #aeb7c2;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.color-option:focus-within{outline:2px solid var(--brand-gold);outline-offset:2px}
.color-availability-note{margin:5px 0 0;color:#818b99;font-size:10px;line-height:1.5}
.color-availability-note i{color:var(--brand-navy);margin-right:3px}
.rental-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rental-option{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:112px;background:#fff;border:1px solid var(--border);padding:12px;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.rental-option input{position:absolute!important;opacity:0!important;pointer-events:none;width:1px;height:1px}
.rental-option:hover,.rental-option.selected{border-color:var(--brand-navy);background:#f8fbff;box-shadow:0 0 0 1px var(--brand-navy)}
.rental-option:focus-within{outline:3px solid rgba(255,198,26,.55);outline-offset:2px}
.rental-option span:first-of-type{font-size:11px;font-weight:700;color:var(--brand-navy-dark)}
.rental-option strong{display:block;color:var(--brand-navy);font-size:15px;margin-top:2px}
.rental-option small{font-size:9px;color:var(--muted)}
.rental-old-price{display:block;min-height:15px;color:#8a8f98!important;text-decoration:line-through;font-size:10px;margin:5px 0 0!important}
.rental-old-price-empty{text-decoration:none!important;visibility:hidden}
.travel-options{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:0}
.travel-options label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;font-size:11px;color:#596579;cursor:pointer;touch-action:manipulation}
.travel-options label:focus-within{outline:2px solid var(--brand-gold);outline-offset:2px}
.detail-wa{min-height:44px}
#desktopColorSlot:empty,#mobileColorSlot:empty{display:none}
.mobile-color-slot{display:none;background:#fff}

.about-vehicle-card{margin-top:24px;padding:26px}
.about-vehicle-inner{display:grid;grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr);gap:28px;align-items:start}
.about-vehicle-copy{color:var(--muted);font-size:12px;line-height:1.8}
.about-vehicle-copy p:last-child{margin-bottom:0}

/* Keep related CTA positions identical with or without strikethrough price. */
.related-grid{align-items:stretch}
.related-card{display:flex;flex-direction:column;height:100%}
.related-body{display:flex;flex-direction:column;flex:1}
.related-body .compact-price{min-height:48px;margin-top:auto;padding-top:4px}
.related-body .btn-detail{margin-top:8px;align-self:stretch}

/* Touch sizes for detail actions without visually inflating desktop components. */
.detail-wa,.related-body .btn-detail,.view-all-wrap .btn-detail{min-height:44px}

@media(max-width:991px){
  header .row{min-height:45px}
  .vehicle-detail-layout{display:flex;flex-direction:column;gap:20px}
  .vehicle-left-stack,.vehicle-right-stack{display:contents}
  .vehicle-gallery{order:1;width:100%}
  .rental-card{order:2;width:100%}
  .benefit-card{order:3;width:100%}
  .spec-card{order:4;width:100%}
  .upgrade-card{order:5;width:100%;margin-top:0}
  .mobile-color-slot{display:block}
  .mobile-color-slot .color-option-block{padding:12px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
  .mobile-color-slot .color-option-block .option-title{margin-bottom:5px}
  .main-image-wrap .main-vehicle-image{height:auto;aspect-ratio:16/10;object-fit:contain;transform:none!important}
  .vehicle-thumbs{padding-top:10px}
  .about-vehicle-inner{grid-template-columns:1fr;gap:8px}
}

/* REVISION 03 — tablet gallery: keep the main photo and color/thumbnails visually close. */
@media(min-width:768px) and (max-width:991px){
  .main-image-wrap .main-vehicle-image{height:300px;aspect-ratio:auto;object-fit:contain;transform:none!important}
  .mobile-color-slot .color-option-block{padding:8px 14px}
  .mobile-color-slot .color-option-block .option-title{margin-bottom:4px}
  .color-options{gap:5px 12px}
  .color-availability-note{margin-top:5px}
  .vehicle-thumbs{padding-top:6px;margin-top:0}
  .thumb img{height:62px}
}

@media(max-width:767px){
  header .row{display:block;padding:5px 0}
  header .col-md-5,header .col-sm-6,header .col-md-7{float:none;width:100%}
  header p{padding:3px 0!important}
  header .text-align-right{justify-content:flex-start;min-height:32px;flex-wrap:wrap}
  header span.phone-icon,header span.date-icon{min-height:30px;padding-right:12px!important}
  .approved-detail{padding-top:14px}
  .rental-card,.detail-info-card,.about-vehicle-card{padding:18px}
  .rental-card>h1{font-size:28px}
  .benefit-grid{grid-template-columns:1fr}
  .vehicle-spec-grid{grid-template-columns:1fr}
  .rental-options{grid-template-columns:1fr}
  .rental-option{min-height:102px}
  .color-options{gap:5px 12px}
  .about-vehicle-card{margin-top:20px}
}

@media(max-width:420px){
  header span.phone-icon,header span.date-icon{font-size:11px;padding-right:9px!important}
  header span.date-icon{padding-left:10px!important}
  .vehicle-thumbs{grid-template-columns:repeat(5,82px)}
  .thumb{min-width:68px}
  .color-option{font-size:11px}
}


/* ==========================================================
   REVISION 02/03 — promo visibility, city-only rental pricing,
   compact recommendation card, and tablet gallery tuning.
   ========================================================== */

/* Promo strip: soft-gold field, solid gold label, and one large click target. */
.promo-strip{
  background:#fff8e1;
  color:var(--brand-navy-dark);
  border-bottom:1px solid #f2d27a;
  font-size:12px;
}
.promo-strip .container{min-height:44px;gap:10px;justify-content:stretch}
.promo-strip-link{
  flex:1;min-width:0;min-height:44px;padding:7px 10px;
  display:flex;align-items:center;justify-content:center;gap:11px;
  color:var(--brand-navy-dark)!important;text-decoration:none!important;
  cursor:pointer;transition:background .2s ease;
}
.promo-strip-link:hover,.promo-strip-link:focus{background:rgba(255,198,26,.11);outline:none}
.promo-strip-link:focus-visible{box-shadow:inset 0 0 0 2px var(--brand-navy)}
.promo-strip-badge{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  padding:5px 8px;background:var(--brand-gold);color:var(--brand-navy-dark);
  font-size:10px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;border-radius:2px;
}
.promo-strip-message{font-weight:650;color:var(--brand-navy-dark)}
.promo-strip-cta{flex:0 0 auto;font-weight:800;color:#8a6500;white-space:nowrap}
.promo-strip-cta i{margin-left:3px;transition:transform .2s ease}
.promo-strip-link:hover .promo-strip-cta i,.promo-strip-link:focus .promo-strip-cta i{transform:translateX(3px)}
.promo-strip button{
  flex:0 0 28px;width:28px;height:32px;margin-left:0;padding:0;
  display:flex;align-items:center;justify-content:center;color:#6a5a2a;
  border-radius:2px;transition:background .2s ease,color .2s ease;
}
.promo-strip button:hover,.promo-strip button:focus{background:rgba(11,42,91,.08);color:var(--brand-navy-dark);outline:none}

/* Rental cards: visible numeric rates are explicitly city-only. */
.rental-option{min-height:128px}
/* Conditional price elements must respect the HTML hidden attribute. */
.rental-old-price[hidden],.rental-rate-context[hidden],.main-old-price[hidden],.saving-text[hidden]{display:none!important}
.rental-rate-context{display:block;margin-top:2px;color:#7d8795;font-size:9px;line-height:1.35}
.rental-option.is-contact-rate strong{font-size:13px;margin-top:7px;color:var(--brand-navy-dark)}
.rental-option.is-contact-rate small{display:block;max-width:150px;line-height:1.4;margin-top:3px;color:var(--muted)}
.selected-price-value strong small{display:block;margin-top:3px;line-height:1.35;font-weight:500;text-transform:none}

/* Recommendation: context/name/price first, then full-width vehicle image. */
.upgrade-card{display:block;margin-top:18px;overflow:hidden;border:1px solid var(--border);background:#fff}
.upgrade-header{padding:15px 18px 11px}
.upgrade-header .eyebrow{margin-bottom:3px}
.upgrade-header h3{font-size:17px;color:var(--brand-navy-dark);font-weight:700;margin:2px 0 7px;line-height:1.3}
.upgrade-vehicle-name{font-size:15px;color:var(--brand-navy-dark);font-weight:700;margin:0 0 4px}
.upgrade-meta{display:flex;flex-wrap:wrap;gap:5px 9px;margin-bottom:8px;color:#6a7585;font-size:9px;font-weight:700;text-transform:uppercase}
.upgrade-price{min-height:0;margin-top:2px}
.upgrade-price .old{display:block;width:max-content;margin-bottom:1px;color:#8a8f98;text-decoration:line-through;font-size:10px}
.upgrade-price strong{display:block;color:var(--brand-navy);font-size:18px;line-height:1.25}
.upgrade-price strong small{font-size:10px;color:var(--muted);font-weight:500}
.upgrade-price-prefix{font-size:11px;font-weight:700;color:#667386}
.upgrade-rate-note{display:block;margin-top:3px;color:#7d8795;font-size:9px}
.upgrade-image-wrap{position:relative;width:100%;background:#f3f6fa;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.upgrade-image-wrap img{display:block;width:100%;height:160px;min-height:0;padding:8px;object-fit:contain;background:#f3f6fa}
.upgrade-body{padding:11px 18px 15px}
.upgrade-body p{display:none}
.upgrade-body .btn-detail{display:flex;width:100%;min-height:40px;margin-top:0;padding:0 13px}

@media(max-width:767px){
  .promo-strip .container{position:static;padding-right:15px;justify-content:stretch}
  .promo-strip-link{justify-content:flex-start;padding-left:0;gap:8px}
  .promo-strip-message{flex:1;font-size:11px;line-height:1.35}
  .promo-strip-cta{font-size:11px}
  .promo-strip button{position:static;right:auto}
  .rental-option{min-height:116px}
  .upgrade-card{margin-top:0}
  .upgrade-image-wrap img{height:170px;aspect-ratio:auto}
}
@media(max-width:420px){
  .promo-strip-badge{padding:4px 6px;font-size:9px}
  .promo-strip-message{font-size:10px}
  .promo-strip-cta{font-size:0}
  .promo-strip-cta::after{content:'Lihat';font-size:10px}
  .promo-strip-cta i{font-size:10px;margin-left:4px}
}

/* REVISION 04 — recommendation image badges reuse the same status system as Home/related cards. */
.upgrade-image-wrap>.car-badges{z-index:2}


/* ==========================================================
   REVISION 05 — responsive recommendation order, optional
   partner carousel, review carousel/modal, and area alignment.
   ========================================================== */

/* Partner template is intentionally commented in index.html until real partner data is ready. */
.partner-section{background:var(--surface)}
.partner-carousel{padding:2px 42px 24px}
.partner-logo-placeholder{height:92px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;padding:18px;color:#8a94a3;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.partner-carousel img{display:block;width:100%;height:58px;object-fit:contain}
.partner-carousel .owl-nav button{position:absolute;top:30px;width:34px;height:34px;border:1px solid var(--border)!important;background:#fff!important;color:var(--brand-navy)!important;border-radius:50%!important}
.partner-carousel .owl-prev{left:0}.partner-carousel .owl-next{right:0}

/* Google Reviews: fixed visual height; full text remains in the DOM and is only visually clamped. */
.review-carousel{padding:2px 42px 30px}
.review-carousel .owl-stage{display:flex}
.review-carousel .owl-item{display:flex;align-items:stretch}
.review-carousel .review-card{display:flex;flex-direction:column;width:100%;min-height:264px;margin:0;padding:22px}
.review-carousel .review-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:66px;max-height:66px;margin:0 0 18px;line-height:1.7}
.review-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:13px;border-top:1px solid var(--border)}
.review-read-more{border:0;background:transparent;padding:4px 0;color:var(--brand-navy);font-size:11px;font-weight:700;cursor:pointer}
.review-read-more:hover,.review-read-more:focus{color:var(--brand-gold-dark);text-decoration:underline;outline:none}
.review-read-more:focus-visible{outline:2px solid var(--brand-gold);outline-offset:3px}
.review-carousel .owl-nav button{position:absolute;top:calc(50% - 34px);width:36px;height:36px;border:1px solid var(--border)!important;background:#fff!important;color:var(--brand-navy)!important;border-radius:50%!important;box-shadow:0 4px 14px rgba(11,42,91,.08)}
.review-carousel .owl-nav button:hover,.review-carousel .owl-nav button:focus{background:var(--surface-blue)!important;color:var(--brand-navy-dark)!important}
.review-carousel .owl-prev{left:0}.review-carousel .owl-next{right:0}
.review-carousel .owl-dots{margin-top:16px}
.review-carousel .owl-dot span{width:8px!important;height:8px!important;margin:4px!important;background:#cdd5df!important}
.review-carousel .owl-dot.active span{background:var(--brand-navy)!important}

.review-modal .modal-dialog{max-width:620px;margin-top:8vh}
.review-modal .modal-content{border:0;border-radius:4px;box-shadow:0 18px 55px rgba(11,42,91,.22)}
.review-modal .modal-header{padding:22px 24px 15px;border-bottom:1px solid var(--border)}
.review-modal .modal-title{font-size:20px;color:var(--brand-navy-dark);font-weight:700;margin:4px 0 5px}
.review-modal-stars{color:var(--brand-gold-dark);letter-spacing:1px;font-size:15px}
.review-modal-meta{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted);font-size:11px}
.review-modal-meta strong{color:var(--brand-navy-dark);font-size:12px}
.review-modal .modal-body{max-height:62vh;overflow-y:auto;padding:20px 24px}
.review-modal .modal-body p{margin:0;color:#556174;font-size:13px;line-height:1.8}
.review-modal .modal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid var(--border);text-align:left}
.review-google-link{font-size:11px;font-weight:700;color:var(--brand-navy)}
.review-google-link:hover,.review-google-link:focus{color:var(--brand-gold-dark)}

/* On tablet/mobile the SAME recommendation node moves immediately after the rental card. */
@media(max-width:991px){
  .upgrade-card{order:3;width:100%;margin-top:0}
  .benefit-card{order:4;width:100%}
  .spec-card{order:5;width:100%}
  .review-carousel{padding-left:38px;padding-right:38px}
}

/* Equal-height Area Layanan columns only when Bootstrap uses desktop columns. */
@media(min-width:992px){
  .area-section>.container>.row{display:flex;align-items:stretch}
  .area-section>.container>.row>[class*="col-md-"]{display:flex}
  .area-section .area-card,.area-section .area-side{width:100%;height:100%}
  .area-section .area-side{display:flex;flex-direction:column;align-items:center}
  .area-section .area-side .btn-wa{margin-top:auto}
}

@media(max-width:767px){
  .review-carousel{padding-left:34px;padding-right:34px}
  .review-carousel .review-card{min-height:254px;padding:18px}
  .review-modal .modal-dialog{margin:18px 12px}
  .review-modal .modal-header,.review-modal .modal-body,.review-modal .modal-footer{padding-left:18px;padding-right:18px}
  .review-modal .modal-footer{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .review-carousel .review-card{transition:none!important}
}


/* ==========================================================
   REVISION 06 — stable rental grid, centered Area CTA,
   reviewable Partner autoplay, and mobile detail context.
   ========================================================== */

/* Stable filtered vehicle grid: avoids Bootstrap 3 float wrapping around 992–1100px. */
.cars-section .car-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.cars-section .car-grid>.car-item{
  float:none;
  width:auto;
  min-width:0;
  display:flex;
}
.cars-section .car-grid>.car-item>.car-card{
  width:100%;
}
@media(max-width:991px){
  .cars-section .car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .cars-section .car-grid{grid-template-columns:minmax(0,1fr)}
}

/* Keep equal-height Area cards on desktop, but group the right-side content naturally. */
@media(min-width:992px){
  .area-section .area-side{justify-content:center}
  .area-section .area-side .btn-wa{margin-top:14px}
}

/* Partner is intentionally visible in Revision 06 for visual review. */
.partner-carousel .owl-stage{display:flex;align-items:stretch}
.partner-carousel .owl-item{display:flex;align-items:stretch}
.partner-carousel .partner-logo-placeholder,
.partner-carousel .partner-logo-item{width:100%;height:96px}
.partner-carousel .partner-logo-item{border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;padding:18px}
.partner-carousel .partner-logo-item img,
.partner-carousel img{width:100%;height:58px;object-fit:contain}

/* A compact context switch only for tablet/mobile after the upsell card. */
.detail-context-divider{display:none}
@media(max-width:991px){
  .upgrade-card{order:3}
  .detail-context-divider{
    order:4;
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    color:var(--brand-navy);
    font-size:10px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
    line-height:1.2;
  }
  .detail-context-divider::before,
  .detail-context-divider::after{
    content:'';
    height:1px;
    background:var(--border);
    flex:1;
  }
  .detail-context-divider span{white-space:nowrap}
  .benefit-card{order:5}
  .spec-card{order:6}
}

@media(prefers-reduced-motion:reduce){
  .partner-carousel .owl-stage,
  .partner-carousel .owl-item{transition:none!important}
}


/* ==========================================================
   REVISION 07 — dedicated rental catalog grid and trust-zone
   visual separation. This block intentionally overrides the
   Revision 06 compatibility rules without changing other pages.
   ========================================================== */

/* Rental Mobil is a standalone catalog grid, not a Bootstrap .row/.col grid. */
.cars-section .car-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 30px;
  align-items:stretch;
  width:100%;
  margin:0;
}
.cars-section .car-grid>.car-item{
  float:none;
  width:auto;
  min-width:0;
  padding:0;
  margin:0;
  display:flex;
}
.cars-section .car-grid>.car-item[hidden]{display:none!important}
.cars-section .car-grid>.car-item>.car-card{
  width:100%;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
}
.cars-section .car-grid .car-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.cars-section .car-grid .car-actions{margin-top:auto}

@media(max-width:991px){
  .cars-section .car-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media(max-width:767px){
  .cars-section .car-grid{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* Cara Sewa stays light-blue; Partner + Google Reviews form a clean white trust zone. */
.process-section{background:var(--surface-blue)}
.partner-section{background:#fff}
.partner-section + .reviews-section{border-top:1px solid var(--border)}

/* ==========================================================
   REVISION 08 — desktop detail recommendation spacing
   Keep a single stack gap between Rental Mobil and Rekomendasi Mobil.
   ========================================================== */
@media (min-width:992px){
  .vehicle-right-stack > .upgrade-card{margin-top:0}
}

/* ==========================================================
   REVISION 09 — detail share, review verification link,
   social footer accessibility, and production-ready sharing.
   ========================================================== */

/* Google Reviews: rating + lightweight verification link. */
.google-rating{column-gap:10px;row-gap:6px}
.review-section-google-link{font-size:11px;font-weight:700;color:var(--brand-navy);white-space:nowrap}
.review-section-google-link:hover,.review-section-google-link:focus{color:var(--brand-gold-dark);text-decoration:underline}
.review-section-google-link:focus-visible{outline:2px solid var(--brand-gold);outline-offset:3px}
.google-rating-note{margin:7px auto 0!important;max-width:520px!important;color:var(--muted);font-size:10px!important;line-height:1.5}

/* Detail CTA hierarchy: WhatsApp stays primary, Share stays secondary. */
.detail-action-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(116px,1fr);gap:8px;margin-top:13px}
.detail-action-row .detail-wa,.detail-action-row .detail-share{width:100%;min-height:44px;height:auto;margin-top:0;border-radius:3px;font-weight:700}
.detail-share{border:1px solid #c9d2dd;background:#fff;color:var(--brand-navy);padding:10px 12px;transition:border-color .2s ease,background .2s ease,color .2s ease}
.detail-share:hover,.detail-share:focus{border-color:var(--brand-navy);background:var(--surface-blue);color:var(--brand-navy-dark)}
.detail-share:focus-visible{outline:3px solid rgba(255,198,26,.55);outline-offset:2px}
.detail-share[disabled]{opacity:.65;cursor:wait}

/* Compact Bootstrap 3 fallback used only when Native Web Share is unavailable/technically fails. */
.share-modal .modal-dialog{max-width:360px;margin-top:12vh}
.share-modal .modal-content{border:0;border-radius:4px;box-shadow:0 18px 55px rgba(11,42,91,.22)}
.share-modal .modal-header{padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.share-modal .modal-title{font-size:18px;color:var(--brand-navy-dark);font-weight:700;margin:0 30px 3px 0}
.share-modal-vehicle{margin:0;color:var(--muted);font-size:11px}
.share-modal .modal-body{padding:16px 20px 18px}
.share-fallback-actions{display:grid;grid-template-columns:1fr;gap:8px}
.share-fallback-action{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;border:1px solid var(--border);background:#fff;color:var(--brand-navy-dark);padding:9px 12px;font-size:12px;font-weight:700;text-align:left;border-radius:3px}
.share-fallback-action i{width:18px;text-align:center;color:var(--brand-navy)}
.share-fallback-whatsapp i{color:var(--whatsapp)}
.share-fallback-action:hover,.share-fallback-action:focus{border-color:var(--brand-navy);background:var(--surface-blue)}
.share-fallback-action:focus-visible{outline:3px solid rgba(255,198,26,.55);outline-offset:2px}
.share-copy-notice{margin:10px 0 0;color:#556174;font-size:11px;line-height:1.5}
.share-copy-notice[hidden]{display:none!important}

/* Footer social links remain compact visually while keeping a comfortable touch target. */
.footer-social-wrap{margin-top:17px}
.footer-social-heading{margin:0 0 8px;color:#8492a5;font-size:9px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.footer-social{margin-top:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.footer-social a{display:inline-flex!important;width:40px;height:40px;margin-right:0;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff}
.footer-social a[hidden]{display:none!important}
.footer-social a:hover,.footer-social a:focus{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--brand-navy-dark);text-decoration:none}
.footer-social a:focus-visible{outline:2px solid var(--brand-gold);outline-offset:3px}
.footer-social-svg{width:16px;height:16px;display:block;fill:currentColor}

@media(max-width:767px){
  .detail-action-row{grid-template-columns:1fr}
  .share-modal .modal-dialog{margin:18px 12px;max-width:none}
  .google-rating{max-width:100%;margin-left:auto;margin-right:auto}
}

@media(prefers-reduced-motion:reduce){
  .detail-share,.share-fallback-action{transition:none!important}
}


/* ==========================================================
   REVISION 14 — utility header + conversion hero inquiry.
   Isolated from the proven Revision 12 navigation geometry.
   ========================================================== */
.utility-header{min-height:45px;height:auto;padding:0!important}
.utility-header .container{min-height:45px}
.utility-header .header-utility{min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.utility-header .header-welcome{flex:0 1 auto;color:#eaf0f8;font-size:12px;line-height:1.4;white-space:nowrap}
.utility-header .header-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:0;min-width:0}
.utility-header .header-location,.utility-header span.phone-icon,.utility-header span.date-icon{position:relative;display:inline-flex!important;align-items:center;min-height:32px;padding:0 12px!important;margin:0;line-height:1.4!important;border:0!important;white-space:nowrap}
.utility-header .header-location{color:#eaf0f8!important;font-size:12px;font-weight:500;text-decoration:none}
.utility-header .header-location:hover,.utility-header .header-location:focus{color:var(--brand-gold)!important;text-decoration:none}
.utility-header .header-location-text,.utility-header .header-wa-label{display:inline!important;padding:0!important;line-height:1.4!important}
.utility-header .header-wa-label{display:none!important}
.utility-header span.phone-icon,.utility-header span.date-icon{font-size:12px}
.utility-header span.phone-icon::before,.utility-header span.date-icon::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;transform:translateY(-50%);background:rgba(255,255,255,.16)}
.utility-header span.phone-icon a{display:inline-flex;align-items:center;line-height:1.4;text-decoration:none}
.utility-header .header-social{display:flex;align-items:center;gap:5px;margin-left:5px;padding-left:12px;position:relative}
.utility-header .header-social::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;transform:translateY(-50%);background:rgba(255,255,255,.16)}
.utility-header .header-social a{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.17);border-radius:50%;color:#eaf0f8!important;font-size:12px;text-decoration:none}
.utility-header .header-social a:hover,.utility-header .header-social a:focus{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--brand-navy-dark)!important;text-decoration:none}
.utility-header .header-social a:focus-visible,.utility-header .header-location:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
.header-social-svg{width:13px;height:13px;display:block;fill:currentColor}

.hero-with-inquiry{position:relative;overflow:hidden}
.hero-with-inquiry .owl-carousel{position:relative;z-index:1}
.hero-with-inquiry .owl-dots{display:none!important}
.hero-with-inquiry .caption{text-align:left;padding-right:390px;cursor:default}
.hero-with-inquiry .caption .col-md-offset-1.col-md-10{max-width:720px}
.hero-booking-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.hero-booking-container{height:650px;max-width:1170px;margin:0 auto;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.hero-booking-card{width:360px;max-width:100%;padding:20px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 45px rgba(7,30,66,.24);border-radius:8px;pointer-events:auto;color:var(--text)}
.hero-booking-heading .eyebrow{margin-bottom:3px}
.hero-booking-heading h2{margin:0 0 5px;color:var(--brand-navy-dark);font-size:23px;line-height:1.25;font-weight:700}
.hero-booking-heading p{margin:0 0 13px;color:var(--muted);font-size:11px;line-height:1.5}
.hero-form-grid{display:grid;grid-template-columns:1fr;gap:9px}
.hero-field label{display:block;margin:0 0 4px;color:var(--brand-navy-dark);font-size:10px;font-weight:700;line-height:1.35}
.hero-field label small{color:#8a94a3;font-weight:500}
.hero-control-wrap{position:relative}
.hero-control-wrap>i:not(.select-icon){position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;color:var(--brand-navy);pointer-events:none}
.hero-control-wrap .select-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#788497;pointer-events:none}
.hero-booking-card input,.hero-booking-card select{width:100%;height:40px;border:1px solid #d7dee8;border-radius:4px;background:#fff;color:#354255;font-size:12px;line-height:1.4;padding:8px 34px 8px 11px;box-shadow:none;outline:none}
.hero-booking-card input[type=date]{padding-left:34px;padding-right:8px}
.hero-booking-card select{-webkit-appearance:none;-moz-appearance:none;appearance:none}
.hero-booking-card input:focus,.hero-booking-card select:focus{border-color:var(--brand-navy);box-shadow:0 0 0 2px rgba(11,42,91,.10)}
.hero-field.has-error input,.hero-field.has-error select{border-color:#c62828;box-shadow:0 0 0 1px rgba(198,40,40,.08)}
.hero-form-message{margin:9px 0 0;padding:8px 10px;border-left:3px solid #c62828;background:#fff5f5;color:#8b1f1f;font-size:10px;line-height:1.45}
.hero-form-message[hidden]{display:none!important}
.hero-inquiry-submit{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:4px;background:var(--whatsapp);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .2s ease,transform .2s ease}
.hero-inquiry-submit:hover,.hero-inquiry-submit:focus{background:var(--whatsapp-dark);color:#fff}
.hero-inquiry-submit:focus-visible{outline:3px solid rgba(255,198,26,.75);outline-offset:2px}
.hero-form-note{display:block;margin-top:7px;text-align:center;color:#7f8997;font-size:9px;line-height:1.4}
.hero-with-inquiry .owl-nav{position:absolute;z-index:7;left:8.333333%;bottom:30px;display:flex;gap:8px;margin:0!important}
.hero-with-inquiry .owl-nav [class*=owl-]{position:static!important;width:42px;height:42px;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;background:rgba(7,30,66,.46)!important;color:#fff!important;font-size:22px!important;display:inline-flex!important;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease}
.hero-with-inquiry .owl-nav [class*=owl-]:hover,.hero-with-inquiry .owl-nav [class*=owl-]:focus{background:var(--brand-gold)!important;border-color:var(--brand-gold)!important;color:var(--brand-navy-dark)!important}
.hero-with-inquiry .owl-nav [class*=owl-]:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media(min-width:768px) and (max-width:991px){
  .utility-header .header-welcome{display:none}
  .utility-header .header-utility{justify-content:center}
  .utility-header .header-actions{margin-left:0;width:100%;justify-content:center}
  .utility-header .header-location,.utility-header span.phone-icon,.utility-header span.date-icon{padding-left:10px!important;padding-right:10px!important;font-size:11px}
  .utility-header .header-social{padding-left:10px;margin-left:2px;gap:4px}
  .utility-header .header-social a{width:27px;height:27px}
  .hero-with-inquiry .caption{justify-content:flex-start;padding:44px 30px 320px;text-align:left}
  .hero-with-inquiry .caption .col-md-offset-1.col-md-10{margin-left:0;width:100%;max-width:620px}
  .hero-with-inquiry .caption h1,.hero-with-inquiry .caption h2{font-size:32px;max-width:620px}
  .hero-booking-container{height:650px;align-items:flex-end;justify-content:center;padding-bottom:26px}
  .hero-booking-card{width:690px;padding:17px 18px}
  .hero-booking-heading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .hero-booking-heading .eyebrow{width:100%;margin-bottom:0}
  .hero-booking-heading h2{font-size:21px;margin-bottom:8px}
  .hero-booking-heading p{flex:1;min-width:260px;margin-bottom:8px}
  .hero-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
  .hero-field-vehicle{grid-column:1/-1}
  .hero-inquiry-submit{margin-top:10px}
  .hero-with-inquiry .owl-nav{left:22px;bottom:auto;top:170px}
}

@media(max-width:767px){
  .utility-header .container{min-height:38px}
  .utility-header .header-utility{min-height:38px;justify-content:center;gap:0}
  .utility-header .header-welcome,.utility-header span.date-icon,.utility-header .header-social{display:none!important}
  .utility-header .header-actions{margin:0;width:100%;justify-content:center}
  .utility-header .header-location,.utility-header span.phone-icon{min-height:32px;padding:0 12px!important;font-size:11px}
  .utility-header .header-location{padding-left:0!important}
  .utility-header span.phone-icon::before{display:block}
  .utility-header .header-wa-number{display:none!important}
  .utility-header .header-wa-label{display:inline!important;font-size:11px!important;color:#eaf0f8!important}
  .hero-with-inquiry .item{height:650px}
  .hero-with-inquiry .caption{justify-content:flex-start;text-align:left;padding:34px 17px 475px}
  .hero-with-inquiry .caption .col-md-offset-1.col-md-10{margin:0;width:100%;padding:0;max-width:100%}
  .hero-with-inquiry .caption h3{margin:0 0 5px}
  .hero-with-inquiry .caption h1,.hero-with-inquiry .caption h2{font-size:24px;line-height:1.2;margin:0 0 8px;max-width:320px}
  .hero-with-inquiry .caption .section-btn{font-size:10px;padding:8px 12px}
  .hero-booking-container{height:650px;align-items:flex-end;justify-content:center;padding:0 12px 14px}
  .hero-booking-card{width:100%;max-width:430px;padding:14px 15px;border-radius:7px}
  .hero-booking-heading .eyebrow{font-size:9px;margin-bottom:2px}
  .hero-booking-heading h2{font-size:19px;margin-bottom:3px}
  .hero-booking-heading p{font-size:10px;line-height:1.4;margin-bottom:9px}
  .hero-form-grid{gap:6px}
  .hero-field label{font-size:9px;margin-bottom:2px}
  .hero-booking-card input,.hero-booking-card select{height:38px;font-size:11px}
  .hero-inquiry-submit{min-height:42px;margin-top:9px;font-size:11px}
  .hero-form-note{margin-top:5px;font-size:8.5px}
  .hero-with-inquiry .owl-nav{left:15px;top:132px;bottom:auto}
  .hero-with-inquiry .owl-nav [class*=owl-]{width:36px;height:36px;font-size:19px!important}
}

@media(max-width:380px){
  .utility-header .header-location,.utility-header span.phone-icon{padding-right:9px!important;padding-left:9px!important}
  .hero-with-inquiry .caption{padding-top:26px;padding-bottom:478px}
  .hero-booking-card{padding:12px 13px}
  .hero-booking-heading p{display:none}
  .hero-form-grid{gap:5px}
  .hero-booking-card input,.hero-booking-card select{height:37px}
}

@media(prefers-reduced-motion:reduce){
  .hero-inquiry-submit,.utility-header .header-social a{transition:none!important}
}

/* ==========================================================
   REVISION 15 — visual polish only.
   Keeps Revision 14 hero inquiry/autoplay logic and the proven
   Revision 12/13 navigation behavior unchanged.
   ========================================================== */

/* Give the location utility icon readable breathing room without manual spaces. */
.utility-header .header-location > i{
  flex:0 0 auto;
  margin-right:7px;
}

/* Header social icons: keep one restrained monochrome treatment.
   Footer hover styles are intentionally untouched. */
.utility-header .header-social a{
  color:rgba(234,240,248,.78)!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.15)!important;
  transition:color .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease;
}
.utility-header .header-social a:hover,
.utility-header .header-social a:focus{
  color:rgba(255,255,255,.96)!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.26)!important;
  text-decoration:none;
}
.header-social-svg{
  color:inherit!important;
  fill:currentColor!important;
  opacity:1;
}
.header-social-svg path{fill:currentColor!important}
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg path{color:inherit!important;fill:currentColor!important;opacity:1!important}
.utility-header .header-social a:hover .header-social-svg,
.utility-header .header-social a:focus .header-social-svg{opacity:1}

/* Hero navigation: minimalist edge arrows, no circles/backgrounds. */
.hero-with-inquiry .owl-nav{
  position:absolute;
  z-index:7;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  height:650px;
  display:block;
  margin:0!important;
  pointer-events:none;
}
.hero-with-inquiry .owl-nav [class*=owl-]{
  position:absolute!important;
  top:50%;
  width:44px;
  height:44px;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%);
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.68)!important;
  font-size:34px!important;
  line-height:1!important;
  text-shadow:0 1px 5px rgba(0,0,0,.22);
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  transition:color .18s ease,transform .18s ease,opacity .18s ease;
}
.hero-with-inquiry .owl-nav .owl-prev{left:18px!important}
.hero-with-inquiry .owl-nav .owl-next{right:18px!important;left:auto!important}
.hero-with-inquiry .owl-nav [class*=owl-]:hover,
.hero-with-inquiry .owl-nav [class*=owl-]:focus{
  background:transparent!important;
  border-color:transparent!important;
  color:rgba(255,255,255,.96)!important;
  transform:translateY(-50%) scale(1.04);
}
.hero-with-inquiry .owl-nav [class*=owl-]:focus-visible{
  outline:2px solid rgba(255,255,255,.78);
  outline-offset:1px;
}

/* On narrower desktop widths, leave a small safe lane for the right arrow. */
@media(min-width:992px) and (max-width:1300px){
  .hero-booking-container{padding-right:48px}
}

/* Revision 16: tablet arrows vertically center on the full hero, matching desktop. */
@media(min-width:768px) and (max-width:991px){
  .hero-with-inquiry .owl-nav{top:0;left:0;right:0;height:650px}
  .hero-with-inquiry .owl-nav .owl-prev{left:14px!important}
  .hero-with-inquiry .owl-nav .owl-next{right:14px!important}
}

/* Revision 16: mobile arrows vertically center on the full hero, matching desktop. */
@media(max-width:767px){
  .hero-with-inquiry .owl-nav{top:0;left:0;right:0;height:650px}
  .hero-with-inquiry .owl-nav [class*=owl-]{width:40px;height:44px;font-size:30px!important}
  .hero-with-inquiry .owl-nav .owl-prev{left:7px!important}
  .hero-with-inquiry .owl-nav .owl-next{right:7px!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-with-inquiry .owl-nav [class*=owl-],
  .utility-header .header-social a{transition:none!important}
}

/* ==========================================================
   REVISION 17 — responsive carousel controls + TikTok parity.
   Desktop uses arrows; touch widths use swipe with subtle dots
   only where the item count is intentionally finite.
   ========================================================== */

/* Header TikTok must visually match the Font Awesome icons exactly.
   Font Awesome icons inherit the global header gold rule, so the SVG
   is explicitly tied to the same brand-gold value in every state. */
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg path,
.utility-header .header-social a[data-platform="tiktok"]:hover .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"]:hover .header-social-svg path,
.utility-header .header-social a[data-platform="tiktok"]:focus .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"]:focus .header-social-svg path{
  color:var(--brand-gold)!important;
  fill:var(--brand-gold)!important;
  opacity:1!important;
}

/* HERO — desktop keeps the proven minimalist edge arrows and hides dots. */
@media(min-width:992px){
  .hero-with-inquiry .owl-nav{display:block!important}
  .hero-with-inquiry .owl-dots{display:none!important}
}

/* HERO — tablet/mobile: no arrows; swipe/drag + compact pagination. */
@media(max-width:991px){
  .hero-with-inquiry .owl-nav{display:none!important}
  .hero-with-inquiry .owl-dots{
    position:absolute;
    z-index:7;
    left:50%;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:auto;
    margin:0!important;
    transform:translateX(-50%);
    pointer-events:auto;
  }
  .hero-with-inquiry .owl-dot span{
    display:block;
    width:6px!important;
    height:6px!important;
    margin:4px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.40)!important;
    box-shadow:0 1px 4px rgba(0,0,0,.16);
    transition:width .18s ease,background .18s ease,opacity .18s ease;
  }
  .hero-with-inquiry .owl-dot.active span{
    width:18px!important;
    background:rgba(255,255,255,.88)!important;
  }
  .hero-with-inquiry .owl-dot:focus-visible{outline:2px solid rgba(255,255,255,.82);outline-offset:2px}
}

@media(min-width:768px) and (max-width:991px){
  .hero-with-inquiry .owl-dots{top:43%}
}

@media(max-width:767px){
  .hero-with-inquiry .owl-dots{top:29%}
}

/* GOOGLE REVIEWS — desktop uses arrows only. */
@media(min-width:992px){
  .review-carousel .owl-nav{display:block!important}
  .review-carousel .owl-dots{display:none!important}
}

/* GOOGLE REVIEWS — touch widths use swipe + subtle dots only. */
@media(max-width:991px){
  .review-carousel{padding-left:0;padding-right:0}
  .review-carousel .owl-nav{display:none!important}
  .review-carousel .owl-dots{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:3px;
    margin-top:16px!important;
  }
  .review-carousel .owl-dot span{
    width:6px!important;
    height:6px!important;
    margin:4px!important;
    border-radius:999px!important;
    background:rgba(11,42,91,.24)!important;
    transition:width .18s ease,background .18s ease;
  }
  .review-carousel .owl-dot.active span{
    width:18px!important;
    background:rgba(11,42,91,.78)!important;
  }
  .review-carousel .owl-dot:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
}

/* PARTNER — scalable carousel: arrows only on desktop, never dots.
   Tablet/mobile get swipe/drag and a small stage peek to communicate overflow. */
.partner-carousel .owl-dots{display:none!important}
@media(min-width:992px){
  .partner-carousel .owl-nav{display:block!important}
}
@media(max-width:991px){
  .partner-carousel{padding-left:0;padding-right:0}
  .partner-carousel .owl-nav{display:none!important}
  .partner-carousel .owl-stage-outer{overflow:hidden}
}

@media(prefers-reduced-motion:reduce){
  .hero-with-inquiry .owl-dot span,
  .review-carousel .owl-dot span{transition:none!important}
}

/* ==========================================================
   REVISION 18 — brand/icon polish + compliance preparation.
   NOTE: social links are still dummy review links. The visual
   treatment stops custom brand-gold recoloring. Before go-live,
   replace placeholder glyphs with current official assets after
   accepting each platform's applicable terms/permission process.
   TikTok's current developer guidance requires prior permission.
   ========================================================== */

/* Social brand marks: use a neutral light treatment on the dark
   Andhika Gemilang surfaces. Hover feedback belongs to the control
   container, not to recoloring the platform mark itself. */
.utility-header .header-social a,
.footer-social a{
  color:#fff!important;
}
.utility-header .header-social a:hover,
.utility-header .header-social a:focus,
.footer-social a:hover,
.footer-social a:focus{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,198,26,.48)!important;
  text-decoration:none;
}
.utility-header .header-social a > i{
  color:inherit!important;
  font-size:13px;
  line-height:1;
}
.footer-social a > i{
  color:inherit!important;
  font-size:16px;
  line-height:1;
}
.header-social-svg,
.header-social-svg path,
.footer-social-svg,
.footer-social-svg path{
  color:inherit!important;
  fill:currentColor!important;
  opacity:1!important;
}
/* Override Revision 17's temporary TikTok-gold patch so the TikTok
   review placeholder follows the same neutral mark color as its peers. */
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg path,
.utility-header .header-social a[data-platform="tiktok"]:hover .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"]:hover .header-social-svg path,
.utility-header .header-social a[data-platform="tiktok"]:focus .header-social-svg,
.utility-header .header-social a[data-platform="tiktok"]:focus .header-social-svg path{
  color:#fff!important;
  fill:#fff!important;
}
/* TikTok optical size compensation: its 24x24 glyph has more
   internal whitespace than the neighbouring icon-font glyphs. */
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg{
  width:15px!important;
  height:15px!important;
}
.footer-social a[data-platform="tiktok"] .footer-social-svg{
  width:18px!important;
  height:18px!important;
}

/* WhatsApp is a branded mark, so do not inherit the generic header/
   footer gold icon rule. Green is reserved for standalone WA marks;
   white marks on existing green CTA buttons remain unchanged. */
.utility-header span.phone-icon > i.fa-whatsapp,
.footer-contact-item > i.fa-whatsapp{
  color:var(--whatsapp)!important;
}

/* Generic location/map symbols are NOT Google Maps branding and can
   continue to use the Andhika Gemilang navy/gold visual system. */
.utility-header .header-location > i.fa-map-marker,
.area-list .fa-map-marker,
.area-side > .fa-map,
.location-card-marker,
.footer-location > .fa-map-marker{
  color:var(--brand-gold)!important;
}
.area-list .fa-map-marker{
  width:14px;
  margin-right:6px;
  text-align:center;
}
.location-card h3 .location-card-marker{
  margin-right:8px;
  font-size:17px;
  vertical-align:1px;
}
.map-btn .fa-map-marker{
  margin-right:7px;
}
.map-btn .fa-external-link{
  margin-left:6px;
  font-size:.9em;
}

@media(prefers-reduced-motion:reduce){
  .utility-header .header-social a,
  .footer-social a{transition:none!important}
}



/* ==========================================================
   REVISION 20 — familiar social icons + TikTok optical balance.
   Intentionally branches from Revision 18 after Revision 19's
   generic/text social treatment was rejected in visual review.
   ========================================================== */

/* The TikTok placeholder keeps its original path, while its SVG
   viewBox is optically cropped in HTML so the glyph fills the same
   visual area as neighbouring social marks. Keep modest explicit
   box sizes so the circular controls themselves do not change. */
.utility-header .header-social a[data-platform="tiktok"] .header-social-svg{
  width:16px!important;
  height:16px!important;
}
.footer-social a[data-platform="tiktok"] .footer-social-svg{
  width:19px!important;
  height:19px!important;
}

/* Location card: business name is intentionally text-only.
   Location context is already provided by the section heading, map,
   address, and the explicit Google Maps CTA. */
.location-card h3{display:block}


/* ==========================================================
   REVISION 21 — content finalization + layout polish review.
   Vehicle inventory/count intentionally remains Revision 20.
   ========================================================== */

/* Navbar image logo active; text alternative remains commented in HTML. */
.navbar-brand.brand-image{padding:7px 15px;min-height:64px;display:flex;align-items:center}
.navbar-brand.brand-image img{display:block;width:170px;max-width:170px;height:auto;max-height:53px;object-fit:contain}
@media(max-width:767px){
  .navbar-brand.brand-image{padding:8px 15px;min-height:60px}
  .navbar-brand.brand-image img{width:155px;max-width:155px;max-height:48px}
}

/* About: clean image, no decorative frame/background. Desktop image stretches
   to the natural height of the copy column; no hard-coded pixel height. */
.about-visual{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0;overflow:hidden}
@media(min-width:992px){
  .about-rental-row{display:flex;align-items:stretch}
  .about-rental-row>[class*="col-md-"]{display:flex}
  .about-rental-row .about-visual,.about-rental-row .about-copy{width:100%}
  .about-rental-row .about-visual{display:flex;min-height:100%;height:100%}
  .about-rental-row .about-visual img{width:100%;height:100%;min-height:100%;object-fit:cover}
}
@media(max-width:991px){
  .about-visual,.about-visual img{min-height:0!important;height:auto!important}
  .about-visual img{display:block;width:100%;aspect-ratio:900/560;object-fit:cover}
  .about-copy{padding-left:0;margin-top:20px}
}

/* Reserve a dedicated old-price row without inserting dummy text. */
.cars-section .car-price{display:grid;grid-template-rows:16px auto;align-content:start;min-height:48px}
.cars-section .car-price .price-old{grid-row:1}
.cars-section .car-price .price-current{grid-row:2}
.related-body .compact-price{display:grid;grid-template-rows:15px auto;align-content:end;min-height:48px}
.related-body .compact-price .old{grid-row:1}
.related-body .compact-price>strong{grid-row:2}

/* Hero touch pagination stays in a reserved visual lane above the booking card,
   avoiding the card's stacking layer without introducing resize JavaScript. */
@media(min-width:768px) and (max-width:991px){
  .hero-with-inquiry .owl-dots{top:180px!important;bottom:auto!important}
}
@media(max-width:767px){
  .hero-with-inquiry .owl-dots{top:148px!important;bottom:auto!important}
}
@media(max-width:420px){
  .hero-with-inquiry .owl-dots{top:136px!important}
}

/* Footer semantic address. */
.footer-location address{margin:0;font:inherit;color:inherit;line-height:inherit}
.location-address{font-style:normal}

/* Recommendation layout while detail thumbnails are disabled: lower-height
   horizontal card helps rebalance the two desktop columns. Image stays left,
   content right for natural left-to-right scanning. */
.upgrade-card-horizontal{display:grid!important;grid-template-columns:42% minmax(0,1fr);align-items:stretch;margin-top:0!important}
.upgrade-horizontal-image{position:relative;min-width:0;background:#f3f6fa;border-right:1px solid var(--border);overflow:hidden}
.upgrade-horizontal-image>img{display:block;width:100%;height:100%;min-height:190px;padding:8px;object-fit:contain;background:#f3f6fa}
.upgrade-horizontal-image>.car-badges{z-index:2}
.upgrade-horizontal-content{display:flex;flex-direction:column;min-width:0;padding:16px}
.upgrade-horizontal-content .eyebrow{margin-bottom:3px}
.upgrade-horizontal-content h3{font-size:15px;color:var(--brand-navy-dark);font-weight:700;line-height:1.3;margin:2px 0 6px}
.upgrade-horizontal-content .upgrade-vehicle-name{font-size:16px;margin:0 0 4px}
.upgrade-horizontal-content .upgrade-meta{margin-bottom:7px}
.upgrade-horizontal-content .upgrade-price{margin:0 0 10px}
.upgrade-horizontal-content .btn-detail{margin-top:auto;width:100%;min-height:40px}
@media(max-width:767px){
  .upgrade-card-horizontal{grid-template-columns:1fr}
  .upgrade-horizontal-image{border-right:0;border-bottom:1px solid var(--border)}
  .upgrade-horizontal-image>img{height:180px;min-height:180px}
}


/* ==========================================================
   REVISION 23 — DATA-READY / ASSET-READY OVERRIDES
   Source visual baseline: Revision 21.
   ========================================================== */
/* Compact detail information: preserve typography, reduce vertical space only. */
.approved-detail .detail-info-card{padding:17px 18px}
.approved-detail .detail-card-heading{margin-bottom:12px}
.approved-detail .benefit-grid{gap:8px}
.approved-detail .benefit-item{padding:9px 10px;min-height:60px;gap:9px}
.approved-detail .benefit-item>i{font-size:17px}
.approved-detail .benefit-item strong{line-height:1.25}
.approved-detail .benefit-item small{line-height:1.3;margin-top:2px}
.approved-detail .vehicle-spec-grid{gap:8px}
.approved-detail .vehicle-spec-grid>div{padding:9px 10px;min-height:52px}
.approved-detail .vehicle-spec-grid span{margin-bottom:2px}

/* Status labels. UNIT BARU is a model-level attribute, not a separate model. */
.badge-unit-baru{background:#fff4cf;color:#674d00;border:1px solid #e7c75c}
.badge-unavailable{background:#eef1f5;color:#4d596a;border:1px solid #cdd4de}
.car-badges .badge-unit-baru,.car-badges .badge-unavailable{font-size:9px;line-height:1.2;white-space:normal;max-width:150px}
.vehicle-status-note{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:9px 11px;border-radius:8px;background:#f6f8fb;color:#536071;font-size:12px;line-height:1.45}
.vehicle-status-note i{margin-top:2px}

/* Revision 23 recommendation: one DOM component.
   Desktop/tablet = image left, info/action right.
   Mobile = info first, then image, then CTA (Revision 20 reading order). */
.upgrade-card-responsive{display:grid!important;grid-template-columns:42% minmax(0,1fr);grid-template-areas:"image info" "image action";align-items:stretch;margin-top:0!important;overflow:hidden}
.upgrade-recommendation-image{grid-area:image;position:relative;min-width:0;background:#f3f6fa;border-right:1px solid var(--border);overflow:hidden}
.upgrade-recommendation-image>img{display:block;width:100%;height:100%;min-height:190px;padding:8px;object-fit:contain;background:#fff}
.upgrade-recommendation-info{grid-area:info;min-width:0;padding:16px 16px 5px}
.upgrade-recommendation-info .eyebrow{margin-bottom:3px}
.upgrade-recommendation-info h3{font-size:15px;color:var(--brand-navy-dark);font-weight:700;line-height:1.3;margin:2px 0 6px}
.upgrade-recommendation-info .upgrade-vehicle-name{font-size:16px;margin:0 0 4px}
.upgrade-recommendation-info .upgrade-meta{margin-bottom:7px}
.upgrade-recommendation-info .upgrade-price{margin:0 0 7px}
.upgrade-recommendation-action{grid-area:action;padding:4px 16px 16px;display:flex;align-items:flex-end}
.upgrade-recommendation-action .btn-detail{width:100%;min-height:40px}
@media(max-width:767px){
  .upgrade-card-responsive{grid-template-columns:1fr;grid-template-areas:"info" "image" "action"}
  .upgrade-recommendation-info{padding:16px 16px 10px}
  .upgrade-recommendation-image{border-right:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .upgrade-recommendation-image>img{height:190px;min-height:190px}
  .upgrade-recommendation-action{padding:12px 16px 16px}
}

/* Price row remains aligned even when no crossed-out promotional price exists. */
.car-price .price-old:empty,.related-body .compact-price .old:empty{visibility:hidden}

/* Temporary unavailable type support — keep page/card indexable but never expose stale price. */
.car-item.is-unavailable .car-price .price-current{font-size:14px;color:#667085}
.rental-card.is-unavailable .option-block[data-pricing-block],
.rental-card.is-unavailable .selected-price{display:none!important}
.rental-card.is-unavailable .detail-wa{width:100%}


/* ==========================================================
   REVISION 24 — targeted review fixes.
   1) Image brand must occupy the same Bootstrap brand box as Revision 20 text.
   2) Mobile hero dots move upward to keep a clear gap above inquiry form.
   3) Generic hidden semantics are explicit for staged static content.
   ========================================================== */
[hidden]{display:none!important}
.navbar-default .navbar-brand.brand-image{height:50px!important;min-height:50px!important;padding:10px 15px!important;display:flex;align-items:center}
.navbar-default .navbar-brand.brand-image img{display:block;width:auto!important;max-width:190px!important;height:auto!important;max-height:30px!important;object-fit:contain}
@media(max-width:767px){
  .navbar-default .navbar-brand.brand-image{height:50px!important;min-height:50px!important;padding:10px 15px!important}
  .navbar-default .navbar-brand.brand-image img{width:auto!important;max-width:165px!important;max-height:30px!important}
}
@media(max-width:767px){
  .hero-with-inquiry .owl-dots{top:132px!important}
}
@media(max-width:420px){
  .hero-with-inquiry .owl-dots{top:122px!important}
}
.availability-card-text{display:flex;align-items:center;min-height:32px;color:#566275;font-size:13px;font-weight:700}
.car-item.is-unavailable .car-card{opacity:.96}

/* ==========================================================
   REVISION 26 — DETAIL PAGE COMPACTNESS
   1) Revision 26 compact detail spacing remains the baseline.
      Gallery thumbnail visibility is extended by Revision 27 without changing the main layout.
   2) The right rental/price panel uses vertical spacing comparable to the
      compact Keunggulan and Detail Kendaraan cards on the left.
   ========================================================== */
@media (min-width:768px){
  .approved-detail .rental-card{padding:17px 18px}
  .approved-detail .rental-card>h1{margin:1px 0 6px}
  .approved-detail .rental-card .vehicle-meta{margin-bottom:8px}
  .approved-detail .rental-card .vehicle-short-desc{margin:8px 0 2px;line-height:1.55}
  .approved-detail .rental-card .option-block{padding:11px 0}
  .approved-detail .rental-card .option-title{margin-bottom:6px}
  .approved-detail .rental-card .rental-option{min-height:102px;padding:10px}
  .approved-detail .rental-card .selected-price{margin-top:10px;padding-top:10px}
  .approved-detail .rental-card .detail-action-row{margin-top:10px}
}
@media (max-width:767px){
  .approved-detail .rental-card{padding:18px}
  .approved-detail .rental-card .vehicle-short-desc{margin:8px 0 2px}
  .approved-detail .rental-card .option-block{padding:11px 0}
  .approved-detail .rental-card .selected-price{margin-top:10px;padding-top:10px}
  .approved-detail .rental-card .detail-action-row{margin-top:10px}
}


/* ==========================================================
   REVISION 27 — UNIT BARU PER WARNA (STATIC / FUTURE-CMS READY)
   - Model badge remains compact as UNIT BARU.
   - BARU micro-badge is shown only beside a ready-new color selector.
   - Color name + BARU stay together; gallery thumbnails never receive BARU.
   - Existing Revision 26 detail compactness is preserved.
   ========================================================== */
.car-badges .badge-unit-baru,.detail-badges .badge-unit-baru{white-space:nowrap;max-width:none}
.color-label-text{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
.color-new-badge{display:inline-flex;align-items:center;padding:1px 4px;border:1px solid #e7c75c;border-radius:2px;background:#fff4cf;color:#674d00;font-size:8px;font-weight:800;line-height:1.25;letter-spacing:.25px;white-space:nowrap}
.vehicle-thumbs{grid-template-columns:repeat(auto-fit,minmax(82px,1fr))}
.thumb.color-thumb{position:relative}
@media(max-width:767px){
  .color-label-text{gap:3px}
  .color-new-badge{font-size:7px;padding:1px 3px}
  .vehicle-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:82px;grid-template-columns:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
}


/* ==========================================================
   REVISION 28 — UX & COMPACTNESS REFINEMENT
   Source: Revision 27 baseline/frozen.
   - Home vertical rhythm is more compact without reducing typography.
   - Mobile hero copy/CTA moves slightly upward; slider dots/form stay put.
   - Detail cards use tighter spacing only; font sizes remain unchanged.
   - Gallery returns to exactly five semantic thumbnails and each color
     supplies a complete five-view data contract (with honest placeholders
     when production photos are not yet available).
   ========================================================== */

/* HOME: compact vertical rhythm without shrinking text. */
body[data-page-type="home"] .section-heading{margin-bottom:24px}
body[data-page-type="home"] #tentang-kami{padding:46px 0}
body[data-page-type="home"] #rental-mobil{padding:50px 0}
body[data-page-type="home"] #layanan,
body[data-page-type="home"] #cara-sewa,
body[data-page-type="home"] #google-reviews,
body[data-page-type="home"] #area-layanan,
body[data-page-type="home"] #lokasi-rental,
body[data-page-type="home"] #faq{padding:44px 0}
body[data-page-type="home"] #partner{padding:38px 0}

/* DETAIL: exactly five stable semantic thumbnails. */
.approved-detail .vehicle-thumbs{grid-template-columns:repeat(5,minmax(82px,1fr))}

/* DETAIL: spacing-only compaction; typography and touch intent are retained. */
.approved-detail .detail-info-card{padding:14px 16px}
.approved-detail .detail-card-heading{margin-bottom:9px}
.approved-detail .benefit-grid{gap:6px}
.approved-detail .benefit-item{padding:8px 10px;min-height:54px;gap:9px}
.approved-detail .vehicle-spec-grid{gap:0}
.approved-detail .vehicle-spec-grid>div{padding:8px 10px;min-height:48px}
.approved-detail .rental-card .vehicle-short-desc{margin:6px 0 1px}
.approved-detail .rental-card .option-block{padding:9px 0}
.approved-detail .rental-card .option-title{margin-bottom:5px}
.approved-detail .rental-card .selected-price{margin-top:8px;padding-top:8px}
.approved-detail .rental-card .detail-action-row{margin-top:9px}

@media(min-width:768px){
  .approved-detail .rental-card{padding:15px 16px}
  .approved-detail .rental-card .rental-option{min-height:96px}
}

@media(max-width:991px){
  body[data-page-type="home"] .section-heading{margin-bottom:22px}
  body[data-page-type="home"] #tentang-kami{padding:40px 0}
  body[data-page-type="home"] #rental-mobil{padding:44px 0}
  body[data-page-type="home"] #layanan,
  body[data-page-type="home"] #cara-sewa,
  body[data-page-type="home"] #google-reviews,
  body[data-page-type="home"] #area-layanan,
  body[data-page-type="home"] #lokasi-rental,
  body[data-page-type="home"] #faq{padding:40px 0}
  body[data-page-type="home"] #partner{padding:34px 0}
}

@media(max-width:767px){
  body[data-page-type="home"] .section-heading{margin-bottom:20px}
  body[data-page-type="home"] #tentang-kami{padding:34px 0}
  body[data-page-type="home"] #rental-mobil{padding:38px 0}
  body[data-page-type="home"] #layanan,
  body[data-page-type="home"] #cara-sewa,
  body[data-page-type="home"] #google-reviews,
  body[data-page-type="home"] #area-layanan,
  body[data-page-type="home"] #lokasi-rental,
  body[data-page-type="home"] #faq{padding:36px 0}
  body[data-page-type="home"] #partner{padding:30px 0}

  /* Raise hero copy + yellow CTA only; dots and inquiry card keep their proven positions. */
  .hero-with-inquiry .caption{padding-top:26px}

  .approved-detail .vehicle-thumbs{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:82px;
    grid-template-columns:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .approved-detail .rental-card{padding:16px}
  .approved-detail .rental-card .rental-option{min-height:104px}
}

@media(max-width:380px){
  .hero-with-inquiry .caption{padding-top:20px}
}


/* ==========================================================
   REVISION 28 v2 — RECOMMENDATION CARD & DETAIL RHYTHM
   - Keep Revision 28 structure; no redesign and no typography shrink.
   - Desktop/tablet recommendation: landscape/semi-landscape image left,
     information + public color dots right, CTA full width below the card.
   - Mobile recommendation: info, image, color dots, price, full-width CTA.
   - Reduce the visual gap between Tentang Kendaraan and Mobil Terkait.
   ========================================================== */
.upgrade-card-responsive{
  grid-template-columns:45% minmax(0,1fr);
  grid-template-areas:
    "image info"
    "image colors"
    "image price"
    "action action";
  grid-template-rows:auto auto 1fr auto;
}
.upgrade-recommendation-image{
  align-self:stretch;
  min-height:150px;
}
.upgrade-recommendation-image>img{
  min-height:150px;
  height:100%;
  padding:8px;
  object-fit:contain;
}
.upgrade-recommendation-info{padding:14px 15px 5px}
.upgrade-recommendation-info .upgrade-meta{margin-bottom:0}
.upgrade-recommendation-colors{
  grid-area:colors;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-height:24px;
  padding:2px 15px 7px;
}
.upgrade-recommendation-colors[hidden]{display:none!important}
.upgrade-color-dot{
  display:inline-block;
  width:13px;
  height:13px;
  flex:0 0 13px;
  border-radius:50%;
  background:var(--recommendation-color,#c8ced6);
  border:1px solid #aeb7c2;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
.upgrade-color-more{color:var(--muted);font-weight:700;line-height:1}
.upgrade-card-responsive>.upgrade-recommendation-price{
  grid-area:price;
  align-self:end;
  margin:0;
  padding:0 15px 12px;
}
.upgrade-recommendation-action{
  grid-area:action;
  padding:11px 15px 14px;
  border-top:1px solid var(--border);
  display:flex;
}
.upgrade-recommendation-action .btn-detail{
  width:100%;
  min-height:42px;
  margin:0;
}

/* The two adjacent section paddings used to visually stack into a large gap. */
body[data-page-type="vehicle-detail"] .approved-detail{padding-bottom:24px}
body[data-page-type="vehicle-detail"] .related-section{padding-top:30px}

@media(max-width:991px){
  .upgrade-card-responsive{grid-template-columns:42% minmax(0,1fr)}
}

@media(max-width:767px){
  .upgrade-card-responsive{
    grid-template-columns:1fr;
    grid-template-areas:
      "info"
      "image"
      "colors"
      "price"
      "action";
    grid-template-rows:auto auto auto auto auto;
  }
  .upgrade-recommendation-info{padding:14px 16px 10px}
  .upgrade-recommendation-image{
    min-height:0;
    border-right:0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .upgrade-recommendation-image>img{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/10;
    object-fit:contain;
  }
  .upgrade-recommendation-colors{padding:10px 16px 5px}
  .upgrade-card-responsive>.upgrade-recommendation-price{padding:2px 16px 10px}
  .upgrade-recommendation-action{padding:11px 16px 15px}
  body[data-page-type="vehicle-detail"] .approved-detail{padding-bottom:18px}
  body[data-page-type="vehicle-detail"] .related-section{padding-top:22px}
}

/* ==========================================================
   REVISION 29 — RECOMMENDATION COLOR SWATCH POLISH
   Source: Revision 28 v2 review candidate.
   - Make recommendation color swatches read as color samples,
     not radio controls.
   - Keep them informational/non-interactive and unlabeled visually.
   - Keep the recommendation CTA full width without a separator line.
   - Vehicle Detail inner borders remain unchanged.
   ========================================================== */
.upgrade-recommendation-colors{
  gap:8px;
  min-height:28px;
}
.upgrade-color-dot{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:1px solid #aeb7c2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.48);
}
.upgrade-recommendation-action{
  border-top:0;
  padding-top:10px;
}


/* ==========================================================
   REVISION 29 v2 — RECOMMENDATION COLOR GROUP LABEL
   - Add a compact visible "Pilihan Warna" label above the
     recommendation color swatches.
   - Keep individual color names accessible via title/aria-label only.
   - Preserve Revision 29 swatch size, spacing, CTA, and detail borders.
   ========================================================== */
.upgrade-color-title{
  flex:0 0 100%;
  width:100%;
  margin:0 0 1px;
  color:#7d8795;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
}

/* ==========================================================
   REVISION 31 — FINAL RENTAL COLOR SELECTOR REFINEMENT
   Source visual: Revision 29 v2 review candidate.
   - Keep the real radio input for semantics, keyboard access,
     form state, and existing gallery JavaScript, but hide only
     the browser radio glyph.
   - Visible control = compact color swatch + color name.
   - Selected state = restrained navy ring + stronger name;
     no large pill/card and no second visible circle.
   - Preserve ready-new BARU badge and all gallery data-* links.
   - Compact the color block vertically without reducing fonts.
   ========================================================== */
body[data-page-type="vehicle-detail"] .color-option-block{
  padding-top:10px;
  padding-bottom:10px;
}
body[data-page-type="vehicle-detail"] .color-option-block .option-title{
  margin-bottom:6px;
}
body[data-page-type="vehicle-detail"] .color-options{
  margin:0;
  gap:5px 15px;
  align-items:center;
}
body[data-page-type="vehicle-detail"] .color-option{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  margin:0;
  padding:2px 1px;
  color:#536174;
  cursor:pointer;
  touch-action:manipulation;
}
/* Visually hide only the native radio circle. The input remains
   focusable/semantic and the wrapping label remains the click target. */
body[data-page-type="vehicle-detail"] .color-option > input[type="radio"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
}
body[data-page-type="vehicle-detail"] .color-option .color-swatch{
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid #aeb7c2;
  background:var(--swatch-color,#c8ced6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
body[data-page-type="vehicle-detail"] .color-option > input[type="radio"]:checked + .color-swatch{
  border-color:var(--brand-navy);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 0 0 2px #fff,
    0 0 0 3px var(--brand-navy);
}
body[data-page-type="vehicle-detail"] .color-option > input[type="radio"]:checked + .color-swatch + .color-label-text .color-name{
  color:var(--brand-navy-dark);
  font-weight:700;
}
body[data-page-type="vehicle-detail"] .color-option:hover .color-swatch{
  border-color:#7f8a98;
}
body[data-page-type="vehicle-detail"] .color-option > input[type="radio"]:focus-visible + .color-swatch{
  outline:2px solid var(--brand-gold);
  outline-offset:4px;
}
body[data-page-type="vehicle-detail"] .color-option:focus-within{
  outline:none;
}
body[data-page-type="vehicle-detail"] .color-availability-note{
  margin:4px 0 0;
}

@media(max-width:991px){
  body[data-page-type="vehicle-detail"] .mobile-color-slot .color-option-block{
    padding:8px 14px 7px;
  }
  body[data-page-type="vehicle-detail"] .mobile-color-slot .color-option-block .option-title{
    margin-bottom:5px;
  }
  body[data-page-type="vehicle-detail"] .color-options{
    gap:4px 14px;
  }
}

@media(max-width:420px){
  body[data-page-type="vehicle-detail"] .color-options{
    gap:4px 12px;
  }
  body[data-page-type="vehicle-detail"] .color-option{
    gap:6px;
  }
  body[data-page-type="vehicle-detail"] .color-option .color-swatch{
    flex-basis:19px;
    width:19px;
    height:19px;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page-type="vehicle-detail"] .color-option .color-swatch{
    transition:none!important;
  }
}