:root{
--blue:#1877f2;--green:#166b25;--bg:#f0f2f5;--card:#fff;--text:#050505;
--muted:#65676b;--line:#dddfe2;--soft:#f5f6f7;--shadow:0 1px 2px rgba(0,0,0,.10);
--shadow-lg:0 12px 35px rgba(0,0,0,.15);--radius:14px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:auto;padding:12px 10px 72px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) 390px;gap:12px;align-items:start}
.gallery,.info,.section,.comments-box{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);overflow:hidden
}
.gallery{position:sticky;top:12px}
.main-image{
height:calc(100vh - 112px);min-height:520px;max-height:760px;
display:flex;align-items:center;justify-content:center;background:#000
}
.main-image img,.main-image video{width:100%;height:100%;object-fit:contain;background:#000}
.thumbs{display:flex;gap:8px;padding:8px;border-top:1px solid var(--line);overflow:auto;background:#fff}
.thumbs img,.thumb-video{
width:74px;height:62px;object-fit:cover;border-radius:9px;cursor:pointer;
border:3px solid transparent;opacity:.92;flex:0 0 auto
}
.thumb-video{background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative}
.thumb-video small{position:absolute;bottom:4px;inset-inline:5px;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumbs img.active,.thumb-video.active,.thumbs img:hover,.thumb-video:hover{border-color:var(--blue);opacity:1}
.info{overflow:hidden}
.title{font-size:24px;font-weight:900;line-height:1.25;margin:0;padding:15px 16px 8px;letter-spacing:-.2px}
.chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px 12px}
.chip,.req-status{
display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;
font-size:12px;font-weight:800;background:#f0f2f5;color:#050505
}
.chip i{color:var(--green)}
.req-status.open,.req-status.done{background:#e7f3ff;color:var(--blue)}
.req-status.refused{background:#ffebe9;color:#d93025}
.req-status.pending{background:#fff4e6;color:#b45309}
.desc-title{border-top:1px solid var(--line);padding:12px 16px 4px;font-size:15px;font-weight:900}
.desc{
padding:4px 16px 12px;line-height:1.42;font-size:15px;color:#1c1e21;
border-bottom:1px solid var(--line);white-space:pre-line;overflow-wrap:anywhere
}
.desc p,.desc div,.desc section,.desc article{margin:0!important;padding:0!important}
.desc br+br{display:none}
.promoted-facebook-row{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 16px 9px;
color:#65676b;font-size:12px;font-weight:700
}
.promoted-label{display:inline-flex;align-items:center;gap:5px}
.promoted-label i{font-size:11px}
.promoted-goal-btn{
appearance:none;border:0;background:transparent;color:#65676b;padding:0;
display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:700;
cursor:default
}
.promoted-goal-btn i{font-size:11px}
.promoted-dot{font-weight:900;color:#8a8d91}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px}
.meta-box{background:#f7f8fa;border:1px solid #e4e6eb;border-radius:12px;padding:10px}
.meta-label{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:4px}
.meta-value{font-size:14px;font-weight:900;color:#050505}
.contact-box{padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.contact-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;margin:0 0 4px}
.contact-title i{color:var(--blue)}
.contact-hint,.notice{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.requester-mini{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 0;border-block:1px solid #f0f2f5}
.requester-mini img,.comment-avatar{border-radius:50%;object-fit:cover;border:1px solid #dddfe2}
.requester-mini img{width:48px;height:48px}.comment-avatar{width:36px;height:36px;flex:0 0 auto}
.requester-mini strong{font-size:15px;font-weight:900}.requester-mini span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-top:2px}
.profile-link-name:hover,.comment-name:hover{text-decoration:underline}
.contact-actions-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:11px}
.contact-actions-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.requester-main-info{min-width:0;flex:1}
.requester-name-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.requester-inline-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.requester-icon-btn{
min-height:31px;height:31px;border:0;border-radius:9px;padding:0 9px;
display:inline-flex;align-items:center;justify-content:center;gap:5px;
text-decoration:none;cursor:pointer;font-size:12px;font-weight:900;
white-space:nowrap;transition:transform .15s ease,background .15s ease
}
.requester-icon-btn:hover{transform:translateY(-1px)}
.requester-icon-btn.follow{background:#e7f3ff;color:#1877f2}
.requester-icon-btn.follow.following{background:#e4e6eb;color:#050505}
.requester-icon-btn.profile{width:31px;padding:0;background:#e4e6eb;color:#050505}
.requester-icon-btn.chat{width:31px;padding:0;background:#1877f2;color:#fff}
.requester-icon-btn.whatsapp{width:31px;padding:0;background:#25d366;color:#fff}
.requester-follow-stats{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-top:4px}
@media(max-width:640px){
.requester-mini{align-items:flex-start}
.requester-name-actions{gap:6px}
.requester-inline-actions{gap:4px}
.requester-icon-btn{height:29px;min-height:29px;border-radius:8px;padding:0 7px;font-size:11px}
.requester-icon-btn.profile,.requester-icon-btn.chat,.requester-icon-btn.whatsapp{width:29px;padding:0}
.requester-icon-btn.follow span{display:none}
}
.contact-action-btn{min-width:0;min-height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 7px;font-size:13px;font-weight:900;border:0;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap;overflow:hidden}
.contact-action-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.10)}
.contact-action-btn.profile{background:#e4e6eb;color:#050505}
.contact-action-btn.chat{background:#1877f2;color:#fff}
.contact-action-btn.whatsapp{background:#25d366;color:#fff}
.contact-action-btn.phone{background:#ff8a00;color:#fff}
.contact-action-btn i{font-size:17px;flex:0 0 auto}
.contact-action-btn span{overflow:hidden;text-overflow:ellipsis}
.direct-contact-empty{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff8e1;color:#7a5b00;font-size:13px;font-weight:700;line-height:1.6}
.profile-pill,.follow-owner-btn,.save-request-btn,.btn{
min-height:38px;border-radius:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer
}
.profile-pill,.follow-owner-btn.following,.btn.white{background:#e4e6eb;color:#050505;border:0}
.follow-owner-btn:not(.following),.btn.blue{background:var(--blue);color:#fff;border:0}
.save-request-btn{background:#fff4e6;color:#b45309;border:1px solid #ffe0ad}
.save-request-btn.saved,.btn.green{background:var(--green);color:#fff;border-color:var(--green)}
.btn{border:0;padding:10px 13px;font-size:14px}
.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.details-social-actions{
display:grid;grid-template-columns:repeat(4,1fr);margin:12px -16px 0;
padding:4px 6px;border-block:1px solid var(--line)
}
.details-social-btn{
min-height:40px;border:0;background:#fff;border-radius:9px;color:var(--muted);
font-size:13px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px
}
.details-social-btn:hover{background:#f2f3f5}.details-social-btn.active,.details-social-btn.following{color:var(--blue)}
.details-social-btn b{font-size:12px;color:var(--muted)}
.section,.comments-box{margin-top:12px;padding:14px}
.section-title{font-size:18px;font-weight:900;margin:0 0 10px}
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.15s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.card-img{height:126px;background:#e4e6eb}.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:9px}.card-title{font-size:14px;font-weight:900;line-height:1.4;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-chips{display:flex;gap:5px;flex-wrap:wrap}.small-chip{padding:4px 7px;border-radius:999px;background:#f0f2f5;color:var(--muted);font-size:11px;font-weight:800}
.empty{padding:14px;text-align:center;color:var(--muted);background:#f7f8fa;border:1px dashed #ccd0d5;border-radius:12px}
.comment-form{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.comment-form textarea,.reply-form input{
width:100%;border:1px solid var(--line);border-radius:20px;padding:10px 12px;
font-family:inherit;outline:none;background:#f0f2f5
}
.comment-form textarea{flex:1;min-height:48px;resize:vertical}.comment-form textarea:focus,.reply-form input:focus{background:#fff;border-color:#bcc0c4}
.comment-send,.reply-form button{border:0;background:var(--green);color:#fff;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}
.comment-item{display:flex;gap:8px;margin-top:10px}.comment-main{flex:1;min-width:0}
.comment-bubble{background:#f0f2f5;border-radius:18px;padding:8px 11px;display:inline-block;max-width:100%}
.comment-name{font-weight:900;font-size:13px}.comment-text{margin-top:4px;line-height:1.6;font-size:14px;white-space:pre-wrap}
.comment-meta{display:flex;align-items:center;gap:10px;margin:4px 8px 0;color:var(--muted);font-size:12px;font-weight:800;flex-wrap:wrap}
.comment-action{border:0;background:transparent;color:var(--muted);font-weight:900;cursor:pointer;padding:0}
.comment-action:hover,.comment-action.active{color:var(--blue)}
.replies{margin-top:6px;margin-inline-start:18px;border-inline-start:2px solid #e4e6eb;padding-inline-start:9px}
.reply-form{display:none;margin-top:7px;gap:6px}.reply-form.show{display:flex}.reply-form input{flex:1}.reply-form button{padding:8px 12px}
.contact-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px}
.contact-modal.show{display:flex}.contact-modal-box{width:min(420px,100%);background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow-lg);text-align:center;border:1px solid var(--line);animation:pop .16s ease-out}
.contact-modal-icon{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:#e7f3ff;color:var(--blue);font-size:24px}
.contact-modal-title{font-size:19px;font-weight:900;margin:0 0 6px}.contact-modal-text{margin:0;color:var(--muted);line-height:1.7}
.contact-modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:center;flex-wrap:wrap}.contact-modal-actions .btn{min-width:120px}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
@media(max-width:980px){
.hero{grid-template-columns:1fr}.gallery{position:static}.main-image{height:380px;min-height:340px}.related{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.wrap{padding:8px 7px 44px}.gallery,.info,.section,.comments-box{border-radius:12px}
.main-image{height:auto;min-height:220px;max-height:none}.main-image img,.main-image video{height:auto;object-fit:contain}
.thumbs{padding:6px}.thumbs img,.thumb-video{width:66px;height:54px;border-radius:8px}
.title{font-size:20px;padding:12px 12px 7px}.chips{padding:0 12px 8px}
.desc-title{padding:10px 12px 4px}.desc{padding:4px 12px 12px}
.meta{padding:10px 12px;gap:6px}.contact-box{padding:10px 12px}
.details-social-actions{margin:10px -12px 0;padding:3px}.details-social-btn{font-size:12px;gap:4px}
.actions{gap:6px}.btn{padding:9px 8px;font-size:13px}.section,.comments-box{padding:12px;margin-top:10px}
.related{display:flex;overflow:auto;gap:8px;margin-inline:-12px;padding:0 12px 8px}.card{min-width:76%}.card-img{height:120px}
.requester-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
.card{min-width:82%}.meta{grid-template-columns:1fr}.details-social-btn span{display:none}.title{font-size:19px}
}
body{background:#f0f2f5!important;color:#050505!important;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif!important}
.wrap{max-width:1180px!important;margin:auto!important;padding:12px 10px 70px!important}
.topbar{position:sticky;top:0;z-index:20;background:rgba(240,242,245,.92);backdrop-filter:blur(8px);padding:8px 0;margin-bottom:10px!important}
.hero{display:grid!important;grid-template-columns:minmax(0,1.2fr) 410px!important;gap:14px!important;align-items:start!important}
.gallery,.info,.comments-box,.section{border:1px solid #dddfe2!important;border-radius:14px!important;background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.10)!important;overflow:hidden!important}
.gallery{position:sticky!important;top:64px!important;background:#000!important}
.main-image{height:min(72vh,680px)!important;min-height:520px!important;background:#000!important;display:flex!important;align-items:center!important;justify-content:center!important}
.main-image img,.main-image video{width:100%!important;height:100%!important;object-fit:contain!important;background:#000!important}
.thumbs{background:#fff!important;border-top:1px solid #dddfe2!important;padding:8px!important;gap:8px!important;scrollbar-width:thin!important}
.thumbs img,.thumb-video{width:72px!important;height:58px!important;border-radius:10px!important;border:3px solid transparent!important;object-fit:cover!important;flex:0 0 auto!important}
.thumbs img.active,.thumb-video.active{border-color:#1877f2!important}
.info{padding:0!important}
.title{font-size:24px!important;line-height:1.28!important;font-weight:800!important;padding:15px 16px 8px!important;margin:0!important;color:#050505!important}
.chips{padding:0 16px 10px!important;gap:7px!important}
.chip,.req-status{border:0!important;border-radius:999px!important;background:#f0f2f5!important;color:#050505!important;font-size:12px!important;font-weight:800!important;padding:7px 10px!important}
.desc-title{border-top:1px solid #dddfe2!important;padding:12px 16px 4px!important;font-size:15px!important;font-weight:800!important}
.desc{padding:4px 16px 14px!important;line-height:1.75!important;font-size:14px!important;color:#1c1e21!important;border-bottom:1px solid #eef0f2!important}
.meta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:12px 16px!important}
.meta-box{border:1px solid #e4e6eb!important;border-radius:12px!important;background:#f7f8fa!important;padding:10px!important}
.meta-label{color:#65676b!important;font-size:12px!important;font-weight:800!important}.meta-value{font-size:14px!important;font-weight:800!important;color:#050505!important}
.contact-box{padding:12px 16px!important;border-top:1px solid #dddfe2!important;background:#fff!important}.contact-title{font-size:16px!important;font-weight:900!important}.contact-hint{color:#65676b!important;font-size:13px!important}
.requester-mini{border-top:1px solid #f0f2f5!important;border-bottom:1px solid #f0f2f5!important;border-left:0!important;border-right:0!important;border-radius:0!important;background:#fff!important;padding:10px 0!important}.requester-mini img{width:48px!important;height:48px!important;border-radius:50%!important}.requester-mini strong{font-size:15px!important;font-weight:900!important}
.requester-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:10px!important}.profile-pill,.chat-pill{min-height:40px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;font-weight:900!important;font-size:13px!important}.profile-pill{background:#e4e6eb!important;color:#050505!important;border:0!important}.chat-pill{background:#1877f2!important;color:#fff!important;border:0!important}
.details-social-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:12px -16px 0!important;padding:4px 6px!important;border-top:1px solid #dddfe2!important;border-bottom:1px solid #dddfe2!important;background:#fff!important}.details-social-btn{height:42px!important;border:0!important;background:#fff!important;border-radius:10px!important;color:#65676b!important;font-size:13px!important;font-weight:900!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;cursor:pointer!important}.details-social-btn:hover{background:#f2f3f5!important}.details-social-btn.active,.details-social-btn.following{color:#1877f2!important}.details-social-btn b{font-size:12px!important;color:#65676b!important}
.actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;padding:12px 0 0!important}.btn{border-radius:10px!important;font-weight:900!important}.comments-box{margin-top:14px!important;padding:14px!important}.comment-form textarea{border-radius:20px!important;background:#f0f2f5!important}.comment-send{border-radius:10px!important;background:#1877f2!important}.comment-bubble{background:#f0f2f5!important;border-radius:18px!important}.section{margin-top:14px!important;padding:14px!important}.related{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.card{border-radius:12px!important;overflow:hidden!important}.card-img{height:135px!important;background:#e4e6eb!important}.card-title{font-size:14px!important;font-weight:900!important}
.share-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#050505;color:#fff;border-radius:999px;padding:11px 16px;font-weight:800;font-size:13px;z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.2s}.share-toast.show{opacity:1;bottom:34px}
@media(max-width:1000px){.hero{grid-template-columns:1fr!important}.gallery{position:static!important}.main-image{height:auto!important;min-height:360px!important;max-height:none!important}.main-image img,.main-image video{height:auto!important;max-height:none!important}.related{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.contact-actions-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.contact-action-btn{min-height:43px!important;padding:7px 4px!important;font-size:11px!important;border-radius:10px!important;gap:4px!important}.contact-action-btn i{font-size:16px!important}.wrap{padding:8px 7px 72px!important}.topbar{position:static!important}.gallery,.info,.comments-box,.section{border-radius:12px!important}.main-image{min-height:230px!important}.title{font-size:20px!important;padding:12px 12px 7px!important}.chips{padding:0 12px 8px!important}.desc-title{padding:10px 12px 4px!important}.desc{padding:3px 12px 12px!important}.meta{grid-template-columns:1fr 1fr!important;padding:10px 12px!important;gap:7px!important}.contact-box{padding:11px 12px!important}.details-social-actions{grid-template-columns:repeat(4,1fr)!important;margin:11px -12px 0!important;padding:3px!important}.details-social-btn{height:40px!important;font-size:12px!important;gap:4px!important}.details-social-btn b{font-size:11px!important}.requester-actions{grid-template-columns:1fr 1fr!important}.comments-box,.section{padding:12px!important}.comment-form{gap:6px!important}.comment-send{padding:9px 11px!important}.related{display:flex!important;overflow:auto!important;gap:9px!important;margin-left:-12px!important;margin-right:-12px!important;padding:0 12px 8px!important}.card{min-width:78%!important}.card-img{height:125px!important}}
@media(max-width:420px){.meta{grid-template-columns:1fr!important}.details-social-btn span{display:none!important}.details-social-btn{font-size:15px!important}.card{min-width:84%!important}.main-image{min-height:215px!important}}
.comment-owner-tools{display:inline-flex;align-items:center;gap:8px;margin-inline-start:4px}
.comment-owner-tools button{border:0;background:transparent;color:#65676b;font-size:12px;font-weight:900;cursor:pointer;padding:0}
.comment-owner-tools button:hover{color:#1877f2;text-decoration:underline}
.comment-edit-box{display:none;margin-top:7px;gap:6px;align-items:center}
.comment-edit-box.show{display:flex}
.comment-edit-box input{flex:1;border:1px solid #dddfe2;background:#fff;border-radius:18px;padding:9px 11px;outline:none;font-family:inherit}
.comment-edit-box button{border:0;border-radius:8px;padding:8px 12px;font-weight:900;cursor:pointer}
.comment-edit-save{background:#166b25;color:#fff}.comment-edit-cancel{background:#e4e6eb;color:#050505}
@media(max-width:520px){.comment-edit-box{flex-direction:column;align-items:stretch}.comment-edit-box button{width:100%}}
.related-stats{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
padding-top:8px;
border-top:1px solid #f0f2f5;
color:#65676b;
font-size:12px;
font-weight:700;
}
.related-stats span{
display:inline-flex;
align-items:center;
gap:4px;
white-space:nowrap;
}
.related-stats i{
color:#65676b;
font-size:12px;
}
.related{
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) !important;
gap:10px !important;
}
.related .card{
max-width:220px !important;
width:100% !important;
justify-self:center !important;
}
.related .card-img{
height:105px !important;
}
.related .card-body{
padding:8px !important;
}
.related .card-title{
font-size:13px !important;
line-height:1.35 !important;
margin-bottom:6px !important;
}
.related .small-chip{
font-size:10px !important;
padding:4px 6px !important;
}
.related .related-stats{
font-size:11px !important;
margin-top:7px !important;
padding-top:7px !important;
}
@media(max-width:640px){
.related{
display:flex !important;
overflow-x:auto !important;
gap:8px !important;
padding:0 10px 8px !important;
margin-left:-11px !important;
margin-right:-11px !important;
scroll-snap-type:x mandatory;
}
.related .card{
min-width:58% !important;
max-width:58% !important;
flex:0 0 58% !important;
scroll-snap-align:start;
}
.related .card-img{
height:95px !important;
}
}
@media(max-width:420px){
.related .card{
min-width:64% !important;
max-width:64% !important;
flex-basis:64% !important;
}
}
.post-under-title-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
padding:0 16px 10px;
margin-top:-2px;
color:#65676b;
font-size:13px;
font-weight:500;
line-height:1.4;
}
.post-under-title-meta span{
display:inline-flex;
align-items:center;
gap:5px;
}
.post-under-title-meta i{
color:#65676b;
font-size:13px;
}
.post-under-title-meta .dot-sep{
display:inline-flex;
margin:0 2px;
color:#65676b;
}
.meta:empty{display:none!important}
@media(max-width:640px){
.post-under-title-meta{
padding:0 12px 9px;
font-size:12.5px;
}
}
.details-mobile-ad-320x100{
display:none;
}
@media(max-width:768px){
.details-mobile-ad-320x100{
display:block;
width:320px;
max-width:100%;
margin:10px auto;
text-align:center;
background:#fff;
border:1px solid #dddfe2;
border-radius:12px;
box-shadow:0 1px 2px rgba(0,0,0,.10);
padding:4px;
overflow:hidden;
}
.details-mobile-ad-link{
display:block;
width:100%;
height:100px;
border-radius:10px;
overflow:hidden;
background:#f0f2f5;
}
.details-mobile-ad-link img{
width:100%;
height:100px;
object-fit:cover;
display:block;
border-radius:10px;
}
.details-mobile-ad-label{
font-size:11px;
color:#65676b;
font-weight:800;
margin-top:4px;
line-height:1.2;
}
.details-mobile-ad-empty{
width:320px;
max-width:100%;
height:100px;
margin:0 auto;
border-radius:10px;
background:linear-gradient(135deg,#e7f3ff,#ffffff);
border:1px dashed #b9d6ff;
color:#1877f2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
text-align:center;
font-weight:900;
}
.details-mobile-ad-empty span{font-size:14px;}
.details-mobile-ad-empty strong{font-size:13px;color:#050505;}
.details-mobile-ad-empty small{font-size:12px;color:#65676b;font-weight:800;}
.details-mobile-ad-top{
margin-top:0;
margin-bottom:10px;
}
.details-mobile-ad-under-request{
margin-top:12px;
margin-bottom:12px;
}
}
@media(min-width:769px){
.details-mobile-ad-320x100{display:none!important;}
}
@media(max-width:700px){
.desc{padding:3px 12px 10px!important;font-size:15px!important;line-height:1.4!important}
.desc-title{padding:10px 12px 3px!important}
.promoted-facebook-row{padding:0 12px 8px!important;font-size:12px!important}
}
.suggested-craftsmen-box{margin:0;border-top:1px solid #e4e6eb;border-bottom:1px solid #e4e6eb;background:#fff;padding:10px 0}
.suggested-craftsmen-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px 10px;gap:10px}
.suggested-craftsmen-head h2{margin:0;font-size:18px;color:#050505;display:flex;align-items:center;gap:8px}
.suggested-craftsmen-head h2 i{color:#1877f2}
.suggested-craftsmen-head small{display:block;color:#65676b;font-size:12px;margin-top:3px}
.suggested-slider-controls{display:flex;gap:6px}
.suggested-slider-controls button{width:34px;height:34px;border:0;border-radius:50%;background:#e4e6eb;color:#050505;cursor:pointer;font-size:14px}
.suggested-craftsmen-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 14px 8px;scrollbar-width:none}
.suggested-craftsmen-track::-webkit-scrollbar{display:none}
.suggested-craftsman-card{flex:0 0 205px;scroll-snap-align:start;border:1px solid #e4e6eb;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.suggested-craftsman-cover{display:block;height:122px;background:#f0f2f5;overflow:hidden}
.suggested-craftsman-cover img{width:100%;height:100%;object-fit:cover;display:block}
.suggested-craftsman-body{padding:10px}
.suggested-craftsman-name{display:block;color:#050505;text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggested-craftsman-meta{margin-top:5px;color:#65676b;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggested-craftsman-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.suggested-profile-btn,.suggested-chat-btn{height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-weight:800;font-size:13px;white-space:nowrap}
.suggested-profile-btn{background:#1877f2;color:#fff}
.suggested-chat-btn{background:#e7f3ff;color:#1877f2}
@media(max-width:700px){
.suggested-craftsmen-box{margin:0 -1px}
.suggested-craftsman-card{flex-basis:172px}
.suggested-craftsman-cover{height:108px}
.suggested-slider-controls{display:none}
.suggested-craftsmen-head h2{font-size:16px}
}
.desc{margin:0!important}
.desc-after-suggestions{padding-top:4px!important;margin-top:0!important}
.suggested-craftsmen-box + .desc{margin-top:0!important}
.keyword-link{
font-size:1.08em!important;
font-weight:700!important;
color:#166FE5!important;
text-decoration:none;
}
.keyword-link:hover{
text-decoration:underline;
}
.craft-keyword-link{
display:inline;
font-size:1.10em;
font-weight:700;
color:#1877f2;
text-decoration:none;
line-height:inherit;
}
.post-auto-link{
display:inline-flex;
align-items:center;
gap:4px;
max-width:100%;
color:#166b25;
font-weight:850;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:2px;
overflow-wrap:anywhere;
word-break:break-word
}
.post-auto-link:hover{color:#0f551c}
.whatsapp-number-link{color:#128c3e;text-decoration:none}
.whatsapp-number-link:hover{color:#0b6b2d;text-decoration:underline}
.website-link{direction:ltr;unicode-bidi:embed}
.craft-keyword-link:hover{
color:#0d65d9;
text-decoration:underline;
}
.contact-actions-top{
margin-top:12px;
margin-bottom:14px;
}
.request-location-card{
width:100%;
max-width:100%;
margin:clamp(12px,2vw,18px) 0 0;
overflow:hidden;
border:1px solid #dbe5f0;
border-radius:clamp(14px,2vw,20px);
background:#fff;
box-shadow:0 10px 28px rgba(15,23,42,.08);
contain:layout paint;
}
.request-location-head{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px 12px;
padding:clamp(11px,1.8vw,15px);
border-bottom:1px solid #e8edf3;
background:#fff;
}
.request-location-title{
flex:1 1 220px;
min-width:0;
overflow:hidden;
}
.request-location-title strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#0f172a;
font-size:clamp(14px,1.6vw,16px);
font-weight:900;
line-height:1.45;
}
.request-location-title strong i{
flex:0 0 auto;
}
.request-location-title span{
display:-webkit-box;
overflow:hidden;
margin-top:4px;
color:#64748b;
font-size:clamp(11px,1.2vw,13px);
line-height:1.55;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.request-location-directions,
.request-location-open-map{
min-width:0;
min-height:44px;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.request-location-directions{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
flex:0 0 auto;
padding:0 14px;
border-radius:12px;
background:linear-gradient(135deg,#1877f2,#0d5ed7);
color:#fff!important;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
text-decoration:none!important;
box-shadow:0 7px 18px rgba(24,119,242,.22);
transition:transform .18s ease,filter .18s ease;
}
.request-location-directions:hover{
transform:translateY(-1px);
filter:brightness(1.04);
}
.request-location-map-wrap{
position:relative;
width:100%;
max-width:100%;
min-height:220px;
overflow:hidden;
background:#eef3f8;
isolation:isolate;
}
.request-location-map{
display:block;
width:100%;
height:clamp(230px,42vw,380px);
min-height:220px;
border:0;
background:#eef3f8;
}
.request-location-open-map{
position:absolute;
inset-inline-start:clamp(9px,1.6vw,14px);
bottom:clamp(9px,1.6vw,14px);
z-index:3;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
max-width:calc(100% - 28px);
padding:0 13px;
overflow:hidden;
border:1px solid rgba(255,255,255,.9);
border-radius:12px;
background:rgba(255,255,255,.96);
color:#1877f2!important;
box-shadow:0 8px 22px rgba(15,23,42,.18);
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
text-overflow:ellipsis;
text-decoration:none!important;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:transform .18s ease,background .18s ease;
}
.request-location-open-map:hover{
background:#fff;
transform:translateY(-1px);
}
.request-location-note{
padding:10px clamp(12px,1.8vw,16px) 13px;
color:#64748b;
font-size:clamp(10px,1.1vw,12px);
line-height:1.7;
overflow-wrap:anywhere;
background:#fff;
}
@media (min-width:641px) and (max-width:1024px){
.request-location-map{
height:clamp(270px,40vw,340px);
}
}
@media (max-width:640px){
.request-location-card{
border-radius:15px;
box-shadow:0 7px 20px rgba(15,23,42,.08);
}
.request-location-head{
align-items:stretch;
gap:9px;
padding:11px;
}
.request-location-title{
flex-basis:100%;
}
.request-location-directions{
width:100%;
min-height:42px;
padding:0 12px;
border-radius:10px;
font-size:12px;
}
.request-location-map-wrap{
min-height:230px;
}
.request-location-map{
height:clamp(230px,72vw,310px);
min-height:230px;
}
.request-location-open-map{
max-width:calc(100% - 18px);
min-height:40px;
padding:0 11px;
border-radius:10px;
font-size:11px;
}
.request-location-note{
padding:9px 11px 11px;
}
}
@media (max-width:380px){
.request-location-title strong{
font-size:13px;
}
.request-location-title span{
font-size:10.5px;
}
.request-location-map{
height:240px;
}
.request-location-open-map{
width:calc(100% - 18px);
justify-content:center;
}
}
@media (max-height:500px) and (orientation:landscape){
.request-location-map{
height:68vh;
min-height:220px;
max-height:360px;
}
}
@supports (padding: max(0px)){
.request-location-head{
padding-inline-start:max(clamp(11px,1.8vw,15px),env(safe-area-inset-left));
padding-inline-end:max(clamp(11px,1.8vw,15px),env(safe-area-inset-right));
}
.request-location-note{
padding-inline-start:max(clamp(12px,1.8vw,16px),env(safe-area-inset-left));
padding-inline-end:max(clamp(12px,1.8vw,16px),env(safe-area-inset-right));
}
}
@media (prefers-reduced-motion:reduce){
.request-location-directions,
.request-location-open-map{
transition:none;
}
}
.khdmli-service-promo{
position:relative;
max-width:1180px;
margin:14px auto 18px;
padding:1px;
overflow:hidden;
border-radius:22px;
background:linear-gradient(135deg,#cfe1ff 0%,#ffffff 45%,#d8f4e2 100%);
box-shadow:
0 18px 46px rgba(15,23,42,.12),
0 3px 10px rgba(24,119,242,.08);
}
.khdmli-service-promo::before{
content:"";
position:absolute;
inset:1px;
border-radius:21px;
background:
radial-gradient(circle at 12% 0%,rgba(24,119,242,.15),transparent 34%),
radial-gradient(circle at 90% 100%,rgba(22,163,74,.13),transparent 32%),
rgba(255,255,255,.96);
pointer-events:none;
}
.khdmli-service-promo::after{
content:"";
position:absolute;
top:-70px;
right:12%;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255,255,255,.52);
filter:blur(16px);
pointer-events:none;
}
.khdmli-service-promo.is-closing{
opacity:0;
transform:translateY(-8px) scale(.985);
transition:opacity .2s ease,transform .2s ease;
}
.khdmli-service-promo-link{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:78px;
padding:14px 62px 14px 18px;
border-radius:21px;
color:#0f172a!important;
text-decoration:none!important;
}
.khdmli-service-promo-text{
display:flex;
align-items:center;
gap:13px;
min-width:0;
}
.khdmli-service-promo-icon{
position:relative;
width:50px;
height:50px;
display:grid;
place-items:center;
flex:0 0 50px;
border:1px solid rgba(255,255,255,.85);
border-radius:17px;
background:linear-gradient(145deg,#2384ff,#0754c7);
color:#fff;
font-size:19px;
box-shadow:
0 12px 25px rgba(24,119,242,.28),
inset 0 1px 0 rgba(255,255,255,.35);
}
.khdmli-service-promo-icon::after{
content:"";
position:absolute;
top:6px;
right:7px;
width:7px;
height:7px;
border-radius:50%;
background:#fff;
box-shadow:0 0 0 4px rgba(255,255,255,.14);
}
.khdmli-service-promo-copy{
min-width:0;
}
.khdmli-service-promo-copy strong{
display:block;
color:#0f172a;
font-size:17px;
font-weight:900;
line-height:1.45;
}
.khdmli-service-promo-copy span{
display:block;
margin-top:4px;
color:#64748b;
font-size:12px;
line-height:1.55;
}
.khdmli-service-promo-cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
flex:0 0 auto;
min-height:43px;
padding:0 16px;
border:1px solid rgba(255,255,255,.8);
border-radius:13px;
background:linear-gradient(135deg,#1877f2,#0b5ed7);
color:#fff;
font-size:13px;
font-weight:900;
white-space:nowrap;
box-shadow:
0 10px 22px rgba(24,119,242,.24),
inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .2s ease,filter .2s ease;
}
.khdmli-service-promo-link:hover .khdmli-service-promo-cta{
transform:translateY(-2px);
filter:brightness(1.04);
}
.khdmli-service-promo-close{
position:absolute;
top:50%;
right:14px;
z-index:8;
width:32px;
height:32px;
display:grid;
place-items:center;
border:1px solid #e2e8f0;
border-radius:50%;
background:rgba(255,255,255,.94);
color:#64748b;
box-shadow:0 6px 18px rgba(15,23,42,.13);
cursor:pointer;
transform:translateY(-50%);
transition:background .2s ease,color .2s ease,transform .2s ease;
backdrop-filter:blur(8px);
}
.khdmli-service-promo-close:hover{
background:#ef4444;
color:#fff;
border-color:#ef4444;
transform:translateY(-50%) scale(1.08);
}
@media(max-width:640px){
.khdmli-service-promo{
margin:9px 10px 13px;
border-radius:18px;
}
.khdmli-service-promo::before{
border-radius:17px;
}
.khdmli-service-promo-link{
min-height:67px;
padding:10px 47px 10px 11px;
gap:8px;
border-radius:17px;
}
.khdmli-service-promo-text{
gap:9px;
}
.khdmli-service-promo-icon{
width:40px;
height:40px;
flex-basis:40px;
border-radius:13px;
font-size:16px;
}
.khdmli-service-promo-copy strong{
font-size:13px;
line-height:1.35;
}
.khdmli-service-promo-copy span{
display:none;
}
.khdmli-service-promo-cta{
min-height:34px;
padding:0 9px;
border-radius:9px;
font-size:10px;
gap:5px;
}
.khdmli-service-promo-close{
right:8px;
width:27px;
height:27px;
font-size:12px;
}
}
.khdmli-adsense-wrap{
width:100%;max-width:970px;margin:22px auto;padding:0;clear:both;
overflow:hidden;text-align:center;min-height:90px;
}
.khdmli-adsense-wrap .adsbygoogle{
display:block !important;width:100% !important;max-width:100% !important;
}
@media(max-width:767px){
.khdmli-adsense-wrap{max-width:100%;margin:16px auto;padding:0 2px;min-height:70px;}
}