:root{
--fb-blue:#1877F2;
--fb-blue-hover:#166FE5;
--fb-bg:#F0F2F5;
--fb-card:#FFFFFF;
--fb-border:#DADDE1;
--fb-text:#050505;
--fb-muted:#65676B;
--fb-green:#42B72A;
--fb-green-hover:#36A420;
--fb-red:#E41E3F;
--radius:12px;
--shadow:0 1px 2px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
body{
margin:0;
font-family:'Cairo',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--fb-bg);
color:var(--fb-text);
direction:rtl;
}
a{text-decoration:none;color:inherit}
.page-wrapper{
max-width:1120px;
margin:0 auto;
padding:14px 12px 35px;
}
.hero-card,
.section-card{
background:var(--fb-card);
border:1px solid var(--fb-border);
border-radius:var(--radius);
box-shadow:var(--shadow);
margin-bottom:12px;
}
.hero-card{
padding:18px;
}
.hero-top{
display:flex;
align-items:center;
gap:12px;
}
.hero-icon{
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#E7F3FF;
color:var(--fb-blue);
font-size:22px;
flex:0 0 auto;
}
.hero-title h1{
margin:0;
font-size:24px;
line-height:1.3;
font-weight:800;
}
.hero-title p{
margin:4px 0 0;
color:var(--fb-muted);
font-size:14px;
line-height:1.7;
}
.hero-stats{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.stat-pill{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 11px;
background:#F0F2F5;
border:1px solid var(--fb-border);
border-radius:999px;
font-size:13px;
color:var(--fb-muted);
font-weight:700;
}
.stat-pill strong{color:var(--fb-text)}
.stat-pill.blue{background:#E7F3FF;color:var(--fb-blue);border-color:#D8E9FF}
.stat-pill.green{background:#E8F5E4;color:#18720D;border-color:#D6EFCF}
.stat-pill.orange{background:#FFF4E5;color:#9A5A00;border-color:#FFE0AD}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.btn{
min-height:40px;
border:none;
border-radius:8px;
padding:9px 14px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
font-family:inherit;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:.15s ease;
}
.btn-blue{background:var(--fb-blue);color:#fff}
.btn-blue:hover{background:var(--fb-blue-hover)}
.btn-green{background:var(--fb-green);color:#fff}
.btn-green:hover{background:var(--fb-green-hover)}
.btn-light{background:#E4E6EB;color:#050505}
.btn-light:hover{background:#D8DADF}
.btn-red{background:var(--fb-red);color:#fff}
.section-card{padding:14px}
.section-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}
.section-title{
display:flex;
align-items:center;
gap:8px;
font-weight:800;
font-size:17px;
}
.section-title i{color:var(--fb-blue)}
.section-caption{
color:var(--fb-muted);
font-size:13px;
margin:0;
}
.search-form{
display:grid;
grid-template-columns:1fr 260px auto;
gap:10px;
align-items:end;
}
.field label{
display:block;
font-size:12px;
color:var(--fb-muted);
margin-bottom:5px;
font-weight:700;
}
.input,
.select{
width:100%;
min-height:40px;
border:1px solid #CCD0D5;
border-radius:8px;
background:#fff;
padding:8px 10px;
font-family:inherit;
font-size:14px;
outline:none;
}
.input:focus,
.select:focus{
border-color:var(--fb-blue);
box-shadow:0 0 0 2px rgba(24,119,242,.14);
}
.docs-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
.doc-card{
background:#fff;
border:1px solid var(--fb-border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:12px;
min-height:150px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.doc-head{
display:flex;
gap:9px;
align-items:flex-start;
}
.doc-icon{
width:38px;
height:38px;
border-radius:10px;
background:#E7F3FF;
color:var(--fb-blue);
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
font-size:18px;
}
.doc-title{
margin:0;
font-size:14px;
line-height:1.45;
font-weight:800;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.doc-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:10px 0;
}
.mini-pill{
display:inline-flex;
align-items:center;
gap:5px;
background:#F0F2F5;
color:var(--fb-muted);
border-radius:999px;
padding:5px 8px;
font-size:12px;
font-weight:700;
}
.mini-pill a{color:var(--fb-blue)}
.doc-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
margin-top:auto;
}
.doc-actions .btn{
min-height:36px;
padding:7px 8px;
font-size:13px;
}
.empty-box{
text-align:center;
color:var(--fb-muted);
padding:30px 12px;
background:#fff;
border:1px dashed var(--fb-border);
border-radius:var(--radius);
}
.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin:16px 0;
flex-wrap:wrap;
}
.page-info{
color:var(--fb-muted);
font-size:13px;
font-weight:700;
padding:8px 10px;
}
.popup-backdrop{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
z-index:9999;
align-items:center;
justify-content:center;
padding:15px;
}
.popup-backdrop.show{display:flex}
.popup-dialog{
width:100%;
max-width:420px;
background:#fff;
border-radius:14px;
box-shadow:0 12px 35px rgba(0,0,0,.25);
overflow:hidden;
}
.popup-head{
padding:14px 16px;
border-bottom:1px solid var(--fb-border);
display:flex;
align-items:center;
justify-content:space-between;
}
.popup-head h3{margin:0;font-size:17px;font-weight:800}
.close-btn{
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#E4E6EB;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
.popup-body{padding:16px;color:var(--fb-muted);line-height:1.8;font-size:14px}
.popup-actions{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap}
.popup-actions .btn{flex:1}
@media(max-width: 1024px){
.docs-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width: 768px){
.page-wrapper{padding:10px 8px 25px}
.hero-card{padding:14px}
.hero-title h1{font-size:20px}
.hero-title p{font-size:13px}
.hero-actions .btn{flex:1 1 calc(50% - 8px)}
.section-header{display:block}
.section-caption{margin-top:4px}
.search-form{grid-template-columns:1fr;gap:9px}
.docs-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
.doc-card{padding:9px;min-height:145px;border-radius:10px}
.doc-head{gap:7px}
.doc-icon{width:32px;height:32px;border-radius:9px;font-size:15px}
.doc-title{font-size:12.5px;line-height:1.45}
.mini-pill{font-size:10.5px;padding:4px 6px}
.doc-actions{gap:5px}
.doc-actions .btn{font-size:11.5px;min-height:32px;padding:6px 5px;border-radius:7px}
.doc-actions .btn span{display:none}
}
@media(max-width: 360px){
.docs-grid{gap:6px}
.doc-card{padding:8px}
.doc-title{font-size:12px}
}
.khdmli-register-promo{position:relative;margin:0 0 12px;border:1px solid rgba(66,183,42,.2);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#eefbea 52%,#dcf7d3 100%);box-shadow:0 8px 24px rgba(66,183,42,.12)}
.khdmli-register-promo__link{min-height:54px;padding:9px 56px 9px 16px;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#183a18;font-weight:900}
.khdmli-register-promo__icon,.khdmli-register-promo__cta{background:#42B72A;color:#fff;border-radius:999px}.khdmli-register-promo__icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.khdmli-register-promo__cta{padding:7px 12px;font-size:12px}
.khdmli-register-promo__close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.khdmli-download-enabled{
background:#16a34a !important;
}
.khdmli-download-disabled{
background:#f59e0b !important;
}
.khdmli-register-promo__cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
white-space:nowrap;
}
@media(max-width:600px){
.khdmli-register-promo__link{
min-height:50px;
padding:8px 44px 8px 9px;
gap:7px;
font-size:12.5px;
}
.khdmli-register-promo__cta{
padding:6px 8px;
font-size:10.5px;
}
}
.faq-list{
display:grid;
gap:8px;
}
.faq-item{
border:1px solid var(--fb-border);
border-radius:10px;
background:#fff;
overflow:hidden;
}
.faq-question{
width:100%;
border:0;
background:#fff;
padding:12px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-family:inherit;
font-size:14px;
font-weight:800;
text-align:right;
cursor:pointer;
color:var(--fb-text);
}
.faq-question i{
color:var(--fb-blue);
transition:.2s ease;
}
.faq-item.open .faq-question i{
transform:rotate(180deg);
}
.faq-answer{
display:none;
padding:0 14px 13px;
color:var(--fb-muted);
font-size:13.5px;
line-height:1.9;
}
.faq-item.open .faq-answer{
display:block;
}
@media(max-width:768px){
.faq-question{
font-size:13px;
padding:11px 12px;
}
.faq-answer{
font-size:12.5px;
padding:0 12px 12px;
}
}