:root{ --navy:#0A3D58; /* primary */ --navy-deep:#072A3E; --gold:#F6B515; /* accent */ --gold-soft:rgba(246,181,21,.14); --ink:#16212B; --body:#566873; --light:#F4F8FB; --cream:#FBF7EE; --line:rgba(7,42,62,.10); --r:18px; --shadow:0 18px 50px -16px rgba(10,61,88,.28); --shadow-sm:0 8px 24px -10px rgba(10,61,88,.22); --ease:cubic-bezier(.2,.7,.3,1); --maxw:1160px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html{overflow-x:clip} body{ font-family:'Roboto',system-ui,sans-serif; color:var(--body); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100%; } /* Safety net: keep Elementor-wrapped archive/listing content within the viewport */ .post-type-archive-product .elementor-section, .post-type-archive-product .elementor-element, .post-type-archive-product .elementor-widget-container{max-width:100%} h1,h2,h3,h4,.display{font-family:'Red Hat Display',sans-serif;color:var(--ink);line-height:1.08;letter-spacing:-.5px} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px} /* ---------- scroll-reveal (only hidden when JS is active) ---------- */ .js [data-rise]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} [data-rise].in{opacity:1!important;transform:none!important} [data-rise].d1{transition-delay:.08s} [data-rise].d2{transition-delay:.16s} [data-rise].d3{transition-delay:.24s} [data-rise].d4{transition-delay:.32s} .js [data-zoom]{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)} [data-zoom].in{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:reduce){[data-rise],[data-zoom]{opacity:1!important;transform:none!important}} /* ---------- scroll progress ---------- */ .progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),#F59E0B);z-index:200;transition:width .1s linear} /* ---------- header ---------- */ header{position:fixed;inset:0 0 auto;z-index:100;transition:all .35s var(--ease)} header .nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px; margin:14px auto;max-width:var(--maxw);border-radius:16px; background:rgba(255,255,255,.72);backdrop-filter:blur(14px); border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:all .35s var(--ease)} header.shrink .nav{margin-top:8px;background:rgba(255,255,255,.9)} .brand{font-family:'Red Hat Display';font-weight:900;font-size:22px;color:var(--navy);letter-spacing:-.5px;display:flex;align-items:center;gap:8px} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)} .brand .logo{height:36px;width:auto;display:block} header.shrink .brand .logo{height:32px;transition:height .35s var(--ease)} .menu{display:flex;gap:6px;align-items:center;list-style:none;margin:0;padding:0} .menu li{list-style:none;margin:0;padding:0;display:flex} .menu li::marker{content:"";font-size:0} .menu a{font-family:'Red Hat Display';font-weight:600;font-size:14.5px;color:var(--ink);padding:8px 12px;border-radius:10px;transition:.2s;white-space:nowrap} .menu a:hover,.menu a.active,.menu .current-menu-item>a,.menu .current_page_item>a{background:var(--light);color:var(--navy)} .nav-cta{display:flex;gap:8px;align-items:center} .btn{font-family:'Red Hat Display';font-weight:700;font-size:14.5px;border:0;cursor:pointer; padding:11px 20px;border-radius:12px;display:inline-flex;align-items:center;gap:8px; transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s;white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn-gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 10px 24px -10px rgba(246,181,21,.7)} .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-deep)} .btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--navy);color:var(--navy)} .btn-lg{padding:15px 28px;font-size:16px;border-radius:14px} .burger{display:none;width:44px;height:44px;flex:none;align-self:center;place-items:center;font-size:18px;color:var(--navy); background:var(--light);border:1px solid var(--line);border-radius:12px;cursor:pointer;line-height:1;padding:0;min-height:0} .burger i{pointer-events:none;line-height:1} /* ---------- hero ---------- */ .hero{position:relative;padding:128px 0 56px; background:linear-gradient(150deg,#FFC93C 0%,#F59E0B 100%);overflow:hidden} .hero .blob,.phero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none} .b1{width:420px;height:420px;background:radial-gradient(circle,#fff6,transparent 65%);top:-120px;right:-60px} .b2{width:340px;height:340px;background:radial-gradient(circle,#0A3D5833,transparent 65%);bottom:-120px;left:-80px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;position:relative;z-index:2} .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(7,42,62,.10);color:var(--navy-deep); padding:7px 15px;border-radius:40px;font-family:'Red Hat Display';font-weight:600;font-size:13.5px;border:1px solid rgba(7,42,62,.16)} .hero h1{font-size:clamp(38px,6vw,60px);font-weight:800;color:var(--navy-deep);margin:14px 0 12px} .hero p.lead{font-size:18px;color:rgba(7,42,62,.74);max-width:30em;line-height:1.65} .hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap} .hero-stats{display:flex;gap:26px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(7,42,62,.16)} .hero-stats .s b{font-family:'Red Hat Display';font-weight:800;font-size:28px;color:var(--navy-deep);display:block;letter-spacing:-.5px} .hero-stats .s span{font-size:13px;font-weight:600;color:rgba(7,42,62,.7)} .hero-car{position:relative} .hero-car img{width:100%;filter:drop-shadow(0 30px 40px rgba(7,42,62,.35));animation:float 5s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hero-badge{position:absolute;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:var(--shadow); display:flex;align-items:center;gap:10px;font-family:'Red Hat Display';font-weight:700;color:var(--ink);font-size:14px} .hero-badge i{color:var(--gold)} .hb1{top:6%;left:-6%;animation:float 4s ease-in-out infinite} .hb2{bottom:10%;right:-4%;animation:float 4.6s ease-in-out infinite .5s} /* ---------- page hero (inner pages) ---------- */ .phero{position:relative;padding:132px 0 60px;text-align:center;overflow:hidden; background:linear-gradient(150deg,#FFC93C 0%,#F59E0B 100%)} .phero .wrap{position:relative;z-index:2} .phero h1{font-size:clamp(34px,5vw,52px);font-weight:800;color:var(--navy-deep);margin:14px 0 10px} .phero p{font-size:18px;color:rgba(7,42,62,.74);max-width:42em;margin:0 auto;line-height:1.65} .phero .hero-actions{justify-content:center} /* search bar */ .searchbar{position:relative;z-index:3;margin-top:30px;background:#fff;border-radius:18px;padding:12px; box-shadow:0 28px 64px -22px rgba(7,42,62,.5);display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px} .searchbar.in-page{margin-top:34px;max-width:920px;margin-inline:auto} .field{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;transition:.2s;border:1px solid transparent;text-align:left} .field:hover{background:var(--light)} .field label{font-family:'Red Hat Display';font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--navy)} .field .v{font-weight:600;color:var(--ink);font-size:15px} .field i{color:var(--gold);margin-right:6px} .search-go{display:flex;align-items:center;justify-content:center} /* ---------- section scaffold ---------- */ section{position:relative} .sec{padding:64px 0} .sec-tight{padding:52px 0} .bg-cream{background:var(--cream)} .bg-light{background:var(--light)} .kicker{font-family:'Red Hat Display';font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)} .h2{font-size:clamp(28px,4vw,42px);font-weight:800;margin-top:8px} .sub{color:var(--body);font-size:17px;margin-top:10px;max-width:34em} .center{text-align:center;display:flex;flex-direction:column;align-items:center} .sec-head{margin-bottom:30px} /* marquee */ .marquee{background:var(--navy);color:#fff;overflow:hidden;padding:14px 0;border-block:1px solid rgba(255,255,255,.08)} .marquee .track{display:flex;gap:48px;white-space:nowrap;width:max-content;animation:scrollx 26s linear infinite} .marquee:hover .track{animation-play-state:paused} .marquee span{font-family:'Red Hat Display';font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.85)} .marquee i{color:var(--gold)} @keyframes scrollx{to{transform:translateX(-50%)}} /* feature grid */ .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .feat-3{grid-template-columns:repeat(3,1fr)} .card{background:#fff;border:1px solid #ECE3CE;border-radius:20px;padding:22px;box-shadow:var(--shadow); transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .card:hover{transform:translateY(-7px);box-shadow:0 26px 56px -18px rgba(10,61,88,.34)} .ico{width:54px;height:54px;border-radius:50%;background:var(--gold-soft);color:var(--gold); display:grid;place-items:center;font-size:24px;margin-bottom:14px;transition:.35s var(--ease)} .card:hover .ico{transform:rotate(-8deg) scale(1.08)} .card h3{font-size:20px;font-weight:700;margin-bottom:4px} .card p{font-size:15px;color:var(--body)} .card .cval{display:inline-block;margin-top:10px;font-family:'Red Hat Display';font-weight:700;color:var(--navy)} .card .cval:hover{color:var(--gold)} /* split (about story) */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center} .split.rev .split-media{order:2} .prose p{font-size:16.5px;color:var(--body);margin-bottom:14px;line-height:1.8} .split-media{position:relative;border-radius:24px;padding:30px;background:linear-gradient(150deg,var(--navy),var(--navy-deep)); box-shadow:var(--shadow);overflow:hidden} .split-media::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,var(--gold-soft),transparent 70%);top:-80px;right:-60px} .split-media img{position:relative;z-index:1;filter:drop-shadow(0 24px 30px rgba(0,0,0,.4))} .split-media .cap{position:relative;z-index:1;margin-top:14px;color:#fff;font-family:'Red Hat Display';font-weight:700;font-size:16px} .split-media .cap span{display:block;color:rgba(255,255,255,.66);font-family:'Roboto';font-weight:400;font-size:14px} /* stat band */ .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 20px;text-align:center;box-shadow:var(--shadow-sm)} .stat b{font-family:'Red Hat Display';font-weight:800;font-size:38px;color:var(--navy);display:block;letter-spacing:-1px} .stat span{font-size:14px;color:var(--body);font-weight:600} /* fleet */ .fleet-bg{background:var(--cream)} .fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fcard{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--shadow); transition:transform .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column} .fcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -20px rgba(10,61,88,.4)} .fcard .imgbox{height:170px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;overflow:hidden;padding:14px} /* width:auto + max-height beats Turbo/Woo's global img{height:auto} so the WHOLE car always fits inside the frame (object-fit alone can't, since the parent rule forces height:auto and the image overflows the box vertically) */ .fcard .imgbox img{max-width:100%!important;max-height:142px!important;width:auto!important;height:auto!important;object-fit:contain;transition:transform .5s var(--ease)} .fcard:hover .imgbox img{transform:scale(1.07)} .fcard-body{display:flex;flex-direction:column;flex:1;padding:14px 4px 4px} .fcard h3{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.3px} .fcard .meta{font-size:13px;color:var(--body);font-weight:500;margin-top:3px} /* price + button form a consistent block pinned to the card bottom so prices and buttons line up across every card; "Ask us" renders at the same scale as a price */ .fcard .price{margin-top:auto;padding-top:16px;font-family:'Red Hat Display';font-weight:800;font-size:20px;color:var(--navy);line-height:1.15} .fcard .price .woocommerce-Price-amount,.fcard .price bdi,.fcard .price .woocommerce-Price-currencySymbol{ font-family:'Red Hat Display';font-weight:800;font-size:20px;color:var(--navy)} .fcard .price del,.fcard .price .from{display:none} .tag{background:var(--gold-soft);color:#8a6400;font-family:'Red Hat Display';font-weight:700;font-size:11.5px;padding:4px 10px;border-radius:30px} .specs{display:flex;flex-wrap:wrap;gap:9px;padding-top:4px;border-top:1px solid var(--line)} .spec{position:relative;width:42px;height:42px;outline:none} .spec::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(5px); background:var(--ink);color:#fff;font-family:'Red Hat Display';font-weight:700;font-size:11.5px;letter-spacing:.2px; padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;z-index:6; transition:opacity .2s var(--ease),transform .2s var(--ease);box-shadow:0 8px 18px -8px rgba(7,42,62,.5)} .spec::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) translateY(5px); border:5px solid transparent;border-top-color:var(--ink);opacity:0;pointer-events:none;z-index:6;transition:opacity .2s var(--ease),transform .2s var(--ease)} .spec:hover::after,.spec:focus::after,.spec:hover::before,.spec:focus::before{opacity:1;transform:translateX(-50%) translateY(0)} .spec .c{width:42px;height:42px;border:2px solid var(--navy);border-radius:50%;display:grid;place-items:center;color:var(--navy);font-size:16px;transition:.3s} .fcard:hover .spec .c{background:var(--navy);color:#fff} .spec .n{position:absolute;right:-3px;bottom:-2px;min-width:18px;height:18px;padding:0 4px;background:var(--navy);color:#fff;border-radius:10px; font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;font-family:'Red Hat Display'} .fcard .btn{width:100%;justify-content:center;margin-top:12px} .fcard.hide{display:none} /* filter chips */ .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px} .chip{font-family:'Red Hat Display';font-weight:700;font-size:14px;padding:9px 18px;border-radius:30px; border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.2s} .chip:hover{border-color:var(--navy);color:var(--navy)} .chip.active{background:var(--navy);color:#fff;border-color:var(--navy)} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s} .step{position:relative;padding:26px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)} .step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:18px;right:20px; font-family:'Red Hat Display';font-weight:900;font-size:40px;color:var(--light)} .step .ico{background:var(--navy);color:var(--gold)} .step h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:3px} /* destinations */ .dest-bg{background:var(--navy);color:#fff;background-image:radial-gradient(circle at 15% 0,rgba(246,181,21,.16),transparent 40%)} .dest-bg .h2{color:#fff}.dest-bg .sub{color:rgba(255,255,255,.72)} .dest{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dcard{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px;background:rgba(255,255,255,.04); transition:.35s var(--ease)} .dcard:hover{background:rgba(255,255,255,.09);transform:translateY(-6px);border-color:var(--gold)} .dcard .ico{background:var(--gold-soft)} .dcard h3{color:#fff;font-size:19px;font-weight:700;margin-bottom:2px} .dcard p{color:rgba(255,255,255,.66);font-size:14.5px} /* reviews */ .rev{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm); transition:transform .35s var(--ease)} .rcard:hover{transform:translateY(-6px)} .stars{color:var(--gold);font-size:15px;margin-bottom:10px;letter-spacing:2px} .rcard p{color:var(--ink);font-size:15.5px;line-height:1.7} .who{display:flex;align-items:center;gap:11px;margin-top:16px} .av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center; font-family:'Red Hat Display';font-weight:800;font-size:17px} .who b{font-family:'Red Hat Display';color:var(--ink);font-size:15px;display:block} .who span{font-size:12.5px;color:var(--body)} .gbadge{display:inline-flex;align-items:center;gap:10px;background:var(--light);border:1px solid var(--line); border-radius:40px;padding:10px 20px;font-family:'Red Hat Display';font-weight:700;color:var(--ink);font-size:15px;margin-top:8px} .gbadge .g{font-weight:900;font-size:20px;background:linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853);-webkit-background-clip:text;background-clip:text;color:transparent} /* FAQ accordion */ .faq{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:12px} .faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer; font-family:'Red Hat Display';font-weight:700;font-size:17px;color:var(--ink);list-style:none} .faq-q::-webkit-details-marker{display:none} .faq-q i{color:var(--gold);transition:transform .3s var(--ease);flex:none} .faq-item.open .faq-q i{transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .faq-a p{padding:0 22px 20px;color:var(--body);font-size:15.5px;line-height:1.7} .faq-item.open .faq-a{max-height:260px} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} .formcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field-l{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .field-l label{font-family:'Red Hat Display';font-weight:700;font-size:12.5px;color:var(--navy);letter-spacing:.2px} .field-l input,.field-l select,.field-l textarea{font-family:'Roboto';font-size:15px;color:var(--ink); padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--light);transition:.2s;width:100%} .field-l input:focus,.field-l select:focus,.field-l textarea:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(10,61,88,.08)} .field-l textarea{min-height:130px;resize:vertical} .formcard .btn{width:100%;justify-content:center;margin-top:4px} .form-note{font-size:13px;color:var(--body);text-align:center;margin-top:12px} .aside-map{border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);height:280px;background:var(--navy)} .aside-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2)} .cinfo{display:flex;flex-direction:column;gap:12px;margin-top:18px} .cinfo a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px; padding:14px 16px;box-shadow:var(--shadow-sm);transition:.25s var(--ease)} .cinfo a:hover{transform:translateX(4px);border-color:var(--navy)} .cinfo .ci{width:44px;height:44px;flex:none;border-radius:12px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-size:18px} .cinfo b{font-family:'Red Hat Display';color:var(--ink);font-size:15.5px;display:block} .cinfo span{font-size:13px;color:var(--body)} /* CTA */ .cta{background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:#fff;border-radius:28px; padding:54px 44px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)} .cta::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,var(--gold-soft),transparent 70%);top:-100px;right:-60px} .cta h2{color:#fff;font-size:clamp(28px,4vw,40px);font-weight:800;position:relative} .cta p{color:rgba(255,255,255,.78);margin:12px auto 24px;max-width:34em;position:relative} .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative} /* footer */ footer{background:#06222f;color:rgba(255,255,255,.7);padding:54px 0 26px} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px} footer .brand{color:#fff;margin-bottom:12px} footer h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:14px;font-family:'Red Hat Display'} footer a{display:block;font-size:14.5px;color:rgba(255,255,255,.66);padding:5px 0;transition:.2s} footer a:hover{color:var(--gold);transform:translateX(3px)} footer .desc{font-size:14.5px;max-width:26em;line-height:1.7} .fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between; flex-wrap:wrap;gap:12px;font-size:13.5px;color:rgba(255,255,255,.5)} .socials{display:flex;gap:10px} .socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff} .socials a:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)} /* floating whatsapp */ .wa{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff; display:grid;place-items:center;font-size:27px;z-index:90;box-shadow:0 12px 28px -8px rgba(37,211,102,.7); animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* back to top */ .totop{position:fixed;bottom:90px;right:22px;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff; display:grid;place-items:center;font-size:18px;z-index:90;border:0;cursor:pointer;box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(12px) scale(.9); transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s,visibility .3s} .totop.show{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--gold);color:var(--navy-deep);transform:translateY(-3px)} /* concept note banner */ .note{background:var(--ink);color:#fff;text-align:center;font-size:13px;padding:8px 16px;font-family:'Red Hat Display';font-weight:600;letter-spacing:.3px} .note b{color:var(--gold)} /* responsive */ @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:24px} .hero-car{max-width:420px;margin-inline:auto} .searchbar{grid-template-columns:1fr 1fr} .feat,.dest,.statband{grid-template-columns:1fr 1fr} .feat-3,.fleet,.steps,.rev{grid-template-columns:1fr 1fr} .split,.contact-grid{grid-template-columns:1fr;gap:28px} .split.rev .split-media{order:0} .split-media{max-width:460px} .fgrid{grid-template-columns:1fr 1fr} .nav-cta .btn-ghost{display:none} .burger{display:grid!important;width:44px!important;height:44px!important;min-height:0!important;align-self:center;place-items:center} .menu{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px; background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s} .menu.open{opacity:1;visibility:visible;transform:none} .menu li{display:block} .menu a{display:block;padding:12px 14px;font-size:16px;border-radius:10px} } @media(max-width:600px){ .feat-3,.fleet,.rev,.fgrid,.searchbar,.statband,.frow{grid-template-columns:1fr} .hero{padding:96px 0 40px} .phero{padding:104px 0 44px} .hero h1{font-size:33px} .hero p.lead{font-size:16.5px} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{justify-content:center} .hero-stats{gap:16px} .hero-stats .s b{font-size:24px} .searchbar .btn{width:100%;justify-content:center} .sec{padding:40px 0} .sec-tight{padding:32px 0} .sec-head{margin-bottom:22px} .cta{padding:36px 20px} .nav{padding:8px 12px} .brand .logo{height:30px} .note{font-size:11px;padding:7px 12px} .wa{width:52px;height:52px;font-size:24px;bottom:18px;right:18px} .totop{width:44px;height:44px;bottom:80px;right:18px} } /* ================= BOOKING FLOW ================= */ /* search form fields */ .searchbar.s3{grid-template-columns:repeat(3,1fr) auto} .field select,.field input{border:0;background:transparent;font-family:'Roboto';font-weight:600;color:var(--ink); font-size:15px;width:100%;padding:0;outline:none;cursor:pointer} .field select{appearance:none;-webkit-appearance:none} .field .dr{display:flex;align-items:center;gap:6px} .field .dr input{font-size:13.5px;cursor:pointer} .field .dr span{color:var(--body)} /* results / context bar on listing */ .resbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;background:#fff;border:1px solid var(--line); border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-sm);margin-bottom:24px} .resbar .rb{display:flex;align-items:center;gap:10px;font-family:'Red Hat Display';font-weight:700;color:var(--ink);font-size:14.5px} .resbar .rb .ci{width:38px;height:38px;flex:none;border-radius:10px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-size:15px} .resbar .rb small{display:block;font-family:'Roboto';font-weight:500;color:var(--body);font-size:12px} .resbar .edit{margin-left:auto} .count-line{font-family:'Red Hat Display';font-weight:700;color:var(--ink);font-size:15px;margin-bottom:16px} .count-line b{color:var(--navy)} /* ===== single car (carlist) ===== */ .car-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:start} .crumbs{font-size:13.5px;color:var(--body);margin-bottom:16px;font-weight:500} .crumbs a:hover{color:var(--navy)} .car-gallery{background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm);position:relative} /* WooCommerce zoom trigger -> clean icon button (hide the s.w.org emoji glyph) */ .car-gallery .woocommerce-product-gallery__trigger{position:absolute;top:16px;right:16px;z-index:6;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:0} .car-gallery .woocommerce-product-gallery__trigger img,.car-gallery .woocommerce-product-gallery__trigger span{display:none!important} .car-gallery .woocommerce-product-gallery__trigger::before{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;font-size:16px;color:var(--navy)} .car-main{height:300px;display:grid;place-items:center} .car-main img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(7,42,62,.25))} .car-tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} .car-info h1{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:6px} .car-info .meta{color:var(--body);font-weight:500;margin-bottom:18px} .car-info .specs{border-top:0;padding-top:0;gap:12px;margin-bottom:20px} .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:18px 0} .feature-list div{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)} .feature-list i{color:var(--gold);width:18px;text-align:center} /* price box */ .pricebox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow);position:sticky;top:96px} .pricebox .from{font-size:13px;color:var(--body);font-weight:600} .pricebox .big{font-family:'Red Hat Display';font-weight:800;font-size:40px;color:var(--navy);letter-spacing:-1px;line-height:1} .pricebox .big span{font-size:15px;color:var(--body);font-weight:600;-webkit-text-fill-color:initial} .pb-fields{display:flex;flex-direction:column;gap:12px;margin:18px 0} .pb-field{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--light)} .pb-field label{display:block;font-family:'Red Hat Display';font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--navy);margin-bottom:3px} .pb-field .val{font-weight:600;color:var(--ink);font-size:14.5px} .pb-field select,.pb-field input{border:0;background:transparent;font-family:'Roboto';font-weight:600;color:var(--ink);font-size:14.5px;width:100%;outline:none;appearance:none} .qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:fit-content} .qty button{width:40px;height:40px;border:0;background:var(--light);color:var(--navy);font-size:18px;cursor:pointer;font-weight:700} .qty button:hover{background:var(--gold);color:var(--navy-deep)} .qty input{width:48px;height:40px;border:0;text-align:center;font-family:'Red Hat Display';font-weight:800;color:var(--ink);font-size:16px;outline:none} .li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:15px;color:var(--body);border-top:1px dashed var(--line)} .li:first-of-type{border-top:0} .li b{color:var(--ink);font-family:'Red Hat Display'} .li .muted{font-size:12.5px;color:var(--body)} .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:14px;border-top:2px solid var(--ink)} .total .t-lbl{font-family:'Red Hat Display';font-weight:800;font-size:18px;color:var(--ink)} .total .t-val{font-family:'Red Hat Display';font-weight:800;font-size:30px;color:var(--navy);letter-spacing:-1px} .pricebox .btn{width:100%;justify-content:center;margin-top:16px} .pb-note{font-size:12.5px;color:var(--body);text-align:center;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px} .pb-note i{color:var(--gold)} /* ===== cart ===== */ .cart-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:26px;align-items:start} .cart-item{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line); border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);margin-bottom:14px} .cart-item .ci-img{height:80px;display:grid;place-items:center;background:var(--cream);border-radius:12px;overflow:hidden} .cart-item .ci-img img{height:100%;width:auto;object-fit:contain} .cart-item h3{font-size:18px;font-weight:800;margin-bottom:2px} .cart-item .ci-meta{font-size:13px;color:var(--body);line-height:1.6} .cart-item .ci-meta i{color:var(--gold);width:14px} .cart-item .ci-price{text-align:right;font-family:'Red Hat Display';font-weight:800;color:var(--navy);font-size:20px} .cart-item .rm{display:block;text-align:right;margin-top:6px;font-size:12.5px;color:var(--body);cursor:pointer} .cart-item .rm:hover{color:#d33} .summary{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);position:sticky;top:96px} .summary h3{font-size:20px;font-weight:800;margin-bottom:14px} .cart-empty{text-align:center;padding:50px 20px} .cart-empty .ico{margin:0 auto 16px} .trust-row{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;margin-top:26px} .trust-row span{display:inline-flex;align-items:center;gap:8px;font-family:'Red Hat Display';font-weight:700;font-size:13.5px;color:var(--body)} .trust-row i{color:var(--gold)} /* steps progress (checkout breadcrumb) */ .flow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} .flow .fs{display:flex;align-items:center;gap:8px;font-family:'Red Hat Display';font-weight:700;font-size:13.5px;color:var(--body)} .flow .fs .n{width:26px;height:26px;border-radius:50%;background:var(--light);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--body)} .flow .fs.on{color:var(--navy)} .flow .fs.on .n{background:var(--navy);color:#fff;border-color:var(--navy)} .flow .fs.done .n{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)} .flow .sep{width:24px;height:2px;background:var(--line)} @media(max-width:980px){ .searchbar.s3{grid-template-columns:1fr 1fr} .car-wrap,.cart-grid{grid-template-columns:1fr;gap:24px} .pricebox,.summary{position:static} } @media(max-width:600px){ .searchbar.s3{grid-template-columns:1fr} .feature-list{grid-template-columns:1fr} .cart-item{grid-template-columns:80px 1fr;gap:12px} .cart-item .ci-price{grid-column:1/-1;text-align:left} .resbar .edit{margin-left:0;width:100%} } /* ============ WordPress / WooCommerce / Turbo reskin ============ */ /* generic page width for woo pages rendered inside Turbo shells */ .woocommerce .wrap,.woocommerce-page .wrap{max-width:var(--maxw)} .toloto-single .car-gallery .woocommerce-product-gallery{width:100%!important;margin:0} .toloto-single .car-gallery img{border-radius:14px} /* ---- archive / listing grid: make Turbo's ul.products our card grid ---- */ .woocommerce ul.products,ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important} ul.products li.product.fcard{background:#fff} .fcard .imgbox img{max-width:100%!important;max-height:142px!important;width:auto!important;height:auto!important;object-fit:contain} @media(max-width:980px){.woocommerce ul.products,ul.products{grid-template-columns:1fr 1fr}} @media(max-width:600px){.woocommerce ul.products,ul.products{grid-template-columns:1fr}} /* result count / ordering bar */ .woocommerce .result-count,.woocommerce .woocommerce-result-count{color:var(--body);font-weight:600} .woocommerce .woocommerce-ordering select,.orderby{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-family:'Roboto'} /* ---- the RnB booking widget inside our pricebox ---- */ .pricebox form.cart,.pricebox .redq-rental,.pricebox .quantity{margin:0} .pricebox input[type=text],.pricebox input[type=date],.pricebox input[type=number],.pricebox select,.pricebox textarea{ border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--light);font-family:'Roboto';font-size:14.5px;width:100%} .pricebox input:focus,.pricebox select:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(10,61,88,.08)} .pricebox label{font-family:'Red Hat Display';font-weight:700;font-size:12.5px;color:var(--navy)} .pricebox .button,.pricebox button[type=submit],.pricebox .single_add_to_cart_button{ width:100%!important;justify-content:center;background:var(--gold)!important;color:var(--navy-deep)!important;border:0!important; font-family:'Red Hat Display'!important;font-weight:700!important;border-radius:14px!important;padding:15px 28px!important; box-shadow:0 10px 24px -10px rgba(246,181,21,.7);transition:transform .2s var(--ease)} .pricebox .button:hover,.pricebox .single_add_to_cart_button:hover{transform:translateY(-2px)} /* ---- cart (Turbo: .rq-cart-items / .cart-items-table) + standard woo ---- */ .woocommerce-cart .rq-cart-items,.woocommerce-checkout .woocommerce{max-width:var(--maxw);margin-inline:auto} .woocommerce-cart .cart-items-table,.woocommerce table.shop_table{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);background:#fff} .woocommerce table.shop_table th{font-family:'Red Hat Display';color:var(--ink);background:var(--light)} /* ---- RnB "Car Booking" cart table: align columns to the top and turn the booking detail (dl.variation) into a clean label / value list ---- */ .rq-cart-items table{width:100%;border-collapse:collapse} .rq-cart-items thead th{font-family:'Red Hat Display';font-weight:700;color:var(--ink);background:var(--light); text-align:left;padding:14px 16px;font-size:13px;letter-spacing:.3px;text-transform:uppercase} .rq-cart-items tbody td{vertical-align:top!important;padding:20px 16px;border-top:1px solid var(--line)} .rq-cart-items .product-remove{width:140px} .rq-cart-items .listing-product-thumb{position:relative} .rq-cart-items .listing-product-thumb img{width:120px;height:auto;border-radius:12px;border:1px solid var(--line)} .rq-cart-items .listing-product-thumb .close-edit-btn a{display:inline-grid;place-items:center;width:28px;height:28px;margin-top:8px; border-radius:50%;background:var(--light);border:1px solid var(--line);color:var(--body);font-size:12px;transition:.2s} .rq-cart-items .listing-product-thumb .close-edit-btn a:hover{background:#d33;color:#fff;border-color:#d33} .rq-cart-items .product-name .details>a{font-family:'Red Hat Display';font-weight:800;color:var(--ink);font-size:18px;display:inline-block;margin-bottom:6px} .rq-cart-items .product-name .details>a:hover{color:var(--navy)} .rq-cart-items dl.variation{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:6px 0 0} .rq-cart-items dl.variation dt{font-family:'Roboto';font-weight:600;color:var(--body);font-size:13px;margin:0;line-height:1.5} .rq-cart-items dl.variation dd{margin:0;font-family:'Red Hat Display';font-weight:700;color:var(--ink);font-size:13.5px;line-height:1.5} .rq-cart-items dl.variation dd p{margin:0} .rq-cart-items .product-price,.rq-cart-items .product-subtotal{font-family:'Red Hat Display';font-weight:800;color:var(--navy);font-size:18px} .rq-cart-items .product-quantity{font-family:'Red Hat Display';font-weight:700;color:var(--ink)} .rq-cart-items .product-quantity .quantity input.qty{width:54px;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;background:var(--light)} @media(max-width:700px){ .rq-cart-items thead{display:none} .rq-cart-items tbody td{display:block;border:0;padding:4px 16px} .rq-cart-items tbody tr{display:block;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;padding:14px 0} .rq-cart-items .product-price::before{content:"Price: ";color:var(--body);font-family:'Roboto';font-weight:600;font-size:13px} .rq-cart-items .product-subtotal::before{content:"Total: ";color:var(--body);font-family:'Roboto';font-weight:600;font-size:13px} } .woocommerce .cart_totals h2,.woocommerce-checkout #order_review_heading,.woocommerce-billing-fields h3{font-family:'Red Hat Display';color:var(--ink)} .woocommerce #payment,.woocommerce .cart_totals,.woocommerce-checkout #order_review{ background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px} .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #place_order{ background:var(--navy)!important;color:#fff!important;border:0!important;font-family:'Red Hat Display'!important;font-weight:700!important; border-radius:12px!important;padding:13px 26px!important;transition:transform .2s var(--ease),background .2s} .woocommerce a.button.alt,.woocommerce #place_order{background:var(--gold)!important;color:var(--navy-deep)!important} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce #place_order:hover{transform:translateY(-2px)} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .select2-container--default .select2-selection--single{ border:1px solid var(--line)!important;border-radius:12px!important;padding:10px 14px!important;background:var(--light)!important;min-height:46px} .woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--gold)!important;border-radius:12px} /* ============ search form polish (selects + date) ============ */ .field{position:relative} .field select{appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:22px;color:var(--ink);font-weight:600;cursor:pointer; background:url("data:image/svg+xml;utf8,") no-repeat right center} .field select option{color:var(--ink)} .field .dr{display:flex;align-items:center;gap:8px;width:100%} .field .dr input[type=date]{flex:1 1 0;min-width:0;color:var(--ink);font-weight:600;font-size:14px; background:transparent;cursor:pointer} .field .dr input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.85;filter:invert(38%) sepia(99%) saturate(900%) hue-rotate(2deg)} .field .dr span{color:var(--gold);font-weight:800;flex:none} /* ============ /rent-a-car listing reskin (Turbo classes) ============ */ .turbo-airbnb-grid,.reactive-product-listing{display:grid!important;grid-template-columns:repeat(3,1fr);gap:20px} .reactive-product-listing-item{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow); border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column} .reactive-product-listing-item:hover{transform:translateY(-7px);box-shadow:0 30px 60px -20px rgba(10,61,88,.4)} .reactive-product-listing-item .product-image-wrapper{border-radius:0;overflow:hidden} .reactive-product-listing-item .product-image-wrapper img{transition:transform .5s var(--ease);width:100%;height:auto} .reactive-product-listing-item:hover .product-image-wrapper img{transform:scale(1.06)} .reactive-product-listing-item .product-short-info{padding:18px 18px 20px} .reactive-product-listing-item .product-short-info h2, .reactive-product-listing-item .product-short-info h3, .reactive-product-listing-item .product-short-info .product-title{font-family:'Red Hat Display';font-weight:800;color:var(--ink);font-size:20px;margin:0 0 6px} .reactive-product-listing-item .rq-ps-listing-product-location{color:var(--body);font-size:13.5px} .reactive-product-listing-item .price,.reactive-product-listing-item p.price{font-family:'Red Hat Display'!important;font-weight:800!important;color:var(--navy)!important;font-size:22px!important;margin:8px 0!important} .reactive-product-listing-item .listing-btn-area{margin-top:auto;padding-top:8px} .reactive-product-listing-item .view-details-btn,.turbo-airbnb-grid .view-details-btn{ display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:100%; background:var(--gold)!important;color:var(--navy-deep)!important;border:0!important; font-family:'Red Hat Display'!important;font-weight:700!important;border-radius:12px!important; padding:13px 20px!important;box-shadow:0 10px 24px -10px rgba(246,181,21,.7);transition:transform .2s var(--ease)} .reactive-product-listing-item .view-details-btn:hover{transform:translateY(-2px);color:var(--navy-deep)!important} @media(max-width:980px){.turbo-airbnb-grid,.reactive-product-listing{grid-template-columns:1fr 1fr}} @media(max-width:600px){.turbo-airbnb-grid,.reactive-product-listing{grid-template-columns:1fr}} /* booking widget price heading inside our pricebox */ .pricebox .rq-product-sidebar-heading,.pricebox .car-price{font-family:'Red Hat Display'} .pricebox .car-price{color:var(--navy);font-weight:800} /* ============ pixel-match the RnB booking widget to our price box ============ */ /* The real RnB form (form.cart.rnb-cart) lives inside our aside.pricebox. */ .pricebox .cart.rnb-cart{margin:0} .pricebox .rnb-component-wrapper{margin:0 0 12px} /* price flip box -> our "from / big price / day" */ .pricebox .rnb-price-flip-box,.pricebox .price-flip-box,.pricebox .booking-pricing-info{border:0!important;background:transparent!important;padding:0!important;margin:0 0 6px!important;box-shadow:none!important} .pricebox .item-pricing{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .pricebox .item-pricing .day-price,.pricebox .day-price{font-family:'Red Hat Display';font-weight:800;font-size:38px;color:var(--navy);letter-spacing:-1px;line-height:1} .pricebox .item-pricing .day,.pricebox .item-pricing .month{font-family:'Red Hat Display';font-weight:600;color:var(--body);font-size:14px} .pricebox .discount-plan,.pricebox .day-ranges-pricing-plan{font-size:13px;color:var(--body)} .pricebox .fa-caret-down{color:var(--gold)} /* each location/date/qty field -> our .pb-field look */ .pricebox .redq-pick-up-location,.pricebox .redq-quantity,.pricebox .date-time-picker, .pricebox .rnb-select-wrapper,.pricebox .redq-select-boxes{ border:1px solid var(--line)!important;border-radius:12px!important;background:var(--light)!important; padding:10px 14px!important;width:100%!important;min-height:48px;display:flex;align-items:center;font-family:'Roboto'} .pricebox .rnb-select-wrapper:focus-within,.pricebox .date-time-picker:focus-within{border-color:var(--navy)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(10,61,88,.08)} .pricebox .rnb-component-wrapper > label,.pricebox .drop-modal-title,.pricebox .pick-modal-title{ font-family:'Red Hat Display'!important;font-weight:700!important;font-size:12.5px!important;color:var(--navy)!important;text-transform:none} .pricebox .placeholder{color:var(--body)!important;font-weight:600} .pricebox .fa-calendar-alt,.pricebox .fa-clock,.pricebox .fa-map-marker-alt{color:var(--gold)!important} .pricebox select,.pricebox .rnb-select-box select{border:0!important;background:transparent!important;width:100%;font-family:'Roboto';font-weight:600;color:var(--ink);outline:none} /* ---- date + time picker (real class is .redq-date-time-picker, with bootstrap .col-md-7 / .col-md-5 columns + .pick-up-date-picker / -time-picker spans) ---- */ .pricebox .redq-date-time-picker{border:0!important;background:transparent!important;padding:0!important;margin:0!important; min-height:0!important;display:flex!important;flex-wrap:wrap;gap:8px;align-items:flex-end} .pricebox .redq-date-time-picker h5,.pricebox .redq-date-time-picker h6{flex:1 1 100%;font-family:'Red Hat Display'!important; font-weight:700!important;font-size:12.5px!important;color:var(--navy)!important;margin:0 0 2px!important;text-transform:none!important;line-height:1.3} .pricebox .redq-date-time-picker .col-md-7,.pricebox .redq-date-time-picker .col-md-5{padding:0!important;width:auto!important;float:none!important;margin:0!important} .pricebox .redq-date-time-picker .col-md-7{flex:1 1 56%} .pricebox .redq-date-time-picker .col-md-5{flex:1 1 34%} .pricebox .redq-date-time-picker span[class$="-picker"]{display:flex;align-items:center;gap:8px;width:100%; border:1px solid var(--line);border-radius:12px;background:var(--light);padding:11px 12px;transition:.2s} .pricebox .redq-date-time-picker span[class$="-picker"]:focus-within{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(10,61,88,.08)} .pricebox .redq-date-time-picker i{color:var(--gold)!important;font-size:14px;flex:none;margin:0} .pricebox .redq-date-time-picker input{border:0!important;background:transparent!important;padding:0!important;border-radius:0!important; min-height:0!important;width:100%;font-family:'Roboto';font-weight:600;color:var(--ink);font-size:14px;cursor:pointer;outline:none} .pricebox .redq-date-time-picker input::placeholder{color:var(--body);font-weight:500;opacity:1} /* quantity stepper */ .pricebox .inventory-qty{font-family:'Red Hat Display';font-weight:800;color:var(--ink)} .pricebox .inventory-qty-next,.pricebox .inventory-qty-prev{color:var(--navy)!important;cursor:pointer} /* booking cost / total */ .pricebox .booking_cost,.pricebox .booking-summary,.pricebox .booking-pricing-info .booking_cost{ font-family:'Red Hat Display';font-weight:800;color:var(--navy);font-size:26px;letter-spacing:-.5px} .pricebox .booking-summary{border-top:2px solid var(--ink);margin-top:12px;padding-top:12px} /* the add-to-cart / book now button -> full-width gold */ .pricebox .single_add_to_cart_button,.pricebox .btn-book-now,.pricebox .redq_add_to_cart_button, .pricebox button[type=submit].button{ width:100%!important;justify-content:center;display:flex!important;align-items:center;gap:8px; background:var(--gold)!important;color:var(--navy-deep)!important;border:0!important; font-family:'Red Hat Display'!important;font-weight:800!important;font-size:16px!important; border-radius:14px!important;padding:16px 28px!important;margin-top:6px!important; box-shadow:0 10px 24px -10px rgba(246,181,21,.7);transition:transform .2s var(--ease)} .pricebox .single_add_to_cart_button:hover,.pricebox .btn-book-now:hover{transform:translateY(-2px);color:var(--navy-deep)!important} /* modal date pickers (RnB opens a popup calendar) — keep above our header */ .rnb-modal,.redq-modal,.iziModal{z-index:100000!important} /* ============ /rent-a-car REACTIVE listing (real "Inspect/Helium" classes) ============ The Turbo reactive archive renders cards as: .inspect-product-view-grid > .inspect-helium-product-card .inspect-listing-img > img + .inspect-listing-image-hover > a.inspect-listing-link .inspect-listing-details > .inspect-listing-details-title (h4.product_title + .product_price) + .inspect-listing-meta-content + ul.inspect-listing-attributes + .inspect-listing-footer */ /* Use flex-wrap (NOT grid): Turbo's reactive-listing JS injects fixed grid-template-rows that clip/overflow the cards and can't be reliably beaten with !important. Flex ignores those rows, so each card sizes to its content and the Book Now footer always stays inside the card. */ .inspect-product-view-grid{display:flex!important;flex-wrap:wrap!important;gap:22px!important;align-items:stretch!important;grid-template-rows:none!important;width:100%!important;min-width:0!important;flex:1 1 100%!important} .inspect-helium-product-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:20px!important; box-shadow:var(--shadow)!important;transition:transform .35s var(--ease),box-shadow .35s var(--ease)!important; display:flex!important;flex-direction:column!important; flex:0 0 calc((100% - 44px)/3)!important;max-width:calc((100% - 44px)/3)!important; height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;text-align:left!important} .inspect-product-view-grid.inspect-product-view-list .inspect-helium-product-card{flex-basis:100%!important;max-width:100%!important} .inspect-helium-product-card .inspect-listing-details{height:auto!important;flex:1 1 auto!important} .inspect-helium-product-card:hover{transform:translateY(-7px);box-shadow:0 30px 60px -20px rgba(10,61,88,.4)!important} /* image — constrained height so the whole card (incl. the gold button) fits without clipping */ .inspect-helium-product-card .inspect-listing-img{position:relative;overflow:hidden;background:var(--light);padding:18px;border-radius:20px 20px 0 0;height:172px;display:flex;align-items:center;justify-content:center} .inspect-helium-product-card .inspect-listing-img img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)} .inspect-helium-product-card:hover .inspect-listing-img img{transform:scale(1.05)} .inspect-helium-product-card .inspect-listing-image-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(10,61,88,.42);opacity:0;transition:opacity .3s var(--ease)} .inspect-helium-product-card:hover .inspect-listing-image-hover{opacity:1} /* details */ .inspect-helium-product-card .inspect-listing-details{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:none;text-align:left!important;transform:none!important;margin:0!important;background:transparent!important;box-shadow:none!important} .inspect-helium-product-card .inspect-listing-details-title{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left} .inspect-helium-product-card .product_title{font-family:'Red Hat Display';font-weight:800;font-size:20px;line-height:1.15;margin:0;text-align:left} .inspect-helium-product-card .product_title a{color:var(--ink)} .inspect-helium-product-card .product_title a:hover{color:var(--navy)} .inspect-helium-product-card .product_price, .inspect-helium-product-card .product_price .amount, .inspect-helium-product-card .woocommerce-Price-amount{font-family:'Red Hat Display'!important;font-weight:800!important;color:var(--navy)!important;font-size:18px!important} .inspect-helium-product-card .product_price{display:block} /* meta band holds only a blank (unrated) star row + a duplicated price — hide it so there's no empty gap between the price and the feature chips */ .inspect-helium-product-card .inspect-listing-meta-right, .inspect-helium-product-card .inspect-listing-meta-content{display:none!important} .inspect-helium-product-card .inspect-star-rating{display:inline-flex;gap:2px;margin:0} .inspect-helium-product-card .inspect-star-blank, .inspect-helium-product-card .inspect-star-fill{width:14px;height:14px;display:inline-block; background:var(--gold);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .inspect-helium-product-card .inspect-star-blank{opacity:.28} /* feature chips */ .inspect-helium-product-card .inspect-listing-attributes{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:2px 0 4px} .inspect-helium-product-card .inspect-listing-attributes li{display:inline-flex;align-items:center;gap:6px; background:var(--light);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--body);font-weight:500} .inspect-helium-product-card .inspect-listing-attributes li .icon{color:var(--gold)} .inspect-helium-product-card .inspect-listing-attributes li .name{color:var(--ink)} /* Book Now buttons (footer + hover overlay) -> gold; pin to card bottom so the button stays inside the card and aligns across the row */ .inspect-helium-product-card .inspect-listing-footer{margin-top:auto;padding-top:14px;width:100%} .inspect-helium-product-card .inspect-listing-footer .inspect-listing-link, .inspect-helium-product-card .inspect-listing-image-hover .inspect-listing-link{ display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%!important;max-width:100%!important; box-sizing:border-box!important;margin:0!important;transform:none!important; background:var(--gold)!important;color:var(--navy-deep)!important;border:0!important;border-radius:12px!important; font-family:'Red Hat Display'!important;font-weight:800!important;font-size:15px!important;padding:13px 20px!important; box-shadow:0 10px 24px -10px rgba(246,181,21,.7);transition:transform .2s var(--ease)} .inspect-helium-product-card .inspect-listing-image-hover .inspect-listing-link{width:auto!important;max-width:none!important;padding:12px 26px!important} .inspect-helium-product-card .inspect-listing-link:hover{transform:translateY(-2px)!important;color:var(--navy-deep)!important} /* archive header / filter sidebar tidy */ .inspect-product-archive-title,.filter-results-count,.result-count,.woocommerce-ordering, .inspect-listing-toolbar,.inspect-filter-title{font-family:'Red Hat Display';color:var(--ink)} .inspect-listing-sidebar,.inspect-filter-widget,.rq-listing-sidebar,.widget-area .widget{border-radius:16px} .inspect-product-grid-toolbar,.inspect-listing-toolbar{font-family:'Red Hat Display'} @media(max-width:980px){.inspect-helium-product-card{flex:0 0 calc((100% - 22px)/2)!important;max-width:calc((100% - 22px)/2)!important}} @media(max-width:600px){.inspect-helium-product-card{flex:0 0 100%!important;max-width:100%!important}} /* ============ single car: Features + Related + spec promo ============ */ .exera-after-single .rq-listing-promo-wrapper{margin:0 0 28px} .exera-after-single .rq-listing-promo-content{display:flex;flex-wrap:wrap;gap:14px} .rq-listing-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line); border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-sm)} .rq-listing-item .attribute-icon i,.rq-listing-item i{color:var(--gold)} .rq-listing-item-title{font-family:'Roboto';font-size:13px;color:var(--body);margin:0} .rq-listing-item-number{font-family:'Red Hat Display';font-weight:800;color:var(--ink);font-size:16px;margin:0} .rq-feature-tab .rq-title,.turbo-related-products .rq-title,.exera-after-single h2,.exera-after-single h3{ font-family:'Red Hat Display';color:var(--ink)} .rq-feature-tab ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;padding:0;margin:14px 0} .rq-feature-tab ul li{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px} .rq-feature-tab ul li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--gold);font-size:13px} .turbo-related-products .rq-title{font-size:26px;font-weight:800;margin-bottom:18px} @media(max-width:700px){.rq-feature-tab ul{grid-template-columns:1fr 1fr}} /* ============================================================================ POLISH PASS — page banners, single booking fields, cart layout ============================================================================ */ /* 1) Stock Elementor beach/road banners on /rent-a-car and /cart don't match the theme — hide them (our own header/page chrome covers the heading area). */ .elementor-element-ab33110, /* /rent-a-car "RENT A CAR" beach banner (desktop) */ .elementor-element-ddd05c8, /* /rent-a-car "RENT A CAR" beach banner (mobile) */ .elementor-element-ad1c01a{display:none!important} /* /cart unsplash road banner */ /* 2) single car — booking panel spacing between components */ .pricebox .rnb-pricing-plan-button{margin-bottom:16px!important} .pricebox .rnb-component-wrapper{margin-bottom:16px!important} .pricebox .redq-date-time-picker{margin-bottom:16px!important} /* 2a) date/time fields: keep the calendar/clock icon centered with its text */ .pricebox .redq-date-time-picker span[class$="-picker"]{align-items:center;min-height:48px;gap:10px} .pricebox .redq-date-time-picker i{position:static!important;font-size:15px;line-height:1;display:flex;align-items:center;flex:none} .pricebox .redq-date-time-picker input{height:auto!important;min-height:0!important;line-height:1.4!important;padding:0!important} /* 2b) pickup / dropoff location dropdown (Chosen.js) -> rounded, themed field */ .pricebox .chosen-container{width:100%!important;font-family:'Roboto'} .pricebox .chosen-container .chosen-single{border-radius:12px!important;border:1px solid var(--line)!important; background:var(--light)!important;height:auto!important;min-height:46px;padding:11px 14px!important; box-shadow:none!important;display:flex;align-items:center;color:var(--ink)} .pricebox .chosen-container .chosen-single span{font-weight:600;color:var(--ink)} .pricebox .chosen-container .chosen-single div{top:0;display:flex;align-items:center;right:10px} .pricebox .chosen-container .chosen-single div b{background-position:0 7px} .pricebox .chosen-container-active.chosen-with-drop .chosen-single{border-radius:12px 12px 0 0!important;border-color:var(--navy)!important} .pricebox .chosen-container .chosen-drop{border:1px solid var(--line)!important;border-top:0!important; border-radius:0 0 12px 12px!important;box-shadow:var(--shadow-sm)!important;overflow:hidden} .pricebox .chosen-container .chosen-results li.highlighted{background:var(--navy)!important} /* 3) cart — checkout button proportions + action row + spacing */ .woocommerce-cart .checkout-button, .woocommerce-cart a.checkout-button.button.alt{ min-height:0!important;height:auto!important;padding:15px 24px!important;line-height:1.2!important; font-size:15px!important;display:block!important;text-align:center;width:100%!important} /* action buttons row: clear/edit on the left, back-to-list on the right */ .checkout-btn{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 30px} .checkout-btn .left-section,.checkout-btn .right-section{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0} .checkout-btn .left-section br{display:none} .checkout-btn .rq-btn,.checkout-btn .rq-btn-transparent{display:inline-flex;align-items:center;justify-content:center; font-family:'Red Hat Display';font-weight:700;font-size:14px;color:var(--navy);background:#fff; border:1px solid var(--line)!important;border-radius:12px;padding:11px 18px!important;cursor:pointer; transition:transform .2s var(--ease),border-color .2s;text-transform:none;line-height:1;width:auto!important} .checkout-btn .rq-btn:hover,.checkout-btn .rq-btn-transparent:hover{border-color:var(--navy)!important;transform:translateY(-2px);color:var(--navy)} /* spacing below the "Car Booking" table */ .rq-cart-items{margin-bottom:6px} /* 4) mobile */ @media(max-width:600px){ .checkout-btn{flex-direction:column;align-items:stretch;gap:10px} .checkout-btn .left-section,.checkout-btn .right-section{justify-content:stretch} .checkout-btn .rq-btn,.checkout-btn .rq-btn-transparent{flex:1;width:100%!important} .pricebox .redq-date-time-picker .col-md-7, .pricebox .redq-date-time-picker .col-md-5{flex:1 1 100%} } /* 5) the hidden banners used to clear the fixed header — restore that top spacing on the listing + cart/checkout (marketing pages have their own hero padding) */ .page-id-1468 main#site-main, .woocommerce-cart main#site-main{padding-top:120px} .woocommerce-checkout main#site-main{padding-top:150px} @media(max-width:600px){ .page-id-1468 main#site-main, .woocommerce-cart main#site-main{padding-top:100px} .woocommerce-checkout main#site-main{padding-top:120px} } /* 6) /rent-a-car cards: Turbo's default margins on the title/price/chips inflate the card and reopen the dead gap above "Book Now". Zero them and let the flex gap + footer margin control spacing so the card hugs its content. */ .inspect-helium-product-card .inspect-listing-details-title, .inspect-helium-product-card .inspect-listing-attributes, .inspect-helium-product-card .inspect-listing-meta-content, .inspect-helium-product-card .product_title, .inspect-helium-product-card .product_price{margin-top:0!important;margin-bottom:0!important} .inspect-helium-product-card .inspect-listing-details{gap:10px} /* ============================================================================ POLISH PASS 2 — single car Features heading + Related Cars, cart actions ============================================================================ */ /* 7) "Features" is a WooCommerce tabs