@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap");

.sh-directory{
  --shd-bg:#0b1320;
  --shd-panel:linear-gradient(180deg, rgba(17,26,40,.96), rgba(10,16,28,.96));
  --shd-border:rgba(255,255,255,.08);
  --shd-text:#eef4fb;
  --shd-muted:#aebfd2;
  --shd-accent:#3dff86;
  --shd-shadow:0 24px 80px rgba(0,0,0,.34);
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--shd-text);
  padding:110px 0 72px;
  background:
    radial-gradient(circle at 12% 12%, rgba(61,255,134,.10), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(97,227,252,.10), transparent 22%),
    linear-gradient(180deg, #0a111b 0%, #09111a 100%);
}
.sh-directory[data-lang="ar"]{font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sh-directory *{box-sizing:border-box}
.sh-directory-shell{width:min(1200px, calc(100% - 32px));margin:0 auto}
.sh-directory-panel{border:1px solid var(--shd-border);border-radius:28px;background:var(--shd-panel);box-shadow:var(--shd-shadow)}
.sh-directory-header{padding:28px 30px;margin-bottom:20px}
.sh-directory-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(61,255,134,.18);background:rgba(61,255,134,.08);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#d9ffe8}
.sh-directory-header h1{margin:16px 0 10px;font-size:clamp(32px,4vw,48px);line-height:1.05;color:#fff}
.sh-directory-header p{margin:0;max-width:760px;color:var(--shd-muted);font-size:16px;line-height:1.8}
.sh-directory-filters{padding:22px 24px;margin-bottom:16px}
.sh-directory-filterGrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(180px,1fr));gap:16px;align-items:end}
.sh-directory-field{display:flex;flex-direction:column;gap:10px}
.sh-directory-field label{font-size:13px;font-weight:800;color:#ffffff}
.sh-directory-field input,
.sh-directory-field select{
  width:100%;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(5,10,18,.78);color:#fff;padding:0 18px;font-size:16px;outline:none;box-shadow:none
}
.sh-directory-field input::placeholder{color:rgba(255,255,255,.86)}
.sh-directory-field input:focus,
.sh-directory-field select:focus{border-color:rgba(61,255,134,.45);box-shadow:0 0 0 3px rgba(61,255,134,.12)}
.sh-directory-field select,
.sh-directory-field option{color:#fff;background:#0a1018}
.sh-directory-field input,.sh-directory-field select{font-weight:700;letter-spacing:.01em}
.sh-directory-field select{color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:0 0 0 #fff}
.sh-directory-field option{color:#fff !important;background:#0a1018 !important;font-weight:700}
.sh-directory-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}
.sh-directory-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:18px;border:1px solid rgba(255,255,255,.1);text-decoration:none;font-size:16px;font-weight:800;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.sh-directory-btn:hover{transform:translateY(-1px)}
.sh-directory-btn-primary{background:linear-gradient(135deg, #3dff86 0%, #61e3fc 100%);color:#06111d;border-color:transparent}
.sh-directory-btn-ghost{background:rgba(255,255,255,.03);color:#fff}
.sh-directory-btn-ghost:hover{background:rgba(255,255,255,.06)}
.sh-directory-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 18px;padding:0 4px}
.sh-directory-meta strong{display:block;color:#fff;font-size:18px}
.sh-directory-meta span,.sh-directory-meta p{color:var(--shd-muted);font-size:14px;line-height:1.7;margin:0}
.sh-directory-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:20px}
.sh-directory-card{overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.sh-directory-cardMedia{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:250px;padding:24px 24px 18px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 50% 18%, rgba(61,255,134,.14), rgba(61,255,134,0) 38%), radial-gradient(circle at 50% 82%, rgba(255,255,255,.05), rgba(255,255,255,0) 58%), linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));overflow:hidden}
.sh-directory-cardMedia::before{content:'';position:absolute;inset:16px 18px 10px;border-radius:26px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);z-index:0}
.sh-directory-cardMedia::after{content:'';position:absolute;left:50%;top:54%;width:62%;height:62%;transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(circle, rgba(61,255,134,.18) 0%, rgba(61,255,134,.06) 38%, rgba(61,255,134,0) 72%);filter:blur(18px);opacity:.95;z-index:0;pointer-events:none}
.sh-directory-cardMedia img{position:relative;z-index:1;max-width:100%;max-height:214px;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(0,0,0,.28));transform:translateY(2px) scale(1.06);transform-origin:center center;transition:transform .22s ease,filter .22s ease}
.sh-directory-card:hover .sh-directory-cardMedia img{transform:translateY(0) scale(1.1);filter:drop-shadow(0 20px 34px rgba(0,0,0,.34))}
.sh-directory-cardPlaceholder{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08);color:#fff;font-size:36px;font-weight:800;box-shadow:0 16px 30px rgba(0,0,0,.18)}
.sh-directory-cardBody{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.sh-directory-cardChips{display:flex;flex-wrap:wrap;gap:8px}
.sh-directory-cardChips span{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:800;color:#ddf4e8}
.sh-directory-cardBody h3{margin:0;font-size:26px;line-height:1.12}
.sh-directory-cardBody h3 a{color:#fff;text-decoration:none}
.sh-directory-cardBody p{margin:0;color:var(--shd-muted);line-height:1.8;font-size:15px}
.sh-directory-cardCta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:16px;border:1px solid rgba(61,255,134,.16);background:rgba(61,255,134,.08);color:#fff;text-decoration:none;font-weight:800}
.sh-directory-cardCta:hover{background:rgba(61,255,134,.14)}

.sh-directory-cardActions{margin-top:auto;display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.sh-directory-cardActions .sh-directory-cardCta{margin-top:0;flex:1 1 180px}
.sh-directory-cardCtaAffiliate{background:#4BD877;border-color:#4BD877;color:#07130d}
.sh-directory-cardCtaAffiliate:hover{background:#44c86e;border-color:#44c86e;color:#07130d}
@media (max-width:640px){.sh-directory-cardActions .sh-directory-cardCta{flex:1 1 100%}}

.sh-directory-empty{padding:42px 32px;text-align:center}
.sh-directory-empty h2{margin:0 0 12px;color:#fff;font-size:28px}
.sh-directory-empty p{margin:0 auto 18px;max-width:620px;color:var(--shd-muted);line-height:1.85}
.sh-directory-pagination{margin-top:26px}
.sh-directory-pagination .page-numbers{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.sh-directory-pagination a,
.sh-directory-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff;text-decoration:none;font-weight:800}
.sh-directory-pagination .current{background:rgba(61,255,134,.12);border-color:rgba(61,255,134,.28)}

@media (max-width: 980px){
  .sh-directory-filterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-directory-field-search{grid-column:1 / -1}
  .sh-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 640px){
  .sh-directory{padding:92px 0 54px}
  .sh-directory-shell{width:min(100% - 20px, 1000px)}
  .sh-directory-header,.sh-directory-filters,.sh-directory-cardBody,.sh-directory-empty{padding:20px}
  .sh-directory-filterGrid,.sh-directory-grid{grid-template-columns:1fr}
  .sh-directory-actions,.sh-directory-meta{flex-direction:column;align-items:stretch}
  .sh-directory-btn{width:100%}
  .sh-directory-cardMedia{min-height:220px;padding:20px 18px 14px}
}

.sh-directory-field select,.sh-directory-field option,.sh-directory-field select:focus,.sh-directory-field select:active{-webkit-text-fill-color:#fff;color:#fff;color-scheme:dark}
.sh-directory-field option:checked{background:#111a26;color:#fff}

.sh-directory-field select,.sh-directory-field option{opacity:1 !important}
.sh-directory-field option:hover,.sh-directory-field option:focus{background:#142033;color:#fff}

.sh-directory-smartRow{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.sh-directory-smartHead{font-size:13px;font-weight:800;color:#dce7f5}
.sh-directory-smartChips{display:flex;flex-wrap:wrap;gap:10px}
.sh-directory-chip{position:relative;display:inline-flex;cursor:pointer}
.sh-directory-chip input{position:absolute;opacity:0;pointer-events:none}
.sh-directory-chip span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#eef4fb;font-size:13px;font-weight:800;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.sh-directory-chip span em{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.06);font-style:normal;font-size:12px;color:#d5e6f8}
.sh-directory-chip:hover span{transform:translateY(-1px);border-color:rgba(61,255,134,.18);background:rgba(255,255,255,.05)}
.sh-directory-chip input:checked + span{background:rgba(61,255,134,.12);border-color:rgba(61,255,134,.34);color:#ffffff}
.sh-directory-chip input:checked + span em{background:rgba(61,255,134,.18);color:#f3fff8}
@media (max-width: 640px){.sh-directory-smartChips{display:grid;grid-template-columns:1fr 1fr}}

@media (max-width:640px){.sh-directory-cardMedia{min-height:206px;padding:18px 16px 12px}.sh-directory-cardMedia::before{inset:12px 12px 8px;border-radius:22px}.sh-directory-cardMedia img{max-height:178px;transform:translateY(1px) scale(1.04)}.sh-directory-card:hover .sh-directory-cardMedia img{transform:translateY(0) scale(1.07)}}


.sh-directory-card.is-media-featured{box-shadow:0 22px 54px rgba(0,0,0,.26)}
.sh-directory-cardMedia.is-media-featured{min-height:278px;padding:28px 28px 20px;background:radial-gradient(circle at 50% 16%, rgba(61,255,134,.22), rgba(61,255,134,0) 38%),radial-gradient(circle at 50% 84%, rgba(255,255,255,.07), rgba(255,255,255,0) 58%),linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));}
.sh-directory-cardMedia.is-media-featured::before{inset:14px 16px 8px;border-color:rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 44px rgba(0,0,0,.12)}
.sh-directory-cardMedia.is-media-featured::after{width:70%;height:70%;top:53%;background:radial-gradient(circle, rgba(61,255,134,.26) 0%, rgba(61,255,134,.1) 40%, rgba(61,255,134,0) 74%);filter:blur(22px)}
.sh-directory-cardMedia.is-media-featured img{max-height:238px;transform:translateY(0) scale(1.12);filter:drop-shadow(0 24px 38px rgba(0,0,0,.34))}
.sh-directory-card.is-media-featured:hover .sh-directory-cardMedia.is-media-featured img{transform:translateY(-2px) scale(1.16);filter:drop-shadow(0 28px 44px rgba(0,0,0,.4))}
@media (max-width:640px){.sh-directory-cardMedia.is-media-featured{min-height:226px;padding:20px 18px 14px}.sh-directory-cardMedia.is-media-featured img{max-height:188px;transform:translateY(0) scale(1.08)}.sh-directory-card.is-media-featured:hover .sh-directory-cardMedia.is-media-featured img{transform:translateY(-1px) scale(1.1)}}

.sh-directory-cardMediaBadges{position:absolute;top:18px;left:18px;right:18px;display:flex;gap:8px;flex-wrap:wrap;z-index:2;pointer-events:none}
.sh-directory-cardMediaBadge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(10,18,28,.68);border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f4fff8;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.sh-directory-cardMediaBadge.is-media-featured{background:linear-gradient(180deg, rgba(61,255,134,.18), rgba(10,18,28,.78));border-color:rgba(61,255,134,.24);color:#e9fff1}
.sh-directory-card.is-media-featured .sh-directory-cardMediaBadges{top:16px;left:16px;right:16px}
@media (max-width:640px){.sh-directory-cardMediaBadges{top:14px;left:14px;right:14px;gap:6px}.sh-directory-cardMediaBadge{padding:7px 10px;font-size:10px}}


.sh-directory[data-lang="ar"] .sh-directory-chip span{direction:rtl;justify-content:flex-start;text-align:right;}
.sh-directory[data-lang="ar"] .sh-directory-chip span em{order:-1;}
.sh-directory[data-lang="ar"] .sh-directory-field select{color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:0 0 0 #fff;}
.sh-directory[data-lang="ar"] .sh-directory-field select option{color:#fff !important;background:#0a1018 !important;}


.sh-directory-headerIntro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:18px;align-items:start}
.sh-directory-bridgeCard{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.sh-directory-bridgeCard strong{color:#fff;font-size:14px;line-height:1.7}
.sh-directory-bridgeLink,.sh-directory-metaLink{display:inline-flex;align-items:center;gap:8px;color:#dffbea;text-decoration:none;font-weight:800}
.sh-directory-bridgeLink:hover,.sh-directory-metaLink:hover{color:#fff}
.sh-directory-meta{margin:18px 0 22px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.9fr);gap:18px;align-items:start}
.sh-directory-metaMain{display:flex;flex-direction:column;gap:10px}
.sh-directory-metaStat strong{display:block;color:#fff;font-size:18px;line-height:1.2}
.sh-directory-metaStat span{display:block;margin-top:6px;color:#d4deea;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.sh-directory-metaSummary{margin:0;color:#dfe8f2;line-height:1.8}
.sh-directory-metaAside{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.sh-directory-metaAside p{margin:0;color:var(--shd-muted);font-size:14px;line-height:1.75}
.sh-directory-metaLink span{color:#fff}
.sh-directory-cardEyebrow{min-height:18px}
.sh-directory-cardEyebrow strong{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(61,255,134,.08);border:1px solid rgba(61,255,134,.16);color:#ecfff2;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.sh-directory-cardBody{gap:10px}
.sh-directory-cardBody h3{font-size:24px}
.sh-directory-cardBody p{color:#c8d4e1}
.sh-directory-cardActions{padding-top:4px}
.sh-directory-cardCta{min-height:46px}
.sh-directory[data-lang="ar"] .sh-directory-headerIntro{direction:rtl}
.sh-directory[data-lang="ar"] .sh-directory-bridgeCard,.sh-directory[data-lang="ar"] .sh-directory-metaAside{text-align:right}
.sh-directory[data-lang="ar"] .sh-directory-metaLink{justify-content:flex-start}
@media (max-width:980px){.sh-directory-headerIntro,.sh-directory-meta{grid-template-columns:1fr}.sh-directory-bridgeCard{max-width:none}}
@media (max-width:640px){.sh-directory-meta{margin:16px 0 20px}.sh-directory-cardBody h3{font-size:22px}.sh-directory-cardChips span{max-width:100%;white-space:normal}}
