:root{
--primary:#1877F2;
--muted:#6b7280;
--card:#ffffff;
--bg:#f6f8fa;
--radius:14px;
--shadow:0 8px 24px rgba(18,38,63,0.08);
--accent-2:#007bff;
--glass:rgba(255,255,255,0.6);
--text:#0f1724;
--background:#f9fafb;
}
[data-theme="dark"]{
--primary:#1877F2;
--muted:#9aa3b2;
--card:#0f1724;
--bg:linear-gradient(180deg,#071022 0%, #081126 100%);
--shadow:0 10px 30px rgba(2,6,23,0.75);
--text:#e6eef6;
--glass:rgba(255,255,255,0.03);
--background:#020617;
}
html,body{
height:100%;
font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
background:var(--bg);
color:var(--text);
margin:0;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
transition:background .3s ease,color .3s ease;
}
body{ text-align:var(--kh-profile-align); padding-bottom:80px; }
.wrap{ max-width:1150px; margin:1px auto; padding:5px; }
.top-crumbs{
display:flex; align-items:center; gap:9px;
color:var(--muted); font-size:14px; margin-bottom:12px; flex-wrap:wrap;
}
.profile-card{
display:grid; grid-template-columns:340px 1fr; gap:22px;
background:var(--card); border-radius:var(--radius); padding:22px;
box-shadow:var(--shadow); align-items:start; overflow:visible;
transition:background .25s ease, box-shadow .25s ease;
}
@media (max-width: 992px) {
.profile-card{ grid-template-columns:1fr; padding:10px; }
}
.profile-photo{
width:100%; border-radius:10px; overflow:hidden; position:relative;
border:6px solid var(--card);
box-shadow:0 10px 30px rgba(15,23,42,0.06);
}
.profile-photo img{
width:100%; height:100%; object-fit:cover; display:block; min-height:320px;
}
.online-badge{
position:absolute; left:12px; top:12px;
background:var(--glass); padding:6px 10px;
border-radius:999px; box-shadow:0 6px 18px rgba(15,23,42,0.06);
display:inline-flex; gap:8px; align-items:center;
font-weight:600; color:var(--muted); font-size:11px; backdrop-filter:blur(6px);
}
.views-badge{
position:absolute; top:12px; right:12px; z-index:4;
display:inline-flex; align-items:center; gap:6px;
padding:7px 10px; border-radius:999px;
background:rgba(15,23,42,.76); color:#fff;
box-shadow:0 8px 24px rgba(0,0,0,.18);
backdrop-filter:blur(8px);
font-size:11px; font-weight:800; line-height:1;
border:1px solid rgba(255,255,255,.18);
}
.views-badge i{ font-size:11px; opacity:.95; }
.views-badge .views-number{ direction:ltr; unicode-bidi:embed; }
@media(max-width:640px){
.views-badge{ top:10px; right:10px; padding:6px 9px; font-size:10px; }
}
.online-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.online-dot.online{ background:#1877F2; box-shadow:0 0 8px rgba(24,119,242,0.22); }
.online-dot.offline{ background:#c7c7c7; }
.contact-panel{
margin-top:16px;
padding:14px;
border:1px solid #e4e6eb;
border-radius:16px;
background:#fff;
box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.contact-panel-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:11px;
font-size:14px;
font-weight:800;
color:#1c1e21;
}
.contact-panel-title small{
color:#65676b;
font-size:11px;
font-weight:600;
}
.contact-bar{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.contact-secondary{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:9px;
padding-top:9px;
border-top:1px solid #edf0f3;
}
.btn-action{
width:100%; min-height:52px;
display:flex; align-items:center; justify-content:flex-start;
gap:10px; padding:9px 12px;
border:1px solid transparent; border-radius:11px;
font-family:inherit; font-size:13px; font-weight:800;
line-height:1.2; text-decoration:none; cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
-webkit-tap-highlight-color:transparent;
}
.btn-action .action-icon{
width:34px; height:34px; flex:0 0 34px;
display:grid; place-items:center; border-radius:50%;
background:rgba(255,255,255,.18); font-size:16px;
}
.btn-action .action-copy{
min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.btn-action .action-copy strong{font-size:13px;font-weight:800;color:inherit;}
.btn-action .action-copy small{font-size:10px;font-weight:600;color:inherit;opacity:.84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.btn-action:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.12);}
.btn-action:active{transform:translateY(0) scale(.985);}
.btn-action:focus-visible{outline:3px solid rgba(24,119,242,.22);outline-offset:2px;}
.btn-call{background:#1877f2;color:#fff;border-color:#1877f2;}
.btn-call:hover{background:#166fe5;color:#fff;}
.btn-wpp{background:#25d366;color:#fff;border-color:#20bd5a;}
.btn-wpp:hover{background:#20bd5a;color:#fff;}
.btn-reserve{background:#fff4e5;color:#9a5200;border-color:#ffd9a0;}
.btn-reserve .action-icon{background:#ffe3b8;}
.btn-chat{background:#e7f3ff;color:#0866ff;border-color:#cfe5ff;}
.btn-chat .action-icon{background:#d7eaff;}
.btn-chat.is-disabled{background:#f0f2f5;color:#8a8d91;border-color:#e4e6eb;cursor:not-allowed;opacity:.8;}
.btn-follow{background:#e7f3ff;color:#0866ff;border-color:#cfe5ff;box-shadow:none;animation:none;overflow:visible;}
.btn-follow::after{display:none;}
.btn-follow .action-icon{background:#d7eaff;}
.btn-report{background:#fff;color:#d93025;border-color:#f1c7c4;}
.btn-report .action-icon{background:#fde8e7;}
@media(max-width:640px){
.contact-panel{margin:12px -2px 0;padding:10px;border-radius:13px;}
.contact-panel-title{font-size:13px;margin-bottom:9px;}
.contact-panel-title small{display:none;}
.contact-bar,.contact-secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.btn-action{min-height:50px;padding:8px 9px;gap:8px;border-radius:10px;}
.btn-action .action-icon{width:32px;height:32px;flex-basis:32px;font-size:15px;}
.btn-action .action-copy strong{font-size:12px;}
.btn-action .action-copy small{font-size:9px;}
.mobile-order-whatsapp{order:1;}
.mobile-order-call{order:2;}
.mobile-order-service,.mobile-order-booking{order:3;}
.mobile-order-chat{order:4;}
.mobile-order-follow{order:5;}
.mobile-order-report{order:6;}
.contact-bar > :only-child{grid-column:1 / -1;}
}
@media(max-width:360px){
.btn-action{justify-content:center;}
.btn-action .action-copy small{display:none;}
}
@media(prefers-reduced-motion:reduce){.btn-action{transition:none;}}
.khdmli-chat-modal{
position:fixed;
inset:0;
z-index:2147483000;
display:none;
align-items:center;
justify-content:center;
padding:16px;
background:rgba(2,6,23,.62);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.khdmli-chat-modal.show{ display:flex; animation:chatFadeIn .18s ease-out; }
@keyframes chatFadeIn{ from{opacity:0} to{opacity:1} }
.khdmli-chat-card{
width:min(100%,520px);
background:var(--card,#fff);
color:var(--text,#0f172a);
border-radius:24px;
overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.16);
animation:chatCardUp .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes chatCardUp{ from{opacity:.5;transform:translateY(18px) scale(.98)} to{opacity:1;transform:none} }
.khdmli-chat-head{
display:flex;
align-items:center;
gap:12px;
padding:16px;
background:linear-gradient(135deg,#061b30,#0d6efd);
color:#fff;
position:relative;
}
.khdmli-chat-avatar{
width:52px;
height:52px;
border-radius:18px;
object-fit:cover;
border:2px solid rgba(255,255,255,.55);
background:#fff;
flex:0 0 auto;
}
.khdmli-chat-title{ min-width:0; flex:1; }
.khdmli-chat-title strong{ display:block; font-size:15px; font-weight:900; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.khdmli-chat-title span{ display:block; font-size:11px; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.khdmli-chat-close{
width:36px;
height:36px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.16);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s;
}
.khdmli-chat-close:hover{ background:#E7F3FF; color:#1877F2; transform:scale(1.05); }
.khdmli-chat-body{ padding:16px; }
.khdmli-chat-hint{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px;
border-radius:18px;
background:#f8fafc;
color:#475569;
font-size:12px;
font-weight:700;
line-height:1.7;
margin-bottom:12px;
}
[data-theme="dark"] .khdmli-chat-hint{ background:rgba(255,255,255,.05); color:#cbd5e1; }
.khdmli-chat-hint i{ color:#0d6efd; margin-top:3px; }
.khdmli-chat-textarea{
width:100%;
min-height:145px;
resize:vertical;
border-radius:20px;
border:1px solid rgba(15,23,42,.12);
background:var(--background,#f9fafb);
color:var(--text,#0f172a);
padding:14px;
outline:none;
font-size:14px;
font-weight:700;
line-height:1.8;
transition:.2s;
}
.khdmli-chat-textarea:focus{
border-color:#0d6efd;
box-shadow:0 0 0 4px rgba(13,110,253,.12);
background:#fff;
}
[data-theme="dark"] .khdmli-chat-textarea:focus{ background:rgba(255,255,255,.06); }
.khdmli-chat-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:14px;
flex-wrap:wrap;
}
.khdmli-chat-status{
min-height:22px;
font-size:12px;
font-weight:800;
color:#64748b;
}
.khdmli-chat-status.ok{ color:#1877F2; }
.khdmli-chat-status.err{ color:#0B5ED7; }
.khdmli-chat-send{
border:0;
min-height:46px;
padding:0 18px;
border-radius:999px;
background:linear-gradient(135deg,#E7F3FF,#1877F2,#0B5ED7);
color:#fff;
font-size:13px;
font-weight:1000;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
box-shadow:0 12px 28px rgba(24,119,242,.24);
transition:.2s;
}
.khdmli-chat-send:hover{ transform:translateY(-2px); }
.khdmli-chat-send:disabled{ opacity:.65; cursor:wait; transform:none; }
@media(max-width:640px){
.khdmli-chat-modal{ align-items:flex-end; padding:0; }
.khdmli-chat-card{ width:100%; border-radius:24px 24px 0 0; }
.khdmli-chat-textarea{ min-height:135px; }
.khdmli-chat-actions{ display:grid; grid-template-columns:1fr; }
.khdmli-chat-send{ width:100%; }
}
.btn-reserve{ background:linear-gradient(90deg, #ffc107, #ffc107); }
.btn-action:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(18,38,63,0.08); }
.small-info{ margin-top:14px; font-size:14px; color:var(--muted); }
.profile-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:9px; flex-wrap:wrap; }
.title{
font-size:clamp(20px,4vw,26px); font-weight:800;
color:var(--text); margin:0 0 6px 0; line-height:1.05;
}
.sub{
color:var(--muted); font-size:14px; margin-bottom:8px;
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.rating-block{ display:flex; gap:9px; align-items:center; margin-top:4px; flex-wrap:wrap; }
.rating-stars i,
.fa-star,
.fa-star-half-alt,
.fa-star-half-stroke,
.fa-regular.fa-star{
color:#FFD700 !important;
text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.rating-stars i{ font-size:16px; margin-right:4px; }
.bio{
margin-top:14px; padding:14px; border-radius:10px;
background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent);
border:1px solid rgba(15,23,42,0.03);
color:var(--text); font-size:clamp(14px,2.5vw,16px); line-height:1.3;
}
.video-frame{ margin-top:18px; border-radius:10px; overflow:hidden; background:#000; height:300px; }
.video-frame iframe{ width:100%; height:100%; border:0; display:block; }
.related{ margin-top:22px; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:9px; }
.related-card{
border-radius:10px; padding:10px; background:var(--card);
box-shadow:0 6px 18px rgba(15,23,42,0.04);
display:flex; gap:9px; align-items:center;
transition:transform .12s ease; text-decoration:none; color:inherit;
}
.related-card:hover{ transform:translateY(-6px); }
.related-card img{ width:72px; height:72px; object-fit:cover; border-radius:10px; }
.reviews{ margin-top:1px; display:grid; gap:14px; }
.muted{ color:var(--muted); }
a.clean{ color:inherit; text-decoration:none; }
.theme-toggle{
border-radius:999px; padding:8px 10px; cursor:pointer;
background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--muted);
}
.controls{ display:flex; gap:8px; align-items:center; margin-inset-inline-end:auto; }
[dir="rtl"] body{ direction:rtl; text-align:right; }
[dir="ltr"] body{ direction:ltr; text-align:left; }
[dir="rtl"] .wrap, [dir="rtl"] .wrap *,
[dir="rtl"] .khdmli-chat-modal, [dir="rtl"] .khdmli-chat-modal *,
[dir="rtl"] .modal-centered, [dir="rtl"] .modal-centered *{ direction:rtl; text-align:right; }
[dir="ltr"] .wrap, [dir="ltr"] .wrap *,
[dir="ltr"] .khdmli-chat-modal, [dir="ltr"] .khdmli-chat-modal *,
[dir="ltr"] .modal-centered, [dir="ltr"] .modal-centered *{ direction:ltr; text-align:left; }
.trip-gallery {
position: relative;
margin-top: 18px;
}
.trip-gallery-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 180px 180px;
gap: 10px;
border-radius: 18px;
overflow: hidden;
background: #e5e7eb;
}
.trip-gallery-item {
position: relative;
display: block;
overflow: hidden;
background: #f3f4f6;
}
.trip-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.trip-gallery-item:hover img {
transform: scale(1.08);
}
.trip-gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,.05), transparent);
opacity: 0;
transition: opacity .28s ease;
}
.trip-gallery-item:hover::after {
opacity: 1;
}
.trip-gallery-item.large {
grid-row: span 2;
}
.trip-gallery-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
background: rgba(255,255,255,.94);
color: #111827;
padding: 7px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
backdrop-filter: blur(8px);
}
.show-all-trip-btn {
position: absolute;
bottom: 14px;
right: 14px;
z-index: 4;
border: none;
background: rgba(255,255,255,.96);
color: #111827;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 22px rgba(0,0,0,.15);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.show-all-trip-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.trip-gallery-count-overlay {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 3;
background: rgba(0,0,0,.58);
color: #fff;
padding: 7px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
backdrop-filter: blur(4px);
}
.trip-gallery-more {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.35);
color: #fff;
font-size: 22px;
font-weight: 800;
}
.trip-gallery-hidden-links {
display: none;
}
@media (max-width: 768px) {
.trip-gallery-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 220px 120px 120px;
gap: 8px;
border-radius: 14px;
}
.trip-gallery-item.large {
grid-column: span 2;
grid-row: span 1;
}
.trip-gallery-badge {
top: 10px;
left: 10px;
font-size: 12px;
padding: 6px 10px;
}
.show-all-trip-btn {
right: 10px;
bottom: 10px;
font-size: 13px;
padding: 9px 12px;
}
.trip-gallery-more {
font-size: 18px;
}
}
.rate-btn{
background:var(--primary); color:#6c757d;
padding:12px 20px; border:none; border-radius:10px;
font-size:16px; font-weight:700; cursor:pointer;
width:100%; text-align:center; margin:1px 0;
box-shadow:rgba(0,0,0,0.1) 0 4px 12px; transition:0.2s;
}
.rate-btn:hover{ opacity:.9; transform:translateY(-2px); }
.social-icons{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; margin-top:10px; }
.social-icon{
font-size:26px; text-decoration:none; color:#555 !important;
transition:0.3s;
}
.social-icon:hover{ color:#000 !important; transform:scale(1.2); }
.ad1-box, .ad2-box{
display:block; width:100%; max-width:100%;
background:#f5f5f5; border:2px dashed #bbb; color:#444;
font-size:18px; font-weight:bold; text-align:center;
border-radius:10px; text-decoration:none;
margin:0 auto 20px auto; padding:20px 0; transition:0.3s;
}
.ad1-box:hover, .ad2-box:hover{ background:#ececec; border-color:#999; }
@media (max-width:480px){
.ad1-box,.ad2-box{ height:110px; font-size:17px; padding-top:40px; }
}
@media (min-width:481px) and (max-width:1023px){
.ad1-box,.ad2-box{ height:140px; font-size:13px; padding-top:55px; }
}
@media (min-width:1024px){
.ad1-box,.ad2-box{ height:160px; font-size:22px; padding-top:60px; }
}
.ad-box{
position:relative; display:block; width:100%;
border-radius:10px; overflow:hidden;
background:#f5f5f5; margin-bottom:20px;
}
.ad-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ad-badge-google{
position:absolute; bottom:0; left:0;
padding:4px 10px; font-size:8.5px; color:#f7efef;
border-radius:4px; border:1px solid rgba(0,0,0,0.18);
font-weight:600; z-index:10; display:flex; align-items:center; gap:4px;
}
.ad-center-text{
position:absolute; top:50%; left:50%;
transform:translate(-50%, -50%);
color:white; font-weight:800; font-size:26px; text-align:center;
z-index:10; padding:6px 14px; background:#198754;
border-radius:8px; backdrop-filter:blur(3px); letter-spacing:1px;
}
@media (max-width:480px){
.ad-box{ aspect-ratio:3/1; }
.ad-center-text{ font-size:18px; padding:4px 10px; }
}
@media (min-width:481px) and (max-width:1023px){
.ad-box{ aspect-ratio:4/2; }
}
@media (min-width:1024px){
.ad-box{ aspect-ratio:16/9; }
}
.modal-report{
display:none; position:fixed; z-index:9999;
left:0; top:0; width:100%; height:100%;
background:rgba(0,0,0,0.6);
}
.modal-content-report{
background:#fff; width:90%; max-width:400px;
margin:80px auto; padding:20px; border-radius:10px; position:relative;
}
.modal-content-report textarea{
width:100%; height:120px; padding:10px;
border-radius:8px; border:1px solid #ccc; resize:none;
}
.close-report{ position:absolute; top:10px; left:15px; font-size:22px; cursor:pointer; }
.modal-centered{
position:fixed; inset:0;
display:flex; align-items:center; justify-content:center;
z-index:11000; background:rgba(3,6,20,0.45); padding:10px;
}
.modal-card{
width:100%; max-width:520px; border-radius:10px;
background:var(--card); padding:20px;
box-shadow:0 12px 40px rgba(2,6,23,0.2);
}
.modal-close{ float:left; cursor:pointer; color:var(--muted); font-size:13px; }
input, textarea, select{
width:100%; padding:10px; border-radius:8px;
border:1px solid rgba(15,23,42,0.06);
margin-bottom:10px; background:transparent; color:var(--text);
}
.btn-primary{
background:linear-gradient(90deg,var(--primary), #0B5ED7);
color:#fff; border:none; padding:10px 14px;
border-radius:10px; font-weight:700; cursor:pointer;
}
.khdmli-public-profile-link{
display:flex;
align-items:center;
gap:8px;
width:100%;
max-width:520px;
margin-top:10px;
padding:8px 10px;
border:1px solid #dbe7f8;
border-radius:12px;
background:#f7f9fc;
direction:ltr;
}
.khdmli-public-profile-link .profile-link-main{
min-width:0;
flex:1;
display:flex;
align-items:center;
gap:7px;
color:#166b25;
text-decoration:none;
font-size:13px;
font-weight:800;
}
.khdmli-public-profile-link .profile-link-main i{
flex:0 0 auto;
color:#1877f2;
font-size:13px;
}
.khdmli-public-profile-link .profile-link-text{
display:block;
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.khdmli-profile-link-actions{
display:flex;
align-items:center;
gap:5px;
flex:0 0 auto;
}
.khdmli-profile-link-btn{
width:31px;
height:31px;
min-height:31px;
padding:0;
border:0;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#1877f2;
background:#e7f0ff;
transition:.2s ease;
}
.khdmli-profile-link-btn:hover{transform:translateY(-1px);background:#dce9ff;}
.khdmli-profile-link-btn.is-copied{background:#e8f7ec;color:#166b25;}
.khdmli-get-page-btn{
min-height:31px;padding:0 12px;border:0;border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
background:#166b25;color:#fff;text-decoration:none;font-size:12px;
font-weight:800;white-space:nowrap;transition:.2s ease;direction:rtl;
}
.khdmli-get-page-btn:hover{background:#11591f;color:#fff;transform:translateY(-1px);box-shadow:0 5px 14px rgba(22,107,37,.22);}
.mobile-get-page-btn{display:none;}
.mobile-public-profile-link{display:none;}
@media(max-width:991px){
.desktop-public-profile-link{display:none!important;}
.mobile-public-profile-link{
display:flex;
margin:8px 0 0;
max-width:none;
padding:7px 8px;
border-radius:10px;
}
.mobile-public-profile-link .profile-link-main{font-size:12px;}
.mobile-public-profile-link .khdmli-profile-link-btn{
width:29px;height:29px;min-height:29px;border-radius:8px;
}
.mobile-get-page-btn{display:flex;width:29px;height:29px;min-height:29px;padding:0;border-radius:8px;font-size:13px;}
.desktop-get-page-btn{display:none!important;}
}
.loc-icon svg{ transition:.2s; }
.top-action-buttons{
display:flex;
gap:8px;
align-items:center;
justify-content:var(--kh-profile-justify);
flex-wrap:wrap;
}
.icon-action-btn{
width:42px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:10px;
cursor:pointer;
transition:all .2s ease;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.icon-action-btn:hover{ transform:translateY(-2px); }
.favorite-btn{
background:#fff;
color:#64748b;
}
.favorite-btn i{
color:#64748b;
transition:color .2s ease, transform .2s ease;
}
.favorite-btn.is-active{
background:#fff;
color:#64748b;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.favorite-btn.is-active i{
color:#e11d48;
transform:scale(1.08);
}
.share-top-btn{ background:#f1f5f9; color:var(--text); }
.follow-top-btn{
background:#e7f3ff;
color:#0866ff;
text-decoration:none;
}
.follow-top-btn i{color:#0866ff;}
.report-top-btn{
background:#fff1f0;
color:#d93025;
}
.report-top-btn i{color:#d93025;}
.craftsman-location{ margin:28px 0; }
#craftsmanMap{
width:100%;
height:280px;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.open-map-btn{
display:inline-block;
margin-top:10px;
padding:10px 18px;
border-radius:999px;
background:#2563eb;
color:#fff;
font-weight:800;
text-decoration:none;
}
@media(max-width:768px){
#craftsmanMap{ height:240px; }
}
.wa-ad{ position:relative; }
.ad-wa-cta{
position:absolute;
bottom:10px;
right:10px;
background:#4c6054;
color:#fff;
padding:8px 14px;
border-radius:999px;
font-size:11px;
font-weight:800;
display:flex;
align-items:center;
gap:6px;
box-shadow:0 6px 18px rgba(0,0,0,.25);
animation:waPulse 1.6s infinite;
}
.ad-wa-cta i{ font-size:13px; }
@keyframes waPulse{
0%{
box-shadow:0 0 0 0 rgba(37,211,102,.55), 0 6px 18px rgba(0,0,0,.25);
transform:scale(1);
}
70%{
box-shadow:0 0 0 14px rgba(37,211,102,0), 0 6px 18px rgba(0,0,0,.25);
transform:scale(1.04);
}
100%{
box-shadow:0 0 0 0 rgba(37,211,102,0), 0 6px 18px rgba(0,0,0,.25);
transform:scale(1);
}
}
@media(min-width:1024px){
.hallaq-detail-ad{
min-height:80px !important;
}
.hallaq-detail-ad-inner{
flex-wrap:nowrap;
gap:9px;
padding:7px 14px;
}
.hallaq-detail-ad-text{
display:flex;
align-items:center;
gap:10px;
}
.hallaq-detail-ad-text strong,
.hallaq-detail-ad-text span{
margin:0;
display:inline-block;
white-space:nowrap;
}
.hallaq-detail-ad-text strong{
font-size:13px;
}
.hallaq-detail-ad-text span{
font-size:11px;
opacity:.95;
}
.hallaq-detail-ad-btn{
height:30px;
font-size:8.5px;
padding:0 11px;
}
}
@media (min-width: 768px){
.hallaq-detail-ad{
display:flex !important;
min-height:120px !important;
height:120px !important;
border-radius:14px !important;
}
.hallaq-detail-ad-inner{
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
padding:12px 18px !important;
gap:10px !important;
}
.hallaq-detail-ad-icon{
width:44px !important;
height:44px !important;
min-width:44px !important;
border-radius:10px !important;
font-size:20px !important;
}
.hallaq-detail-ad-text{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex:1 !important;
overflow:hidden !important;
}
.hallaq-detail-ad-text strong{
font-size:18px !important;
margin:0 !important;
white-space:nowrap !important;
}
.hallaq-detail-ad-text span{
font-size:11px !important;
margin:0 !important;
white-space:nowrap !important;
opacity:.95 !important;
}
.hallaq-detail-ad-btn{
height:42px !important;
padding:0 16px !important;
font-size:10px !important;
min-width:auto !important;
}
.hallaq-detail-ad::before,
.hallaq-detail-ad::after{
opacity:.45;
}
}
@media(max-width:640px){
.ad-wa-cta{
padding:6px 12px;
font-size:8.5px;
}
}
.faq-world-class{
margin-top:22px;
background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
border:1px solid rgba(15,23,42,0.06);
border-radius:14px;
padding:20px;
box-shadow:0 16px 40px rgba(15,23,42,0.08);
position:relative;
overflow:hidden;
}
.faq-sidebar{
position:relative;
}
.faq-desktop{
display:block;
}
.faq-mobile{
display:none;
}
[data-theme="dark"] .faq-world-class{
background:linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.96));
border:1px solid rgba(255,255,255,0.06);
box-shadow:0 18px 50px rgba(0,0,0,0.35);
}
.faq-world-class::before{
content:"";
position:absolute;
top:-70px;
right:-70px;
width:180px;
height:180px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,90,95,0.10), transparent 70%);
pointer-events:none;
}
.faq-header{
margin-bottom:16px;
position:relative;
z-index:1;
}
.faq-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,90,95,0.10);
color:var(--primary);
font-size:8.5px;
font-weight:800;
margin-bottom:12px;
}
.faq-header h2{
margin:0 0 8px;
font-size:clamp(20px,3vw,26px);
font-weight:800;
color:var(--text);
line-height:1.25;
}
.faq-header p{
margin:0;
color:var(--muted);
font-size:14px;
line-height:1.75;
}
.faq-list{
display:grid;
gap:9px;
position:relative;
z-index:1;
}
.faq-item{
border:1px solid rgba(15,23,42,0.06);
background:rgba(255,255,255,0.72);
border-radius:10px;
overflow:hidden;
transition:all .25s ease;
}
[data-theme="dark"] .faq-item{
background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.06);
}
.faq-item[open]{
box-shadow:0 10px 28px rgba(15,23,42,0.08);
border-color:rgba(255,90,95,0.22);
}
.faq-item summary{
list-style:none;
cursor:pointer;
padding:16px 16px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:9px;
font-size:14px;
font-weight:800;
color:var(--text);
line-height:1.7;
}
.faq-item summary::-webkit-details-marker{
display:none;
}
.faq-item summary i{
color:var(--primary);
font-size:14px;
transition:transform .25s ease;
margin-top:4px;
flex-shrink:0;
}
.faq-item[open] summary i{
transform:rotate(45deg);
}
.faq-answer{
padding:0 16px 16px;
color:var(--muted);
line-height:1.85;
font-size:14px;
border-top:1px solid rgba(15,23,42,0.05);
}
@media (max-width:768px){
.faq-desktop{
display:none;
}
.faq-mobile{
display:block;
margin-top:18px;
}
.faq-world-class{
padding:18px;
border-radius:14px;
}
.faq-header h2{
font-size:22px;
}
.faq-item summary{
padding:15px;
font-size:14px;
}
.faq-answer{
padding:0 15px 15px;
font-size:11px;
}
}
.craftsman-location{
margin:28px 0;
text-align:center;
}
.google-map-embed-box{
width:100%;
height:320px;
border-radius:14px;
overflow:hidden;
background:#f3f4f6;
box-shadow:0 10px 30px rgba(0,0,0,.12);
position:relative;
}
.map-embed-title{
position:absolute;
top:14px;
right:14px;
z-index:5;
background:rgba(255,255,255,.95);
color:#111827;
font-size:13px;
font-weight:800;
padding:8px 14px;
border-radius:999px;
box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.open-map-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:16px;
padding:13px 24px;
border-radius:999px;
background:#fff;
color:#0f9d58;
font-weight:800;
text-decoration:none;
border:1.5px solid #0f9d58;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:all .2s ease;
}
.open-map-btn:hover{
background:#f0fff7;
transform:translateY(-2px);
}
@media(max-width:768px){
.google-map-embed-box{
height:260px;
border-radius:14px;
}
.map-embed-title{
top:10px;
right:10px;
font-size:11px;
padding:7px 12px;
}
.open-map-btn{
width:100%;
font-size:13px;
}
}
.trip-gallery-item{
border:0;
padding:0;
cursor:pointer;
font:inherit;
text-align:inherit;
}
.gallery-zoom-icon{
position:absolute;
top:12px;
right:12px;
z-index:4;
width:36px;
height:36px;
border-radius:50%;
background:rgba(255,255,255,.92);
color:#111827;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,0,0,.16);
opacity:0;
transform:scale(.86);
transition:.22s ease;
}
.trip-gallery-item:hover .gallery-zoom-icon{
opacity:1;
transform:scale(1);
}
.kgallery-modal{
position:fixed;
inset:0;
z-index:20000;
display:none;
align-items:center;
justify-content:center;
padding:22px;
}
.kgallery-modal.is-open{
display:flex;
}
.kgallery-backdrop{
position:absolute;
inset:0;
background:rgba(2,6,23,.86);
backdrop-filter:blur(10px);
}
.kgallery-shell{
position:relative;
width:min(1120px,100%);
height:min(88vh,760px);
background:rgba(15,23,42,.96);
border:1px solid rgba(255,255,255,.10);
border-radius:26px;
overflow:hidden;
box-shadow:0 28px 90px rgba(0,0,0,.45);
display:flex;
flex-direction:column;
animation:galleryIn .24s ease;
}
@keyframes galleryIn{
from{opacity:0; transform:translateY(14px) scale(.98)}
to{opacity:1; transform:translateY(0) scale(1)}
}
.kgallery-topbar{
height:64px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
color:#fff;
background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
border-bottom:1px solid rgba(255,255,255,.08);
}
.kgallery-title{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.kgallery-title span{
width:38px;
height:38px;
border-radius:13px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--primary),#0B5ED7);
box-shadow:0 10px 24px rgba(255,90,95,.25);
}
.kgallery-title strong{
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.kgallery-title small{
color:rgba(255,255,255,.68);
font-weight:800;
font-size:8.5px;
padding:5px 9px;
border-radius:999px;
background:rgba(255,255,255,.08);
}
.kgallery-close{
width:42px;
height:32px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.10);
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s ease;
}
.kgallery-close:hover{
background:rgba(255,255,255,.18);
transform:rotate(90deg);
}
.kgallery-main-swiper{
width:100%;
flex:1;
min-height:0;
background:#020617;
}
.kgallery-main-swiper .swiper-slide{
display:flex;
align-items:center;
justify-content:center;
}
.kgallery-figure{
width:100%;
height:100%;
margin:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.kgallery-figure img{
max-width:100%;
max-height:calc(100% - 44px);
object-fit:contain;
display:block;
}
.kgallery-figure figcaption{
min-height:44px;
padding:12px 18px;
color:rgba(255,255,255,.76);
font-size:11px;
text-align:center;
}
.kgallery-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
width:48px;
height:48px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.12);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s ease;
backdrop-filter:blur(8px);
}
.kgallery-nav:hover{
background:rgba(255,255,255,.24);
transform:translateY(-50%) scale(1.06);
}
.kgallery-prev{ right:18px; }
.kgallery-next{ left:18px; }
.kgallery-pagination .swiper-pagination-bullet{
background:#fff;
opacity:.45;
}
.kgallery-pagination .swiper-pagination-bullet-active{
opacity:1;
}
.kgallery-thumbs-swiper{
width:100%;
height:92px;
padding:12px 14px;
background:rgba(255,255,255,.04);
border-top:1px solid rgba(255,255,255,.08);
}
.kgallery-thumbs-swiper .swiper-slide{
width:86px;
height:68px;
opacity:.46;
border-radius:14px;
overflow:hidden;
cursor:pointer;
border:2px solid transparent;
transition:.2s ease;
}
.kgallery-thumbs-swiper .swiper-slide-thumb-active{
opacity:1;
border-color:var(--primary);
transform:translateY(-2px);
}
.kgallery-thumbs-swiper img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
body.gallery-open{
overflow:hidden;
}
@media(max-width:768px){
.kgallery-modal{ padding:0; }
.kgallery-shell{
width:100%;
height:100dvh;
border-radius:0;
}
.kgallery-topbar{
height:58px;
padding:10px 12px;
}
.kgallery-title strong{ font-size:11px; }
.kgallery-title span{ width:28px; height:28px; border-radius:11px; }
.kgallery-close{ width:38px; height:38px; }
.kgallery-nav{
width:42px;
height:32px;
background:rgba(255,255,255,.16);
}
.kgallery-prev{ right:10px; }
.kgallery-next{ left:10px; }
.kgallery-thumbs-swiper{
height:82px;
padding:10px;
}
.kgallery-thumbs-swiper .swiper-slide{
width:70px;
height:58px;
}
.gallery-zoom-icon{
opacity:1;
width:32px;
height:32px;
top:9px;
right:9px;
}
}
.modal-centered{
padding:12px !important;
align-items:center !important;
justify-content:center !important;
}
.modal-card{
width:min(92vw, 380px) !important;
max-width:380px !important;
max-height:82vh !important;
overflow-y:auto !important;
border-radius:18px !important;
padding:16px !important;
box-shadow:0 18px 55px rgba(2,6,23,.22) !important;
}
.modal-card h3,
.modal-card h4{
font-size:17px !important;
line-height:1.35 !important;
}
.modal-card input,
.modal-card textarea,
.modal-card select{
padding:9px 10px !important;
border-radius:10px !important;
font-size:11px !important;
margin-bottom:8px !important;
}
.modal-card textarea{
min-height:86px !important;
max-height:120px !important;
}
.modal-close{
width:30px !important;
height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:rgba(15,23,42,.06) !important;
font-size:18px !important;
line-height:1 !important;
}
.modal-content-report{
width:min(92vw, 340px) !important;
max-width:340px !important;
margin:90px auto !important;
padding:16px !important;
border-radius:18px !important;
box-shadow:0 18px 55px rgba(2,6,23,.22) !important;
}
.modal-content-report textarea{
height:92px !important;
font-size:11px !important;
border-radius:12px !important;
}
.close-report{
top:8px !important;
left:12px !important;
width:30px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#f3f4f6 !important;
font-size:18px !important;
}
.kgallery-modal{
padding:18px !important;
}
.kgallery-shell{
width:min(92vw, 780px) !important;
height:min(74vh, 560px) !important;
border-radius:22px !important;
}
.kgallery-topbar{
height:54px !important;
padding:10px 13px !important;
}
.kgallery-title span{
width:34px !important;
height:34px !important;
border-radius:11px !important;
}
.kgallery-title strong{ font-size:11px !important; }
.kgallery-close{ width:36px !important; height:36px !important; }
.kgallery-nav{ width:40px !important; height:40px !important; }
.kgallery-thumbs-swiper{ height:78px !important; padding:10px 14px !important; }
.kgallery-thumbs-swiper .swiper-slide{ width:64px !important; height:54px !important; border-radius:10px !important; }
@media (max-width:640px){
.modal-card{
width:min(94vw, 340px) !important;
max-width:340px !important;
padding:14px !important;
border-radius:16px !important;
}
.kgallery-modal{ padding:12px !important; }
.kgallery-shell{
width:min(94vw, 360px) !important;
height:min(70vh, 520px) !important;
border-radius:18px !important;
}
.kgallery-topbar{ height:80px !important; }
.kgallery-thumbs-swiper{ height:68px !important; }
}
#reviewModal{
width:min(92vw, 360px) !important;
max-width:360px !important;
padding:0 !important;
background:transparent !important;
border-radius:20px !important;
overflow:visible !important;
}
.fancybox__content:has(#reviewModal),
.fancybox__slide.has-inline .fancybox__content{
padding:0 !important;
border-radius:20px !important;
background:transparent !important;
overflow:visible !important;
}
#reviewModal > div{
margin-top:0 !important;
}
#reviewModal .review-container{
width:100% !important;
max-width:360px !important;
margin:0 auto !important;
padding:0 !important;
}
#reviewModal .review-form{
width:100% !important;
max-width:360px !important;
max-height:min(70vh, 560px) !important;
overflow-y:auto !important;
margin:0 auto !important;
padding:14px !important;
border-radius:20px !important;
background:rgba(255,255,255,.98) !important;
border:1px solid rgba(15,23,42,.08) !important;
box-shadow:0 22px 65px rgba(2,6,23,.24) !important;
scrollbar-width:thin;
}
[data-theme="dark"] #reviewModal .review-form{
background:rgba(15,23,42,.98) !important;
border-color:rgba(255,255,255,.08) !important;
}
#reviewModal h3{
font-size:16px !important;
line-height:1.25 !important;
margin:0 0 6px !important;
font-weight:900 !important;
text-align:center !important;
}
#reviewModal p.muted{
max-width:310px !important;
margin:0 auto 10px !important;
font-size:10px !important;
line-height:1.55 !important;
text-align:center !important;
}
#reviewModal .review-form > p.muted{
margin-bottom:9px !important;
padding:8px 10px !important;
border-radius:12px !important;
background:rgba(255,90,95,.08) !important;
color:var(--text) !important;
}
#reviewModal label{
font-size:10px !important;
margin-bottom:4px !important;
font-weight:800 !important;
color:var(--text) !important;
}
#reviewModal select,
#reviewModal textarea{
height:34px !important;
min-height:34px !important;
padding:7px 9px !important;
margin-bottom:8px !important;
border-radius:11px !important;
font-size:12.5px !important;
background:var(--background) !important;
border:1px solid rgba(15,23,42,.10) !important;
outline:none !important;
}
#reviewModal textarea{
height:62px !important;
min-height:62px !important;
resize:vertical !important;
}
#reviewModal .btn-action[type="submit"]{
min-height:38px !important;
padding:9px 12px !important;
border-radius:13px !important;
font-size:11px !important;
font-weight:900 !important;
box-shadow:0 10px 24px rgba(255,90,95,.20) !important;
}
#reviewModal .alert{
width:100% !important;
max-width:340px !important;
margin:0 auto 10px !important;
padding:9px 10px !important;
border-radius:13px !important;
font-size:12.5px !important;
line-height:1.55 !important;
}
#reviewModal .btn-action[href="login.php"],
#reviewModal .btn-action[href="register_user.php"]{
padding:9px 10px !important;
border-radius:13px !important;
font-size:12.5px !important;
}
@media (max-width: 767px){
.fancybox__container:has(#reviewModal) .fancybox__slide,
.fancybox__slide.has-inline:has(#reviewModal){
align-items:flex-end !important;
justify-content:center !important;
padding:10px 10px 96px !important;
}
.fancybox__container:has(#reviewModal) .fancybox__content,
.fancybox__slide.has-inline:has(#reviewModal) .fancybox__content{
margin:0 auto !important;
transform:none !important;
}
#reviewModal{
width:min(92vw, 340px) !important;
max-width:340px !important;
}
#reviewModal .review-container,
#reviewModal .review-form{
max-width:340px !important;
}
#reviewModal .review-form{
max-height:calc(100vh - 135px) !important;
padding:13px !important;
border-radius:18px !important;
}
#reviewModal h3{ font-size:15.5px !important; }
#reviewModal select{ height:33px !important; min-height:33px !important; }
#reviewModal textarea{ height:58px !important; min-height:58px !important; }
}
@media (max-width: 380px){
#reviewModal{ width:min(94vw, 318px) !important; max-width:318px !important; }
#reviewModal .review-container,
#reviewModal .review-form{ max-width:318px !important; }
#reviewModal .review-form{ padding:12px !important; }
#reviewModal select,
#reviewModal textarea{ font-size:10px !important; }
}
@media (min-width:768px){
.fancybox__container:has(#reviewModal) .fancybox__slide,
.fancybox__slide.has-inline:has(#reviewModal){
align-items:center !important;
justify-content:center !important;
padding:20px !important;
}
}
.review-modal-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
backdrop-filter:blur(6px);
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
padding:14px;
}
.review-modal-box{
position:relative;
width:100%;
max-width:380px;
background:#fff;
border-radius:20px;
padding:18px;
box-shadow:
0 20px 60px rgba(0,0,0,.20),
0 2px 10px rgba(0,0,0,.06);
animation:reviewModalIn .25s ease;
}
@keyframes reviewModalIn{
from{
opacity:0;
transform:translateY(15px) scale(.96);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.review-modal-close{
position:absolute;
top:10px;
left:10px;
width:28px;
height:28px;
border:none;
border-radius:50%;
background:#f3f4f6;
color:#111827;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
transition:.2s;
}
.review-modal-close:hover{
background:#e5e7eb;
transform:rotate(90deg);
}
.review-modal-title{
font-size:18px;
font-weight:800;
margin-bottom:14px;
color:#111827;
text-align:center;
}
.review-stars{
display:flex;
justify-content:center;
gap:8px;
margin-bottom:16px;
}
.review-stars i{
font-size:16px;
color:#E7F3FF;
cursor:pointer;
transition:.2s;
}
.review-stars i:hover{
transform:scale(1.15);
}
.review-modal-box textarea{
width:100%;
min-height:90px;
border:1px solid #e5e7eb;
border-radius:14px;
padding:10px;
resize:none;
font-size:14px;
outline:none;
transition:.2s;
}
.review-modal-box textarea:focus{
border-color:#1877F2;
box-shadow:0 0 0 4px rgba(255,90,95,.12);
}
.review-submit-btn{
width:100%;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#1877F2,#0B5ED7);
color:#fff;
padding:13px;
font-size:13px;
font-weight:800;
cursor:pointer;
margin-top:14px;
transition:.2s;
}
.review-submit-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(255,90,95,.20);
}
@media(max-width:768px){
.review-modal-overlay{
align-items:flex-end;
padding:10px;
padding-bottom:95px;
}
.review-modal-box{
max-width:100%;
border-radius:20px 20px 16px 16px;
padding:10px;
animation:mobileReviewIn .22s ease;
}
@keyframes mobileReviewIn{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.review-modal-title{
font-size:16px;
}
.review-stars i{
font-size:22px;
}
.review-submit-btn{
padding:10px;
font-size:14px;
}
}
@media(max-width:400px){
.review-modal-box{
padding:14px;
}
.review-stars{
gap:6px;
}
.review-stars i{
font-size:13px;
}
.review-modal-title{
font-size:13px;
}
.review-submit-btn{
font-size:11px;
}
}
.khdmli-services-section{
margin-top:18px;
background:var(--card);
border:1px solid rgba(15,23,42,.06);
border-radius:20px;
padding:10px;
box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.khdmli-services-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:14px;
}
.khdmli-services-head h2{
margin:0;
font-size:13px;
font-weight:900;
color:var(--text);
display:flex;
align-items:center;
gap:8px;
}
.khdmli-services-head span{
font-size:8.5px;
font-weight:800;
color:var(--primary);
background:rgba(255,90,95,.10);
padding:6px 10px;
border-radius:999px;
white-space:nowrap;
}
.services-head-left{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.all-services-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
background:linear-gradient(90deg,var(--primary), #0B5ED7);
color:#fff !important;
text-decoration:none !important;
font-size:11px;
font-weight:900;
box-shadow:0 8px 20px rgba(255,90,95,.18);
transition:.2s ease;
white-space:nowrap;
}
.all-services-btn:hover{
color:#fff !important;
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(255,90,95,.25);
}
.khdmli-services-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:9px;
}
.khdmli-service-card{
text-decoration:none;
color:inherit;
display:block;
position:relative;
overflow:hidden;
border-radius:10px;
background:var(--background);
border:1px solid rgba(15,23,42,.06);
box-shadow:0 8px 20px rgba(15,23,42,.05);
transition:.22s ease;
}
.khdmli-service-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 30px rgba(15,23,42,.10);
}
.khdmli-service-img{
width:100%;
height:105px;
background:#e5e7eb;
overflow:hidden;
position:relative;
}
.khdmli-service-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.khdmli-service-card:hover .khdmli-service-img img{
transform:scale(1.06);
}
.khdmli-service-body{
padding:11px;
}
.khdmli-service-title{
font-size:12px;
font-weight:900;
color:var(--text);
margin:0 0 6px;
line-height:1.45;
}
.khdmli-service-desc{
font-size:8.5px;
color:var(--muted);
line-height:1.55;
height:38px;
overflow:hidden;
margin-bottom:8px;
}
.khdmli-service-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;
}
.khdmli-service-pill{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 8px;
border-radius:999px;
background:#fff;
color:#111827;
font-size:10px;
font-weight:800;
border:1px solid rgba(15,23,42,.06);
}
.khdmli-service-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding-top:8px;
border-top:1px solid rgba(15,23,42,.06);
color:var(--muted);
font-size:11px;
font-weight:800;
}
.khdmli-service-footer i{
color:var(--primary);
}
.khdmli-service-status{
display:inline-flex;
align-items:center;
gap:5px;
}
.khdmli-service-status::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:#1877F2;
box-shadow:0 0 0 4px rgba(22,163,74,.12);
}
@media(max-width:768px){
.khdmli-services-section{
padding:13px;
border-radius:14px;
}
.khdmli-services-head{
flex-direction:column;
align-items:stretch;
}
.services-head-left{
justify-content:space-between;
}
.all-services-btn{
width:100%;
}
.khdmli-services-head h2{
font-size:17px;
}
.khdmli-services-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.khdmli-service-img{
height:92px;
}
.khdmli-service-title{
font-size:11px;
}
.khdmli-service-desc{
font-size:11px;
height:28px;
}
.khdmli-service-pill{
font-size:8.5px;
padding:4px 7px;
}
}
.khdmli-service-img{
position:relative;
overflow:hidden;
}
.service-type-badge{
position:absolute;
top:12px;
right:12px;
z-index:5;
display:flex;
align-items:center;
gap:6px;
padding:7px 12px;
border-radius:50px;
font-size:8.5px;
font-weight:700;
color:#fff;
backdrop-filter:blur(10px);
box-shadow:0 4px 15px rgba(0,0,0,.15);
}
.badge-service{
background:linear-gradient(135deg,#1976d2,#42a5f5);
}
.badge-product{
background:linear-gradient(135deg,#0B5ED7,#1877F2);
}
.service-type-badge i{
font-size:11px;
}
.hallaq-detail-ad{
position:relative;
overflow:hidden;
min-height:50px;
display:flex !important;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#3b2506 0%,#8b5a10 48%,#d4a017 100%) !important;
border:none !important;
border-radius:18px !important;
text-decoration:none !important;
box-shadow:0 12px 34px rgba(59,37,6,.22);
}
.hallaq-detail-ad::before{
content:"";
position:absolute;
width:150px;
height:150px;
border-radius:50%;
left:-60px;
bottom:-70px;
background:rgba(255,255,255,.08);
}
.hallaq-detail-ad::after{
content:"";
position:absolute;
width:100px;
height:100px;
border-radius:24px;
right:-25px;
top:-25px;
background:rgba(255,255,255,.06);
transform:rotate(25deg);
}
.hallaq-detail-ad-inner{
position:relative;
z-index:2;
width:100%;
padding:8px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
color:#fff;
}
.hallaq-detail-ad-icon{
width:36px;
height:36px;
min-width:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.18);
color:#fff;
font-size:16px;
}
.hallaq-detail-ad-text{
flex:1;
min-width:0;
}
.hallaq-detail-ad-text strong{
display:block;
font-size:13px;
font-weight:900;
line-height:1.2;
margin-bottom:1px;
color:#fff;
}
.hallaq-detail-ad-text span{
display:block;
font-size:11px;
line-height:1.3;
color:rgba(255,255,255,.93);
font-weight:700;
}
.hallaq-detail-ad-btn{
height:32px;
padding:0 12px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
background:#fff;
color:#7c4a03;
font-size:8.5px;
font-weight:900;
white-space:nowrap;
box-shadow:0 8px 18px rgba(0,0,0,.12);
}
@media(max-width:640px){
.hallaq-detail-ad{
min-height:92px;
border-radius:16px !important;
}
.hallaq-detail-ad-inner{
padding:14px;
gap:10px;
}
.hallaq-detail-ad-icon{
width:44px;
height:44px;
min-width:44px;
border-radius:14px;
font-size:13px;
}
.hallaq-detail-ad-text strong{
font-size:16px;
}
.hallaq-detail-ad-text span{
font-size:11px;
line-height:1.5;
}
.hallaq-detail-ad-btn{
height:36px;
padding:0 12px;
font-size:11px;
}
}
.khdmli-service-cta{
margin:22px 0;
position:relative;
overflow:hidden;
border-radius:24px;
background:
radial-gradient(circle at 8% 0%, #0dcaf0, transparent 28%), radial-gradient(circle at 92% 100%, rgba(22, 163, 74, .22), transparent 32%), linear-gradient(135deg, #ffffff 0%, #f0fdf4 48%, #0dcaf03b 100%);
border:1px solid rgba(22,163,74,.16);
box-shadow:0 18px 45px rgba(15,23,42,.08);
padding:22px;
}
[data-theme="dark"] .khdmli-service-cta{
background:
radial-gradient(circle at 8% 0%, rgba(249,115,22,.16), transparent 28%),
radial-gradient(circle at 92% 100%, rgba(22,163,74,.16), transparent 32%),
linear-gradient(135deg,rgba(15,23,42,.96),rgba(2,6,23,.96));
border-color:rgba(255,255,255,.07);
}
.khdmli-service-cta::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
right:-80px;
top:-90px;
background:rgba(249,115,22,.10);
}
.khdmli-service-cta-inner{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}
.khdmli-service-cta-main{
display:flex;
align-items:flex-start;
gap:16px;
min-width:0;
}
.khdmli-service-cta-icon{
width:68px;
height:68px;
min-width:68px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#1877F2,#0B5ED7);
color:#fff;
font-size:30px;
box-shadow:0 14px 30px rgba(22,163,74,.22);
}
.khdmli-service-cta-text h3{
margin:0 0 8px;
font-size:23px;
font-weight:900;
color:#0f172a;
line-height:1.35;
}
[data-theme="dark"] .khdmli-service-cta-text h3{
color:#fff;
}
.khdmli-service-cta-text p{
margin:0;
color:#475569;
font-size:13px;
line-height:1.9;
font-weight:700;
}
[data-theme="dark"] .khdmli-service-cta-text p{
color:#cbd5e1;
}
.khdmli-service-cta-tags{
margin-top:12px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.khdmli-service-cta-tag{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 11px;
border-radius:999px;
background:#fff;
color:#15803d;
border:1px solid rgba(22,163,74,.14);
font-size:11px;
font-weight:900;
box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.khdmli-service-cta-tag.orange{
color:#ea580c;
border-color:rgba(249,115,22,.18);
}
.khdmli-service-cta-btn{
min-width:170px;
height:52px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
background:linear-gradient(135deg,#1877F2,#0B5ED7);
color:#fff !important;
text-decoration:none !important;
font-size:13px;
font-weight:900;
box-shadow:0 14px 30px rgba(249,115,22,.24);
transition:.22s ease;
white-space:nowrap;
}
.khdmli-service-cta-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 38px rgba(22,163,74,.26);
}
@media(max-width:768px){
.khdmli-service-cta{
border-radius:20px;
padding:18px;
}
.khdmli-service-cta-inner{
flex-direction:column;
align-items:stretch;
}
.khdmli-service-cta-main{
gap:9px;
}
.khdmli-service-cta-icon{
width:56px;
height:56px;
min-width:56px;
border-radius:14px;
font-size:24px;
}
.khdmli-service-cta-text h3{
font-size:18px;
}
.khdmli-service-cta-text p{
font-size:13px;
line-height:1.75;
}
.khdmli-service-cta-btn{
width:100%;
height:50px;
}
}
.profile-photo::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:34%;
z-index:3;
pointer-events:none;
background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.55));
}
.artisan-image-stats{
position:absolute;
bottom:12px;
left:12px;
right:12px;
z-index:24;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex-wrap:nowrap;
pointer-events:none;
}
.artisan-stat{
min-width:58px;
height:42px;
padding:0 11px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
border-radius:999px;
color:#fff;
background:rgba(15,23,42,.64);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 8px 20px rgba(0,0,0,.18);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
line-height:1;
}
.artisan-stat i{
font-size:13px;
color:#fff;
line-height:1;
}
.artisan-stat strong{
color:#fff;
font-size:11px;
font-weight:900;
line-height:1;
direction:ltr;
unicode-bidi:embed;
white-space:nowrap;
}
.artisan-stat-views i{ color:#f8fafc; }
.artisan-stat-heart i{ color:#fb7185; }
.artisan-stat-calendar i{ color:#fbbf24; }
.artisan-stat-status i{ font-size:11px; color:#22c55e; filter:drop-shadow(0 0 5px rgba(34,197,94,.65)); }
.artisan-stat-status.is-offline i{ color:#cbd5e1; filter:none; }
@media(max-width:768px){
.profile-photo::after{ height:32%; }
.artisan-image-stats{
bottom:10px;
left:10px;
right:10px;
gap:6px;
}
.artisan-stat{
min-width:50px;
height:37px;
padding:0 9px;
gap:5px;
}
.artisan-stat i{ font-size:12px; }
.artisan-stat strong{ font-size:10px; }
.artisan-stat-status{ min-width:37px; width:37px; padding:0; }
}
@media(max-width:380px){
.artisan-image-stats{ gap:5px; }
.artisan-stat{
min-width:45px;
height:34px;
padding:0 7px;
}
.artisan-stat strong{ font-size:9px; }
}
.khdmli-bookable-ad-space{
width:100%;
margin:14px 0;
}
.khdmli-bookable-ad-live,
.khdmli-bookable-ad-empty{
width:100%;
min-height:90px;
border-radius:18px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
text-decoration:none;
}
.khdmli-bookable-ad-live img{
width:100%;
max-height:130px;
object-fit:cover;
border-radius:18px;
background:#f1f5f9;
}
.khdmli-bookable-ad-empty{
border:1px dashed #cbd5e1;
background:linear-gradient(135deg,#ffffff,#f8fafc);
color:#64748b;
flex-direction:column;
gap:4px;
font-weight:900;
}
.khdmli-bookable-ad-empty span{
font-size:14px;
}
.khdmli-bookable-ad-empty strong{
font-size:13px;
color:#94a3b8;
letter-spacing:.3px;
}
.khdmli-bookable-ad-space.is-middle{
margin:18px 0;
}
.ad1-box,.ad2-box,.ad-box{
display:none!important;
}
@media(max-width:768px){
.khdmli-bookable-ad-space{margin:10px 0}
.khdmli-bookable-ad-live,
.khdmli-bookable-ad-empty{
min-height:100px;
border-radius:16px;
}
.khdmli-bookable-ad-live img{
max-height:110px;
border-radius:16px;
}
}
footer,
.fb-footer,
.site-footer,
.khdmli-footer{
width:100%;
max-width:100%;
clear:both;
position:relative;
z-index:1;
box-sizing:border-box;
overflow:hidden;
}
footer *,
.fb-footer *,
.site-footer *,
.khdmli-footer *{
box-sizing:border-box;
}
footer a,
.fb-footer a,
.site-footer a,
.khdmli-footer a{
text-decoration:none;
}
@media(max-width:768px){
footer,
.fb-footer,
.site-footer,
.khdmli-footer{
margin-bottom:70px;
}
}
.khdmli-mobile-ad-320x100{
display:none;
width:320px;
max-width:100%;
margin:10px auto 12px;
text-align:center;
clear:both;
}
.khdmli-mobile-ad-live,
.khdmli-mobile-ad-empty{
width:320px;
max-width:100%;
height:100px;
margin:0 auto;
border-radius:14px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 2px 10px rgba(0,0,0,.10);
border:1px solid rgba(24,119,242,.15);
background:#fff;
}
.khdmli-mobile-ad-live img{
width:320px;
max-width:100%;
height:100px;
object-fit:cover;
display:block;
}
.khdmli-mobile-ad-empty{
background:linear-gradient(135deg,#e7f3ff,#ffffff);
color:#1877f2;
flex-direction:column;
gap:3px;
font-weight:900;
padding:8px;
}
.khdmli-mobile-ad-empty span{font-size:13px}
.khdmli-mobile-ad-empty strong{font-size:13px;color:#0f172a}
.khdmli-mobile-ad-empty small{font-size:11px;color:#64748b}
.khdmli-mobile-ad-label{
margin-top:4px;
color:#65676b;
font-size:10px;
font-weight:800;
line-height:1;
}
@media(max-width:768px){
.khdmli-mobile-ad-320x100{display:block!important}
}
@media(min-width:769px){
.khdmli-mobile-ad-320x100{display:none!important}
}
.profile-local-details{display:grid;gap:8px;}
.profile-local-details p{margin:0!important;display:flex;align-items:flex-start;gap:9px;line-height:1.5;}
.profile-local-details i{width:18px;margin-top:3px;color:var(--primary);text-align:center;}
.profile-local-service strong{font-weight:800;}
.profile-local-region{color:var(--muted);font-size:13px;}
.mobile-safe-local-details{display:grid;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(15,23,42,.07);}
.mobile-safe-local-line{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--text);}
.mobile-safe-local-line i{width:17px;margin-top:3px;color:var(--primary);text-align:center;flex:0 0 17px;}
.mobile-safe-service-line strong{font-size:14px;font-weight:800;}
.mobile-safe-region-line{color:var(--muted);font-size:12.5px;}
.mobile-profile-socials{display:none;}
@media (max-width:768px){
.mobile-profile-socials{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:11px;
padding-top:11px;
border-top:1px solid rgba(15,23,42,.08);
}
.mobile-profile-socials-title{
width:100%;
margin:0 0 2px;
font-size:12px;
font-weight:800;
color:var(--muted);
}
.mobile-profile-social-link{
width:42px;
height:42px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none!important;
background:#fff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 5px 14px rgba(15,23,42,.08);
transition:transform .15s ease,box-shadow .15s ease;
}
.mobile-profile-social-link:active{transform:scale(.94);}
.mobile-profile-social-link i{font-size:20px;}
.mobile-profile-social-link.is-website{color:#2563eb;}
.mobile-profile-social-link.is-facebook{color:#1877f2;}
.mobile-profile-social-link.is-instagram{color:#e4405f;}
.mobile-profile-social-link.is-whatsapp{color:#25d366;}
.mobile-profile-social-link.is-telegram{color:#229ed9;}
.mobile-profile-social-link.is-tiktok{color:#111827;}
.mobile-profile-social-link.is-youtube{color:#ff0000;}
.social-links-box{display:none!important;}
}
.khd-ba-section{
position:relative;
margin:22px 0;
padding:20px;
overflow:hidden;
border:1px solid #e6eaf0;
border-radius:28px;
background:
radial-gradient(circle at 8% 0%,rgba(37,99,235,.10),transparent 30%),
radial-gradient(circle at 95% 95%,rgba(16,185,129,.10),transparent 32%),
#fff;
box-shadow:0 20px 55px rgba(15,23,42,.09);
}
.khd-ba-section:before{
content:"";
position:absolute;
width:180px;height:180px;border-radius:50%;
left:-95px;top:-95px;
background:rgba(37,99,235,.08);
pointer-events:none;
}
.khd-ba-head{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.khd-ba-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.khd-ba-icon{
width:52px;height:52px;flex:0 0 52px;
display:flex;align-items:center;justify-content:center;
border-radius:18px;
background:linear-gradient(135deg,#2563eb,#10b981);
color:#fff;font-size:21px;
box-shadow:0 12px 24px rgba(37,99,235,.24);
}
.khd-ba-head h2{margin:0;font-size:1.15rem;font-weight:950;color:#0f172a}
.khd-ba-head p{margin:4px 0 0;color:#64748b;font-size:.86rem;font-weight:700}
.khd-ba-count{
display:inline-flex;align-items:center;gap:7px;
border-radius:999px;padding:8px 12px;
color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;
font-weight:900;font-size:.82rem;white-space:nowrap;
}
.khd-ba-track{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(330px,78%);
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
overscroll-behavior-inline:contain;
scrollbar-width:none;
padding:2px 2px 12px;
}
.khd-ba-track::-webkit-scrollbar{display:none}
.khd-ba-card{
scroll-snap-align:start;
min-width:0;
overflow:hidden;
border-radius:24px;
border:1px solid #e5e7eb;
background:#fff;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.khd-ba-compare{
--khd-ba-position:50%;
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:#e2e8f0;
isolation:isolate;
touch-action:pan-y;
}
.khd-ba-compare img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
user-select:none;
-webkit-user-drag:none;
}
.khd-ba-before{z-index:1}
.khd-ba-after-wrap{
position:absolute;inset:0;
z-index:2;
width:var(--khd-ba-position);
overflow:hidden;
border-inline-end:3px solid #fff;
filter:drop-shadow(4px 0 7px rgba(15,23,42,.25));
}
.khd-ba-after-wrap img{
width:calc(100% * 100 / var(--khd-ba-number,50));
max-width:none;
}
.khd-ba-line{
position:absolute;
z-index:4;
top:0;bottom:0;
left:var(--khd-ba-position);
width:3px;
transform:translateX(-50%);
background:#fff;
box-shadow:0 0 0 1px rgba(15,23,42,.16);
pointer-events:none;
}
.khd-ba-handle{
position:absolute;
z-index:5;
top:50%;left:var(--khd-ba-position);
transform:translate(-50%,-50%);
width:52px;height:52px;border-radius:50%;
display:flex;align-items:center;justify-content:center;gap:5px;
color:#0f172a;background:#fff;
border:1px solid rgba(15,23,42,.12);
box-shadow:0 10px 28px rgba(15,23,42,.30);
pointer-events:none;
}
.khd-ba-handle i{font-size:13px}
.khd-ba-range{
position:absolute;inset:0;
z-index:6;width:100%;height:100%;
opacity:0;cursor:ew-resize;margin:0;
}
.khd-ba-label{
position:absolute;z-index:7;top:12px;
display:inline-flex;align-items:center;gap:6px;
padding:7px 11px;border-radius:999px;
color:#fff;font-weight:950;font-size:.75rem;
backdrop-filter:blur(10px);
box-shadow:0 8px 18px rgba(15,23,42,.18);
pointer-events:none;
}
.khd-ba-label.before{right:12px;background:rgba(15,23,42,.72)}
.khd-ba-label.after{left:12px;background:rgba(16,185,129,.86)}
.khd-ba-expand{
position:absolute;z-index:8;bottom:12px;left:12px;
width:42px;height:42px;border:0;border-radius:14px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);color:#0f172a;
box-shadow:0 8px 20px rgba(15,23,42,.18);
cursor:pointer;
}
.khd-ba-body{padding:16px}
.khd-ba-body h3{margin:0 0 7px;font-size:1rem;font-weight:950;color:#0f172a;line-height:1.55}
.khd-ba-work-date{
display:flex;
align-items:center;
gap:6px;
margin:2px 0 10px;
padding:0;
color:#65676b;
font-size:.78rem;
font-weight:700;
line-height:1.4;
background:transparent;
border:0;
box-shadow:none;
}
.khd-ba-work-date i{
color:#65676b;
font-size:.78rem;
}
.khd-ba-work-date-label{font-weight:700}
.khd-ba-work-date-value{font-weight:700;color:#65676b}
.khd-ba-body p{
margin:0;color:#64748b;line-height:1.75;font-size:.88rem;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.khd-ba-meta{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7;
}
.khd-ba-meta span{
display:inline-flex;align-items:center;gap:6px;
color:#475569;background:#f8fafc;border:1px solid #e2e8f0;
border-radius:999px;padding:6px 9px;font-size:.75rem;font-weight:850;
}
.khd-ba-verified{color:#047857!important;background:#ecfdf5!important;border-color:#a7f3d0!important}
.khd-ba-swipe-note{
display:none;align-items:center;justify-content:center;gap:7px;
color:#64748b;font-size:.76rem;font-weight:800;margin-top:3px;
}
.khd-ba-empty{
padding:28px 18px;text-align:center;border:1px dashed #cbd5e1;
border-radius:22px;background:rgba(248,250,252,.85);color:#64748b;
}
.khd-ba-empty i{display:block;font-size:30px;color:#94a3b8;margin-bottom:10px}
.khd-ba-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid #eef2f7}
.khd-ba-action{border:1px solid #e2e8f0;background:#fff;color:#475569;border-radius:999px;min-height:38px;padding:7px 11px;display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:.78rem;cursor:pointer;transition:.2s}
.khd-ba-action:hover{transform:translateY(-1px);border-color:#93c5fd;background:#f8fbff}.khd-ba-action.active.like{color:#166534;background:#dcfce7;border-color:#86efac}.khd-ba-action.active.dislike{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}
.khd-ba-action.chat{margin-inline-start:auto;color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.khd-ba-action.danger{color:#b91c1c}.khd-ba-action.edit{color:#7c3aed}
.khd-ba-comments{margin-top:14px;border-top:1px solid #edf2f7;padding-top:13px}
.khd-ba-comment-form{display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;padding:10px 0!important}
.khd-ba-comment-form-avatar{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:50%!important;overflow:hidden!important;border:1px solid #dde3ea!important;background:#eef1f5!important}
.khd-ba-comment-form-avatar img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.khd-ba-comment-input-wrap{position:relative!important;display:flex!important;align-items:center!important;flex:1!important;min-width:0!important;background:#f0f2f5!important;border:1px solid transparent!important;border-radius:24px!important;transition:border-color .18s,background .18s,box-shadow .18s!important}
.khd-ba-comment-input-wrap:focus-within{background:#fff!important;border-color:#ccd7e5!important;box-shadow:0 0 0 3px rgba(24,119,242,.10)!important}
.khd-ba-comment-form textarea{width:100%!important;min-height:42px!important;max-height:120px!important;height:42px;margin:0!important;padding:10px 48px 10px 15px!important;border:0!important;border-radius:24px!important;background:transparent!important;color:#1c1e21!important;font:inherit!important;font-size:.88rem!important;line-height:1.45!important;resize:none!important;outline:0!important;box-shadow:none!important;overflow-y:auto!important}
[dir=rtl] .khd-ba-comment-form textarea{padding:10px 15px 10px 48px!important}
.khd-ba-comment-form textarea:focus{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important}
.khd-ba-send{position:absolute!important;inset-inline-end:5px!important;bottom:5px!important;width:32px!important;height:32px!important;min-width:32px!important;border:0!important;border-radius:50%!important;background:#1877f2!important;color:#fff!important;display:grid!important;place-items:center!important;cursor:pointer!important;box-shadow:none!important;transition:background .18s,transform .18s!important}
.khd-ba-send:hover{background:#0f6ae0!important;transform:scale(1.04)!important}.khd-ba-send:disabled{opacity:.55!important;cursor:not-allowed!important}
.khd-ba-comment-list{display:grid;gap:10px;margin-top:12px}.khd-ba-thread{display:grid;gap:7px}.khd-ba-thread[hidden]{display:none!important}.khd-ba-comment{display:flex;gap:9px;align-items:flex-start}.khd-ba-replies{display:none;gap:8px;margin-inline-start:34px;padding-inline-start:10px;border-inline-start:2px solid #dbeafe}.khd-ba-replies.open{display:grid}.khd-ba-comment.reply{margin:0}.khd-ba-comment img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #e2e8f0;flex:0 0 34px}.khd-ba-comment-bubble{flex:1;min-width:0;background:#f0f2f5;border-radius:18px;padding:9px 12px}.khd-ba-comment-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.khd-ba-comment-head strong{font-size:.79rem;color:#050505}.khd-ba-comment-head time{font-size:.68rem;color:#65676b}
.khd-ba-comment-text,.khd-ba-comment-text.expanded{margin:4px 0 0!important;color:#1c1e21!important;font-size:.79rem!important;display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;overflow:visible!important;max-height:none!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important}
.khd-ba-comment-tools{display:flex;gap:8px;margin-top:5px;flex-wrap:wrap}.khd-ba-comment-tools button{border:0;background:none;padding:0;color:#65676b;font-size:.7rem;font-weight:850;cursor:pointer}.khd-ba-comment-tools button:hover{color:#1877f2}
.khd-ba-comment-tools [data-ba-edit-comment],.khd-ba-comment-tools [data-ba-delete-comment]{display:inline-flex;align-items:center;gap:4px;padding:4px 7px!important;border-radius:8px!important;background:#fff!important;border:1px solid #e2e8f0!important}
.khd-ba-comment-tools [data-ba-edit-comment]{color:#2563eb!important}.khd-ba-comment-tools [data-ba-edit-comment]:hover{background:#eff6ff!important;border-color:#bfdbfe!important}
.khd-ba-comment-tools [data-ba-delete-comment]{color:#dc2626!important}.khd-ba-comment-tools [data-ba-delete-comment]:hover{background:#fef2f2!important;border-color:#fecaca!important}
.khd-ba-comment.is-editing .khd-ba-comment-text{display:none!important}.khd-ba-inline-edit{width:100%;min-height:78px;resize:vertical;border:1px solid #93c5fd;border-radius:12px;padding:9px 10px;background:#fff;color:#0f172a;font:inherit;outline:none}.khd-ba-inline-edit:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.khd-ba-inline-edit-actions{display:flex;gap:7px;margin-top:7px}.khd-ba-inline-edit-actions button{padding:6px 10px!important;border-radius:9px!important;border:0!important;font-weight:850!important}.khd-ba-inline-save{background:#2563eb!important;color:#fff!important}.khd-ba-inline-cancel{background:#e2e8f0!important;color:#334155!important}
.khd-ba-toggle-replies,.khd-ba-load-more{border:0;background:transparent;color:#2563eb;font-size:.73rem;font-weight:900;cursor:pointer;padding:4px 0}.khd-ba-toggle-replies{margin-inline-start:43px;text-align:start}.khd-ba-load-more{width:100%;margin-top:4px;padding:10px;border-radius:12px;background:#eff6ff}.khd-ba-load-more:hover{background:#dbeafe}.khd-ba-comments-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:#64748b;font-size:.73rem;font-weight:800}.khd-ba-empty-comments{text-align:center;color:#94a3b8;font-size:.76rem;padding:8px}.khd-ba-replying{display:none;margin:7px 0;padding:7px 9px;border-radius:10px;background:#eff6ff;color:#1d4ed8;font-size:.72rem;font-weight:800}.khd-ba-replying.show{display:flex;justify-content:space-between;align-items:center}.khd-ba-toast{position:fixed;z-index:99999;bottom:92px;left:50%;transform:translate(-50%,20px);opacity:0;background:#0f172a;color:#fff;padding:11px 16px;border-radius:999px;font-weight:800;font-size:.82rem;transition:.25s;pointer-events:none}.khd-ba-toast.show{opacity:1;transform:translate(-50%,0)}
.khd-ba-comments-modal-head{display:none}.khd-ba-comments.is-modal{position:fixed;z-index:100050;inset:0;margin:0!important;padding:0!important;border:0!important;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);overflow:auto;display:flex;align-items:flex-end;justify-content:center}.khd-ba-comments.is-modal:before{content:"";position:fixed;inset:0}.khd-ba-comments.is-modal>.khd-ba-comments-modal-head,.khd-ba-comments.is-modal>.khd-ba-replying,.khd-ba-comments.is-modal>.khd-ba-comment-form,.khd-ba-comments.is-modal>.khd-ba-comments-summary,.khd-ba-comments.is-modal>.khd-ba-comment-list{position:relative;z-index:1;width:min(680px,100%);background:#fff}.khd-ba-comments.is-modal>.khd-ba-comments-modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 18px 13px;border-radius:22px 22px 0 0;border-bottom:1px solid #e2e8f0}.khd-ba-comments-modal-head strong{display:block;color:#0f172a;font-size:1rem;font-weight:950}.khd-ba-comments-modal-head small{display:block;color:#64748b;font-size:.73rem;margin-top:3px}.khd-ba-comments-close{width:38px;height:38px;border:0;border-radius:50%;background:#f1f5f9;color:#334155;cursor:pointer;font-size:1rem}.khd-ba-comments.is-modal>.khd-ba-replying{margin:0;padding:8px 18px}.khd-ba-comments.is-modal>.khd-ba-comment-form{padding:12px 18px}.khd-ba-comments.is-modal>.khd-ba-comments-summary{margin:0;padding:10px 18px;border-top:1px solid #eef2f7}.khd-ba-comments.is-modal>.khd-ba-comment-list{margin:0;padding:12px 18px 22px;max-height:min(62vh,650px);overflow:auto;border-radius:0}.khd-ba-comments.is-modal>.khd-ba-load-more{display:none!important}.khd-ba-comments.is-modal [data-ba-thread][hidden]{display:grid!important}.khd-ba-comments.is-modal .khd-ba-replies.open{display:grid}.khd-ba-comments.is-modal .khd-ba-comment-bubble{background:#f8fafc}@media(min-width:700px){.khd-ba-comments.is-modal{align-items:center;padding:24px!important}.khd-ba-comments.is-modal>.khd-ba-comments-modal-head{border-radius:22px 22px 0 0}.khd-ba-comments.is-modal>.khd-ba-comment-list{border-radius:0 0 22px 22px}}@media(max-width:699px){.khd-ba-comments.is-modal>.khd-ba-comments-modal-head{position:sticky;top:0}.khd-ba-comments.is-modal>.khd-ba-comment-list{max-height:58vh;border-radius:0}.khd-ba-comments.is-modal>.khd-ba-comment-form{position:sticky;bottom:0;order:9;border-top:1px solid #e2e8f0}.khd-ba-comments.is-modal{flex-direction:column;justify-content:flex-end}.khd-ba-comments.is-modal>.khd-ba-comments-modal-head,.khd-ba-comments.is-modal>.khd-ba-replying,.khd-ba-comments.is-modal>.khd-ba-comment-form,.khd-ba-comments.is-modal>.khd-ba-comments-summary,.khd-ba-comments.is-modal>.khd-ba-comment-list{flex:none}}
@media(max-width:600px){.khd-ba-actions{gap:6px}.khd-ba-action{padding:7px 9px}.khd-ba-action.chat{margin-inline-start:0}.khd-ba-replies{margin-inline-start:22px}.khd-ba-toggle-replies{margin-inline-start:31px}}
.khd-ba-modal{
position:fixed;inset:0;z-index:16000;
display:flex;align-items:center;justify-content:center;
padding:18px;background:rgba(2,6,23,.82);
backdrop-filter:blur(14px);
opacity:0;visibility:hidden;transition:.22s;
}
.khd-ba-modal.show{opacity:1;visibility:visible}
.khd-ba-modal-card{
width:min(980px,100%);max-height:92vh;overflow:auto;
border-radius:26px;background:#fff;padding:14px;
box-shadow:0 30px 90px rgba(0,0,0,.45);
transform:scale(.96);transition:.22s;
}
.khd-ba-modal.show .khd-ba-modal-card{transform:scale(1)}
.khd-ba-modal-top{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:4px 4px 12px;
}
.khd-ba-modal-title{font-weight:950;color:#0f172a}
.khd-ba-modal-close{
width:42px;height:42px;border:0;border-radius:14px;
background:#f1f5f9;color:#0f172a;cursor:pointer;
}
.khd-ba-modal-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.khd-ba-modal-figure{margin:0;position:relative;overflow:hidden;border-radius:20px;background:#e2e8f0}
.khd-ba-modal-figure img{display:block;width:100%;height:min(64vh,620px);object-fit:contain;background:#0f172a}
.khd-ba-modal-figure figcaption{
position:absolute;top:12px;right:12px;
color:#fff;background:rgba(15,23,42,.72);
border-radius:999px;padding:7px 12px;font-weight:900;font-size:.78rem;
}
.khd-ba-modal-figure.after figcaption{background:rgba(16,185,129,.88)}
@media(max-width:768px){
.khd-ba-section{margin:16px -2px;padding:14px;border-radius:24px}
.khd-ba-head{align-items:flex-start}
.khd-ba-head h2{font-size:1.02rem}
.khd-ba-head p{font-size:.79rem}
.khd-ba-icon{width:46px;height:46px;flex-basis:46px;border-radius:16px}
.khd-ba-count{padding:7px 10px;font-size:.75rem}
.khd-ba-track{grid-auto-columns:92%;gap:12px}
.khd-ba-card{border-radius:21px}
.khd-ba-compare{aspect-ratio:4/3}
.khd-ba-swipe-note{display:flex}
.khd-ba-modal{padding:10px;align-items:flex-end}
.khd-ba-modal-card{border-radius:24px 24px 16px 16px;max-height:94vh}
.khd-ba-modal-images{grid-template-columns:1fr}
.khd-ba-modal-figure img{height:auto;max-height:58vh}
}
@media(max-width:480px){
.khd-ba-section{padding:12px}
.khd-ba-head{gap:8px}
.khd-ba-head p{display:none}
.khd-ba-count span{display:none}
.khd-ba-track{grid-auto-columns:96%}
.khd-ba-body{padding:14px}
.khd-ba-work-date{margin-bottom:9px;font-size:.76rem}
}