.mkcc-directory{--mkcc-primary:#1F2A44;--mkcc-accent:#FF742C;font:inherit;color:#20232a}.mkcc-dir-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.mkcc-dir-head h2{margin:0 0 6px;font-size:clamp(28px,4vw,44px);color:var(--mkcc-primary)}.mkcc-dir-head p{margin:0;color:#667085}.mkcc-count{font-weight:700;color:var(--mkcc-primary)}.mkcc-searchbar{display:grid;grid-template-columns:minmax(220px,2fr) repeat(4,minmax(130px,1fr)) auto;gap:10px;background:#f7f8fa;border:1px solid #e4e7ec;border-radius:16px;padding:14px;margin-bottom:20px}.mkcc-searchbar input,.mkcc-searchbar select,.mkcc-searchbar button{width:100%;min-height:44px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;padding:0 12px;font:inherit}.mkcc-searchbar button{cursor:pointer;background:var(--mkcc-primary);color:#fff;border-color:var(--mkcc-primary);font-weight:700}.mkcc-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.mkcc-card{display:flex;flex-direction:column;min-height:100%;border:1px solid #e4e7ec;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 4px 18px rgba(31,42,68,.06)}.mkcc-card-top{padding:20px 20px 10px}.mkcc-card h3{margin:0 0 8px;font-size:21px;line-height:1.25;color:var(--mkcc-primary)}.mkcc-location{margin:0;color:#667085}.mkcc-meta{display:flex;gap:7px;flex-wrap:wrap;padding:0 20px 14px}.mkcc-badge{display:inline-flex;align-items:center;border-radius:999px;background:#f1f3f6;padding:5px 9px;font-size:12px;font-weight:700}.mkcc-badge.accent{background:color-mix(in srgb,var(--mkcc-accent) 14%,white);color:#7a3300}.mkcc-card-info{padding:0 20px 16px;color:#475467;font-size:14px}.mkcc-card-actions{display:flex;gap:8px;padding:16px 20px 20px;margin-top:auto}.mkcc-card-actions button,.mkcc-card-actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:10px;padding:10px 13px;font-weight:700;border:1px solid var(--mkcc-primary);cursor:pointer}.mkcc-card-actions button{background:var(--mkcc-primary);color:#fff}.mkcc-card-actions a{color:var(--mkcc-primary);background:#fff}.mkcc-loading,.mkcc-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:#667085}.mkcc-pagination{display:flex;justify-content:center;gap:7px;margin-top:24px;flex-wrap:wrap}.mkcc-pagination button{border:1px solid #d0d5dd;background:#fff;border-radius:8px;padding:7px 11px;cursor:pointer}.mkcc-pagination button.active{background:var(--mkcc-primary);color:#fff;border-color:var(--mkcc-primary)}.mkcc-modal[hidden]{display:none}.mkcc-modal{position:fixed;z-index:999999;inset:0;display:grid;place-items:center;padding:20px}.mkcc-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7)}.mkcc-modal-card{position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.35);transition:width .22s ease,max-height .22s ease,border-radius .22s ease}.mkcc-modal-card.is-expanded{width:min(1180px,calc(100vw - 32px));max-height:94vh}.mkcc-modal-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:10px 12px;background:rgba(255,255,255,.97);border-bottom:1px solid #eaecf0;backdrop-filter:blur(8px)}.mkcc-modal-resize,.mkcc-modal-close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border:1px solid #d0d5dd;background:#fff;border-radius:9px;padding:6px 10px;color:#475467;font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer}.mkcc-modal-resize:hover,.mkcc-modal-close:hover{border-color:var(--mkcc-primary);color:var(--mkcc-primary);background:#f8fafc}.mkcc-modal-resize:disabled{opacity:.4;cursor:not-allowed;border-color:#e4e7ec;background:#f9fafb;color:#98a2b3}.mkcc-modal-close{width:36px;padding:0;font-size:26px;font-weight:400}.mkcc-modal-content{padding:24px 26px 26px}.mkcc-detail h2{color:var(--mkcc-primary);margin-top:0}.mkcc-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}.mkcc-detail-item{border-top:1px solid #eee;padding-top:10px}.mkcc-detail-item strong{display:block;color:#344054;font-size:13px;margin-bottom:3px}.mkcc-detail-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.mkcc-detail-links a{background:var(--mkcc-primary);color:#fff!important;text-decoration:none;padding:9px 12px;border-radius:8px;font-weight:700}@media(max-width:1100px){.mkcc-searchbar{grid-template-columns:repeat(3,minmax(0,1fr))}.mkcc-results{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.mkcc-resize-label{display:none}.mkcc-modal{padding:10px}.mkcc-modal-card,.mkcc-modal-card.is-expanded{width:100%;max-height:94vh}.mkcc-modal-content{padding:20px}.mkcc-dir-head{align-items:flex-start;flex-direction:column}.mkcc-searchbar{grid-template-columns:1fr}.mkcc-results{grid-template-columns:1fr}.mkcc-detail-grid{grid-template-columns:1fr}}
.mkcc-detail-item a{color:var(--mkcc-primary);font-weight:650;text-decoration:none}.mkcc-detail-item a:hover{text-decoration:underline}.mkcc-detail-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid #e4e7ec}.mkcc-tool-btn{appearance:none;border:1px solid #d0d5dd!important;background:#fff!important;color:var(--mkcc-primary)!important;border-radius:9px!important;padding:9px 12px!important;font:inherit!important;font-weight:700!important;line-height:1.2!important;cursor:pointer}.mkcc-tool-btn:hover{border-color:var(--mkcc-primary)!important}
@media print{body.mkcc-print-mode *{visibility:hidden!important}body.mkcc-print-mode .mkcc-modal-card,body.mkcc-print-mode .mkcc-modal-card *{visibility:visible!important}body.mkcc-print-mode .mkcc-modal-card{position:absolute!important;left:0!important;top:0!important;width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important;padding:20px!important}body.mkcc-print-mode .mkcc-modal-toolbar,body.mkcc-print-mode .mkcc-modal-close,body.mkcc-print-mode .mkcc-detail-tools{display:none!important}body.mkcc-print-mode .mkcc-modal-content{padding:0!important}body.mkcc-print-mode .mkcc-detail-links a{color:#111!important;background:none!important;border:1px solid #bbb!important}}

/* EN / FR / AR directory language switcher */
.mkcc-dir-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.mkcc-directory[dir="rtl"]{text-align:right}.mkcc-directory[dir="rtl"] .mkcc-dir-head-side{align-items:flex-start}.mkcc-directory[dir="rtl"] .mkcc-searchbar select,.mkcc-directory[dir="rtl"] .mkcc-searchbar input{text-align:right}.mkcc-directory[dir="rtl"] .mkcc-card-actions,.mkcc-directory[dir="rtl"] .mkcc-meta,.mkcc-directory[dir="rtl"] .mkcc-detail-links,.mkcc-directory[dir="rtl"] .mkcc-detail-tools,.mkcc-directory[dir="rtl"] .mkcc-modal-toolbar{direction:rtl}.mkcc-directory[dir="rtl"] .mkcc-consent{flex-direction:row}.mkcc-directory[dir="rtl"] .mkcc-modal-toolbar{justify-content:flex-start}.mkcc-directory[dir="rtl"] .mkcc-detail-item strong,.mkcc-directory[dir="rtl"] .mkcc-detail-item span{display:block;text-align:right}
@media(max-width:700px){.mkcc-dir-head-side{width:100%;align-items:flex-start}}


/* v1.2.4 — theme isolation + container responsive layout
 * The directory must respond to the width WordPress/the active theme actually gives it,
 * not only to the browser viewport. This prevents Hostinger/theme sidebars from squeezing
 * filters and cards while desktop media queries are still active.
 */
.mkcc-directory{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  container-name:mkcc-directory;
  container-type:inline-size;
}
.mkcc-directory *,
.mkcc-directory *::before,
.mkcc-directory *::after{box-sizing:border-box}

/* Keep theme/global form rules from changing the directory controls. */
.mkcc-directory .mkcc-searchbar{
  width:100%;
  max-width:100%;
  min-width:0;
  align-items:stretch;
}
.mkcc-directory .mkcc-searchbar > *{
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}
.mkcc-directory .mkcc-search{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.mkcc-directory .mkcc-searchbar input,
.mkcc-directory .mkcc-searchbar select,
.mkcc-directory .mkcc-searchbar button{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 12px!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:10px!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-style:normal!important;
  line-height:1.2!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  box-shadow:none!important;
}
.mkcc-directory .mkcc-searchbar input,
.mkcc-directory .mkcc-searchbar select{
  color:#20232a!important;
  background-color:#fff!important;
  border-color:#d0d5dd!important;
}
.mkcc-directory .mkcc-searchbar select{
  appearance:auto!important;
  -webkit-appearance:auto!important;
}
.mkcc-directory .mkcc-searchbar button[data-mkcc="reset"]{
  min-width:82px!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  writing-mode:horizontal-tb!important;
  background:var(--mkcc-primary)!important;
  color:#fff!important;
  border-color:var(--mkcc-primary)!important;
  cursor:pointer!important;
  font-weight:700!important;
}

/* Cards also follow the real content width, not the viewport width. */
.mkcc-directory .mkcc-results{min-width:0}
.mkcc-directory .mkcc-card{min-width:0}

@container mkcc-directory (max-width: 980px){
  .mkcc-directory .mkcc-searchbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .mkcc-directory .mkcc-results{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@container mkcc-directory (max-width: 680px){
  .mkcc-directory .mkcc-dir-head{align-items:flex-start;flex-direction:column}
  .mkcc-directory .mkcc-searchbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mkcc-directory .mkcc-results{grid-template-columns:1fr!important}
}
@container mkcc-directory (max-width: 470px){
  .mkcc-directory .mkcc-searchbar{grid-template-columns:1fr!important}
  .mkcc-directory .mkcc-dir-head h2{font-size:clamp(28px,9cqw,38px)}
}

/* Fallback for older browsers without CSS container queries. */
@supports not (container-type:inline-size){
  .mkcc-directory .mkcc-searchbar{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important}
  .mkcc-directory .mkcc-results{grid-template-columns:repeat(auto-fit,minmax(245px,1fr))!important}
}
