: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;
--fb-hover:#E7F3FF;
--radius:12px;
--shadow:0 1px 2px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
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-wrap{
max-width:1180px;
margin:14px auto 50px;
padding:0 14px;
}
.top-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:14px;
align-items:start;
}
.main-column{min-width:0}
.viewer-shell,
.card,
.empty-state{
background:var(--fb-card);
border:1px solid var(--fb-border);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
.viewer-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
border-bottom:1px solid var(--fb-border);
background:#fff;
}
.viewer-topbar-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.doc-icon{
width:42px;
height:42px;
border-radius:50%;
background:var(--fb-hover);
color:var(--fb-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
flex:none;
}
.doc-headline{min-width:0}
.doc-title{
font-size:19px;
font-weight:800;
color:var(--fb-text);
margin:0 0 5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.doc-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
color:var(--fb-muted);
font-size:12px;
}
.doc-chip{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 9px;
border-radius:999px;
background:#F0F2F5;
color:var(--fb-muted);
font-weight:700;
}
.viewer-topbar-right{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
border:none;
cursor:pointer;
border-radius:8px;
padding:10px 14px;
font-weight:800;
font-family:inherit;
font-size:14px;
transition:.15s ease;
line-height:1.2;
}
.btn:hover{
filter:brightness(.98);
transform:translateY(-1px);
}
.btn-primary{
background:var(--fb-blue);
color:#fff;
box-shadow:none;
}
.btn-primary:hover{background:var(--fb-blue-hover)}
.btn-success{
background:var(--fb-green);
color:#fff;
box-shadow:none;
}
.btn-success:hover{background:var(--fb-green-hover)}
.btn-light{
background:#E4E6EB;
color:#050505;
border:0;
}
.btn-light:hover{background:#D8DADF}
.viewer-stage{
position:relative;
background:#E4E6EB;
min-height:760px;
}
.viewer-frame{
width:100%;
height:760px;
border:0;
display:block;
background:#fff;
}
.office-wrapper{
overflow:hidden;
height:760px;
background:#fff;
}
.viewer-office{
width:100%;
height:920px;
border:0;
margin-top:-110px;
display:block;
background:#fff;
}
.preview-fallback{
padding:40px 18px;
text-align:center;
}
.office-preview-box{
min-height:760px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:13px;
background:#fff;
}
.office-preview-icon{
width:84px;
height:84px;
border-radius:50%;
background:var(--fb-hover);
color:var(--fb-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
}
.office-preview-box h2{
margin:0;
color:var(--fb-text);
font-size:24px;
font-weight:900;
}
.office-preview-box p{
max-width:620px;
color:var(--fb-muted);
line-height:1.8;
margin:0;
}
.preview-overlay{
position:absolute;
right:0;
left:0;
bottom:0;
padding:22px 16px 14px;
background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.38), rgba(0,0,0,0));
color:#fff;
display:flex;
align-items:end;
justify-content:space-between;
gap:12px;
pointer-events:none;
}
.preview-overlay .overlay-box{
max-width:720px;
pointer-events:auto;
}
.preview-overlay h2{
margin:0 0 6px;
font-size:21px;
font-weight:800;
}
.preview-overlay p{
margin:0;
opacity:.95;
line-height:1.7;
font-size:14px;
}
.preview-overlay .overlay-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
pointer-events:auto;
}
.sidebar{
display:flex;
flex-direction:column;
gap:12px;
position:sticky;
top:12px;
}
.card-body{
padding:14px;
}
.card-title{
font-size:17px;
font-weight:800;
margin:0 0 11px;
display:flex;
align-items:center;
gap:8px;
color:var(--fb-text);
}
.card-title i{color:var(--fb-blue)}
.summary-box{
background:#fff;
color:var(--fb-text);
}
.summary-box .card-title{color:var(--fb-text)}
.stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.stat{
background:#F0F2F5;
border:1px solid #E4E6EB;
border-radius:10px;
padding:10px;
}
.stat .label{
display:block;
font-size:12px;
color:var(--fb-muted);
margin-bottom:4px;
}
.stat .value{
font-size:16px;
font-weight:800;
color:var(--fb-text);
}
.cta-box{background:#fff}
.cta-box p{
font-size:14px;
color:var(--fb-muted);
line-height:1.8;
margin:0 0 12px;
}
.inline-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.doc-description{
font-size:14px;
color:var(--fb-muted);
line-height:1.9;
}
.doc-description strong{color:var(--fb-text)}
.doc-points{
margin:10px 0 0;
padding-right:18px;
}
.doc-points li{margin-bottom:7px}
.share-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}
.share-link{
padding:10px;
border-radius:8px;
background:#F0F2F5;
color:var(--fb-text);
border:0;
font-size:13px;
font-weight:800;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
}
.share-link:hover{
background:var(--fb-hover);
color:var(--fb-blue);
}
.related-under-preview{
margin-top:14px;
}
.related-grid,
.related-grid-bottom{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.related-item{
background:#fff;
border:1px solid var(--fb-border);
border-radius:var(--radius);
padding:10px;
transition:.15s ease;
box-shadow:var(--shadow);
}
.related-item:hover{
background:var(--fb-hover);
transform:translateY(-1px);
}
.related-item a{
display:flex;
gap:9px;
align-items:flex-start;
}
.related-icon{
width:36px;
height:36px;
border-radius:50%;
background:var(--fb-hover);
color:var(--fb-blue);
display:flex;
align-items:center;
justify-content:center;
flex:none;
}
.related-text{
font-size:13px;
font-weight:800;
color:var(--fb-text);
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.rating-line{
display:flex;
align-items:center;
gap:10px;
}
.rating-score{
font-size:32px;
font-weight:900;
color:#F7B928;
}
.rating-stars{
color:#F7B928;
font-size:17px;
}
.sticky-bottom{
position:fixed;
bottom:12px;
left:12px;
right:12px;
z-index:70;
display:none;
}
.sticky-bottom-inner{
max-width:900px;
margin:auto;
background:#fff;
color:var(--fb-text);
border:1px solid var(--fb-border);
border-radius:12px;
padding:10px;
box-shadow:0 8px 24px rgba(0,0,0,.16);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.sticky-bottom .text{
font-size:13px;
line-height:1.6;
color:var(--fb-muted);
}
.empty-state{
padding:40px 18px;
text-align:center;
}
.empty-state h1{
margin:0 0 8px;
font-size:24px;
}
.empty-state p{
color:var(--fb-muted);
margin:0 0 16px;
}
.subscription-popup{
position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
padding:16px;background:rgba(0,0,0,.55);
}
.subscription-popup.show{display:flex}
.subscription-dialog{
width:100%;max-width:440px;background:#fff;border-radius:16px;overflow:hidden;
box-shadow:0 18px 50px rgba(0,0,0,.28);border:1px solid var(--fb-border);
}
.subscription-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 16px;border-bottom:1px solid var(--fb-border);
}
.subscription-head h3{margin:0;font-size:18px;font-weight:900}
.subscription-close{
width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;background:#E4E6EB;
display:flex;align-items:center;justify-content:center;
}
.subscription-body{padding:18px 16px;text-align:center}
.subscription-icon{
width:66px;height:66px;border-radius:50%;margin:0 auto 12px;background:#E7F3FF;color:var(--fb-blue);
display:flex;align-items:center;justify-content:center;font-size:28px;
}
.subscription-offer{font-size:22px;font-weight:900;line-height:1.55;margin:0 0 8px}
.subscription-price{color:var(--fb-blue);white-space:nowrap}
.subscription-note{color:var(--fb-muted);font-size:14px;line-height:1.9;margin:0}
.subscription-actions{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap}
.subscription-actions .btn{flex:1}
@media (max-width:1100px){
.top-grid{
grid-template-columns:1fr;
}
.sidebar{
position:static;
}
.related-grid,
.related-grid-bottom{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media (max-width:768px){
.page-wrap{
padding:0 10px;
margin-top:10px;
margin-bottom:80px;
}
.viewer-topbar{
flex-direction:column;
align-items:flex-start;
padding:11px;
}
.viewer-topbar-right{
width:100%;
justify-content:flex-start;
}
.viewer-topbar-right .btn{
flex:1 1 calc(50% - 6px);
padding:10px 8px;
font-size:13px;
}
.doc-title{
font-size:17px;
}
.doc-icon{
width:38px;
height:38px;
font-size:16px;
}
.viewer-frame{height:70vh}
.office-wrapper{height:70vh}
.viewer-office{
height:calc(70vh + 150px);
margin-top:-110px;
}
.viewer-stage{min-height:70vh}
.preview-overlay{
flex-direction:column;
align-items:flex-start;
padding:34px 12px 12px;
}
.preview-overlay h2{
font-size:18px;
}
.preview-overlay p{
font-size:13px;
}
.preview-overlay .overlay-actions{
width:100%;
}
.preview-overlay .btn{
flex:1 1 calc(50% - 6px);
font-size:13px;
padding:9px 8px;
}
.stats-grid{
grid-template-columns:repeat(2,1fr);
}
.share-row{
grid-template-columns:repeat(3,1fr);
}
.related-grid,
.related-grid-bottom{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.related-item{
padding:9px;
}
.related-item a{
flex-direction:column;
gap:7px;
}
.related-icon{
width:34px;
height:34px;
}
.related-text{
font-size:12.5px;
}
.sticky-bottom{
display:block;
}
.sticky-bottom-inner{
align-items:flex-start;
flex-direction:column;
}
.sticky-bottom-inner > div:last-child{
width:100%;
}
.sticky-bottom .btn{
flex:1;
padding:9px 8px;
font-size:13px;
}
}
.viewer-stage{
position:relative;
overflow:hidden;
}
.preview-toolbar-cover{
position:absolute;
top:0;
left:0;
right:0;
height:52px;
background:#E4E6EB;
z-index:25;
pointer-events:auto;
border-bottom:1px solid #E4E6EB;
}
.viewer-stage.office-stage .preview-toolbar-cover{
height:62px;
}
@media (max-width:768px){
.preview-toolbar-cover{
height:50px;
}
.viewer-stage.office-stage .preview-toolbar-cover{
height:58px;
}
}
.viewer-stage{
overflow:hidden;
}
.viewer-frame{
height:812px;
margin-top:-52px;
}
.office-wrapper{
height:760px;
}
.viewer-office{
height:982px;
margin-top:-172px;
}
.preview-toolbar-cover{
display:none !important;
}
@media (max-width:768px){
.viewer-frame{
height:calc(70vh + 50px);
margin-top:-50px;
}
.viewer-office{
height:calc(70vh + 208px);
margin-top:-168px;
}
}
.viewer-shell,
.viewer-stage,
.office-wrapper{
width:100%;
max-width:100%;
}
.viewer-stage{
min-height:clamp(520px, 78vh, 900px);
}
.viewer-frame,
.office-wrapper{
height:clamp(520px, 78vh, 900px);
}
.viewer-frame{
width:100%;
}
.seo-info-card{
margin-top:14px;
}
.seo-info-card h2,
.seo-info-card h3{
color:var(--fb-text);
}
.seo-info-card h2{
margin:0 0 10px;
font-size:20px;
font-weight:900;
}
.seo-info-card h3{
margin:18px 0 8px;
font-size:16px;
font-weight:800;
}
.seo-intro{
margin:0;
line-height:2;
color:var(--fb-muted);
font-size:14px;
}
.seo-list{
margin:8px 0 0;
padding-right:20px;
color:var(--fb-muted);
line-height:1.9;
font-size:14px;
}
.seo-list li{
margin-bottom:6px;
}
.faq-item{
border-top:1px solid var(--fb-border);
padding:12px 0;
}
.faq-item:first-of-type{
border-top:0;
}
.faq-q{
font-weight:800;
color:var(--fb-text);
margin-bottom:5px;
}
.faq-a{
color:var(--fb-muted);
line-height:1.8;
font-size:14px;
}
@media (max-width:768px){
.page-wrap{
padding:0 6px;
}
.viewer-shell{
border-radius:10px;
}
.viewer-topbar{
gap:8px;
}
.viewer-topbar-left{
width:100%;
}
.doc-headline{
width:calc(100% - 48px);
}
.doc-title{
white-space:normal;
overflow:visible;
text-overflow:clip;
line-height:1.55;
font-size:16px;
}
.doc-meta{
gap:4px;
}
.doc-chip{
font-size:10.5px;
padding:4px 7px;
}
.viewer-topbar-right{
display:grid;
grid-template-columns:1fr 1fr;
width:100%;
}
.viewer-topbar-right .btn{
width:100%;
min-width:0;
padding:9px 6px;
font-size:12px;
}
.viewer-stage{
min-height:72vh;
border-radius:0;
}
.viewer-frame,
.office-wrapper{
height:72vh;
min-height:520px;
}
.viewer-frame{
margin-top:-50px;
height:calc(72vh + 50px);
}
.viewer-office{
width:100%;
min-width:100%;
height:calc(72vh + 208px);
margin-top:-168px;
}
.preview-overlay{
padding:30px 10px 10px;
}
.preview-overlay h2{
font-size:16px;
}
.preview-overlay p{
font-size:12px;
line-height:1.6;
}
.seo-info-card{
margin-top:10px;
}
.seo-info-card .card-body{
padding:12px;
}
.seo-info-card h2{
font-size:18px;
line-height:1.6;
}
.seo-info-card h3{
font-size:15px;
}
.seo-intro,
.seo-list,
.faq-a{
font-size:13px;
}
}
@media (max-width:420px){
.viewer-topbar-right{
grid-template-columns:1fr;
}
.viewer-stage,
.viewer-frame,
.office-wrapper{
min-height:500px;
}
}
.subscription-popup-backdrop{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
z-index:999999;
align-items:center;
justify-content:center;
padding:14px;
}
.subscription-popup-backdrop.show{
display:flex;
}
.subscription-popup{
width:100%;
max-width:430px;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.30);
animation:subscriptionPopupIn .18s ease-out;
}
@keyframes subscriptionPopupIn{
from{opacity:0;transform:translateY(10px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.subscription-popup-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:14px 16px;
border-bottom:1px solid #E4E6EB;
}
.subscription-popup-head h3{
margin:0;
font-size:18px;
font-weight:900;
color:#050505;
}
.subscription-popup-close{
width:36px;
height:36px;
border:0;
border-radius:50%;
background:#E4E6EB;
color:#050505;
display:grid;
place-items:center;
cursor:pointer;
font-size:16px;
}
.subscription-popup-body{
padding:18px 16px 8px;
text-align:center;
}
.subscription-popup-icon{
width:64px;
height:64px;
border-radius:50%;
display:grid;
place-items:center;
margin:0 auto 12px;
background:#E7F3FF;
color:#1877F2;
font-size:28px;
}
.subscription-popup-price{
font-size:24px;
line-height:1.5;
font-weight:900;
color:#050505;
margin:0 0 8px;
}
.subscription-popup-price strong{
color:#1877F2;
}
.subscription-popup-text{
margin:0;
color:#65676B;
font-size:14px;
line-height:1.9;
}
.subscription-popup-features{
text-align:right;
margin:14px 0 0;
padding:0;
list-style:none;
}
.subscription-popup-features li{
display:flex;
align-items:flex-start;
gap:8px;
margin-bottom:8px;
color:#444;
font-size:13.5px;
line-height:1.7;
}
.subscription-popup-features i{
color:#42B72A;
margin-top:4px;
}
.subscription-popup-actions{
display:grid;
grid-template-columns:1fr;
gap:8px;
padding:14px 16px 16px;
}
.subscription-popup-whatsapp{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
border-radius:9px;
background:#25D366;
color:#fff;
font-weight:900;
font-size:14px;
}
.subscription-popup-secondary{
min-height:40px;
border:0;
border-radius:9px;
background:#E4E6EB;
color:#050505;
font-family:inherit;
font-weight:800;
cursor:pointer;
}
@media(max-width:480px){
.subscription-popup{
max-width:100%;
border-radius:14px;
}
.subscription-popup-head h3{
font-size:16px;
}
.subscription-popup-price{
font-size:21px;
}
}
.preview-notice-cloud{
position:absolute;
top:10px;
right:50%;
transform:translateX(50%);
z-index:80;
width:max-content;
max-width:calc(100% - 20px);
padding:10px 16px;
border-radius:18px;
background:rgba(5,5,5,.82);
color:#fff;
box-shadow:0 6px 20px rgba(0,0,0,.22);
font-size:13px;
font-weight:800;
line-height:1.55;
text-align:center;
pointer-events:none;
}
.preview-notice-cloud::after{
content:"";
position:absolute;
top:100%;
right:50%;
transform:translateX(50%);
border:7px solid transparent;
border-top-color:rgba(5,5,5,.82);
}
.preview-notice-cloud i{
margin-left:6px;
}
@media(max-width:768px){
.preview-notice-cloud{
top:8px;
max-width:calc(100% - 14px);
padding:8px 11px;
border-radius:14px;
font-size:11.5px;
}
}
.viewer-stage.preview-locked{
overflow:hidden !important;
touch-action:none;
overscroll-behavior:contain;
}
.viewer-stage.preview-locked .viewer-frame,
.viewer-stage.preview-locked .viewer-office,
.viewer-stage.preview-locked .office-wrapper{
pointer-events:none !important;
user-select:none;
-webkit-user-select:none;
}
.viewer-stage.preview-locked .viewer-frame,
.viewer-stage.preview-locked .office-wrapper{
overflow:hidden !important;
}
.viewer-stage.preview-locked::after{
content:"";
position:absolute;
inset:0;
z-index:45;
background:transparent;
pointer-events:auto;
touch-action:none;
}
.viewer-stage.preview-locked .preview-notice-cloud,
.viewer-stage.preview-locked .preview-overlay{
z-index:80;
}
.viewer-stage{
min-height:520px !important;
height:520px !important;
overflow:hidden !important;
}
.viewer-frame,
.office-wrapper{
height:520px !important;
min-height:520px !important;
}
.viewer-frame{
height:572px !important;
}
.viewer-office{
height:742px !important;
}
@media(max-width:768px){
.viewer-stage{
min-height:430px !important;
height:430px !important;
}
.viewer-frame,
.office-wrapper{
min-height:430px !important;
height:430px !important;
}
.viewer-frame{
height:480px !important;
}
.viewer-office{
height:638px !important;
}
}
@media(max-width:420px){
.viewer-stage{
min-height:390px !important;
height:390px !important;
}
.viewer-frame,
.office-wrapper{
min-height:390px !important;
height:390px !important;
}
.viewer-frame{
height:440px !important;
}
.viewer-office{
height:598px !important;
}
}