/* Clasale ORANGE theme (copy of clasale, re-skinned). "Lagoon & Sand" — override layer for the existing Hireo-based theme (Bootstrap 4.1.3).
   Load LAST, after colors/lagoon.css. Only restyles existing selectors from themes/default; new classes are prefixed .cl- */
body,h1,h2,h3,h4,h5,h6,input,select,textarea,button,.btn,.bootstrap-select .dropdown-toggle{font-family:var(--font)!important}
body{background:var(--c-bg);color:var(--c-text)}
html[dir=rtl] body{line-height:var(--lh-ar)}
a{color:var(--c-primary)}
/* ---------- Buttons */
.btn{border-radius:var(--r-pill);font-weight:500}
.btn-site{background:var(--c-primary)!important;border-color:var(--c-primary)!important;color:#fff!important;box-shadow:none}
.btn-site:hover{background:var(--c-primary-hover)!important}
.text-site{color:var(--c-primary)!important}
.badge-site{background:var(--c-lagoon-50);color:var(--c-primary);border-radius:var(--r-pill);font-weight:500}
.btn-outline-danger{color:var(--c-ink-700);border-color:var(--c-border)}.btn-outline-danger:hover,.btn-outline-danger.active{background:var(--c-gold-50);color:var(--c-gold-600);border-color:var(--c-gold-500)}
.btn-success{background:var(--c-lagoon-50);border-color:var(--c-lagoon-100);color:var(--c-primary)}
.btn-secondary{background:#fff;color:var(--c-ink-500);border-color:var(--c-border)}
/* Post-ad CTA = gold (header + small-footer) */
#header .right-side a.log-in-button.btn.btn-site,.small-footer a.postAd-btn{background:var(--c-gold-500)!important;border-color:var(--c-gold-500)!important;color:var(--c-lagoon-900)!important;font-weight:600}
/* ---------- Header */
#header-container,#header{background:#fff;box-shadow:none;border-bottom:1px solid var(--c-border)}
#header{height:72px}
#logo img{max-height:34px;width:auto}
#navigation ul li a{color:var(--c-ink-700);font-weight:500}
#navigation ul li a.current,#navigation ul li:hover a{color:var(--c-primary)}
.header-widget{border-color:var(--c-border)!important}
.setlang.active{color:var(--c-primary);font-weight:600}
/* category bar */
.allCategory{background:#fff;border-bottom:1px solid var(--c-border)}
.headerCat a{color:var(--c-ink-700);font-size:14px}
.headerCat a:hover,.headerCat a.active{color:var(--c-primary);box-shadow:inset 0 -3px 0 var(--c-gold-500)}
.headCatList{background:#fff;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3)}
.headCatList h5{color:var(--c-primary)}
/* ---------- Home hero */
.intro-banner{background:radial-gradient(1200px 500px at 85% -10%,#FE6B1855,transparent 60%),linear-gradient(160deg,var(--c-lagoon-700),var(--c-lagoon-900))!important;color:#fff;padding:70px 0 110px;position:relative;overflow:hidden}
.intro-banner:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-60px;height:120px;background:var(--c-bg);border-radius:50% 50% 0 0/100% 100% 0 0;opacity:1!important;display:block!important;top:auto!important;width:auto!important}
.intro-banner .background-image-container,.intro-banner:before{display:none!important}
.intro-banner .container{position:relative;z-index:2}
.banner-headline h1{color:#fff;font-size:var(--fs-4xl);font-weight:600;line-height:1.15}
html[dir=rtl] .banner-headline h1{line-height:1.35}
.banner-headline h1 strong,.banner-headline h1 .cl-hl{background:linear-gradient(transparent 78%,var(--c-gold-500) 78% 92%,transparent 92%);color:#fff;font-weight:600}
.banner-headline h4{color:#C9D1DE;font-weight:400}
.searchBox ul{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0;margin:22px 0 14px}
.searchBox li{list-style:none}
.searchBox .categotyTab{display:flex;gap:8px;align-items:center;padding:8px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.searchBox .categotyTab.active,.searchBox .categotyTab:hover{background:#fff;color:var(--c-primary)}
.searchBox .categotyTab img{filter:brightness(0) invert(1);height:18px}.searchBox .categotyTab.active img{filter:none}
.intro-banner-search-form{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:8px;margin-top:10px}
.intro-banner-search-form .intro-search-field{border-inline-end:1px solid var(--c-border)}
.intro-banner-search-form .intro-search-field:last-of-type{border:0}
.intro-search-button .btn{height:54px;padding:0 28px}
/* ---------- Section headings */
.section-headline h3{font-weight:600;font-size:var(--fs-2xl);color:var(--c-text)}
.section.gray,.gray{background:var(--c-sand-100)!important}
/* ---------- Ad card (home grid) .freelancer */
.freelancers-grid-layout .freelancer{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow var(--dur) var(--ease)}
.freelancers-grid-layout .freelancer:hover{box-shadow:var(--sh-2)}
.freelancer-overview{padding:0!important}
.freelancer-overview-inner img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.freelancer-details{padding:14px 16px 16px!important;background:#fff}
.freelancer-name h4{font-size:15px;font-weight:500;margin:0 0 6px}
.freelancer-name h4 a{color:var(--c-text)}
.freelancer-name .cl-price{font-size:20px;font-weight:600;color:var(--c-primary)}
.freelancer-name .location{font-size:13px;color:var(--c-text-muted)!important}
.freelancer-details-list{border-top:1px dashed var(--c-border);padding-top:10px;margin-top:8px}
.freelancer-details-list ul li{font-size:12px;color:var(--c-ink-400)}
.cl-badges{position:absolute;top:12px;inset-inline-start:12px;display:flex;gap:6px;z-index:2}
.freelancer-overview-inner{position:relative}
/* category tiles (.category-popular) */
.category-popular{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);margin-bottom:20px}
.category-popular h4,.category-popular h5{font-weight:600}
.category-popular .badge-info{background:var(--c-lagoon-50)!important;color:var(--c-primary)!important;border-radius:var(--r-pill)}
/* ---------- Listing page (dashboard layout) */
.dashboard-container{background:var(--c-bg)}
.dashboard-sidebar{background:#fff;border-inline-end:1px solid var(--c-border)}
.sidebar-widget h5,.sidebar-widget h3{font-size:14px;font-weight:600;color:var(--c-text)}
.form-control,.bootstrap-select>.dropdown-toggle,.bootstrap-select .btn.dropdown-toggle{height:48px;border:1px solid var(--c-sand-300)!important;border-radius:var(--r-md)!important;background:#fff!important;box-shadow:none!important;color:var(--c-text)}
.form-control:focus{border-color:var(--c-accent)!important;box-shadow:var(--ring)!important}
.page-title{font-weight:600;color:var(--c-text)}
.notify-box{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg)}
.accordion .card,.card{border:1px solid var(--c-border);border-radius:var(--r-lg)!important;box-shadow:var(--sh-1)}
.card-header{background:#fff;border-bottom:1px solid var(--c-border)}
.stateList a{display:inline-flex;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--c-border);margin:3px;color:var(--c-ink-700)}
/* result rows (.task-listing, returned by projectview/load_project) */
.tasks-list-container .task-listing{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);margin-bottom:16px;box-shadow:var(--sh-1);overflow:hidden}
.tasks-list-container .task-listing:hover{box-shadow:var(--sh-2)}
.task-listing.cl-featured{box-shadow:0 0 0 1px var(--c-gold-500);border-color:var(--c-gold-500)}
.task-listing-title a{color:var(--c-text);font-weight:500;font-size:18px}
.task-listing-description p{color:var(--c-text-muted);font-size:13px}
.task-icons li{color:var(--c-text-muted);font-size:13px}
.task-listing h4.text-site{font-size:20px;font-weight:600}
#load_more{height:48px;padding:0 32px}
/* ---------- Ad detail */
.single-page-section{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px}
#ninja-slider,#ninja-slider .slider-inner{border-radius:var(--r-lg);overflow:hidden;background:var(--c-lagoon-900)}
#thumbnail-slider li{border-radius:10px;overflow:hidden}
#thumbnail-slider li.active{box-shadow:0 0 0 2px var(--c-gold-500)}
ul.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0}
ul.specs li{list-style:none;background:var(--c-sand-50);border-radius:12px;padding:12px 14px}
ul.specs li span,ul.specs li small{display:block;color:var(--c-text-muted);font-size:12px}
.table-borderless td{border-bottom:1px solid var(--c-sand-100)}
h3.text-site{font-size:30px;font-weight:600}
.copy-url .form-control{border-radius:var(--r-pill) 0 0 var(--r-pill)!important}
#map.bg-gray{background:repeating-linear-gradient(45deg,var(--c-lagoon-50) 0 14px,#fff 14px 28px)!important;min-height:180px;border-radius:var(--r-lg)}
.cl-safety{background:var(--c-gold-50);border:1px solid var(--c-gold-200);border-radius:var(--r-lg);padding:16px;font-size:14px}
/* ---------- Forms (post ad, login, craftsperson register) */
.general-form,.dashboard-box{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.submit-field h5,.control-label{font-size:14px;font-weight:500;color:var(--c-ink-700)}
.uploadButton .uploadButton-button{border:2px dashed var(--c-lagoon-300);background:var(--c-lagoon-50);color:var(--c-primary);border-radius:12px}
.cl-steps{display:flex;margin:24px 0}.cl-step{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--c-ink-400)}
.cl-step i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--c-sand-300);font-style:normal;font-weight:600;background:#fff}
.cl-step.done{color:var(--c-ink-700)}.cl-step.done i{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.cl-step.cur{color:var(--c-primary);font-weight:600}.cl-step.cur i{background:var(--c-primary);border-color:var(--c-primary);color:#fff;box-shadow:var(--ring)}
.cl-step:after{content:"";flex:1;height:2px;background:var(--c-sand-200);margin:0 12px}.cl-step:last-child:after{display:none}.cl-step.done:after{background:var(--c-accent)}
/* ---------- Badges (new) */
.cl-badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500}
.cl-badge-featured{background:var(--c-gold-500);color:var(--c-lagoon-900)}.cl-badge-verified{background:var(--c-lagoon-100);color:var(--c-primary)}.cl-badge-example{background:var(--c-ink-900);color:#fff;opacity:.8}
/* ---------- Craftspeople & articles (explore/listing.php) */
.dashboard-content-inner article.card{transition:box-shadow var(--dur)}
.dashboard-content-inner article.card h2 a{color:var(--c-text);font-weight:600}
.notification.notice{background:var(--c-lagoon-50);border-radius:var(--r-md);color:var(--c-primary)}
/* ---------- Mobile bottom nav */
.small-footer{background:#fff;border-top:1px solid var(--c-border);box-shadow:0 -6px 18px -8px rgba(8,52,61,.15)}
.small-footer ul li a{color:var(--c-ink-500);font-size:11px}
.small-footer ul li a.active{color:var(--c-primary);font-weight:600}
.small-footer a.postAd-btn{border-radius:50%!important;width:54px;height:54px;margin-top:-22px;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--sh-2)}
/* ---------- Footer */
#footer{background:var(--c-lagoon-900)!important;color:#AAB4C5}
#footer .footer-middle-section{border:0;padding:56px 0 28px}
#footer h3{color:#fff;font-weight:500;font-size:15px}
#footer a,#footer .footer-links ul li a{color:#AAB4C5}#footer a:hover{color:var(--c-gold-500)}
#footer .footer-bottom-section{border-top:1px solid rgba(255,255,255,.1);color:#AAB4C5}
.footer-social-links li a{color:#fff!important}
.modal-content{border-radius:var(--r-lg);border:0}
/* hero category tabs: same size pills everywhere */
.searchBox .categotyTab{width:auto!important;height:auto!important;min-height:0!important;border-radius:var(--r-pill)!important;white-space:nowrap}
.searchBox .categotyTab span{display:inline!important;border:0!important;width:auto!important;height:auto!important;background:none!important}
.searchBox .categotyTab .catName{font-size:13px}
@media (max-width:767px){
 .banner-headline h1{font-size:30px!important}.banner-headline h4{font-size:15px}
 .intro-banner{padding:28px 0 80px}
 .searchBox ul{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
 .freelancers-grid-layout:not(.slick-initialized) .freelancer{width:100%!important;margin:0 0 12px!important} /* not inside slick: forcing 100% of .slick-track made slides 1170px wide on mobile */
 ul.specs{grid-template-columns:1fr 1fr}
}
/* static-mockup fallback for native selects (bootstrap-select not initialised) */
select.selectpicker{display:block!important;width:100%;height:48px;border:1px solid var(--c-sand-300);border-radius:var(--r-md);background:#fff;padding:0 12px;font-family:var(--font)}
/* remaining hard-coded reds in custom.css / Bootstrap danger used as brand */
ul.childList>li>a:hover,.save_search,.btn-link.save_search{color:var(--c-primary)!important}
.btn-outline-black.active{background:var(--c-primary)!important;border-color:var(--c-primary)!important}
.app .coming-soon{background:var(--c-gold-500)!important;color:var(--c-lagoon-900)!important}
.btn-outline-danger.mark_fav,.btn-outline-danger.report_project{color:var(--c-ink-500)!important;border-color:var(--c-border)!important;background:#fff}
#map .btn-site{border-radius:var(--r-pill)}
/* ---------- Post-ad form (real markup: section.sec.minH > form#postprojectform > .card > .card-body > .row > label.col-form-label + .submit-field) */
#postprojectform .card{border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
#postprojectform .card-header{background:#fff;border-bottom:1px solid var(--c-border)}
#postprojectform .card-header h4{color:var(--c-ink-900);font-weight:600;margin:0}
#postprojectform .col-form-label{font-size:14px;font-weight:500;color:var(--c-ink-700)}
#postprojectform .form-control{border-radius:12px;border-color:var(--c-border)}
#postprojectform .form-control:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-lagoon-50)}
#postprojectform .alert-secondary{background:var(--c-lagoon-50);border-color:var(--c-lagoon-100);color:var(--c-ink-700);border-radius:12px}
#postprojectform .required,#postprojectform .errmsg,#postprojectform .red-text{color:var(--c-gold-600)}
#postprojectform .upload-area{border:2px dashed var(--c-lagoon-300);background:var(--c-lagoon-50);border-radius:12px}
/* ---------- Hero category cards (v3, Dubizzle-style white cards + Fluent Emoji 3D, MIT)
   - Fixes double frame: custom.css gives .searchBox>ul>li a square 1px #999 border + dark bg; the <a> is now the only card.
   - Icons: images/categories/{data-id}.png chosen by data-id (same in EN and /ar/); generic category.png hidden; default.png fallback.
   - Tighter hero: less top padding and smaller heading gaps. */
.intro-banner{padding:28px 0 96px!important}
.intro-banner .banner-headline h1{margin:0 0 6px!important}
.intro-banner .banner-headline h4{margin:0!important}
.intro-banner .searchBox{margin-top:18px!important}
.searchBox>ul{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px!important;margin:0 0 14px!important;padding:0!important;overflow:visible!important}
.searchBox>ul>li{border:0!important;margin:0!important;flex:0 0 auto!important;background:none!important;list-style:none}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card){display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:8px!important;
 width:124px!important;min-height:122px!important;padding:14px 8px 12px!important;border-radius:16px!important;background:#fff!important;
 border:2px solid transparent!important;color:var(--c-ink-900,#131E2E)!important;box-shadow:0 6px 18px rgba(4,40,48,.18);
 font-family:var(--font),sans-serif;transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card)>span:first-child{display:block!important;width:58px!important;height:58px!important;flex:0 0 58px;
 background:url(../images/categories/default.svg) center/contain no-repeat!important;}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card)>span:first-child img{display:none!important}
.searchBox>ul>li>a.categotyTab[data-id="5"]>span:first-child{background-image:url(../images/categories/5.svg)!important} /* Employees */
.searchBox>ul>li>a.categotyTab[data-id="9"]>span:first-child{background-image:url(../images/categories/9.svg)!important} /* Community */
.searchBox>ul>li>a.categotyTab[data-id="15"]>span:first-child{background-image:url(../images/categories/15.svg)!important} /* Video Game */
.searchBox>ul>li>a.categotyTab[data-id="16"]>span:first-child{background-image:url(../images/categories/16.svg)!important} /* Services */
.searchBox>ul>li>a.categotyTab[data-id="1"]>span:first-child{background-image:url(../images/categories/1.svg)!important} /* Vehicles */
.searchBox>ul>li>a.categotyTab[data-id="7"]>span:first-child{background-image:url(../images/categories/7.svg)!important} /* Property for Rent */
.searchBox>ul>li>a.categotyTab[data-id="2"]>span:first-child{background-image:url(../images/categories/2.svg)!important} /* Mobiles & Tablets */
.searchBox>ul>li>a.categotyTab[data-id="3"]>span:first-child{background-image:url(../images/categories/3.svg)!important} /* Computer & Networking */
.searchBox>ul>li>a.categotyTab[data-id="8"]>span:first-child{background-image:url(../images/categories/8.svg)!important} /* Classifieds */
.searchBox>ul>li>a.categotyTab[data-id="6"]>span:first-child{background-image:url(../images/categories/6.svg)!important} /* Property for Sale */
.searchBox>ul>li>a.categotyTab[data-id="12"]>span:first-child{background-image:url(../images/categories/12.svg)!important} /* Job Wanted */
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card) .catName{display:block!important;width:100%!important;font-size:13px;font-weight:500;line-height:1.25;text-align:center;white-space:normal!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card):hover{transform:translateY(-3px);border-color:var(--c-gold-500,#FE6B18)!important;box-shadow:0 10px 24px rgba(4,40,48,.25)}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card).active{border-color:var(--c-gold-500,#FE6B18)!important;background:#FFF3EA!important;color:var(--c-primary,#FE6B18)!important}
@media (max-width:991px){.searchBox>ul>li a>span.catName{display:block!important}}
@media (max-width:767px){
 .intro-banner{padding:16px 0 70px!important}
 .intro-banner .banner-headline h1{font-size:26px!important}
 .intro-banner .banner-headline h4{font-size:14px!important}
 .intro-banner .searchBox{margin-top:14px!important}
 .searchBox>ul{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px!important}
 .searchBox>ul>li>a:is(.categotyTab,.cl-cat-card){width:auto!important;min-height:108px!important;padding:12px 6px 10px!important}
 .searchBox>ul>li>a:is(.categotyTab,.cl-cat-card)>span:first-child{width:50px!important;height:50px!important;flex-basis:50px}
 .searchBox>ul>li>a:is(.categotyTab,.cl-cat-card) .catName{font-size:12px}
}
/* v3.1: 9 cards. Craftspeople = plain link card (.cl-cat-card, NOT .categotyTab so the tab JS ignores it).
   Animals = new category; until its DB id exists use class .cl-cat-animals, then add a [data-id="NN"] rule. */
.searchBox>ul>li>a.cl-cat-craftspeople>span:first-child{background-image:url(../images/categories/craftspeople.svg)!important}
.searchBox>ul>li>a.cl-cat-animals>span:first-child{background-image:url(../images/categories/animals.svg)!important}
.searchBox>ul>li>a.cl-cat-card{text-decoration:none}
/* v3.2 hero slogan (new element, markup added in view) */
.cl-slogan{display:inline-block;margin:0 0 10px;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
 color:#fff;font-family:var(--font),sans-serif;font-size:15px;font-weight:500;letter-spacing:.3px;direction:ltr;unicode-bidi:isolate}
.cl-slogan b{color:var(--c-gold-500,#FE6B18);font-weight:600}
@media (max-width:767px){.cl-slogan{font-size:13px;margin-bottom:8px}}
@media (min-width:768px){.searchBox>ul{gap:10px!important;flex-wrap:nowrap!important}.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card){width:114px!important}}

html[dir="rtl"] .cl-hero-slogan{direction:rtl;}

/* ================= clasale-orange overrides ================= */
.intro-banner{background:radial-gradient(900px 420px at 88% -10%,rgba(254,107,24,.35),transparent 60%),radial-gradient(700px 380px at 0% 110%,rgba(254,145,2,.18),transparent 60%),linear-gradient(160deg,#1B2840,#131E2E)!important}
.banner-headline h1{font-weight:800!important;letter-spacing:-.5px}
html[dir=rtl] .banner-headline h1{font-weight:700!important;letter-spacing:0}
.banner-headline h1 strong,.banner-headline h1 .cl-hl{background:none;color:#FE7A1A}
#header .right-side a.log-in-button.btn.btn-site,.small-footer a.postAd-btn{background:var(--grad-orange)!important;border:0!important;color:#fff!important}
.btn-site,.button,.intro-banner-search-form .button,#submit_btn{background:var(--grad-orange)!important;border-color:#FD570F!important;color:#fff!important}
/* slogan pill: orange "Sales" */
.cl-slogan{background:rgba(255,255,255,.06);border-color:rgba(254,107,24,.45);font-family:"Montserrat",sans-serif;font-weight:600}
.cl-slogan b{color:#FE7A1A}
/* hero cards: white, thin-line icon in a soft orange circle */
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card){border-radius:14px!important;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card)>span:first-child{width:56px!important;height:56px!important;border-radius:50%;background-color:#FFF3EA!important;background-size:34px 34px!important;background-position:center!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card) .catName{font-weight:600}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card):hover{border-color:#FE6B18!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card):hover>span:first-child{background-color:#FFE3CF!important}
.searchBox>ul>li>a.categotyTab.active{background:#FFF3EA!important;color:#131E2E!important}
#footer{background:#131E2E!important}
@media (max-width:767px){.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card)>span:first-child{width:48px!important;height:48px!important;background-size:30px 30px!important}}

/* ================= softened v2 (easy on the eyes) =================
   Orange = accent only (primary CTA, prices, active, small highlights, slogan word). Text & links navy.
   AA: CTA #C94A06 + white 4.7:1; prices #C2410C on white 4.9:1; orange on navy #FF8A3D 6.4:1. */
body{background:#F7F8FA!important;color:#1E2C42}
a,#navigation ul li a,.headerCat a,.setlang,.setlang.active,#header .right-side a,.footer-links a,ul.childList>li>a,.task-listing h3 a,.freelancer-name a{color:#1E2C42!important}
a:hover,.headerCat a:hover,#navigation ul li a:hover{color:#131E2E!important;text-decoration:underline;text-decoration-color:#C94A06;text-underline-offset:3px}
.setlang.active{font-weight:700;border-bottom:2px solid #C94A06}
p,li,small,.text-muted,.task-listing-text,.task-tags span{color:#3A4659}
.border,.card,.task-listing,.freelancer,.intro-banner-search-form input,.form-control{border-color:#E1E5EC!important}
/* hero: navy, glow dialled down */
.intro-banner{background:radial-gradient(900px 420px at 88% -10%,rgba(254,122,26,.10),transparent 60%),linear-gradient(160deg,#1B2840,#131E2E)!important}
.banner-headline h1 strong,.banner-headline h1 .cl-hl,.cl-slogan b{color:#FF8A3D}
.cl-slogan{border-color:rgba(255,255,255,.18)}
/* primary CTA (orange, AA) */
#header .right-side a.log-in-button.btn.btn-site,.small-footer a.postAd-btn,.intro-banner-search-form .button,#submit_btn,.btn-site,.button{background:#C94A06!important;border:1px solid #C94A06!important;color:#fff!important;box-shadow:none}
#header .right-side a.log-in-button.btn.btn-site:hover,.intro-banner-search-form .button:hover,.btn-site:hover,.button:hover{background:#B54205!important;border-color:#B54205!important}
/* secondary buttons: navy outline */
.btn-outline-black,.btn-outline-danger,.btn-outline-site,.btn-secondary,.button.gray,.save_search{background:#fff!important;color:#1E2C42!important;border:1.5px solid #1E2C42!important}
.btn-outline-black:hover,.btn-outline-site:hover,.btn-secondary:hover{background:#1E2C42!important;color:#fff!important}
/* prices */
.price,.task-listing-bid .price,.ad-price,.freelancer-price,span.price,.task-offers strong{color:#C2410C!important;font-weight:700}
/* hero cards: neutral icon circle, orange only on hover/active */
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card)>span:first-child{background-color:#F1F3F7!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card):hover{border-color:#C94A06!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card):hover>span:first-child,.searchBox>ul>li>a.categotyTab.active>span:first-child{background-color:#FFF1E6!important}
.searchBox>ul>li>a.categotyTab.active{background:#fff!important;border-color:#C94A06!important}
.searchBox>ul>li>a:is(.categotyTab,.cl-cat-card) .catName{color:#1E2C42!important}
/* ---------- Ad image fix (all listing cards, EN+AR, mobile+desktop)
   Bug: on mobile the home slick carousels got width:100% of .slick-track (=1170px+) so 4:3 images became ~880px tall.
   Fixed above (rule scoped to :not(.slick-initialized)) + hard frame here so no photo can exceed a 4:3 box. */
.freelancer-overview-inner>a,.task-listing-bid>a,.cl-ad-thumb{display:block;position:relative;width:100%;aspect-ratio:4/3;max-height:320px;overflow:hidden;background:#EEF0F4}
.freelancer-overview-inner>a>img,.freelancer-overview-inner img.img-fluid,.task-listing-bid>a>img,.task-listing-bid>img,.cl-ad-thumb img{width:100%!important;height:100%!important;max-height:320px;min-height:0!important;aspect-ratio:auto;object-fit:cover!important;object-position:center!important;display:block}
.default-slick-carousel .slick-slide{height:auto}
.default-slick-carousel .slick-slide .freelancer-overview-inner>a{max-height:300px}
@media (max-width:767px){
 .task-listing-bid{width:100%!important;flex:0 0 auto!important}
 .freelancer-overview-inner>a,.task-listing-bid>a,.cl-ad-thumb,.freelancer-overview-inner img.img-fluid,.task-listing-bid>a>img,.task-listing-bid>img{max-height:260px}
}
/* ---------- Social login buttons: Google (GIS iframe) + Facebook identical pills
   GIS renders inside an iframe: CSS can only size/center its wrapper; shape/width/locale must be passed in renderButton() (see DEV note). */
#dubzil-google-button,#dubzil-google-start,#dubzil-facebook-start{width:100%!important;max-width:400px;margin-inline:auto!important;display:flex;justify-content:center}
#dubzil-google-button>div{margin:0 auto!important}
#dubzil-google-start,#dubzil-facebook-start{height:44px;border-radius:999px!important;align-items:center;gap:10px;font-family:var(--font);font-size:15px;font-weight:500;padding:0 16px!important}
#dubzil-google-start[hidden]{display:none!important}
#dubzil-facebook-start{background:#1877F2!important;border-color:#1877F2!important;color:#fff!important}
#dubzil-facebook-start:hover{background:#166FE5!important;border-color:#166FE5!important}
#dubzil-google-button:empty{display:none}

/* ===== Orange v2 fixes (29 Oct 2026) ===== */
/* 1. Footer links readable on navy (#D3DBE6 on #131E2E ≈ 12:1) */
#footer,#footer p,#footer li,#footer span{color:#C5CFDC!important}
#footer a,#footer a span,#footer .footer-links ul li a,#footer .footer-links ul li a span{color:#D3DBE6!important;text-decoration:none}
#footer a:hover,#footer a:hover span,#footer a:focus span{color:#FF8A3D!important}
/* 2. Desktop category bar: spacing, single line, horizontal scroll if needed */
.headerCat ul{display:flex!important;flex-wrap:nowrap!important;gap:26px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 2px!important}
.headerCat ul::-webkit-scrollbar{display:none}
.headerCat ul>li{flex:0 0 auto!important;white-space:nowrap!important;margin:0!important}
.headerCat ul>li>a{white-space:nowrap!important;padding:12px 0!important;display:inline-block}
/* 3. Animals card icon */
.searchBox>ul>li>a.cl-cat-animals>span:first-child{background-image:url(../images/categories/animals.svg)!important}
/* 4. Mobile homepage height */
@media (max-width:767px){
 .recent-ads .freelancers-container.freelancers-grid-layout{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin:0!important}
 .recent-ads .freelancers-container.freelancers-grid-layout>.freelancer{width:auto!important;margin:0!important;min-width:0}
 .recent-ads .freelancer .freelancer-details,.recent-ads .freelancer .freelancer-overview{padding:10px!important}
 .recent-ads .freelancer h4,.recent-ads .freelancer h3{font-size:13px!important;line-height:1.3}
 .recent-ads .freelancer .freelancer-details-list,.recent-ads .freelancer .freelancer-rating{display:none!important}
 .category-popular ul.list{display:none!important}
 .category-popular{padding:14px!important;margin-bottom:10px!important;min-height:0!important}
 .category-popular h4{margin:0!important;font-size:14px}
 .section .row:has(>[class*="col-"]>.category-popular){display:grid!important;grid-template-columns:1fr 1fr;gap:0 10px;margin:0!important}
 .section .row:has(>[class*="col-"]>.category-popular)>[class*="col-"]{max-width:none!important;padding:0!important}
}

/* HERO_ONE_LINE */
.intro-banner h1,.intro-banner .banner-headline h1{white-space:nowrap!important;font-size:clamp(20px,5.6vw,44px)!important;line-height:1.2!important;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* ===== Mobile menu + All Categories overlay fix (30 Oct 2026) ===== */
/* Global navy link color (softened v2) made mmenu links unreadable on its #2a2a2a panel */
.mm-menu a,.mm-menu a span,.mm-menu .mm-listview>li>a,.mm-menu .mm-listview>li>span,.mm-menu .setlang,.mm-menu .setlang.active,.mm-menu .mm-navbar a{color:#fff!important}
.mm-menu a:hover,.mm-menu .setlang.active{color:#FF8A3D!important}
/* Desktop category-bar flex rule (fix 2, 29 Oct) also hit the mobile full-screen overlay: restore vertical list there */
@media (max-width:991px){
 .headerCat{background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .headerCat ul{flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;overflow-x:hidden!important;overflow-y:visible!important;padding:0!important}
 .headerCat ul>li{flex:0 0 auto!important;white-space:normal!important;margin:0!important;border-bottom:1px solid #E1E5EC}
 .headerCat ul>li:first-child{display:none!important}
 .headerCat ul>li>a{display:block!important;white-space:normal!important;padding:12px 4px!important;font-size:15px}
}