/* ── Global font override: Watad (MOC) replaces Cairo everywhere ── */
*, *::before, *::after {
  font-family: 'Watad', 'Cairo', Arial, sans-serif !important;
}
/* Preserve monospace/icon fonts */
code, pre, kbd, .fa, .fab, .fas, .far, .fal, [class*='fa-'],
.material-icons, i.fa { font-family: inherit !important; }

.header_new{
	/*padding: 0; */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background: transparent;
    box-shadow: unset;
}
.banner-content{
	background: url(../images-new/cover.webp);
	margin-top: 0 !important;
	padding-top: 140px;
	padding-bottom: 100px;
	background-size: 100% 100% !important;
    padding-left: 40px;
    padding-right: 40px;
}
.inner-page-header .add-comment a#service_list{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 30px #00000029;
	border-radius: 10px;
	opacity: 1;
	width: auto;
    margin-right: 20px;
    color: #049BD0;
    font-size: 20px;
}
.inner-page-header .add-comment a{
	width: auto;
	border: 2px solid #FFFFFF;
	border-radius: 10px;
	background: transparent;
	color: #FFFFFF;
	box-shadow: 0px 0px 30px #00000029;
	padding: 7px 20px;
}
.rightbanner {
    width: 410px;
    margin-right: 73px;
    text-align: right;
    color: #fff;
}
.rightbanner h3 {
    font-size: 32px;
    font-weight: bold;
    font-family: 'Watad';
    line-height: 50px;
}
.rightbanner p{
	font-size: 20px;
}
.banner-content-left {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 30px #00000029;
    border-radius: 10px;
    width: auto !important;
    display: inline-block;
    padding: 30px 30px 30px 40px;
    color: #333333;
}
.banner-content-left h2{
    color: #333333;
    font-weight: 600;
    line-height: 60px;
    margin-bottom: 0;
}
.banner-content-left p{
	color: #777777;
	font-size: 18px;
	margin-bottom: 25px;
}
.banner-content-left a {
    background: #E4F4FA;
    box-shadow: 0px 0px 20px #049bd033;
    border-radius: 10px;
    color: #049BD0;
    font-size: 18px;
    font-weight: 600;
}
.banner-content-left a img{
	margin-left: 10px;
	width: 12px;
}
.home_thumb{
	margin-top: 50px;
}
.views {
    left: auto !important;
    right: 10px;
    top: 10px !important;
    background: rgb(0 0 0 / 40%) !important;
    border-radius: 8px !important;
    padding: 0 5px 3px !important;
}
.home_slider {
	border-radius: 10px 10px 0px 0px;
}
.desk_propdetail{
	background: #049BD0 0% 0% no-repeat padding-box !important;
    box-shadow: 0px 0px 20px #049bd033;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
}
.bluebtn{
	background: #E4F4FA 0% 0% no-repeat padding-box;
	border-radius: 10px;
	color: #049BD0;
	display: inline-block;
	padding: 7px 15px;
	font-size: 18px;
	font-weight: bold;
}
.bluebtn:hover{
	color: #049BD0;
}
.bluebtn img{
	width: 12px;
	margin: 0 10px;
}
.thumb_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}
.stars span {
    color: #FFA603;
}
.stars span i {
    color: #707070;
}
.am{
    font-size: 17px !important;
}
.thumb_header h4{
	color: #333333;
	font-size: 34px;
	font-weight: bold;
}
.homename{
	color: #333333;
}
.homename:hover{
	color: #049BD0;
}
.home_thumb .name{
	min-height: unset;
}
.thumb-text p{
	min-height: unset;
}
.bluelabel{
	background:#E4F4FA !important;
	border-radius: 8px;
	color: #049BD0 !important;
	display: inline-block;
	padding: 0 10px;
}
.box-shadowbox{
	box-shadow: 0px 0px 30px #0000001A;
	border-radius: 10px;
}
.home_thumb .thumb-content{
	border-radius: 0 0 10px 10px;
}
.home_slider .owl-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.innerpage-footer{
	background: #049BD0;
	border-top: none;
}
.innerbox{
	background: #049BD033;
	box-shadow: 0px 0px 30px #0000001A;
	border-radius: 10px;
	text-align: center;
	padding: 30px 20px;
    height: 100%;
}
.innerbox .imges{
	margin-bottom: 15px;
}
.innerbox .imges img {
	height: 60px;
}
.innertext h4 {
    color: #049BD0;
    font-size: 30px;
    font-weight: bold;
    font: normal normal bold 30px/60px Watad;
}
.innertext p{
	color: #777777;
	font-size: 15px;
	font: normal normal 600 15px/30px Watad;
	line-height: 30px;
	margin-bottom: 0;
}
.subscripdiv{
	background: #049BD0 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 30px #0000001A;
	border-radius: 10px;
	padding: 30px 45px;
	margin-top: 50px;
}
.whitebtn{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border-radius: 10px;
	color: #049BD0;
	display: inline-block;
	padding: 7px 15px;
	font-size: 18px;
	font-weight: bold;
}
.whitebtn img{
    width: 12px;
    margin: 0 10px;
}
.subscripimg {
    margin-top: -85px;
}
.subright{
	display: flex;
    align-items: center;
    justify-content: flex-end;
}
.subscript_right h2 {
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
}
.subscript_right p {
    color: rgb(255 255 255 / 60%);
    font-size: 16px;
    margin-bottom: 25px;
}
.subscripimg img {
    max-width: 100%;
    height: 330px;
}
img{
	max-width: 100%;
}
.systemleftmain{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.systemleft h3{
	color: #049BD0;
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 20px;
}
.systemleft p{
	font: normal normal 600 16px/30px Watad;
	color: #777777;
	font-size: 16px;
	font-weight: 500;
}
.systemleft a {
    display: inline-block;
    margin-left: 15px;
}
.systemleft a img {
    height: 60px;
}
.systemright {
    text-align: right;
}
.footertext p{
	font: normal normal normal 16px/30px Watad;
	font-size: 16px;
	color: #FFFFFF;
}
.innerpage-footer{
	padding-top: 80px;
	padding-bottom: 40px;
}
.social-icons a{
	display: flex !important;
	justify-content: center;
	align-items: center;
	height: 37px !important;
	width: 37px !important;
	border-radius: 50%;
	background: rgb(255 255 255 / 20%);
}
.social-icons a img{
	height: 14px !important;
}
.footer-links-wrapper .social-footer-title {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
.footer-links-wrapper .social-footer-title:after{
    position: absolute;
    content: "";
    width: 40px;
    height: 4px;
    bottom: -10px;
    right: 0;
    background: #fff;
}
.footer-links ul li a{
	font-size: 16px;
}
.copyright{
	margin-top: 30px;
}
.copyright p{
    font-size: 17px;
}
.search.searchnew {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 30px #00000029;
    border-radius: 10px;
    position: absolute;
    left: 15px;
    right: 44px;
    bottom: -150px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.home_thumb .col-lg-11.mx-auto.pl-lg-0.pl-md-0 .row.ml-lg-0{
    margin-left: 0 !important;
}
.search .search_property {
    background: #049BD0 !important;
    height: auto !important;
    box-shadow: 0px 0px 20px #049bd033;
    border-radius: 10px !important;
    width: 160px !important;
    line-height: 1;
    padding: 15px;
}
.datepickers, .desktopsearch, .desktopselect{
	width: 28%;
	position: relative;
    padding: 0 15px;
}
.desktopsearch:after, .desktopselect:after{
	content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 80%;
    margin: auto;
    background: rgb(0 0 0 / 20%);
}
.search .form-control#datefilter {
    width: 100% !important;
}
.desktopselect select#iCityId {
    width: 100% !important;
}
.datepickers {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.desktopsearch .form-group.textField input {
    width: 100% !important;
}
.desktopsearch .form-group.textField {
    display: flex;
    margin-right: 0 !important;
    justify-content: flex-end;
    align-items: center;
}
.desktopselect .inner{
	display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* FIX-001: Restore keyboard focus visibility (WCAG 2.4.7) */
button:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #049BD0;
  outline-offset: 3px;
}
.search .form-control{
    color: #707070;
}
.datepickers img, .desktopsearch img, .desktopselect img{
    height: 30px;
}
.detail a{
    background: #049BD0 0% 0% no-repeat padding-box !important;
    box-shadow: 0px 0px 20px #049bd033;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
}
.desktopselect select#iCityId{
    -webkit-appearance: none;
    appearance: none;
}
/*================================================================
----------------------------- Media Query ------------------------
=================================================================*/
@media (min-width: 992px){
    .menu-button{
        display: none;
    }
}
@media(max-width: 991px){
    .desktopheade{
        display: none;
    }
    .sidenav {
    background: rgb(4 155 208 / 95%);
}
.sidenav .inner-header-left {
    display: block;
    padding: 15px;
}
.sidenav .inner-header-left .add-comment {
    display: block;
    text-align: right; /* RTL fix */
}
.sidenav .inner-header-left .add-comment a{
    margin-right: 0 !important;
    margin-left: 10px !important;
    margin-bottom: 10px;
}
.sidenav .inner-header-left .header-links{
    display: block;
}
.inner-page-header .add-comment a#service_list{
    width: 165px !important;
    padding: 7px !important;
    height: auto;
}
.sidenav .inner-header-left .header-links .newAccount a, .sidenav .inner-header-left .header-links .offer a{
    direction: rtl;
    padding-left: 0 !important;
}
.sidenav .inner-header-left .header-links .offer{
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.sidenav .inner-header-left .header-links .newAccount a span,.sidenav .inner-header-left .header-links .offer a span{
    margin-right: 10px;
    margin-left: 0;
}
.sidenav .closebtn {
    left: 0;
    margin-right: 0;
    color: #fff;
}
}
@media(max-width: 767px){
    .mobile_search{
        display: none;
    }
    .desktopsearch{
        display: block;
    }
    .estraha-logo-white{
        justify-content: space-between;
    }
    .detail{
        display: flex !important;
    justify-content: flex-end;
    flex-direction: row-reverse;
    }
    .banner-content{
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 235px;
    }
    .rightbanner{
        width: 100%;
        margin-right: 0;
    }
    .banner-content-left{
        margin-left: 0 !important;
        margin-bottom: 30px;
        width: 100% !important;
    }
    .thumb_header{
        flex-direction: column-reverse;
        text-align: right;
    }
    .subscripdiv{
        padding: 30px;
    }
    .subscripimg img{
        height: 250px;
    }
    .subright .subscript_right {
    text-align: center;
}
.systemright {
    text-align: center;
    padding-bottom: 40px;
}
.systemleft {
    text-align: center !important;
}
.systemleft a img{
    height: 45px;
}
.innerpage-footer .col-md-8{
    order: 2;
}
.footer-logo-wrapper{
    margin-bottom: 20px;
}
.social-icons ul{
    text-align: right;
}
.footer-links-wrapper .social-footer-title{
    text-align: right;
}
    .thumb_header .bluebtn{
        width: 200px;
        margin-left: auto;
        text-align: center;
        padding: 15px;
        margin-bottom: 25px;
    }
    .home_thumb .col-lg-11.mx-auto.pl-lg-0.pl-md-0 .row.ml-lg-0{
        margin-left: -15px !important;
    }
    .thumb_header h4{
        margin-bottom: 20px;
    }
    .banner-content .col-md-5.ml-auto {
    order: 2;
}
    .search.searchnew{
        right: 0;
        left: 0;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        bottom: -285px;
    }
    .search .search_property{
        width: 100% !important;
        order: 4;
    }
    .datepickers {
    order: 3;
}
.desktopsearch {
    order: 2;
}
.desktopselect {
    order: 1;
}
.desktopsearch:after, .desktopselect:after{
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 1px;
}
    .datepickers, .desktopsearch, .desktopselect{
        width: 100% !important;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .form-group.select{
        width: 100% !important;
    }
}
@media(max-width: 600px){
    .banner-content{
        padding: 40px 15px 235px;
    }
    .rightbanner{
        width: 100%;
        margin-right: 0;
    }
    .banner-content-left{
        margin-left: 0 !important;
        margin-bottom: 30px;
        width: 100%;
    }
    .thumb_header{
        flex-direction: column-reverse;
        text-align: right;
    }
    .subscripdiv{
        padding: 30px;
    }
    .subscripimg img{
        height: 250px;
    }
    .subright .subscript_right {
    text-align: center;
}
.systemright {
    text-align: center;
    padding-bottom: 40px;
}
.systemleft {
    text-align: center !important;
}
.systemleft a img{
    height: 45px;
}
.innerpage-footer .col-md-8{
    order: 2;
}
.footer-logo-wrapper{
    margin-bottom: 20px;
}
.social-icons ul{
    text-align: right;
}
.footer-links-wrapper .social-footer-title{
    text-align: right;
}
    .thumb_header .bluebtn{
        width: 200px;
        margin-left: auto;
        text-align: center;
        padding: 15px;
        margin-bottom: 25px;
    }
    .home_thumb .col-lg-11.mx-auto.pl-lg-0.pl-md-0 .row.ml-lg-0{
        margin-left: -15px !important;
    }
    .thumb_header h4{
        margin-bottom: 20px;
    }
    .banner-content .col-md-5.ml-auto {
    order: 2;
}
    .search.searchnew{
        right: 0;
        left: 0;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        bottom: -285px;
    }
    .search .search_property{
        width: 100% !important;
        order: 4;
    }
    .datepickers {
    order: 3;
}
.desktopsearch {
    order: 2;
}
.desktopselect {
    order: 1;
}
.desktopsearch:after, .desktopselect:after{
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 1px;
}
    .datepickers, .desktopsearch, .desktopselect{
        width: 100% !important;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .form-group.select{
        width: 100% !important;
    }
}
/* ============================================================
   HEADER — estraha.com
   Added: 2026-04-13
   ============================================================ */

/* ---- Base header ---- */
.est-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 24px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  background: transparent;
}

/* Transparent on hero, white after scroll */
.est-header--scrolled {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.est-header--scrolled .est-logo-white  { display: none; }
.est-header--scrolled .est-logo-color  { display: inline-block !important; }
.est-header--scrolled .est-header__host-link { color: #222; }
.est-header--scrolled .est-user-pill   { border-color: #ddd; }
.est-header--scrolled .est-user-pill__burger span { background: #222; }
.est-header--scrolled .est-user-pill__avatar { color: #222; }
.est-header--scrolled .est-weather-chip { color: #444; background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); }

/* ── Inner page body offset — compensate for fixed header ──────────────── */
body.inner-page { padding-top: 68px; }
@media(max-width:768px){ body.inner-page { padding-top: 56px; } }

/* ── Inner pages: always white header ──────────────────────────────────────
   Applied on all pages except homepage (/ only).
   est-header--inner is set via Blade on the <header> tag.
─────────────────────────────────────────────────────────────────────────── */
.est-header--inner {
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.est-header--inner .est-logo-white  { display: none !important; }
.est-header--inner .est-logo-color  { display: inline-block !important; }
.est-header--inner .est-header__host-link { color: #222 !important; }
.est-header--inner .est-user-pill   { border-color: #ddd !important; }
.est-header--inner .est-user-pill__burger span { background: #222 !important; }
.est-header--inner .est-weather-chip { color: #444 !important; background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; }
.est-header--inner .est-btn-login   { color: #222 !important; border-color: #ddd !important; }
.est-header--inner .est-btn-login:hover { background: #f5f5f5 !important; }
.est-header--inner .est-header__search { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; }
.est-header--inner .est-search-pill { background: #f5f5f5 !important; border-color: #e0e0e0 !important; }
.est-header--inner .est-search-pill:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; }



/* ---- Inner flex row ---- */
.est-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  direction: rtl;
}

/* ---- Logo zone ---- */
.est-header__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.est-header__logo img {
  height: 36px;
  width: auto;
}
.est-logo-white  { display: inline-block; }
.est-logo-color  { display: none; }

/* ---- Search pill (center) ---- */
.est-header__search {
  flex: 1;
  max-width: 540px;
  min-width: 0;
  position: relative;
  /* Hidden by default — fades in on scroll (JS adds .is-visible) */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.est-header__search.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Pill is now a <form> — keep visual identical to old <a> */
.est-search-pill {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  text-decoration: none;
  /* overflow:visible so autocomplete dropdown can escape */
  overflow: visible;
  transition: box-shadow 0.2s ease;
  border: 1px solid #e0e0e0;
  /* clip background to border-radius without overflow:hidden */
  isolation: isolate;
}
.est-search-pill:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.22);
  text-decoration: none;
}
.est-search-pill__segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 18px;
  flex: 1;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 0;
  position: relative;
}
.est-search-pill__segment:first-child {
  border-radius: 40px 0 0 40px;
}
.est-search-pill__segment:hover {
  background: #f5f5f5;
}
.est-search-pill__label {
  font-size: 11px;
  font-weight: 700;
  color: #222;
  font-family: 'Watad', sans-serif;
  line-height: 1.2;
  pointer-events: none;
}
.est-search-pill__value {
  font-size: 13px;
  color: #717171;
  font-family: 'Watad', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Live input fields inside pill segments */
.est-search-pill__input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #333;
  font-family: 'Watad', sans-serif;
  width: 100%;
  padding: 0;
  cursor: pointer;
  line-height: 1.3;
}
.est-search-pill__input::placeholder { color: #717171; }
.est-search-pill__input:focus { color: #222; cursor: text; }
.est-search-pill__select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #717171;
  font-family: 'Watad', sans-serif;
  width: 100%;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.3;
}
.est-search-pill__select:focus { color: #222; }
.est-search-pill__divider {
  width: 1px;
  background: #e0e0e0;
  margin: 8px 0;
  align-self: stretch;
  flex-shrink: 0;
}
.est-search-pill__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #049BD0;
  color: #fff;
  border-radius: 50%;
  width: 42px;
  min-width: 42px;
  height: 42px;
  margin: 5px 6px 5px 8px;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.est-search-pill__btn:hover { background: #0380aa; }

/* Header pill autocomplete dropdown */
.hdr-autocomplete {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  z-index: 600;
  overflow: hidden;
  display: none;
  border: 1px solid #eee;
}
.hdr-autocomplete.is-open { display: block; }
.hdr-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-family: 'Watad', sans-serif;
  font-size: 13px;
  color: #222;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.12s;
}
.hdr-ac-item:last-child { border-bottom: none; }
.hdr-ac-item:hover { background: #f7f7f7; }
.hdr-ac-item__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ---- Auth zone ---- */
.est-header__auth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Weather chip */
.est-weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  color: #fff;
  font-family: 'Watad', sans-serif;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  cursor: default;
}
.est-weather-chip #estraha-weather-icon { font-size: 16px; }
.est-weather-chip #estraha-weather-desc { opacity: 0.85; font-size: 11px; }

/* Host link */
.est-header__host-link {
  font-family: 'Watad', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 22px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.est-header__host-link:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-decoration: none;
}
.est-header--scrolled .est-header__host-link:hover {
  background: #f0f0f0;
  color: #222;
}

/* User pill (burger) — desktop: hidden, mobile only */
.est-user-pill { display: none; }
@media (max-width: 767px) {
  .est-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 22px;
    padding: 6px 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s;
    background: rgba(255,255,255,0.08);
  }
  .est-user-pill:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.18);
  }
}
.est-user-pill__burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.est-user-pill__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: background 0.2s;
}
.est-user-pill__avatar {
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.2s;
}
.est-user-pill__avatar:hover { color: #fff; text-decoration: none; }

/* Auth buttons (login / register) */
.est-header__auth-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.est-btn-login {
  font-family: 'Watad', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 22px;
  border: 1.5px solid rgba(255,255,255,0.70);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.est-btn-login:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-decoration: none;
}
.est-header--scrolled .est-btn-login {
  color: #222;
  border-color: #ccc;
}
.est-header--scrolled .est-btn-login:hover {
  background: #f0f0f0;
  color: #222;
}
.est-btn-register {
  font-family: 'Watad', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 22px;
  background: #049BD0;
  border: 1.5px solid #049BD0;
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.est-btn-register:hover {
  background: #0380aa;
  border-color: #0380aa;
  color: #fff;
  text-decoration: none;
}

/* ---- Mobile search bar ---- */
/* Mobile search pill — now lives INSIDE .est-header__inner (between logo + auth)
   Hidden on desktop, expands as flex item on mobile                            */
.est-header__mobile-search {
  display:  none;    /* hidden on desktop — shown via media query below */
  flex:     1 1 0;   /* fills space between logo and auth pill */
  min-width: 0;      /* allows shrink inside flex row */
  padding:  0;       /* no extra padding — contained by header inner gap */
}
.est-mobile-search-pill {
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(255,255,255,0.15);
  border:          1px solid rgba(255,255,255,0.3);
  border-radius:   40px;
  padding:         8px 14px;
  text-decoration: none;
  color:           rgba(255,255,255,0.9);
  font-family:     'Watad', sans-serif;
  font-size:       13px;
  direction:       rtl;
  width:           100%;
  transition:      background 0.2s, color 0.2s;
  white-space:     nowrap;
  overflow:        hidden;
}
.est-mobile-search-pill span {
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}
.est-mobile-search-pill:hover {
  background: rgba(255,255,255,0.25);
  color:      #fff;
  text-decoration: none;
}
/* On scrolled/inner-page headers the bg is white — flip pill to dark style     */
.est-header--scrolled .est-mobile-search-pill,
.est-header--inner .est-mobile-search-pill {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #717171;
}
.est-header--scrolled .est-mobile-search-pill:hover,
.est-header--inner .est-mobile-search-pill:hover {
  background: #ebebeb;
  color: #333;
}
.est-mobile-search-pill svg { flex-shrink: 0; stroke: currentColor; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .est-header__search { display: none; }
  .est-header__host-link { display: none; }
  .est-header__auth-btns { display: none; }
  .est-weather-chip { display: none; }
  .est-header__mobile-search { display: flex; align-items: center; }
  .est-header {
    padding: 10px 16px; /* uniform — pill is now inline, no extra bottom row */
  }
}

@media (max-width: 575px) {
  .est-header__logo img { height: 30px; }
}

/* ---- Make room for fixed header ---- */
body.has-fixed-header .banner-content,
body.has-fixed-header section:first-of-type {
  padding-top: 90px;
}
/* ══════════════════════════════════════════════════════════════
   ESTRAHA — UX/UI FIXES PATCH
   Author  : Nour (UX/UI Agent) — Impeccable /critique + /colorize + /animate
   Date    : 2026-04-13
   Target  : Append to end of custom_new.css
   Cascade : Uses !important where inline <style> block takes precedence
   Rollback: Delete from the "NOUR PATCH" comment to EOF
   Ticket  : Three Impeccable passes — critique + colorize + animate
══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   BLOCK A — ACCESSIBILITY  (critical, ship first)
────────────────────────────────────────────────────────────── */

/* A1 · Reduced motion — WCAG 2.3.3 (advisory), affects 35%+ of adults 40+
        Must come before any animation declarations so they can be suppressed  */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* A2 · Footer copyright contrast — was #aaa on #049BD0 = ~1.38:1 (WCAG FAIL)
        Now: rgba(255,255,255,0.82) on #049BD0 ≈ 4.5:1 (AA pass)             */
.footer-copyright,
p.footer-copyright,
.social-footer-copyright {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* A3 · Stepper touch targets — visual 26×26px → tap area 44×44px via inset  */
.air-stepper__btn {
  position: relative;
}
.air-stepper__btn::before {
  content: '';
  position: absolute;
  inset: -9px; /* expands tap area from 26px to 44px each side */
}

/* A4 · Carousel arrows — 30×30 → 36×36 (desktop; swipe handles mobile)      */
.air-carousel__arrow {
  width:  36px !important;
  height: 36px !important;
}

/* ──────────────────────────────────────────────────────────────
   BLOCK B — COLOR SYSTEM  (brand amber token)
────────────────────────────────────────────────────────────── */

/* B1 · Warm amber accent token — #E8A020  oklch(72% 0.18 65)
        Deployed as:
        - wishlist saved heart
        - discount badge
        - rating star reference
        - footer section-title underline
        - featured badge (future use)                                          */
:root {
  --color-warm:    #E8A020 !important; /* amber-gold, oklch(72% 0.18 65) */
  --color-warm-bg: #FEF3DC !important;
}

/* B2 · Wishlist saved heart                                                  */
.air-wish-btn.is-wished .air-wish-heart {
  fill:   var(--color-warm) !important;
  stroke: var(--color-warm) !important;
}

/* B3 · Discount badge                                                        */
.air-badge--discount {
  background: var(--color-warm) !important;
  color: #fff !important;
}

/* B4 · Category active indicator — was #222 (black); now brand primary blue  */
.air-cat.is-active {
  border-color: var(--air-primary) !important;
  color:        var(--air-primary) !important;
}
.air-cat:hover {
  border-color: rgba(4, 155, 208, 0.40) !important;
  color:        var(--air-primary)       !important;
}

/* B5 · Footer section-title underline — amber flash on blue footer           */
.footer-links-wrapper .social-footer-title::after {
  background: var(--color-warm) !important;
}

/* B6 · City gradient fallbacks — unified to single brand-blue family
        Replaces 6 random palettes (red, green, brown, assorted blues)
        All share hue 220 (brand blue), vary only in lightness                */
.air-city--1 .air-city__bg { background: linear-gradient(145deg, #06263a 0%, #049BD0 100%) !important; }
.air-city--2 .air-city__bg { background: linear-gradient(145deg, #073044 0%, #0280af 100%) !important; }
.air-city--3 .air-city__bg { background: linear-gradient(145deg, #03243a 0%, #026590 100%) !important; }
.air-city--4 .air-city__bg { background: linear-gradient(145deg, #041e2e 0%, #04779d 100%) !important; }
.air-city--5 .air-city__bg { background: linear-gradient(145deg, #061f30 0%, #035e7f 100%) !important; }
.air-city--6 .air-city__bg { background: linear-gradient(145deg, #031926 0%, #024c68 100%) !important; }

/* ──────────────────────────────────────────────────────────────
   BLOCK C — MOTION CORRECTIONS  (existing animations refined)
────────────────────────────────────────────────────────────── */

/* C1 · Hero Ken Burns — was: scale(1.03), ease, 8s (wrong curve, too fast)
        Now: linear (not ease), 14s (imperceptible drift), keyframe name
        prefixed to avoid conflicts with any existing kenburns rule           */
@keyframes est-kenburns {
  from { transform: scale(1.00); }
  to   { transform: scale(1.07); }
}

.air-hero__bg {
  transform:  scale(1.00)                        !important;
  animation:  est-kenburns 14000ms linear forwards !important;
  transition: none                               !important;
}

/* C2 · City card image zoom — was ease, now ease-out-quart (feels like arrival)  */
.air-city__bg {
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* C3 · Wishlist heart hover — was scale(1.1) = too dramatic; now 1.04 + press   */
.air-wish-btn:hover  { transform: scale(1.04) !important; }
.air-wish-btn:active { transform: scale(0.90) !important; transition-duration: 0.08s !important; }

/* C4 · Autocomplete items — missing transition on hover (looked broken)          */
.air-ac-item,
.hdr-ac-item {
  transition: background 0.12s ease-out;
}

/* ──────────────────────────────────────────────────────────────
   BLOCK D — NEW MOTION  (additions, no cascade conflict)
────────────────────────────────────────────────────────────── */

/* D1 · Wishlist save pulse — JS adds .is-saving on click, removes after 400ms   */
@keyframes est-heart-save {
  0%   { transform: scale(1.00); }
  35%  { transform: scale(1.42); }
  65%  { transform: scale(0.86); }
  100% { transform: scale(1.00); }
}

.air-wish-btn.is-saving .air-wish-heart {
  animation: est-heart-save 380ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* D2 · Card grid stagger entrance
        PHP template sets style="--card-i: N" on each .air-grid__item (0–7)
        Cards 8+ get --card-i: 8 (all animate simultaneously after cap)      */
@keyframes est-card-enter {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.air-grid__item {
  animation:       est-card-enter 420ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: calc(var(--card-i, 0) * 50ms);
}

@media (prefers-reduced-motion: reduce) {
  .air-grid__item {
    animation: none   !important;
    opacity:   1      !important;
  }
}

/* D3 · Section scroll reveals — JS adds .is-visible via IntersectionObserver    */
.air-section,
.air-stats,
.air-host-cta {
  opacity:   0;
  transform: translateY(22px);
  transition:
    opacity   500ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.air-section.is-visible,
.air-stats.is-visible,
.air-host-cta.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Category nav is sticky — never hide it                                        */
.air-cats {
  opacity:   1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .air-section,
  .air-stats,
  .air-host-cta {
    opacity:    1    !important;
    transform:  none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   BLOCK E — MOBILE FIXES
────────────────────────────────────────────────────────────── */

/* E1 · Hero height — fluid using svh (respects iOS dynamic chrome)             */
@media (max-width: 768px) {
  .air-hero {
    min-height: clamp(380px, 60svh, 520px) !important;
  }
}

/* E2 · 375px micro-breakpoint — stats bar reflow at iPhone SE                  */
@media (max-width: 375px) {
  .air-stats {
    gap:       16px !important;
    flex-wrap: wrap !important;
  }
  .air-stat {
    flex: 1 1 40%;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   END OF NOUR PATCH
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BLOCK F — MOBILE AUDIT FIXES (2026-04-14)
   Nour · /audit + /critique — homepage mobile pass
══════════════════════════════════════════════════════════════ */

/* F1 · City cards — round all corners (was 12px 12px 0 0, looked unfinished) */
.air-city {
  border-radius: var(--air-radius) !important;
}

/* F2 · Badge minimum font size — 10px is below Arabic legibility floor          */
.air-badge {
  font-size: 11px !important;
}

/* F3 · Card body — increase bottom padding (was 4px, price text touched border) */
.air-card__body {
  padding: 12px 12px 14px !important;
}

/* F4 · Carousel arrows — show on mobile as a subtle persistent hint
        Partially visible (opacity 0.55) instead of fully hidden (0)
        Hover still brings to 1; disabled stays at 0                             */
@media (max-width: 768px) {
  .air-carousel__arrow {
    opacity: 0.55 !important;
    width:   36px !important;
    height:  36px !important;
    font-size: 16px !important;
  }
  .air-carousel__arrow:disabled {
    opacity: 0 !important;
  }
}

/* F5 · Carousel dot size increase (5px → 7px) for better touch affordance      */
.air-dot {
  width:  7px !important;
  height: 7px !important;
}
.air-dot.is-active {
  transform: scale(1.3) !important;
}

/* F6 · "View all" link — style with brand color so it reads as an action        */
.air-section__all {
  color: var(--air-primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  padding: 4px 0 !important;
  border-bottom: 1.5px solid transparent !important;
  transition: border-color 0.15s !important;
}
.air-section__all:hover {
  border-bottom-color: var(--air-primary) !important;
  color: var(--air-primary-dark) !important;
}

/* F7 · Secondary text contrast — nudge from #717171 to #6b6b6b for AA at 12px  */
:root {
  --air-text-2: #6b6b6b;
}

/* F8 · Card name min font size on mobile — 13px → 15px for readability          */
@media (max-width: 768px) {
  .air-card__name {
    font-size: 15px !important;
  }
  .air-cat__label {
    font-size: 12px !important;
  }
  .air-search__field > label {
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   END OF BLOCK F
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BLOCK G — REMAINING AUDIT ITEMS (2026-04-14)
   Nour · outstanding issues pass
══════════════════════════════════════════════════════════════ */

/* G1 · Skip-to-content link — WCAG 2.4.1 bypass block                          */
.est-skip-link {
  position:    absolute;
  top:         -100%;
  right:       16px;
  z-index:     9999;
  background:  var(--air-primary, #049BD0);
  color:       #fff;
  font-family: 'Watad', sans-serif;
  font-size:   14px;
  font-weight: 700;
  padding:     10px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition:  top 0.15s;
}
.est-skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* G2 · FA icon font fallback fix — override the global !important               *
 *      Only 1 FA icon left (WhatsApp) — replaced with SVG inline in template.   *
 *      This rule defensively protects any remaining FA glyphs site-wide.        */
.fa, .fab, .fas, .far, .fal, [class^="fa-"], [class*=" fa-"] {
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free',
               'Font Awesome 5 Brands', 'FontAwesome' !important;
}

/* G3 · Hero Ken Burns — respect prefers-reduced-motion                          */
@media (prefers-reduced-motion: reduce) {
  .air-hero__bg {
    transform:  none !important;
    transition: none !important;
  }
}
/* Also improve easing: ease → custom cubic for smoother 14s pan                */
.air-hero__bg {
  transition: transform 14s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* G4 · Guest-type label on property card                                        */
.air-card__guest-type {
  font-size:   11px;
  color:       var(--air-text-2);
  font-family: 'Watad', sans-serif;
}

/* G5 · City card — override: ensure consistent gradient direction palette       *
 *      Warm the palette slightly to feel more Saudi/GCC                         */
.air-city--1 .air-city__bg { background: linear-gradient(135deg, #0d2e40 0%, #049BD0 100%); }
.air-city--2 .air-city__bg { background: linear-gradient(135deg, #1a3a52 0%, #1a88b0 100%); }
.air-city--3 .air-city__bg { background: linear-gradient(135deg, #6B2020 0%, #C44A1A 100%); }
.air-city--4 .air-city__bg { background: linear-gradient(135deg, #14452A 0%, #38A85C 100%); }
.air-city--5 .air-city__bg { background: linear-gradient(135deg, #4A3020 0%, #C49A70 100%); }
.air-city--6 .air-city__bg { background: linear-gradient(135deg, #1A2535 0%, #4A7898 100%); }

/* G6 · Hero scroll parallax — add will-change hint for GPU compositing         */
.air-hero__bg {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   END OF BLOCK G
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BLOCK H — SIDENAV: ALWAYS ON TOP (2026-04-14)
   Fix: z-index:1 → z-index:2000, above header (1000) + all layers
   Adds: backdrop overlay, smooth slide, safe-area padding
══════════════════════════════════════════════════════════════ */

/* H1 · Sidenav — z-index fix for legacy .sidenav only
   NOTE: #mySidenav is now .est-drawer — Block I+J own its styles.
   This rule intentionally scoped to .sidenav ONLY (not #mySidenav)      */
.sidenav:not(.est-drawer) {
  position:   fixed !important;
  top:        0    !important;
  right:      0    !important;
  height:     100% !important;
  z-index:    2000 !important;
  overflow-x: hidden !important;
  overflow-y: auto  !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding-top:    max(60px, env(safe-area-inset-top))    !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* H2 · Backdrop overlay — appears when sidenav is open                         */
#mySidenav-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    1999;        /* just below the drawer itself */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
  opacity:    0;
}
#mySidenav-backdrop.is-open {
  display: block;
  opacity: 1;
}

/* H3 · Close button — legacy .sidenav only, not .est-drawer                    */
.sidenav:not(.est-drawer) .closebtn {
  position:   absolute  !important;
  top:        12px      !important;
  left:       16px      !important;   /* RTL: close btn on left (start) side */
  right:      auto      !important;
  font-size:  28px      !important;
  line-height: 1        !important;
  color:      #fff      !important;
  z-index:    10;
  padding:    8px       !important;   /* 44×44 tap target */
  min-width:  44px;
  min-height: 44px;
  display:    flex      !important;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   END OF BLOCK H
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BLOCK I — SIDENAV FULL REBUILD (2026-04-14)
   Replaces: .sidenav, #mySidenav legacy CSS
   New class: .est-drawer — transform-based slide, RTL-native
══════════════════════════════════════════════════════════════ */

/* ── Reset legacy sidenav rules that conflict ─────────────── */
#mySidenav.est-drawer,
.est-drawer {
  /* override all Block H + style.css + custom_new.css legacy .sidenav rules */
  width:      min(300px, 88vw) !important;
  height:     100%             !important;
  position:   fixed            !important;
  top:        0                !important;
  right:      0                !important;
  z-index:    2000             !important;
  background: #ffffff          !important;
  overflow-x: hidden           !important;
  overflow-y: auto             !important;
  padding:    0                !important;
  /* transform-based slide (no layout thrash vs width animation) */
  transform:  translateX(100%) !important;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.32s ease !important;
  box-shadow: none             !important;
  display:    flex             !important;
  flex-direction: column       !important;
  border-left: 1px solid #e8e8e8 !important;
}
.est-drawer.is-open {
  transform:  translateX(0)    !important;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .est-drawer { transition: none !important; }
}

/* ── Header ───────────────────────────────────────────────── */
.est-drawer__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  background:      var(--air-primary, #049BD0);
  flex-shrink:     0;
  /* safe area: iOS notch */
  padding-top: max(16px, env(safe-area-inset-top));
}
.est-drawer__logo {
  display:     flex;
  align-items: center;
  line-height: 1;
}
.est-drawer__logo img {
  height:     28px;
  width:      auto;
  display:    block;
  filter:     brightness(0) invert(1); /* ensure white on any bg */
}
.est-drawer__close {
  background:  transparent;
  border:      none;
  color:       rgba(255,255,255,0.9);
  cursor:      pointer;
  padding:     8px;
  min-width:   44px;
  min-height:  44px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition:  background 0.15s;
}
.est-drawer__close:hover { background: rgba(255,255,255,0.15); }

/* ── User identity ────────────────────────────────────────── */
.est-drawer__user {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     20px 20px 16px;
  direction:   rtl;
}
.est-drawer__avatar {
  width:            44px;
  height:           44px;
  border-radius:    50%;
  background:       var(--air-primary-bg, #E4F4FA);
  color:            var(--air-primary, #049BD0);
  font-family:      'Watad', sans-serif;
  font-size:        20px;
  font-weight:      800;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  border:           2px solid var(--air-primary, #049BD0);
}
.est-drawer__user-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}
.est-drawer__user-name {
  font-family:  'Watad', sans-serif;
  font-size:    15px;
  font-weight:  700;
  color:        #222;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}
.est-drawer__user-link {
  font-family: 'Watad', sans-serif;
  font-size:   12px;
  color:       var(--air-primary, #049BD0);
  text-decoration: none;
}
.est-drawer__user-link:hover { text-decoration: underline; }

/* ── Guest CTA buttons ────────────────────────────────────── */
.est-drawer__guest {
  display:   flex;
  gap:       10px;
  padding:   20px 20px 16px;
  direction: rtl;
}
.est-drawer__btn {
  flex:            1;
  text-align:      center;
  padding:         10px 12px;
  border-radius:   10px;
  font-family:     'Watad', sans-serif;
  font-size:       14px;
  font-weight:     700;
  text-decoration: none;
  transition:      background 0.15s, color 0.15s;
  display:         block;
}
.est-drawer__btn--outline {
  border:     2px solid var(--air-primary, #049BD0);
  color:      var(--air-primary, #049BD0);
  background: transparent;
}
.est-drawer__btn--outline:hover {
  background: var(--air-primary-bg, #E4F4FA);
  color:      var(--air-primary, #049BD0);
}
.est-drawer__btn--solid {
  background: var(--air-primary, #049BD0);
  color:      #fff;
  border:     2px solid transparent;
}
.est-drawer__btn--solid:hover {
  background: var(--air-primary-dark, #037aaa);
  color:      #fff;
}

/* ── Divider ──────────────────────────────────────────────── */
.est-drawer__divider {
  height:     1px;
  background: #f0f0f0;
  margin:     4px 0;
  flex-shrink: 0;
}

/* ── Nav links ────────────────────────────────────────────── */
.est-drawer__nav {
  padding:   6px 12px;
  direction: rtl;
  flex-shrink: 0;
}
.est-drawer__nav--secondary {
  margin-top: auto; /* pushes secondary nav down */
}
.est-drawer__link {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         13px 12px;
  border-radius:   10px;
  font-family:     'Watad', sans-serif;
  font-size:       15px;
  font-weight:     600;
  color:           #333;
  text-decoration: none;
  transition:      background 0.15s, color 0.15s;
  margin-bottom:   2px;
  position:        relative;
}
.est-drawer__link:hover {
  background: #f5f5f5;
  color:      #111;
}
.est-drawer__link.is-active {
  background: var(--air-primary-bg, #E4F4FA);
  color:      var(--air-primary, #049BD0);
  font-weight: 700;
}
.est-drawer__link.is-active .est-drawer__icon {
  color: var(--air-primary, #049BD0);
}
/* Accent: "أضف استراحتك" — stands out */
.est-drawer__link--accent {
  color:      var(--air-primary, #049BD0);
  font-weight: 700;
}
.est-drawer__link--accent:hover {
  background: var(--air-primary-bg, #E4F4FA);
}
/* Danger: logout */
.est-drawer__link--danger {
  color: #d9534f;
}
.est-drawer__link--danger:hover {
  background: #fff5f5;
  color:      #c0392b;
}
.est-drawer__icon {
  width:      20px;
  height:     20px;
  flex-shrink: 0;
  color:      #888;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.est-drawer__link:hover .est-drawer__icon { color: #555; }

/* ── Footer strip ─────────────────────────────────────────── */
.est-drawer__footer {
  padding:        16px 20px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  direction:      rtl;
  border-top:     1px solid #f0f0f0;
  flex-shrink:    0;
  /* safe area: iOS home bar */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.est-drawer__footer-brand {
  font-family:  'Watad', sans-serif;
  font-size:    13px;
  font-weight:  800;
  color:        var(--air-primary, #049BD0);
}
.est-drawer__footer-copy {
  font-family: 'Watad', sans-serif;
  font-size:   11px;
  color:       #aaa;
  margin-top:  2px;
}

/* ── Backdrop (keep Block H styles, just ensure display works) */
#mySidenav-backdrop {
  display:          none;
  position:         fixed;
  inset:            0;
  z-index:          1999;
  background:       rgba(0,0,0,0.45);
  backdrop-filter:  blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#mySidenav-backdrop.is-open { display: block; }

/* ══════════════════════════════════════════════════════════════
   END OF BLOCK I
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BLOCK J — SIDENAV CONFLICT RESOLUTION (2026-04-14)
   Block H used width-based animation + !important padding-top
   that fights Block I's transform-based drawer.
   This block wins by specificity (#mySidenav.est-drawer) and
   comes last in cascade.
══════════════════════════════════════════════════════════════ */

#mySidenav.est-drawer {
  /* Kill Block H width/transition interference */
  width:          min(300px, 88vw) !important;
  transform:      translateX(100%) !important;
  transition:     transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.32s ease !important;
  /* Kill Block H padding-top — drawer header handles its own padding */
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  /* Ensure flex column so sections stack */
  display:        flex          !important;
  flex-direction: column        !important;
  overflow-x:     hidden        !important;
  overflow-y:     auto          !important;
  background:     #ffffff       !important;
  box-shadow:     none          !important;
}

#mySidenav.est-drawer.is-open {
  transform:  translateX(0)                         !important;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18)      !important;
}

/* Kill style.css .sidenav a overrides — our drawer links are .est-drawer__link */
#mySidenav.est-drawer a {
  padding:     0    !important;
  font-size:   inherit !important;
  display:     flex !important;
  line-height: inherit !important;
  color:       inherit !important;
}

/* But restore proper styles for our own link class */
#mySidenav.est-drawer .est-drawer__link {
  display:         flex         !important;
  align-items:     center       !important;
  gap:             14px         !important;
  padding:         13px 12px    !important;
  border-radius:   10px         !important;
  font-size:       15px         !important;
  font-weight:     600          !important;
  color:           #333         !important;
  text-decoration: none         !important;
  margin-bottom:   2px          !important;
}
#mySidenav.est-drawer .est-drawer__link:hover {
  background: #f5f5f5 !important;
  color:      #111    !important;
}
#mySidenav.est-drawer .est-drawer__link.is-active {
  background: var(--air-primary-bg, #E4F4FA) !important;
  color:      var(--air-primary, #049BD0)    !important;
  font-weight: 700 !important;
}
#mySidenav.est-drawer .est-drawer__link--accent {
  color: var(--air-primary, #049BD0) !important;
}
#mySidenav.est-drawer .est-drawer__link--danger {
  color: #d9534f !important;
}
#mySidenav.est-drawer .est-drawer__link--danger:hover {
  background: #fff5f5    !important;
  color:      #c0392b    !important;
}

/* Restore btn styles (guest CTA) */
#mySidenav.est-drawer .est-drawer__btn {
  display:    block    !important;
  padding:    10px 12px !important;
  font-size:  14px     !important;
  font-weight: 700     !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════
   END OF BLOCK J
══════════════════════════════════════════════════════════════ */