@charset "utf-8";
/* CSS Document*/

/* Cairo — Arabic font, matched to the iOS app (self-hosted) */
@font-face{font-family:'Cairo';src:url('../fonts/cairo/Cairo-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'Cairo';src:url('../fonts/cairo/Cairo-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Cairo';src:url('../fonts/cairo/Cairo-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Cairo';src:url('../fonts/cairo/Cairo-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Cairo';src:url('../fonts/cairo/Cairo-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cairo';src:url('../fonts/cairo/Cairo-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}

* 					{margin:0;padding:0;-webkit-font-smoothing:antialiased;line-height:normal;}
body 				{margin:0 auto;font-size:17px;color:#000;font-family: 'Roboto', 'Cairo', sans-serif;}
html				{ }
a:active, a:focus,input:focus, textarea:focus,select button{outline:0}
a:active, a:focus	{outline:expression(hideFocus='true')}
::-moz-focus-inner	{border:1px solid transparent!important;}
:link,:visited      {text-decoration:none}
ul,ol,li,pre,
form,blockquote,
fieldset,input,p,select,label,button,textarea,section,a{margin:0px;list-style:none;padding:0;vertical-align:top;border-radius:0;font-family: 'Roboto', 'Cairo', sans-serif;}
a img				{border:none;}
/* [CF 2026-08-09] Client: "the uppercase title looks very odd everywhere" —
   agreed. A blanket `text-transform:uppercase` on EVERY heading shouts, it
   costs horizontal room (it is why "AIR CONDITIONING" pushed the listing
   controls onto a second line), and it does nothing at all in Arabic, which
   has no letter case — so the two languages were being styled inconsistently.
   Headings now render as written; weight and size carry the hierarchy. */
h1,h2,h3,h4,h5,h6	{margin:0px;padding:10px 0px;color:#212222;font-family: 'Roboto', 'Cairo', sans-serif;}
/* Force Cairo (app's Arabic font) on header, menu, language toggle, card names */
.header-a, .header-a a, .header-b, .wsmenu-list a, .wsmenu-list li, .lang-toggle, .line-b, .user-car-dealers-block, .dropdown-item {font-family:'Roboto','Cairo',sans-serif !important;}

/* Detail-page photo gallery — Zillow-style mosaic on desktop, swipe on mobile.
   Grid thumbnails are cover-cropped for a clean look; clicking opens a full
   photo viewer (whole image, contain) that you can page through. */
/* Form validation errors: always render clearly, right below the field */
.invalid-feedback { display: block; width: 100%; margin-top: 5px; color: #cf222e; font-size: 13px; line-height: 1.4; }

/* Owner dashboard sidebar: compact horizontal scroll-nav on mobile so it
   doesn't eat the screen above the form */
@media (max-width: 767px) {
  .side-links-wrap ul { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-bottom: 0; }
  .side-links-wrap ul li { flex: 0 0 auto; margin: 0 !important; }
  .side-links-wrap ul li a { white-space: nowrap; border-radius: 8px; }
}

/* Car cards (CARS section): uniform image box so the grid lines up
   regardless of each photo's aspect ratio. */
.user-car-dealers-wrap .line-a { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #eef0f2; margin-bottom: .5rem; }
.user-car-dealers-wrap .line-a img { width: 100%; height: 100%; object-fit: cover; }

/* Car-detail description: each feature on its own line, Cairo for Arabic */
.cav-car-desc { margin: 4px 0 18px; }
.cav-car-desc-line { padding: 6px 0; line-height: 1.7; color: #32383f; border-bottom: 1px solid #f1f2f4; font-family: 'DM Sans', 'Cairo', sans-serif; unicode-bidi: plaintext; }
.cav-car-desc-line:last-child { border-bottom: none; }
/* Car-detail rental-rates card */
.cav-price-card { border: 1px solid #e3e6ea; border-radius: 12px; overflow: hidden; width: 100%; }
/* Save / Share — give them breathing room */
.save-share { gap: 22px; align-items: center; }
.save-share .col-auto { cursor: pointer; color: #57606a; font-weight: 500; }
.save-share .col-auto:hover { color: #1f2328; }
.save-share a { color: inherit; text-decoration: none; }
.cav-price-head { background: #24292f; color: #fff; font-weight: 600; padding: 10px 16px; font-size: 14px; }
.cav-price-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #eef0f2; }
.cav-price-row:first-of-type { border-top: none; }
.cav-price-period { color: #57606a; font-size: 14px; }
.cav-price-amount { font-weight: 700; color: #1a7f37; font-size: 16px; }

/* Car-detail page photo gallery: capped height, whole car shown, tidy thumbs */
.cav-car-gallery .image-gallery-slide img { height: 440px; object-fit: contain; background: #f4f5f6; border-radius: 12px; }
.cav-car-gallery .image-gallery-thumbnails-wrapper { margin-top: 10px; }
.cav-car-gallery .image-gallery-thumbnail { width: 84px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; }
.cav-car-gallery .image-gallery-thumbnail.active,
.cav-car-gallery .image-gallery-thumbnail:hover { border-color: #ffba00; }
.cav-car-gallery .image-gallery-thumbnail img { height: 58px; object-fit: cover; }
@media (max-width: 768px) {
  .cav-car-gallery .image-gallery-slide img { height: 300px; }
}

.cav-gallery-wrap { padding-top: 18px; padding-bottom: 6px; }
.cav-gallery { display: grid; gap: 8px; height: 460px; }
.cav-gallery--1 { grid-template-columns: 1fr; }
.cav-gallery--2 { grid-template-columns: 1fr 1fr; }
.cav-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cav-gallery--3 .cav-gallery-cell:first-child { grid-row: 1 / 3; }
.cav-gallery--many { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cav-gallery--many .cav-gallery-cell:first-child { grid-row: 1 / 3; }
.cav-gallery--many .cav-gallery-cell:nth-child(n + 6) { display: none; }
.cav-gallery-cell { position: relative; overflow: hidden; cursor: pointer; background: #eef0f2; border-radius: 10px; }
.cav-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cav-gallery-cell:hover img { transform: scale(1.04); }
.cav-gallery--1 .cav-gallery-cell img { object-fit: contain; background: #f4f5f6; }
.cav-gallery-more { position: absolute; inset: 0; background: rgba(0,0,0,0.55); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 600; }
.cav-gallery-more span:first-child { font-size: 1.7rem; }
/* Shop-name/logo card sits BELOW the banner instead of covering it */
.user-logo-holder { position: static !important; }
@media (max-width: 768px) {
  .cav-gallery, .cav-gallery--1, .cav-gallery--2, .cav-gallery--3, .cav-gallery--many {
    display: flex; height: 300px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .cav-gallery-cell { flex: 0 0 92%; height: 100%; scroll-snap-align: start; }
  .cav-gallery--many .cav-gallery-cell:nth-child(n + 6) { display: block; }
  .cav-gallery-cell img { object-fit: contain; background: #f4f5f6; }
  .cav-gallery-more { display: none; }
}
/* Full-screen photo viewer (lightbox) */
.cav-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.cav-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 0 50px rgba(0,0,0,0.6); cursor: default; }
.cav-lb-close { position: absolute; top: 14px; right: 26px; background: transparent; border: none; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; }
.cav-lb-prev, .cav-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.14); border: none; color: #fff; font-size: 34px; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cav-lb-prev { left: 18px; } .cav-lb-next { right: 18px; }
.cav-lb-prev:hover, .cav-lb-next:hover { background: rgba(255,255,255,0.28); }
.cav-lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0,0,0,0.45); padding: 4px 14px; border-radius: 20px; }
.button,.view-dealer-div a,.slideshow-button-next::before, .slideshow-button-next::after,.slideshow-button-next span,.slideshow-button-next,.slideshow-button-next span::before, .slideshow-button-next span::after,.slideshow-button-prev,.slideshow-button-prev span,.menu-anchor span
					{transition:all 0.3s ease-out 0s;-webkit-transition:all 0.3s ease-out 0s;-moz-transition:all 0.3s ease-out 0s;-o-transition:all 0.3s ease-out 0s;-ms-transition:all 0.3s ease-out 0s}
.home-logo{position:fixed;top:5%;left:4.94791666667%;z-index:50;width:250px}
.home-logo img{width:100%}
/* [CF 2026-07-28] Was top:3.9%;right:2.03125% — PERCENTAGE offsets, so the
   home menu drifted with viewport size and never lined up with the
   .wsanimated-arrow hamburger used on every inner page (which sits at a
   fixed right:1.75rem). Pinned to pixels so the icon stays in the same
   place as you move between home and the rest of the site. */
.menu-main{position:fixed;top:13px;right:22px;z-index:999;width:44px;height:30px; }
.menu-link,.menu-anchor{position:absolute;width:100%;height:100%;top:0;left:0;z-index:15}
.menu-link span,.menu-anchor span{position:absolute;width:60%;height:3px;top:50%;transform:translateY(-50%);right:0;display:block;background:rgba(0,0,0,1)}
.menu-link span::after,.menu-link span::before,.menu-anchor span::after,.menu-anchor span::before{position:absolute;width:44px;height:3px;background:#000;content:'';right:0;transition:all 0.4s ease-out 0s}
.menu-link span::before,.menu-anchor span::before{top:-13px;}
.menu-link span::after,.menu-anchor span::after{bottom:-13px;}
.menu-sub{position:absolute;top:0;right:-500px;z-index:-1;white-space:nowrap;padding:0 50px 0 15px;/*background:#000;*/}
.menu-sub-sub{position:absolute;background:#000;top:13px;right:0;width:26px;height:3px;z-index:-1;transition:all 0.4s ease-out 0s}
/*.menu-sub-sub::after{background:#000;content:'';position:absolute;top:13px;right:0;width:26px;height:3px;z-index:-1;transition-property:transform;transition-duration:0.4s}*/
.menu-sub ul,.menu-sub ul li{list-style-type:none;margin:0;padding:0}
.menu-sub ul{overflow:hidden;display:flex;transform:translateX(35px);opacity:0;transition:all 0.4s ease-out 0s}
.menu-sub ul li{float:left;}
.menu-sub ul li a{color:#fff;display:block;padding:6px 10px;text-transform:uppercase;font-size:12px;letter-spacing:2px;transition:all 0.4s ease-out 0s}
.menu-sub ul li a:hover{color:#fdb913;}

.menu-sub.opened{right:0;}
.menu-sub-sub.show{height:40px;width:106%;top:-5px;right:-3%;border-radius:25px;}
.menu-sub ul.appear{transform:translateX(0px);opacity:1;margin:2px 0 0 0}
.menu-sub ul.appear li a{letter-spacing:0px}
/*.menu-sub-sub.show::after{height:30px;width:100%;top:0;border-radius:15px 0 0 15px  }*/
.menu-link.active span,.dropdown.show .menu-anchor span{background:rgba(0,0,0,0)}
.menu-link.active span::after,.menu-link.active span::before,.dropdown.show .menu-anchor span::after,.dropdown.show .menu-anchor span::before{background:#000;}
.menu-link.active span::before,.dropdown.show .menu-anchor span::before{transform:rotate(-55deg);top:0px;width:26px;right:3px;}
.menu-link.active span::after,.dropdown.show .menu-anchor span::after{transform:rotate(40deg);bottom:0px;width:26px;right:3px;}

.menu-main .dropdown{height:30px}
.menu-main .dropdown-toggle::after{display:none}
.slideshow-container{height:100vh}
.slideshow-button-prev{margin:0;top:auto;bottom:7%;color:#000}
.slideshow-button-prev span{display:block;left:30px;position:absolute;}
.slideshow-button-prev:hover{color:#fdb913}
.slideshow-button-prev:hover span{color:#fdb913}
.slideshow-container .swiper-slide,.slideshow-contents{height:100vh;}
.slideshow-contents{position:relative;z-index:1;overflow:hidden}
.homepage{/*background: url("../img/crossing.png") center bottom no-repeat;background-size:100% auto;*/}
.homepage::after{content:'';position: absolute;left:0;top:0;width:100%;height:100%;background: url("../imgs/crossing.png") center bottom no-repeat;background-size:100% auto;display:block;z-index:-1}
.road-div1{background: url("../img/road.png") center bottom no-repeat;background-size:100% auto;}
.road-div2{background: url("../img/road2.png") center bottom no-repeat;background-size:100% auto;}
.circle{position:absolute;border-radius:50%}
.bg-yellow{background-color:#fdb913;}
.bg-grey1{background-color:#c9c8c8;}
.bg-grey2{background-color:#dddddd;}
.bg-grey3{background-color:#ebebeb;}
.circle.bg-dark{background-color:#231f20!important;}
.bg-very-dark{background-color:#020303;}
.bg-dark3{background-color:#040404;}
.circle1{width:27.4479166667%;bottom:-7%;left:36.3020833333%;}
.circle2{width:23.4375%;left:6.40625%;bottom:29.7%; }
.circle3{width:8.64583333333%;left:32.7604166667%;top:19.4%; }
.circle4{width:39.5833333333%;left:54.4791666667%;bottom:50.8%; }
.circle5{width:17.5%;left:91.09375%;bottom:32.1%;}
.circle6{width:5.20833333333%;left:75.9375%;bottom:33%;}
.circle-title{width:16.9270833333%;left:18.3333333333%;bottom:44.9%;}
.circle-slogan{width:31.5520833333%;right:7.08333333333%;top:-20.4%;}
.circle-common1{width:2.60416666667%;left:7.08333333333%;bottom:38.8%;}
.circle-common2{width:7.29166666667%;right:17.34375%;bottom:37.2%;}
.pattern1{background-image:url("../img/pattern1.png");}
.pattern2{background-image:url("../img/pattern2.png");}
.pattern3{background-image:url("../img/pattern3.png");}
.pattern4{background-image:url("../img/pattern4.png");}

.circle1 h1{font-size:3rem;font-weight:900}
.logo-arrow{height:95px}
.logo-arrow img{height:100%}
.circle1 .circle-sub{padding-bottom:7%}
.circle2 img{top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}
.circle3 img{left:50%;transform:translate(-50%,-60%);width:131%}
.circle5 img{position:absolute;right:0;top:50%;transform:translateY(-50%);max-height:100%}
.circle6 img{width:148%}
.slideshow-button-next{width:355px;height:35px;bottom:7%;margin-top:0;top:auto;font-size:21px;color:#000;display:block;padding:6px 0 0 0;right:2%}
.slideshow-button-next div,.slideshow-button-next span{display:inline-block}
.slideshow-button-next span{width:17.7464788732%;position:absolute;right:0;top:50%;transform:translateY(-50%);background:#000;height:3px;  }
.slideshow-button-next span::before,.slideshow-button-next span::after{position:absolute;background:#000;height:3px;width:24px;content:'';right:-5px; }
.slideshow-button-next span::before{transform:rotate(45deg);top:-8px;}
.slideshow-button-next span::after{transform:rotate(-45deg);bottom:-8px;}
.slideshow-button-next::before,.slideshow-button-next::after{position:absolute;background:#000;height:3px;width:16.9014084507%;content:'';right:0;}
.slideshow-button-next::before{top:20%;right:7.60563380282%}
.slideshow-button-next::after{bottom:20%;right:11.2676056338%;width:30% }
.slideshow-button-next:hover{color:#fdb913}
.slideshow-button-next:hover span,.slideshow-button-next:hover::before,.slideshow-button-next:hover::after,.slideshow-button-next:hover span::before,.slideshow-button-next:hover span::after{background:#fdb913;}
.slideshow-button-prev span{}
.swiper-button-prev.swiper-button-disabled{opacity:0}

.circle-inner{bottom:18.5%;z-index:9}
.circle-inner::after{content:'';position:absolute;width:50px;height:75px;background:#fdb913;left:50%;transform:translateX(-44%) skew(30deg, -64deg);bottom:0;display:block;z-index:-1;}
.pos-hori-center{left:50%;transform:translateX(-50%)}
.pos-verti-center{top:50%;transform:translateY(-50%)}
.pos-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.agency-img1 img{width:129%}
.title-icon{height:95px;margin:0 auto;}
.title-icon img{height:100%;filter: grayscale(1) brightness(5);}
.circle-title h1{color:#fff;font-size:40px;font-weight:700;line-height:40px;}
.circle-title h1 span{display:block;font-size:40px;}
.circle-slogan h1{font-size:3rem;font-weight:700;color:#020303;}
.circle-slogan .circle-sub{padding-top:100px}
.view-dealer-div{text-align:center;padding-top:20px}
.view-dealer-div a{display:inline-block;padding:12px 40px;background:#fff;color:#fdb913;font-size:1.5rem;text-transform:uppercase;box-shadow:0px 2px 2px 3px rgba(0,0,0,0.1) }
.view-dealer-div a:hover{background:#fdb913;color:#000;}
.garage-base1 img{width:100.3%;}
.garage-img1 img{width:100%;}
.spare-parts img{width:103%;}
.washing img{width:116.55%;}
.taxi{width:136.55%}
.taxi-map-pin img{width:110%}
.rent-a-car img{width:189.5%}
.driving-school-base{width:100%}
.driving-school{width:140%;margin-left:-20%;bottom:-20%;}
.car-insurance{width:100%}
.car-insurance-car{z-index:30}
.car-insurance-shield{z-index:10}
.car-insurance-pad{z-index:1}
.car-protection img{width:128%}
.car-protection-shield img{width:100%}
.rent-a-car-tag img{width:115%}
.air-conditioning{z-index:9}
.swiper-slide-active .air-conditioning-red{animation:rotationdesign 20s ease infinite}
.swiper-slide-active .air-conditioning-blue{animation:rotationdesignRev 18s ease infinite}
.swiper-slide-active .air-conditioning-wheel{animation:rotationWheel 10s ease infinite}
.air-conditioning-red,.air-conditioning-blue,.air-conditioning-wheel{z-index:1;}
.swiper-slide-active .circle-common2{animation:bgColor 5s linear infinite}
@keyframes bgColor{
	0%{background-color:#040404;}
	33%{background-color:#000000;}
	36%{background-color:#3e3e3e;}
	100%{background-color:#040404;}
}
.swiper-slide-active .circle-common1{animation:bgColor1 5s linear infinite}
@keyframes bgColor1{
	0%{background-color:#fdb913;}
	33%{background-color:#fbd370;}
	66%{background-color:#d59700;}
	100%{background-color:#fdb913;}
}
.air-conditioning-wheel img{}
@keyframes rotationWheel{
	0%{transform:rotate(0deg)}
	20%{transform:rotate(20deg)}
	40%{transform:rotate(20deg)}
	60%{transform:rotate(-20deg)}
	80%{transform:rotate(-20deg)}
	90%{transform:rotate(00deg)}
	100%{transform:rotate(00deg)}
}
@keyframes rotationdesign{
	0%{transform:rotate(0deg)}
	25%{transform:rotate(90deg)}
	50%{transform:rotate(180deg)}
	75%{transform:rotate(270deg)}
	100%{transform:rotate(360deg)}
}
@keyframes rotationdesignRev{
	0%{transform:rotate(0deg)}
	25%{transform:rotate(-90deg)}
	50%{transform:rotate(-180deg)}
	75%{transform:rotate(-270deg)}
	100%{transform:rotate(-360deg)}
}

.dark-color h1{color:#000}
.dark-circle.circle-inner::after{/*background:#000*/} 
.car-dealers img{width:100%}

.overflow-radius{border-radius:50%;overflow:hidden;}
.swiper-slide-active .car-sale-tag img,.swiper-slide-active .rent-a-car-tag img{animation:carForSaleTag 3s alternate infinite;transform-origin:70% top;}
.quick-services{width:100%}
.slideshow-container .swiper-pagination-bullet{opacity:1;margin:0 7px!important}
.swiper-pagination-bullet-active{background:#fdb913}

@keyframes carForSaleTag{
	0%{transform:rotate(-7deg)}
	100%{transform:rotate(12deg)}
}

.circle,.circle2 div,.circle3 div,.circle4 div:first-child,.circle5 div,.circle6 div,.circle1 .circle-sub,.circle-title .title-icon,.circle-title h1,.circle-slogan,.circle-inner,.circle-title,.view-dealer-div,.circle-slogan h1,.garage-base1,.garage-img1,.rent-a-car img,.taxi-base img,.taxi img,.washing img,.car-insurance-pad,.car-insurance-shield,.car-insurance-car img,.driving-school-base,.driving-school,.car-protection-shield,.car-protection,.air-conditioning,.air-conditioning-wheel img,.quick-services img,.agency-img1,.towing-car img{transition:all 1s ease-out 0s}
.spare-parts,.car-dealers img,.car-sale img{transition:all 1.5s ease-out 0s}
.circle4 div:last-child,.taxi-map-pin{transition:all 0.4s ease-out 0s}

.circle,.circle2 div,.circle3 div,.circle4 div,.circle6 div,.circle1 .circle-sub,.circle-title,.circle-title .title-icon,.circle-title h1,.circle-slogan,.view-dealer-div,.circle-slogan h1,.garage-base1,.garage-img1,.spare-parts,.car-dealers img,.rent-a-car img,.taxi-base img,.taxi img,.taxi-map-pin,.washing img,.car-insurance-pad,.car-insurance-shield,.car-insurance-car img,.driving-school-base,.driving-school,.car-protection-shield,.car-protection,.air-conditioning,.air-conditioning-wheel img,.quick-services img,.agency-img1,.towing-car img{opacity:0}
.circle2{transform:translate(-250px,-250px);}
.circle2 div{transform:translate(-150px,-150px);}
.circle3{transform:translate(-100px,-250px);}
.circle3 div{transform:translate(-50px,-100px);}
.circle4{transform:translate(250px,-300px);}
.circle4 div:first-child{transform:translate(-200px,-100px);}
.circle4 div:last-child{transform:translate(0px,-300px);}
.circle5{transform:translate(200px,-100px);}
.circle5 div{transform:translate(200px,-100px);}
.circle6{transform:translate(250px,-250px);}
.circle6 div{transform:translate(70px,-70px);}
.slideshow-button-next{transform:translate(0px,200px);}
.circle1 .circle-sub{transform:scale(1.5)}
.circle-title .title-icon,.circle-title h1,.view-dealer-div,.circle-title,.circle-title,.circle-slogan h1{transform:translateY(-150px);}
.horizontal-container .circle-inner{transform:translate(0,150px)}
.vertical-container .circle-inner{transform:translate(-50%,50%)}
.circle-slogan{transform:translateY(-250px);}
.garage-base1,.air-conditioning,.agency-img1{transform:scale(0.8)}
.garage-img1{transform:scale(0.3) translate(0,15%);}
.spare-parts{transform:rotate(-45deg) scale(0.8)}
.car-dealers img{transform:scale(1.3)}
.car-sale img{transform:translateX(70%)}
.rent-a-car img{transform:translate(-50%,-50%) scale(0.5)}
.taxi-base img{transform:translateY(50%);}
.taxi img{transform:translate(70%,-30%)}
.taxi-map-pin{transform:translateY(-70%)}
.washing img,.air-conditioning-wheel img{transform:translate(-50%,-50%) scale(0.8);left:50%;top:50%}
.car-insurance-pad{transform:translateY(30%)}
.car-insurance-shield{transform:translateY(45%)}
.car-insurance-car img{transform:translate(-100%,-40%)}
.driving-school-base{transform:scale(1.3)}
.driving-school{transform:translate(70%,-10%);}
.car-protection-shield{transform:scale(0.5);transform-origin:center bottom}
.car-protection{transform:scale(0.5) translateX(25%)}
.quick-services img{transform:translate(-100%,-50%);left:50%;top:50%;width:100%;}
.circle.circle-common1,.circle.circle-common2{transform:translateX(250px);}
.towing-car img{width:140%;right:2%;bottom:0;transform:translateX(-50%);}


.homepage.swiper-slide-active .circle3 div,.homepage.swiper-slide-active .circle6 div{transition-delay:0.1s;}
.homepage.swiper-slide-active .circle2 div:first-child,.homepage.swiper-slide-active .circle4 div:first-child,
.homepage.swiper-slide-active .circle5 div,.homepage.swiper-slide-active .circle1,.swiper-slide-active .circle-title,.swiper-slide-active .circle-slogan h1,.swiper-slide-active .car-insurance-pad{transition-delay:0.3s;}
.homepage.swiper-slide-active .circle2 div:last-child,.homepage.swiper-slide-active .circle4 div:last-child,.homepage.swiper-slide-active .circle1 .circle-sub,.swiper-slide-active .circle-slogan,.swiper-slide-active .circle-title .title-icon,.swiper-slide-active .view-dealer-div,.swiper-slide-active .circle-inner,.swiper-slide-active .taxi-base img,.swiper-slide-active .car-insurance-shield,.swiper-slide-active .driving-school-base,.swiper-slide-active .car-protection-shield{transition-delay:0.5s;}
.swiper-slide-active .garage-base1,.swiper-slide-active .car-dealers img,.swiper-slide-active .car-sale img,.swiper-slide-active .taxi img,.swiper-slide-active .washing img,.swiper-slide-active .car-insurance-car img,.swiper-slide-active .driving-school,.swiper-slide-active .air-conditioning,.swiper-slide-active .air-conditioning-wheel img,.swiper-slide-active .quick-services img,.swiper-slide-active .agency-img1,.swiper-slide-active .circle.circle-common1,.swiper-slide-active .towing-car img{transition-delay:0.7s;}
.swiper-slide-active .garage-img1,.swiper-slide-active .spare-parts,.swiper-slide-active .rent-a-car img,.swiper-slide-active .taxi-map-pin,.swiper-slide-active .car-protection,.swiper-slide-active .circle.circle-common2{transition-delay:1s;}

.homepage.swiper-slide-active .circle2,.homepage.swiper-slide-active .circle2 div,
.homepage.swiper-slide-active .circle3,.homepage.swiper-slide-active .circle3 div,
.homepage.swiper-slide-active .circle4,.homepage.swiper-slide-active .circle4 div,
.homepage.swiper-slide-active .circle5,.homepage.swiper-slide-active .circle5 div,
.homepage.swiper-slide-active .circle6,.homepage.swiper-slide-active .circle6 div,
.swiper-container-initialized .slideshow-button-next,.swiper-slide-active .circle-title .title-icon,.swiper-slide-active .circle-title h1,.horizontal-container .swiper-slide-active .circle-inner,.swiper-slide-active .circle-title,.swiper-slide-active .circle-slogan,.swiper-slide-active .view-dealer-div,.swiper-slide-active .circle-slogan h1,.swiper-slide-active .car-insurance-pad,.swiper-slide-active .car-insurance-shield
{transform:translate(0px,0px);opacity:1}
.vertical-container .swiper-slide-active .circle-inner{transform:translate(-50%,0%);}
.horizontal-container .homepage.swiper-slide-active .circle1,.homepage.swiper-slide-active .circle1 .circle-sub,.swiper-slide-active .garage-base1
{transform:scale(1) translate(0%,0%);opacity:1}
.swiper-slide-active .garage-img1{transform:scale(1) translate(0%,0%);opacity:1}
.swiper-slide-active .spare-parts{transform:rotate(0deg) scale(1);opacity:1}
.swiper-slide-active .car-dealers img{transform:scale(1);opacity:1}
.swiper-slide-active .car-sale img{transform:translateX(0%);opacity:1}
.swiper-slide-active .rent-a-car img{transform:translate(-50%,-50%) scale(1);opacity:1}
.swiper-slide-active .taxi-base img{transform:translateY(0%);opacity:1}
.swiper-slide-active .taxi img{transform:translate(0%,0%);opacity:1}
.swiper-slide-active .taxi-map-pin{transform:translateY(0%);opacity:1}
.swiper-slide-active .washing img,.swiper-slide-active .air-conditioning-wheel img{transform:translate(-50%,-50%) scale(1);opacity:1}
.swiper-slide-active .car-insurance-car img,.swiper-slide-active .quick-services img{transform:translate(-50%,-50%);opacity:1}
.swiper-slide-active .driving-school-base{transform:scale(1);opacity:1}
.swiper-slide-active .driving-school{transform:translate(0%,0%);opacity:1}
.swiper-slide-active .car-protection-shield,.swiper-slide-active .air-conditioning,.swiper-slide-active .agency-img1{transform:scale(1);opacity:1}
.swiper-slide-active .car-protection{transform:scale(1) translateX(0%);opacity:1}
.swiper-slide-active .circle.circle-common1,.swiper-slide-active .circle.circle-common2,.swiper-slide-active .towing-car img{transform:translateX(0px);opacity:1}
.swiper-slide-prev .circle.circle-common1,.swiper-slide-prev .circle.circle-common2{transform:translateX(-250px);opacity:0}

.horizontal-container{display:block}
.vertical-container{display:none}

button,.form-control,
textarea:hover, 
.form-control:hover, 
textarea:active, 
.form-control:active, 
textarea:focus, 
.form-control:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active,.swiper-button-next, .swiper-button-prev
{
    outline:0px !important;
    -webkit-appearance:none;box-shadow:none!important 
}
::selection 		{color:#000;background:#fdb913}
::-moz-selection	{color:#000;background:#fdb913}
.none				{display:none !important}

.fancybox-close-small,.fancybox-close-small:after,.swiper-pagination-bullet{outline: none !important; box-shadow: none;}

a					{color:#000000;text-decoration:none}
a:hover 			{color:#fdb913;text-decoration:none}
a:focus 			{color:#000000;text-decoration:none}

.button{font:400 17px/25px 'sofia_proregular';color:#fff;background:#9dca00;padding:8px 25px 10px 25px;display:inline-block;border-radius: 50px 50px 50px 50px;cursor:pointer;text-align:center;border:1px solid transparent;text-decoration:none;vertical-align:middle;letter-spacing:0px}
.button:hover,.button:focus{background:#000;color:#fff;border:1px solid transparent;}
/* Uniform detail-page section titles (About Us / Services Provided / Packages /
   Cars). Smaller, bold, lowercase, consistent size across every category. */
.cav-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: lowercase;
  margin: 1.1rem 0 0.55rem;
  letter-spacing: 0.2px;
}
/* Sentence case: capitalise only the first character (e.g. "About us"). */
.cav-section-title::first-letter {
  text-transform: uppercase;
}

/* Brand buttons: swap Bootstrap's blue (primary/info) for black to match the
   black/yellow CarsAvenue theme (e.g. the "Upload your Car Images" button). */
.btn-primary,
.btn-file,
.btn-info,
.btn-file.btn-primary {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-file:hover,
.btn-info:hover,
.btn-info:focus {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ===== Towing listing card (compact avatar tile) ===== */
.cav-towing-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 24px 16px 18px;
  text-align: center;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cav-towing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}
.cav-towing-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #f7f7f7;
  border: 3px solid #feba00;
}
.cav-towing-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cav-towing-name {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a1a;
  text-decoration: none;
  word-break: break-word;
}
.cav-towing-name:hover {
  color: #feba00;
}
.cav-towing-meta {
  margin-top: 3px;
  color: #8a8a8a;
  font-size: 0.85rem;
}
.cav-towing-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.cav-towing-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f6f6f6;
  transition: background 0.15s ease;
}
.cav-towing-actions a:hover {
  background: #ffe7a3;
}
.cav-towing-actions a img {
  width: 18px;
  height: 18px;
}

/* ===== Visibility toggle switch (business profile sidebar) ===== */
.cav-visibility-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
}
.cav-visibility-row > img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}
.cav-visibility-row > span {
  flex: 1;
  font-weight: 600;
}
.cav-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  margin: 0;
  flex: 0 0 auto;
}
.cav-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cav-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cfcfcf;
  border-radius: 26px;
  transition: 0.2s;
}
.cav-switch-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.cav-switch input:checked + .cav-switch-slider {
  background: #feba00;
}
.cav-switch input:checked + .cav-switch-slider::before {
  transform: translateX(20px);
}

/* ===== Package selection cards ===== */
.cav-pkg-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 26px 20px 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cav-pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.cav-pkg-free {
  border-color: #ffd45e;
  background: #fffdf6;
}
.cav-pkg-ribbon {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: #feba00;
  color: #1a1a1a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.cav-pkg-name {
  font-weight: 700;
  font-size: 1.2rem;
  color: #1a1a1a;
  text-transform: capitalize;
}
.cav-pkg-duration {
  margin-top: 4px;
  color: #888;
  font-size: 0.9rem;
}
.cav-pkg-desc {
  margin-top: 12px;
  color: #666;
  font-size: 0.88rem;
  line-height: 1.4;
  flex: 1 1 auto;
  min-height: 38px;
}
.cav-pkg-price {
  margin: 16px 0 18px;
  font-weight: 800;
  font-size: 1.7rem;
  color: #1a1a1a;
  line-height: 1;
}
.cav-pkg-price span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #888;
}
.cav-pkg-btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: 11px;
  transition: background 0.15s ease;
}
.cav-pkg-btn:hover:not(:disabled) {
  background: #333;
  color: #fff;
}
.cav-pkg-free .cav-pkg-btn {
  background: #feba00;
  color: #1a1a1a;
}
.cav-pkg-free .cav-pkg-btn:hover:not(:disabled) {
  background: #e8a900;
  color: #1a1a1a;
}
.cav-pkg-btn:disabled {
  background: #d9d9d9;
  color: #fff;
  cursor: not-allowed;
}

/* ===== Spare-part card (name + brand chips, no images) ===== */
.cav-part-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cav-part-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}
.cav-part-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 12px;
}
.cav-part-brands-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-bottom: 8px;
}
.cav-part-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cav-brand-chip {
  background: #fff7e0;
  border: 1px solid #ffe7a3;
  color: #6b5800;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ===== Banner manager (single upload + click-to-set-main) ===== */
.cav-banner-upload {
  border: 2px dashed #d8d8d8;
  border-radius: 14px;
  background: #fafafa;
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cav-banner-upload:hover {
  border-color: #feba00;
  background: #fffdf6;
}
.cav-banner-upload-icon {
  font-size: 2rem;
  line-height: 1;
}
.cav-banner-upload-text {
  margin-top: 8px;
  font-weight: 600;
  color: #555;
}
.cav-banner-tile {
  position: relative;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.cav-banner-tile.is-main {
  border: 2px solid #feba00;
  box-shadow: 0 6px 18px rgba(254, 186, 0, 0.25);
}
.cav-banner-tile img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.cav-banner-badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  background: #feba00;
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.cav-banner-tile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  background: #fff;
}
.cav-banner-tile-actions button {
  border: none;
  background: #f3f4f6;
  color: #333;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cav-banner-tile-actions button:hover {
  background: #feba00;
  color: #1a1a1a;
}
.cav-banner-tile-actions .cav-banner-del {
  flex: 0 0 auto;
}
.cav-banner-tile-actions .cav-banner-del:hover {
  background: #dc3545;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   CLIENT MEETING FIX 2026-06-11 — "Discover our services" (next) button in
   Arabic/RTL. The button text + arrow are all positioned with physical `right`,
   so in RTL they collided/garbled. Mirror the button to the left edge and flip
   the arrow to point left. (Home page strips custom.css, so this lives here in
   the always-loaded style.css. Only positioning + pseudo-element rotations are
   overridden — the container `transform` is left alone so the reveal animation
   still works.)
   --------------------------------------------------------------------------- */
html[dir="rtl"] .slideshow-button-next {
  right: auto;
  left: 2%;
  text-align: right;
}
/* Hide the original right-pointing arrow geometry (the diagonal arrowhead
   strokes + the second shaft line + the span's own line) — a simple right->left
   position swap does NOT mirror the rotated diagonals, it leaves a stray
   chevron. Instead draw ONE clean left-pointing arrow: a single shaft line
   (button::before) + a CSS triangle head (span::before). */
html[dir="rtl"] .slideshow-button-next::after,
html[dir="rtl"] .slideshow-button-next span::after {
  content: none;
}
html[dir="rtl"] .slideshow-button-next span {
  right: auto;
  left: 0;
  background: transparent;
}
/* shaft line, vertically centred, on the left portion of the button */
html[dir="rtl"] .slideshow-button-next::before {
  right: auto;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 38%;
  height: 3px;
}
/* left-pointing triangle head at the far left */
html[dir="rtl"] .slideshow-button-next span::before {
  content: '';
  position: absolute;
  right: auto;
  left: 0;
  top: 50%;
  width: 0;
  height: 3px; /* overridden visually by borders below */
  background: transparent;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 14px solid #000;
  transform: translateY(-50%);
}
/* keep the hover (yellow) state working for the rebuilt arrow */
html[dir="rtl"] .slideshow-button-next:hover::before {
  background: #fdb913;
}
html[dir="rtl"] .slideshow-button-next:hover span::before {
  border-right-color: #fdb913;
}

/* ==========================================================================
   [CF 2026-08-09] Client feedback batch — landing page
   ========================================================================== */

/* [CF9-2] The category PRODUCT-IMAGE circle never appeared on MOBILE.
   The big reveal rule further up lists `.horizontal-container
   .swiper-slide-active .circle-inner` — deliberately container-scoped — while
   the vertical (mobile) container only ever received a `transform`. So on a
   phone `.circle-inner` kept the base `.circle{opacity:0}` on EVERY category
   slide and the artwork was simply invisible. */
.vertical-container .swiper-slide-active .circle-inner{opacity:1;}

/* [CF9-2b] The entrance stagger runs up to 1s. A normal swipe therefore lands
   on a slide that is still blank, which reads as "the image is missing".
   Tighten the stagger on phones only; desktop keeps the original choreography. */
@media screen and (max-width:780px){
  .homepage.swiper-slide-active .circle3 div,.homepage.swiper-slide-active .circle6 div{transition-delay:.05s;}
  .homepage.swiper-slide-active .circle2 div:first-child,.homepage.swiper-slide-active .circle4 div:first-child,
  .homepage.swiper-slide-active .circle5 div,.homepage.swiper-slide-active .circle1,
  .swiper-slide-active .circle-title,.swiper-slide-active .circle-slogan h1,
  .swiper-slide-active .car-insurance-pad{transition-delay:.12s;}
  .homepage.swiper-slide-active .circle2 div:last-child,.homepage.swiper-slide-active .circle4 div:last-child,
  .homepage.swiper-slide-active .circle1 .circle-sub,.swiper-slide-active .circle-slogan,
  .swiper-slide-active .circle-title .title-icon,.swiper-slide-active .view-dealer-div,
  .swiper-slide-active .circle-inner,.swiper-slide-active .taxi-base img,
  .swiper-slide-active .car-insurance-shield,.swiper-slide-active .driving-school-base,
  .swiper-slide-active .car-protection-shield{transition-delay:.2s;}
  .swiper-slide-active .garage-base1,.swiper-slide-active .car-dealers img,
  .swiper-slide-active .car-sale img,.swiper-slide-active .taxi img,
  .swiper-slide-active .washing img,.swiper-slide-active .car-insurance-car img,
  .swiper-slide-active .driving-school,.swiper-slide-active .air-conditioning,
  .swiper-slide-active .air-conditioning-wheel img,.swiper-slide-active .quick-services img,
  .swiper-slide-active .agency-img1,.swiper-slide-active .circle.circle-common1,
  .swiper-slide-active .towing-car img{transition-delay:.28s;}
  .swiper-slide-active .garage-img1,.swiper-slide-active .spare-parts,
  .swiper-slide-active .rent-a-car img,.swiper-slide-active .taxi-map-pin,
  .swiper-slide-active .car-protection,.swiper-slide-active .circle.circle-common2{transition-delay:.36s;}
}

/* [CF9-1] "Scrolling down the landing page suddenly jumps back up."
   html/body are height:100%, which on iOS Safari resolves against the LARGE
   viewport (the one you get with the URL bar hidden). With the bar VISIBLE the
   document is ~100px taller than what you can see, so the page is scrollable
   by exactly that much; scrolling collapses the bar, the document stops
   overflowing, and Safari snaps the scroll position back to 0 — with the
   flick's rubber-band overshoot on top, which is the "jump".
   Pin the home page to the SMALL viewport (100svh never changes) and take the
   document scroll away entirely; the vertical Swiper owns the gesture. The
   `100vh` line before each `100svh` is the fallback for older engines. */
/* [CF9-1b] The home page now carries the footer, so the document has to be
   able to extend PAST the slider — `overflow:hidden` + a locked height would
   make the footer unreachable. The cause of the original jump was not scrolling
   as such, it was a PHANTOM ~100px of overflow: `height:100%` resolves against
   iOS Safari's LARGE viewport, so the page was scrollable by exactly the URL
   bar's height with nothing in that space, and Safari snapped back the moment
   the bar collapsed. Sizing the SLIDER to `100svh` (the small viewport, which
   never changes) removes that phantom gap; whatever scroll remains is the
   footer, which is real content. */
html.cav-home,html.cav-home body{
  height:100vh;
  height:100svh;
  overflow:hidden;
  overscroll-behavior:none;
}

/* [CF 2026-08-17 #9] The page now extends under the notch and the home
   indicator (viewport-fit=cover in index.html), which is what removes the white
   strips the client saw. The full-bleed slideshow WANTS to reach both edges, so
   nothing is padded back here — only the floating hamburger, which would
   otherwise sit beneath the status bar and be hard to tap.
   Every inset is 0 on a device without a notch, so this is inert there. */
@supports (padding: env(safe-area-inset-top)){
  html.cav-home .menu-main{
    top:calc(13px + env(safe-area-inset-top));
  }
  html.cav-home .home-logo{
    top:calc(5% + env(safe-area-inset-top));
  }
}
html.cav-home .slideshow-container,
html.cav-home .slideshow-container .swiper-slide,
html.cav-home .slideshow-contents{height:100vh;height:100svh;}
/* [CF9-1c] The mobile rule in responsive.css sizes the slide to
   `100vh - 50px`. That 50px was headroom for the page to scroll under, but the
   home page is now pinned to exactly 100svh with the scroll switched off, so
   the reserved strip had nowhere to go and simply painted white across the
   bottom of every slide — the road stopped short of the screen edge. The slide
   fills the viewport; the "Discover our services" control already sits over it
   at `bottom:30px`, so nothing needs the gap. */
@media screen and (orientation:portrait) and (min-width:300px) and (max-width:780px){
  html.cav-home .slideshow-container,
  html.cav-home .slideshow-container .swiper-slide,
  html.cav-home .slideshow-contents{height:100vh;height:100svh;}
}

/* ==========================================================================
   [CF9-16] Navigation drawer
   Was one flat list — language, Home, Add Car, Login, Register, a "Services"
   group of 13 and the account links all at identical weight, so nothing led
   the eye. Rebuilt as three labelled groups on a light sheet: the auth /
   account block, the categories (with the mega-menu's own icons), then the
   utilities. Everything positioned with LOGICAL properties so the panel and
   its chevrons mirror correctly in Arabic.
   ========================================================================== */
.cav-nav.mobile-sidebar{
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:0 0 60px rgba(15,20,25,.22);
}
.cav-nav .cav-nav-top{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:#2d343b;
  border-bottom:3px solid #ffc400;
}
.cav-nav .cav-nav-brand img{height:34px;width:auto;display:block;}
.cav-nav .cav-nav-close{
  width:36px;height:36px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;font-size:24px;line-height:1;
  cursor:pointer;transition:background .18s ease;
}
.cav-nav .cav-nav-close:hover{background:rgba(255,196,0,.9);color:#2d343b;}

.cav-nav .cav-nav-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px 14px 26px;
}

/* --- signed-out: two real buttons rather than two more list rows --- */
.cav-nav .cav-nav-auth{display:flex;gap:10px;margin-bottom:18px;}
.cav-nav .cav-nav-btn{
  flex:1 1 0;
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;
  border-radius:12px;
  font-weight:700;font-size:.95rem;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cav-nav .cav-nav-btn:active{transform:translateY(1px);}
.cav-nav .cav-nav-btn--primary{
  background:#ffc400;color:#2d343b;
  box-shadow:0 6px 16px rgba(255,196,0,.35);
}
.cav-nav .cav-nav-btn--primary:hover{background:#feba00;color:#2d343b;}
.cav-nav .cav-nav-btn--ghost{
  background:#fff;color:#2d343b;border:1.5px solid #e3e7eb;
}
.cav-nav .cav-nav-btn--ghost:hover{border-color:#ffc400;background:#fffdf5;}

/* --- signed-in: account card --- */
.cav-nav .cav-nav-account{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:14px;
  border-radius:14px;
  background:linear-gradient(135deg,#fff8e1 0%,#fffdf7 100%);
  border:1px solid #f3e2a6;
  text-decoration:none;
}
.cav-nav .cav-nav-avatar{
  width:42px;height:42px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#2d343b;color:#ffc400;font-size:17px;
}
.cav-nav .cav-nav-account-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.cav-nav .cav-nav-account-text strong{color:#1d2229;font-size:.98rem;}
.cav-nav .cav-nav-account-text small{color:#8a6d00;font-size:.78rem;}
.cav-nav .cav-nav-account .cav-nav-chev{margin-inline-start:auto;color:#c2a437;font-size:12px;}

/* --- the primary action --- */
.cav-nav .cav-nav-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;margin:4px 0 20px;
  border-radius:12px;
  background:#2d343b;color:#fff;
  font-weight:700;font-size:.95rem;text-decoration:none;
  transition:background .18s ease;
}
.cav-nav .cav-nav-cta i{color:#ffc400;}
.cav-nav .cav-nav-cta:hover{background:#1d2229;color:#fff;}

/* --- section label --- */
.cav-nav .cav-nav-heading{
  margin:0 0 6px;padding-inline-start:4px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#9aa1a9;
}

/* --- rows --- */
.cav-nav .cav-nav-list{list-style:none;margin:0 0 18px;padding:0;}
.cav-nav .cav-nav-list li{margin:0;}
.cav-nav .cav-nav-list a{
  display:flex;align-items:center;gap:12px;
  min-height:48px;padding:0 10px;
  border-radius:10px;
  color:#1d2229;font-size:.97rem;font-weight:500;
  text-decoration:none;
  transition:background .15s ease;
}
.cav-nav .cav-nav-list a:hover,
.cav-nav .cav-nav-list a:focus-visible{background:#f6f7f9;color:#1d2229;}
.cav-nav .cav-nav-list--cats li + li{border-top:1px solid #f0f2f4;}
.cav-nav .cav-nav-ico{width:20px;text-align:center;color:#9aa1a9;font-size:15px;}
.cav-nav .cav-nav-cat-ico{
  width:26px;height:26px;flex:0 0 auto;object-fit:contain;
}
.cav-nav .cav-nav-list--cats .cav-nav-chev{
  margin-inline-start:auto;color:#c8cdd3;font-size:11px;
}
/* the chevron is a directional glyph — mirror it with the page */
[dir='rtl'] .cav-nav .cav-nav-chev{transform:scaleX(-1);}

/* --- utilities --- */
.cav-nav .cav-nav-foot{
  display:flex;flex-direction:column;gap:8px;
  padding-top:14px;border-top:1px solid #eef0f2;
}
.cav-nav .cav-nav-lang,
.cav-nav .cav-nav-logout{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 10px;
  border:0;border-radius:10px;background:transparent;
  font:inherit;font-weight:600;color:#1d2229;
  text-align:start;cursor:pointer;
  transition:background .15s ease;
}
.cav-nav .cav-nav-lang i{color:#9aa1a9;width:20px;text-align:center;}
.cav-nav .cav-nav-lang:hover{background:#f6f7f9;}
.cav-nav .cav-nav-logout{color:#c0392b;}
.cav-nav .cav-nav-logout i{width:20px;text-align:center;}
.cav-nav .cav-nav-logout:hover{background:#fdf1f0;}

/* header.css sets `padding:20px` + `overflow-y:auto` on the panel itself; the
   new drawer owns its own padding and puts the scroll on `.cav-nav-scroll` so
   the dark top bar stays pinned while the list scrolls under it. */
.cav-nav.mobile-sidebar{
  padding:0 !important;
  overflow:hidden !important;
  width:86% !important;
  max-width:360px !important;
}

/* header.css sets `padding:20px` + `overflow-y:auto` on the panel itself; the
   new drawer owns its own padding and puts the scroll on `.cav-nav-scroll` so
   the dark top bar stays pinned while the list scrolls under it. */
.cav-nav.mobile-sidebar{
  padding:0 !important;
  overflow:hidden !important;
  width:86% !important;
  max-width:360px !important;
}

/* [CF9-2c] SUPERSEDED. A hand-tuned left/bottom nudge was here; the real
   answer came from the client's reference build (retalkapp.com/car-avenue/15):
   its mobile category slides use `.circle-mobile`, not `.circle`, which is
   what supplies `left:50%`, `width:auto` and `height:23%` (custom.home.js then
   squares it) — a 175px circle centred on the road. Home.js now uses that same
   class on the 13 vertical slides, so no positional override is needed. */

/* ==========================================================================
   [CF9-17] Site footer
   ========================================================================== */
.cav-footer{
  width:100%;
  margin-top:auto;              /* the flex column in Routes.js pins it down */
  background:#2d343b;
  color:#c8cdd3;
  font-size:.92rem;
  /* a hairline of brand yellow so the footer reads as part of the brand and
     not as an unstyled grey slab */
  border-top:3px solid #ffc400;
}
.cav-footer .container{padding-top:34px;padding-bottom:8px;}

.cav-footer-grid{
  display:grid;
  grid-template-columns:1.25fr 1.6fr 1fr;
  gap:30px 36px;
  align-items:start;
}
.cav-footer-brand img{height:44px;width:auto;display:block;margin-bottom:12px;}
.cav-footer-brand p{
  margin:0 0 14px;max-width:34ch;line-height:1.65;color:#98a0a8;font-size:.9rem;
}
.cav-footer-wa{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 16px;
  border-radius:999px;
  background:#ffc400;color:#2d343b;
  font-weight:700;font-size:.88rem;text-decoration:none;
  transition:background .18s ease, transform .15s ease;
}
.cav-footer-wa i{font-size:1.05rem;}
.cav-footer-wa:hover{background:#feba00;color:#2d343b;transform:translateY(-1px);}

.cav-footer-col h6{
  margin:0 0 12px;
  color:#fff;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.cav-footer-col ul{list-style:none;margin:0;padding:0;}
.cav-footer-col li{margin:0 0 9px;}
.cav-footer-col a{
  color:#b6bdc4;text-decoration:none;
  transition:color .15s ease, padding-inline-start .15s ease;
}
.cav-footer-col a:hover{color:#ffc400;padding-inline-start:3px;}
/* 13 categories in one column is a wall of text; two columns keeps the block
   the same height as its neighbours */
.cav-footer-cats{columns:2;column-gap:26px;}
.cav-footer-cats li{break-inside:avoid;}

.cav-footer-legal{
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  font-size:.82rem;color:#8b939b;
}
.cav-footer-legal .container{padding-top:14px;padding-bottom:14px;}
/* copyright on one side, Terms / Privacy on the other; stacks on narrow screens */
.cav-footer-legal .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;}
.cav-footer-legal-links{display:flex;gap:18px;}
.cav-footer-legal-links a{color:#8b939b;}
.cav-footer-legal-links a:hover{color:#ffc400;}

@media (max-width:991px){
  .cav-footer-grid{grid-template-columns:1fr 1fr;}
  .cav-footer-brand{grid-column:1 / -1;}
}
@media (max-width:575px){
  .cav-footer .container{padding-top:26px;}
  .cav-footer-grid{grid-template-columns:1fr;gap:24px;}
  .cav-footer-cats{columns:2;}
  .cav-footer-brand p{max-width:none;}
}