/* ESHRAQAT V11 — 2026-11-03. Targeted fixes for course listing filter, banner & course detail.
   Existing marketing links, forms, registration fields and course data are untouched. */
/* Desktop: compact course header; never overlap the registration card. */
body.esh9-listing .page_banner,body.esh9-detail .page_banner{overflow:visible!important}
body.esh9-detail .course_details_section .sidebar .course_info_card{margin-top:0!important;position:relative!important}
body.esh9-detail .page_banner .content_wrapper{min-height:250px!important;padding-block:34px!important}
body.esh9-detail .page_banner .page_title{font-size:clamp(29px,3.2vw,43px)!important;line-height:1.45!important}
body.esh9-detail .page_banner .inner_content_html{margin-top:12px!important;line-height:1.85!important;font-size:15px!important}
body.esh9-detail .page_banner .inner_content_html p{margin-bottom:0!important}
/* Filter panel moved to the document body to escape stacking contexts. It is intentionally
   higher than the sticky header, the mobile navigation drawer and the floating contact buttons. */
body.esh9-listing .filter_offcanvas.position-fixed{
  position:fixed!important;inset:0 0 0 auto!important;right:0!important;left:auto!important;
  width:min(390px,94vw)!important;max-width:94vw!important;height:100dvh!important;
  z-index:20021!important;transform:translate3d(105%,0,0)!important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)!important;
  background:#fff!important;box-shadow:-18px 0 65px rgba(12,35,23,.22)!important;
  border-radius:24px 0 0 24px!important;visibility:hidden!important;display:block!important;
  direction:rtl!important;overflow:hidden!important;
}
body.esh9-listing .filter_offcanvas.position-fixed.active{
  transform:translate3d(0,0,0)!important;visibility:visible!important;
}
body.esh9-listing .filter_offcanvas.position-fixed>.content_wrapper{
  height:100%!important;max-height:100dvh!important;padding:90px 21px 30px!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
}
body.esh9-listing .filter_offcanvas .close_btn_wrap{
  position:absolute!important;top:0!important;left:0!important;right:0!important;z-index:3!important;
  min-height:75px!important;padding:13px 18px!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;background:#f9fbf8!important;border-bottom:1px solid #e5ebdf!important;
}
body.esh9-listing .filter_offcanvas .esh11-filter-title{font-weight:900;color:#244d39;font-size:19px;display:flex;align-items:center;gap:9px}
body.esh9-listing .filter_offcanvas .esh11-filter-title i{color:#b99b4f;font-size:18px}
body.esh9-listing .filter_offcanvas .offCanvas_close_btn{
  width:47px!important;height:47px!important;min-width:47px!important;display:grid!important;place-items:center!important;
  background:#fff!important;color:#244e39!important;border:1px solid #dce6dc!important;
  border-radius:14px!important;cursor:pointer!important;box-shadow:0 3px 11px rgba(25,54,33,.06)!important;
}
body.esh9-listing .filter_offcanvas .offCanvas_close_btn:hover{color:#fff!important;background:#205941!important}
body.esh9-listing .filter_offcanvas .offCanvas_close_btn i{font-size:23px!important}
body.esh9-listing .filter_offcanvas .widget{padding-block:12px!important}
body.esh9-listing .filter_offcanvas .widget_title{font-size:17px!important;font-weight:850!important;color:#264e3a!important}
body.esh9-listing .filter_offcanvas .checkbox_item{padding:6px 0!important}
body.esh9-listing .filter_offcanvas .checkbox_item label{cursor:pointer!important}
body.esh9-listing .esh11-filter-overlay{
  position:fixed!important;inset:0!important;z-index:20020!important;background:rgba(7,25,16,.58)!important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0!important;
  visibility:hidden!important;pointer-events:none!important;transition:opacity .24s ease!important;
}
body.esh9-listing .esh11-filter-overlay.active{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body.esh11-filter-open{overflow:hidden!important}
body.esh9-listing .offCanvas_open_btn{border-color:#d8e7da!important;background:#1d6047!important;color:#fff!important;border-radius:12px!important}
body.esh9-listing .offCanvas_open_btn:hover{background:#174b37!important}
body.esh9-listing .courses_archive_section #coursesBlocks>.row>.col.esh11-hidden{display:none!important}
body.esh9-listing .esh11-no-results{grid-column:1/-1;text-align:center;padding:35px 15px;background:#fff;color:#496953;border:1px dashed #b6c9b8;border-radius:17px;font-size:16px;line-height:1.7}
body.esh9-listing .filter_result{font-variant-numeric:tabular-nums}
@media(max-width:767.98px){
  /* Responsive catalog header: preserve 100% of the title, description, breadcrumb and form. */
  body.esh9-listing .page_banner{padding:14px 0 19px!important;overflow:hidden!important}
  body.esh9-listing .page_banner .container{padding-inline:12px!important}
  body.esh9-listing .page_banner .content_wrapper,
  body.esh9-listing .page_banner .content_wrapper_sm{
    min-height:0!important;height:auto!important;padding:22px 18px 25px!important;
    border-radius:22px!important;align-items:flex-start!important;background-position:center!important;
  }
  body.esh9-listing .page_banner .content_wrapper>.row{margin:0!important;width:100%!important;}
  body.esh9-listing .page_banner .content_wrapper>.row>.col-xl-8{padding:0!important;}
  body.esh9-listing .page_banner .esh9-kicker{margin-bottom:12px!important;font-size:11px!important;line-height:1.45!important;padding:6px 11px!important}
  body.esh9-listing .page_banner .breadcrumb_nav{gap:7px!important;margin-bottom:12px!important}
  body.esh9-listing .page_banner .breadcrumb_nav li{font-size:11px!important}
  body.esh9-listing .page_banner .page_title{font-size:clamp(26px,7.4vw,33px)!important;line-height:1.3!important;margin-bottom:8px!important}
  body.esh9-listing .page_banner .page_description{font-size:13px!important;line-height:1.75!important;margin-bottom:12px!important;max-width:100%!important}
  body.esh9-listing .page_banner form{width:100%!important;margin:0!important}
  body.esh9-listing .page_banner .form_item:has(.btn),
  body.esh9-listing .page_banner .form_item{
    display:grid!important;grid-template-columns:minmax(0,1fr) 79px!important;align-items:stretch!important;gap:0!important;
    width:100%!important;max-width:100%!important;min-width:0!important;margin:8px 0 0!important;
    border-radius:14px!important;min-height:53px!important;overflow:hidden!important;padding:3px!important;
  }
  body.esh9-listing .page_banner .form_item input[type=search]{
    height:47px!important;min-height:47px!important;min-width:0!important;width:100%!important;
    padding:0 11px!important;margin:0!important;font-size:13px!important;border:0!important;border-radius:11px!important;
    background:#fff!important;box-shadow:none!important;
  }
  body.esh9-listing .page_banner .form_item .btn{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;height:47px!important;min-height:47px!important;
    margin:0!important;padding:5px 8px!important;border-radius:11px!important;white-space:nowrap!important;
    font-size:14px!important;
  }
  body.esh9-listing .page_banner .form_item .btn span{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important}
  body.esh9-listing .page_banner .form_item .btn small{font-size:14px!important}
  body.esh9-listing .courses_archive_section{padding-top:26px!important}
  body.esh9-listing .filter_topbar{padding:12px!important;gap:9px!important}
  body.esh9-listing .filter_topbar .filter_result{font-size:12px!important}
  body.esh9-listing .filter_buttons_list{gap:8px!important;flex-wrap:wrap!important}
  body.esh9-listing .filter_buttons_list button,body.esh9-listing .filter_buttons_list select{min-height:43px!important;font-size:13px!important}
  /* Course details: compact hero without removing any text or changing registration. */
  body.esh9-detail .page_banner{padding:14px 0 18px!important;overflow:hidden!important}
  body.esh9-detail .page_banner .container{padding-inline:12px!important}
  body.esh9-detail .page_banner .content_wrapper{min-height:0!important;padding:25px 19px!important;border-radius:21px!important}
  body.esh9-detail .page_banner .page_title{font-size:clamp(25px,7vw,34px)!important;line-height:1.4!important;margin-bottom:9px!important}
  body.esh9-detail .page_banner .breadcrumb_nav{gap:6px!important;margin-bottom:11px!important}
  body.esh9-detail .page_banner .breadcrumb_nav li{font-size:11px!important}
  body.esh9-detail .page_banner .esh9-kicker{margin-bottom:13px!important;font-size:11px!important}
  body.esh9-detail .page_banner .inner_content_html{margin-top:8px!important;font-size:13px!important;line-height:1.75!important}
  body.esh9-detail .page_banner .esh9-banner-media{opacity:.08!important}
  body.esh9-detail .course_details_section{padding-top:20px!important}
  body.esh9-detail .course_details_section .course_info_card{margin-top:0!important;margin-bottom:22px!important}
}
@media(prefers-reduced-motion:reduce){body.esh9-listing .filter_offcanvas.position-fixed,body.esh9-listing .esh11-filter-overlay{transition:none!important}}
/* Filter choices: comfortable hit areas, readable labels, no icon/text collisions. */
body.esh9-listing .filter_offcanvas .checkbox_item{
 padding:9px 6px 9px 38px!important;position:relative!important;margin-bottom:6px!important;
 min-height:40px!important;display:flex!important;align-items:center!important;border-radius:11px!important;
}
body.esh9-listing .filter_offcanvas .checkbox_item:has(input:checked){background:#f1f7f1!important}
body.esh9-listing .filter_offcanvas .checkbox_item input[type=radio],
body.esh9-listing .filter_offcanvas .checkbox_item input[type=checkbox]{
 right:7px!important;top:50%!important;transform:translateY(-50%)!important;
 width:20px!important;height:20px!important;border-radius:50%!important;
 border:2px solid #a6b7a8!important;appearance:none!important;-webkit-appearance:none!important;
 margin:0!important;box-shadow:none!important;background:#fff!important;
}
body.esh9-listing .filter_offcanvas .checkbox_item input:checked{border-color:#226447!important;background:#226447!important}
body.esh9-listing .filter_offcanvas .checkbox_item input:checked:before{
 content:""!important;opacity:1!important;width:8px!important;height:8px!important;
 background:#fff!important;border-radius:50%!important;top:50%!important;right:50%!important;
 transform:translate(50%,-50%)!important;font-size:0!important;
}
body.esh9-listing .filter_offcanvas .checkbox_item label{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:12px!important;width:100%!important;min-width:0!important;margin:0!important;
 font-size:14.5px!important;line-height:1.6!important;color:#334c3e!important;
}
body.esh9-listing .filter_offcanvas .checkbox_item label span:last-child{white-space:nowrap!important;color:#708476!important}
body.esh9-listing .filter_offcanvas .checkbox_item:hover{background:#f6f9f5!important}
body.esh9-listing .filter_offcanvas .widget .card{padding-top:12px!important}
body.esh9-listing .filter_offcanvas .offCanvas_close_btn svg{width:24px!important;height:24px!important;display:block!important}
/* RTL labels remain legible: reserve space on the right for each radio circle. */
body.esh9-listing .filter_offcanvas .checkbox_item{padding:9px 40px 9px 6px!important}
/* CSS chevron instead of dependency on an icon font. */
body.esh9-listing .filter_offcanvas .widget_title:before{
 content:""!important;font-family:inherit!important;position:absolute!important;left:3px!important;top:3px!important;
 width:10px!important;height:10px!important;border-left:2px solid #6a8a71!important;border-top:2px solid #6a8a71!important;
 transform:rotate(45deg)!important;transition:transform .2s!important;
}
body.esh9-listing .filter_offcanvas .widget_title[aria-expanded=false]:before{transform:rotate(-135deg)!important}