/* Stage21: services dropdown/modal click fix + lighter site typography */

/* 1) Lighter typography across the theme without breaking icon fonts */
html[lang],
body,
.main-wrapper,
.page-content,
.content,
.card,
.form-group,
.form-control,
.form-select,
input,
textarea,
select,
button,
label,
p,
span,
a,
li,
td,
th,
small,
.badge,
.dropdown-item,
.nav-menu a,
.balance-box,
.icon-btn,
.btn,
.btn-big-primary,
.btn-big-secondary,
.select2-container,
.select2-results__option,
.select2-selection__rendered{
  font-family:'Alexandria','Tajawal',sans-serif!important;
  font-weight:500!important;
}

h1,h2,h3,h4,h5,h6,
.page-header .header-title h1,
.sidebar .brand,
.sidebar .username,
.sidebar .menu-title,
.sidebar .side-title,
.nav-menu li.active>a,
.card-value,
.balance-amount,
.section-title h2,
.category-title,
.service-name,
.form-label,
.services-stage20 table thead th,
.modal-header h3{
  font-weight:700!important;
}

/* Keep Font Awesome / Tabler / custom icons working */
.fa,.fas,.far,.fal,.fad,.fab,
.ti,.icon,[class^="ti-"],[class*=" ti-"],[class^="fa-"],[class*=" fa-"]{
  font-family:inherit;
}
.fa,.fas,.far,.fal,.fad,.fab{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free","Font Awesome 5 Pro","Font Awesome 5 Brands"!important;
}
.fab{font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"!important;}
.ti,[class^="ti-"],[class*=" ti-"]{font-family:"tabler-icons"!important;}

/* 2) Services filter dropdown: independent from Bootstrap if Bootstrap dropdown is blocked */
.services-stage20 .filter-button.dropdown{
  position:relative!important;
  z-index:50!important;
}
.services-stage20 .filter-button>.dropdown-toggle{
  cursor:pointer!important;
  user-select:none!important;
}
.services-stage20 .filter-button>.dropdown-menu{
  display:none!important;
  position:absolute!important;
  top:calc(100% + 10px)!important;
  inset-inline-start:0!important;
  right:auto;
  left:auto;
  min-width:340px!important;
  max-width:min(420px, calc(100vw - 32px))!important;
  max-height:460px!important;
  overflow:auto!important;
  padding:10px!important;
  margin:0!important;
  background:var(--card-bg)!important;
  color:var(--text-main)!important;
  border:1px solid var(--border-color)!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px var(--shadow-color)!important;
  z-index:10060!important;
}
html[dir="rtl"] .services-stage20 .filter-button>.dropdown-menu,
html[lang="ar"] .services-stage20 .filter-button>.dropdown-menu{
  right:0!important;
  left:auto!important;
  text-align:right!important;
}
.services-stage20 .filter-button.open>.dropdown-menu,
.services-stage20 .filter-button.show>.dropdown-menu,
.services-stage20 .filter-button>.dropdown-menu.show{
  display:block!important;
}
.services-stage20 .filter-button>.dropdown-menu li{
  list-style:none!important;
}
.services-stage20 .filter-button>.dropdown-menu .dropdown-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  color:var(--text-main)!important;
  text-decoration:none!important;
  white-space:normal!important;
  line-height:1.5!important;
}
.services-stage20 .filter-button>.dropdown-menu .dropdown-item:hover,
.services-stage20 .filter-button>.dropdown-menu .dropdown-item.active{
  background:var(--main-color)!important;
  color:#fff!important;
}
.services-stage20 .filter-button>.dropdown-menu .dropdown-item:hover i,
.services-stage20 .filter-button>.dropdown-menu .dropdown-item.active i{
  color:#fff!important;
}

/* 3) Services modal: hidden by default, opens only with .show from Stage21 JS */
.modal.service-modal{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.modal.service-modal.show,
.modal.service-modal.stage21-open{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  position:fixed!important;
  inset:0!important;
  z-index:10070!important;
}
.modal.service-modal .modal-overlay{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.62)!important;
}
.modal.service-modal .modal-box{
  position:relative!important;
  z-index:2!important;
  max-height:calc(100vh - 48px)!important;
  overflow:auto!important;
}

@media(max-width:767px){
  .services-stage20 .filter-button>.dropdown-menu{
    min-width:min(340px, calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    max-height:70vh!important;
  }
}