:root {
--kh-primary:#0B5FFF;
--kh-primary-2:#2F80ED;
--kh-primary-dark:#073B8E;
--kh-accent:#FF8A00;
--kh-accent-soft:#FFE0B8;
--kh-dark:#061A40;
--kh-soft:#EAF3FF;
--kh-bg:#F6FAFF;
--kh-card:#FFFFFF;
--kh-text:#0F172A;
--kh-muted:#64748B;
--kh-border:rgba(11,95,255,.14);
--kh-shadow:0 24px 70px rgba(6,26,64,.12);
--bottom-space:90px;
}
body{
--header-main: var(--kh-primary);
--header-secondary: var(--kh-primary-2);
--header-dark: var(--kh-dark);
}
* {
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
body {
margin:0;
background:
radial-gradient(circle at 10% 0%, rgba(47,128,237,.16), transparent 28%),
radial-gradient(circle at 90% 10%, rgba(255,138,0,.14), transparent 25%),
var(--kh-bg);
color:var(--kh-text);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
padding-bottom:var(--bottom-space);
}
a {
color:inherit;
text-decoration:none;
}
img {
max-width:100%;
display:block;
}
.kh-container {
width:min(1220px, calc(100% - 32px));
margin-inline:auto;
}
.kh-hero {
position:relative;
overflow:hidden;
min-height:580px;
padding:42px 0 72px;
color:#fff;
background:
linear-gradient(135deg, rgba(6,26,64,.92), rgba(11,95,255,.78), rgba(47,128,237,.42)),
var(--kh-hero-image) center/cover no-repeat;
border-bottom-left-radius:44px;
border-bottom-right-radius:44px;
isolation:isolate;
}
.kh-hero-slider {
position:absolute;
inset:0;
z-index:-3;
background:#061A40;
}
.kh-hero-slide {
position:absolute;
inset:0;
opacity:0;
transform:scale(1.06);
animation:khHeroFade 40s infinite;
animation-delay:var(--slide-delay);
}
.kh-hero-slide img {
width:100%;
height:100%;
object-fit:cover;
filter:saturate(1.08) contrast(1.05);
}
.kh-hero-slide:after {
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg, rgba(6,26,64,.88), rgba(11,95,255,.58), rgba(255,138,0,.34)),
linear-gradient(to top, rgba(6,26,64,.94), rgba(6,26,64,.24) 60%, rgba(6,26,64,.72));
}
@keyframes khHeroFade {
0% { opacity:0; transform:scale(1.08); }
7% { opacity:1; transform:scale(1.03); }
24% { opacity:1; transform:scale(1); }
32% { opacity:0; transform:scale(1.02); }
100% { opacity:0; transform:scale(1.08); }
}
.kh-hero-luxury-orb {
position:absolute;
width:210px;
height:210px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,138,0,.36), transparent 68%);
filter:blur(4px);
top:120px;
inset-inline-end:8%;
z-index:-1;
pointer-events:none;
}
.kh-hero-shine {
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 28%),
radial-gradient(circle at 82% 26%, rgba(255,138,0,.22), transparent 24%),
linear-gradient(to bottom, rgba(255,255,255,.08), transparent 45%);
mix-blend-mode:screen;
}
.kh-hero:before {
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 28%),
linear-gradient(to top, rgba(6,26,64,.88), transparent 60%);
z-index:-1;
}
.kh-hero:after {
content:"";
position:absolute;
width:460px;
height:460px;
border-radius:50%;
right:-170px;
bottom:-210px;
background:rgba(255,255,255,.11);
border:1px solid rgba(255,255,255,.16);
z-index:-1;
}
html[dir="ltr"] .kh-hero:after {
right:auto;
left:-170px;
}
.hero-grid {
display:grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
gap:34px;
align-items:center;
}
.hero-copy {
padding-top:30px;
}
.hero-badge {
display:inline-flex;
align-items:center;
gap:9px;
padding:10px 15px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(16px);
font-weight:800;
font-size:13px;
}
.hero-title {
margin:18px 0 14px;
font-size:clamp(32px, 5vw, 66px);
line-height:1.08;
letter-spacing:-1.6px;
max-width:780px;
}
.hero-text {
margin:0;
max-width:680px;
color:rgba(255,255,255,.88);
font-size:clamp(15px, 2vw, 20px);
line-height:1.9;
}
.hero-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:26px;
}
.hero-btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:50px;
padding:0 20px;
border-radius:18px;
font-weight:900;
border:1px solid rgba(255,255,255,.18);
box-shadow:0 16px 35px rgba(0,0,0,.16);
}
.hero-btn.main {
background:linear-gradient(135deg, var(--kh-accent), #FFB347);
color:#fff;
box-shadow:0 18px 38px rgba(255,138,0,.28);
}
.hero-btn.ghost {
background:rgba(255,255,255,.13);
color:#fff;
backdrop-filter:blur(14px);
}
.hero-stats {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
margin-top:30px;
max-width:700px;
}
.hero-stat {
padding:18px 14px;
border-radius:22px;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(16px);
}
.hero-stat strong {
display:block;
font-size:24px;
line-height:1;
}
.hero-stat span {
display:block;
margin-top:8px;
color:rgba(255,255,255,.82);
font-size:13px;
font-weight:700;
}
.hero-phone-card {
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
border-radius:34px;
padding:16px;
backdrop-filter:blur(20px);
box-shadow:0 30px 80px rgba(0,0,0,.22);
transform:rotate(-2deg);
}
html[dir="ltr"] .hero-phone-card {
transform:rotate(2deg);
}
.phone-shell {
background:#f8fffd;
color:var(--kh-text);
border-radius:28px;
padding:18px;
box-shadow:inset 0 0 0 1px rgba(11,95,255,.12);
}
.phone-top {
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}
.phone-pill {
width:92px;
height:9px;
border-radius:999px;
background:#d9f7f1;
}
.phone-card-small {
display:flex;
align-items:center;
gap:12px;
padding:12px;
margin-top:10px;
border:1px solid rgba(11,95,255,.10);
background:#fff;
border-radius:20px;
box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.phone-avatar {
width:52px;
height:52px;
border-radius:18px;
object-fit:cover;
}
.phone-info strong {
display:block;
font-size:14px;
}
.phone-info span {
display:block;
color:var(--kh-muted);
font-size:12px;
margin-top:3px;
}
.search-wrap {
position:relative;
z-index:4;
margin-top:-55px;
}
.search-box {
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.75);
backdrop-filter:blur(24px);
border-radius:34px;
box-shadow:0 26px 80px rgba(15,23,42,.16);
padding:16px;
}
.search-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:14px;
padding:4px 4px 0;
}
.search-head h2 {
margin:0;
font-size:22px;
letter-spacing:-.4px;
}
.search-head p {
margin:4px 0 0;
color:var(--kh-muted);
font-size:13px;
font-weight:700;
}
.search-count {
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:16px;
background:#EAF3FF;
color:var(--kh-primary);
font-weight:900;
white-space:nowrap;
}
.search-form {
display:grid;
grid-template-columns: 1.35fr .9fr .9fr auto auto;
gap:10px;
align-items:end;
}
.field {
position:relative;
}
.field label {
display:block;
color:#334155;
font-size:12px;
font-weight:900;
margin:0 0 7px;
padding-inline:4px;
}
.input-shell {
position:relative;
}
.input-shell i {
position:absolute;
top:50%;
transform:translateY(-50%);
inset-inline-start:15px;
color:var(--kh-primary);
z-index:2;
}
.field input,
.field select {
width:100%;
height:56px;
border:1px solid var(--kh-border);
border-radius:19px;
background:#fff;
color:var(--kh-text);
outline:none;
font-size:15px;
font-weight:800;
padding:0 44px 0 16px;
box-shadow:0 10px 24px rgba(15,23,42,.05);
appearance:none;
}
html[dir="ltr"] .field input,
html[dir="ltr"] .field select {
padding:0 16px 0 44px;
}
.field input:focus,
.field select:focus {
border-color:rgba(11,95,255,.45);
box-shadow:0 0 0 4px rgba(47,128,237,.13), 0 10px 24px rgba(15,23,42,.07);
}
.search-btn,
.reset-btn {
height:56px;
border:0;
border-radius:19px;
padding:0 22px;
font-weight:1000;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
white-space:nowrap;
}
.search-btn {
background:linear-gradient(135deg, var(--kh-primary), var(--kh-accent));
color:#fff;
box-shadow:0 18px 34px rgba(11,95,255,.26);
}
.reset-btn {
background:#f1f5f9;
color:#334155;
}
.quick-chips {
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:14px;
padding:0 4px 2px;
}
.quick-chip {
display:inline-flex;
align-items:center;
gap:7px;
min-height:36px;
padding:0 13px;
border-radius:999px;
background:#fff;
border:1px solid var(--kh-border);
color:#0B5FFF;
font-weight:900;
font-size:13px;
box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.section {
padding:28px 0 0;
}
.section-head {
display:flex;
justify-content:space-between;
align-items:end;
gap:12px;
margin-bottom:15px;
}
.section-title {
margin:0;
font-size:clamp(22px, 3vw, 32px);
letter-spacing:-.6px;
}
.section-title i {
color:var(--kh-primary);
}
.section-sub {
margin:5px 0 0;
color:var(--kh-muted);
font-weight:700;
}
.services-grid {
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:12px;
}
.service-card {
min-height:132px;
border-radius:26px;
background:#fff;
border:1px solid var(--kh-border);
box-shadow:0 16px 42px rgba(15,23,42,.07);
padding:17px 14px;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:.25s ease;
}
.service-card:hover {
transform:translateY(-4px);
box-shadow:var(--kh-shadow);
}
.service-icon {
width:48px;
height:48px;
border-radius:18px;
display:grid;
place-items:center;
color:#fff;
background:linear-gradient(135deg, var(--kh-primary), var(--kh-accent));
box-shadow:0 12px 24px rgba(11,95,255,.24);
font-size:20px;
}
.service-card strong {
display:block;
margin-top:12px;
font-size:15px;
line-height:1.4;
}
.service-card span {
color:var(--kh-muted);
font-size:12px;
font-weight:800;
}
.scroll-row {
display:flex;
gap:12px;
overflow:auto;
scroll-snap-type:x mandatory;
padding-bottom:8px;
scrollbar-width:none;
}
.scroll-row::-webkit-scrollbar {
display:none;
}
.city-card {
flex:0 0 220px;
height:155px;
border-radius:28px;
overflow:hidden;
position:relative;
scroll-snap-align:start;
box-shadow:0 18px 45px rgba(15,23,42,.13);
background:#0B5FFF;
}
.city-card img {
width:100%;
height:100%;
object-fit:cover;
}
.city-card:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05));
}
.city-content {
position:absolute;
z-index:2;
inset:auto 14px 14px 14px;
color:#fff;
}
.city-content strong {
display:block;
font-size:18px;
}
.city-content span {
display:inline-flex;
margin-top:7px;
font-size:12px;
font-weight:900;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.20);
padding:6px 10px;
border-radius:999px;
backdrop-filter:blur(12px);
}
.craftsmen-grid {
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
align-items:stretch;
}
.craft-card {
position:relative;
overflow:hidden;
border-radius:32px;
background:linear-gradient(180deg, #ffffff 0%, #fbfffe 100%);
border:1px solid rgba(11,95,255,.12);
box-shadow:0 20px 55px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.92);
padding:10px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
isolation:isolate;
}
.craft-card:before {
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 15% 5%, rgba(47,128,237,.13), transparent 30%),
radial-gradient(circle at 95% 18%, rgba(255,138,0,.11), transparent 26%);
opacity:.8;
z-index:-1;
pointer-events:none;
}
.craft-card:hover {
transform:translateY(-6px);
border-color:rgba(11,95,255,.25);
box-shadow:0 30px 80px rgba(15,23,42,.14);
}
.premium-badge {
position:absolute;
top:18px;
inset-inline-start:18px;
z-index:5;
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 12px;
border-radius:999px;
background:linear-gradient(135deg, #FF8A00, #FFD6A6);
color:#4a2d00;
font-size:11px;
font-weight:1000;
letter-spacing:.1px;
box-shadow:0 13px 28px rgba(255,138,0,.27);
border:1px solid rgba(255,255,255,.65);
}
.craft-card .status-live {
position:absolute;
top:18px;
inset-inline-end:18px;
z-index:5;
width:13px;
height:13px;
border-radius:999px;
background:#22C55E;
box-shadow:0 0 0 4px rgba(34,197,94,.22), 0 0 18px rgba(34,197,94,.60);
border:2px solid #fff;
}
.craft-cover {
height:178px;
border-radius:25px;
overflow:hidden;
background:linear-gradient(135deg, #E5F0FF, #DCEBFF);
position:relative;
display:block;
}
.craft-cover:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(6,26,64,.62), rgba(6,26,64,.02) 58%);
opacity:.86;
}
.craft-cover img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease;
}
.craft-card:hover .craft-cover img {
transform:scale(1.065);
}
.craft-profile {
display:flex;
gap:12px;
align-items:flex-end;
margin-top:-36px;
padding:0 12px;
position:relative;
z-index:4;
}
.avatar {
width:76px;
height:76px;
border-radius:26px;
object-fit:cover;
border:5px solid #fff;
box-shadow:0 18px 35px rgba(15,23,42,.18), 0 0 0 1px rgba(11,95,255,.10);
background:#fff;
flex:0 0 auto;
}
.profile-name {
min-width:0;
flex:1;
padding-bottom:8px;
}
.profile-name strong {
display:block;
font-size:18px;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
color:#0f172a;
letter-spacing:-.25px;
}
.profile-name span {
display:inline-flex;
align-items:center;
gap:6px;
margin-top:6px;
color:#0B5FFF;
background:#EAF3FF;
border:1px solid rgba(11,95,255,.10);
font-size:12px;
font-weight:900;
padding:5px 9px;
border-radius:999px;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.card-lines {
display:grid;
grid-template-columns:1fr;
gap:8px;
margin:14px 0 11px;
padding:0 4px;
}
.line {
display:flex;
align-items:center;
gap:9px;
color:#334155;
font-size:13px;
font-weight:850;
min-width:0;
}
.line span {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.line i {
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:13px;
color:#0B5FFF;
background:linear-gradient(135deg, #EAF3FF, #DCEBFF);
flex:0 0 auto;
box-shadow:inset 0 0 0 1px rgba(11,95,255,.08);
}
.rating {
display:flex;
align-items:center;
justify-content:space-between;
gap:9px;
background:linear-gradient(135deg, #FFF7ED, #ffffff);
border:1px solid rgba(255,138,0,.18);
border-radius:20px;
padding:10px 12px;
font-size:13px;
font-weight:950;
color:#475569;
box-shadow:0 10px 24px rgba(255,138,0,.07);
}
.rating b {
color:#E86D00;
font-size:15px;
}
.card-actions {
display:grid;
grid-template-columns:1.15fr .85fr;
gap:9px;
margin-top:12px;
}
.btn-card {
min-height:48px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-weight:1000;
font-size:13px;
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-card:hover {
transform:translateY(-2px);
}
.btn-profile {
background:linear-gradient(135deg, #0B5FFF, #2F80ED);
color:#fff;
box-shadow:0 15px 30px rgba(11,95,255,.24);
}
.btn-call {
background:#EAF3FF;
color:#0B5FFF;
border:1px solid rgba(11,95,255,.14);
}
.btn-call:hover {
background:#D8E8FF;
box-shadow:0 12px 25px rgba(11,95,255,.12);
}
.pagination {
display:flex;
justify-content:center;
gap:8px;
margin:22px 0 0;
flex-wrap:wrap;
}
.pagination a,
.pagination span {
min-width:42px;
height:42px;
padding:0 12px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border:1px solid var(--kh-border);
font-weight:900;
}
.pagination .active {
background:var(--kh-primary);
color:#fff;
border-color:var(--kh-primary);
}
@media (min-width: 1200px) {
.search-box {
padding:20px;
}
}
@media (max-width: 1080px) {
.hero-grid {
grid-template-columns:1fr;
}
.hero-phone-card {
display:none;
}
.search-form {
grid-template-columns:1fr 1fr;
}
.search-btn,
.reset-btn {
width:100%;
}
.services-grid {
grid-template-columns:repeat(4, 1fr);
}
.craftsmen-grid {
grid-template-columns:repeat(3, 1fr);
}
}
@media (max-width: 760px) {
body {
--bottom-space:82px;
background:#f7fbfa;
}
.kh-container {
width:min(100% - 20px, 1220px);
}
.kh-hero {
min-height:auto;
padding:26px 0 94px;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
}
.hero-copy {
padding-top:10px;
}
.hero-badge {
font-size:12px;
padding:9px 12px;
}
.hero-title {
margin-top:16px;
font-size:34px;
letter-spacing:-1px;
}
.hero-text {
font-size:14.5px;
line-height:1.75;
}
.hero-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.hero-btn {
min-height:47px;
border-radius:16px;
font-size:13px;
padding:0 10px;
}
.hero-stats {
grid-template-columns:repeat(3, 1fr);
gap:8px;
margin-top:18px;
}
.hero-stat {
border-radius:18px;
padding:13px 8px;
text-align:center;
}
.hero-stat strong {
font-size:18px;
}
.hero-stat span {
font-size:10.5px;
}
.search-wrap {
margin-top:-66px;
}
.search-box {
border-radius:28px;
padding:12px;
background:rgba(255,255,255,.94);
}
.search-head {
align-items:flex-start;
}
.search-head h2 {
font-size:18px;
}
.search-count {
display:none;
}
.search-form {
grid-template-columns:1fr;
gap:9px;
}
.field label {
display:none;
}
.field input,
.field select,
.search-btn,
.reset-btn {
height:52px;
border-radius:18px;
font-size:14px;
}
.search-btn {
margin-top:2px;
}
.quick-chips {
flex-wrap:nowrap;
overflow:auto;
scrollbar-width:none;
margin-top:10px;
}
.quick-chips::-webkit-scrollbar {
display:none;
}
.quick-chip {
flex:0 0 auto;
}
.section {
padding-top:24px;
}
.section-head {
margin-bottom:12px;
}
.section-sub {
font-size:13px;
}
.services-grid {
grid-template-columns:repeat(3, 1fr);
gap:9px;
}
.service-card {
min-height:112px;
border-radius:22px;
padding:13px 10px;
}
.service-icon {
width:42px;
height:42px;
border-radius:16px;
font-size:18px;
}
.service-card strong {
font-size:12.5px;
margin-top:8px;
}
.service-card span {
font-size:10.5px;
}
.city-card {
flex-basis:170px;
height:122px;
border-radius:22px;
}
.city-content strong {
font-size:15px;
}
.city-content span {
font-size:10.5px;
}
.craftsmen-grid {
grid-template-columns:repeat(2, 1fr);
gap:10px;
}
.craft-card {
border-radius:23px;
padding:9px;
}
.premium-badge {
top:9px;
inset-inline-start:9px;
padding:6px 8px;
font-size:10px;
}
.craft-cover {
height:96px;
border-radius:18px;
}
.craft-profile {
gap:8px;
margin-top:-20px;
padding-inline:5px;
}
.avatar {
width:50px;
height:50px;
border-radius:18px;
border-width:3px;
}
.profile-name {
padding-top:20px;
}
.profile-name strong {
font-size:13px;
max-width:100px;
}
.profile-name span {
font-size:10.5px;
}
.card-lines {
gap:6px;
margin:10px 0;
}
.line {
font-size:11.5px;
gap:6px;
}
.line i {
width:22px;
height:22px;
border-radius:8px;
font-size:11px;
}
.rating {
padding:7px 8px;
border-radius:14px;
font-size:11px;
display:block;
line-height:1.6;
}
.card-actions {
gap:6px;
}
.btn-card {
min-height:39px;
border-radius:14px;
font-size:11.5px;
}
}
@media (max-width: 390px) {
.hero-title {
font-size:30px;
}
.services-grid {
grid-template-columns:repeat(2, 1fr);
}
.craftsmen-grid {
grid-template-columns:1fr;
}
.craft-cover {
height:132px;
}
.profile-name strong {
max-width:180px;
}
}
@media (max-width: 760px) {
.craftsmen-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:11px !important;
}
.craft-card {
border-radius:25px !important;
padding:8px !important;
}
.craft-cover {
height:118px !important;
border-radius:20px !important;
}
.craft-profile {
margin-top:-28px !important;
padding:0 7px !important;
gap:8px !important;
align-items:flex-end !important;
}
.avatar {
width:58px !important;
height:58px !important;
border-radius:20px !important;
border-width:4px !important;
}
.profile-name {
padding-bottom:5px !important;
}
.profile-name strong {
font-size:13.5px !important;
max-width:100% !important;
}
.profile-name span {
font-size:10.5px !important;
padding:4px 7px !important;
margin-top:4px !important;
}
.card-lines {
margin:10px 0 8px !important;
gap:6px !important;
}
.line {
font-size:11.3px !important;
gap:6px !important;
}
.line i {
width:24px !important;
height:24px !important;
border-radius:9px !important;
font-size:11px !important;
}
.rating {
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:2px !important;
border-radius:15px !important;
padding:7px 8px !important;
font-size:10.8px !important;
line-height:1.35 !important;
}
.rating b {
font-size:12.5px !important;
}
.card-actions {
grid-template-columns:1fr 1fr !important;
gap:6px !important;
margin-top:8px !important;
}
.btn-card {
min-height:39px !important;
border-radius:14px !important;
font-size:11px !important;
gap:5px !important;
}
.premium-badge {
top:12px !important;
inset-inline-start:12px !important;
padding:6px 8px !important;
font-size:9.5px !important;
}
.craft-card .status-live {
top:13px !important;
inset-inline-end:13px !important;
width:11px !important;
height:11px !important;
}
}
@media (max-width: 390px) {
.craftsmen-grid {
grid-template-columns:1fr !important;
}
.craft-cover {
height:165px !important;
}
.profile-name strong {
font-size:16px !important;
}
}
@media (max-width: 760px) {
.craftsmen-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
align-items:stretch !important;
}
.craft-card {
min-width:0 !important;
border-radius:22px !important;
padding:7px !important;
box-shadow:0 12px 32px rgba(15,23,42,.08) !important;
}
.craft-cover {
height:104px !important;
border-radius:17px !important;
}
.craft-cover:after {
background:linear-gradient(to top, rgba(6,26,64,.48), rgba(6,26,64,.02) 55%) !important;
}
.craft-profile {
margin-top:-24px !important;
padding:0 6px !important;
gap:7px !important;
align-items:flex-end !important;
min-width:0 !important;
}
.avatar {
width:52px !important;
height:52px !important;
border-radius:18px !important;
border-width:3px !important;
flex:0 0 52px !important;
}
.profile-name {
min-width:0 !important;
padding-bottom:4px !important;
flex:1 !important;
}
.profile-name strong {
font-size:13px !important;
line-height:1.25 !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.profile-name span {
max-width:100% !important;
font-size:10px !important;
padding:3px 7px !important;
margin-top:3px !important;
border-radius:999px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.card-lines {
margin:8px 0 7px !important;
padding:0 2px !important;
gap:5px !important;
}
.line {
min-width:0 !important;
font-size:10.8px !important;
gap:5px !important;
line-height:1.25 !important;
}
.line i {
width:22px !important;
height:22px !important;
border-radius:8px !important;
font-size:10px !important;
flex:0 0 22px !important;
}
.line span {
min-width:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.rating {
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:4px !important;
border-radius:13px !important;
padding:6px 7px !important;
font-size:10px !important;
line-height:1.2 !important;
white-space:nowrap !important;
overflow:hidden !important;
}
.rating b {
font-size:11.5px !important;
}
.rating span {
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.card-actions {
grid-template-columns:1fr 1fr !important;
gap:5px !important;
margin-top:7px !important;
}
.btn-card {
min-height:36px !important;
border-radius:12px !important;
font-size:10.5px !important;
gap:4px !important;
padding:0 5px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.btn-card i {
font-size:10px !important;
}
.premium-badge {
top:10px !important;
inset-inline-start:10px !important;
padding:5px 7px !important;
font-size:9px !important;
gap:4px !important;
max-width:78px !important;
white-space:nowrap !important;
overflow:hidden !important;
}
.craft-card .status-live {
top:11px !important;
inset-inline-end:11px !important;
width:10px !important;
height:10px !important;
border-width:2px !important;
box-shadow:0 0 0 3px rgba(34,197,94,.20), 0 0 12px rgba(34,197,94,.50) !important;
}
}
@media (max-width: 430px) {
.craftsmen-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:8px !important;
}
.craft-card {
border-radius:20px !important;
padding:6px !important;
}
.craft-cover {
height:92px !important;
border-radius:16px !important;
}
.avatar {
width:48px !important;
height:48px !important;
flex-basis:48px !important;
border-radius:17px !important;
}
.craft-profile {
margin-top:-22px !important;
gap:6px !important;
}
.profile-name strong {
font-size:12.3px !important;
}
.profile-name span {
font-size:9.3px !important;
padding:3px 6px !important;
}
.line {
font-size:10px !important;
}
.rating {
font-size:9.4px !important;
padding:5px 6px !important;
}
.btn-card {
min-height:34px !important;
font-size:9.8px !important;
}
}
@media (max-width: 340px) {
.craftsmen-grid {
grid-template-columns:1fr !important;
}
.craft-cover {
height:145px !important;
}
.profile-name strong {
font-size:15px !important;
}
.profile-name span {
font-size:11px !important;
}
.btn-card {
font-size:11px !important;
}
}
.craftsmen-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
align-items:stretch;
}
.craft-card{
position:relative;
overflow:hidden;
min-width:0;
border-radius:34px;
padding:11px;
background:
linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,255,253,.98));
border:1px solid rgba(11,95,255,.13);
box-shadow:0 24px 70px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.96);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
isolation:isolate;
}
.craft-card::before{
content:"";
position:absolute;
inset:-1px;
z-index:-1;
background:
radial-gradient(circle at 18% 0%,rgba(47,128,237,.18),transparent 30%),
radial-gradient(circle at 100% 8%,rgba(255,138,0,.13),transparent 25%),
linear-gradient(135deg,rgba(11,95,255,.04),rgba(255,255,255,0));
pointer-events:none;
}
.craft-card:hover{
transform:translateY(-7px);
border-color:rgba(11,95,255,.28);
box-shadow:0 34px 88px rgba(15,23,42,.16);
}
.craft-cover{
height:188px;
display:block;
position:relative;
overflow:hidden;
border-radius:27px;
background:linear-gradient(135deg,#DCEBFF,#FFE3BF);
}
.craft-cover::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(to top,rgba(6,26,64,.70),rgba(6,26,64,.08) 58%),
radial-gradient(circle at 90% 10%,rgba(255,255,255,.18),transparent 28%);
z-index:1;
}
.craft-cover img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .55s ease, filter .35s ease;
}
.craft-card:hover .craft-cover img{
transform:scale(1.075);
filter:saturate(1.08);
}
.premium-badge{
position:absolute;
top:18px;
inset-inline-start:18px;
z-index:7;
display:inline-flex;
align-items:center;
gap:7px;
max-width:calc(100% - 72px);
padding:8px 12px;
border-radius:999px;
background:linear-gradient(135deg,#FF8A00,#FFD6A6);
color:#3b2500;
font-size:11px;
font-weight:1000;
box-shadow:0 15px 32px rgba(255,138,0,.30);
border:1px solid rgba(255,255,255,.68);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.craft-card .status-live{
position:absolute;
top:20px;
inset-inline-end:20px;
z-index:8;
width:13px;
height:13px;
border-radius:50%;
background:#22C55E;
border:2px solid #fff;
box-shadow:0 0 0 5px rgba(34,197,94,.18),0 0 20px rgba(34,197,94,.65);
}
.craft-profile{
position:relative;
z-index:5;
display:flex;
align-items:flex-end;
gap:13px;
margin-top:-39px;
padding:0 13px;
min-width:0;
}
.avatar{
width:82px;
height:82px;
flex:0 0 82px;
border-radius:28px;
object-fit:cover;
background:#fff;
border:5px solid #fff;
box-shadow:0 20px 42px rgba(15,23,42,.18),0 0 0 1px rgba(11,95,255,.10);
}
.profile-name{
flex:1;
min-width:0;
padding-bottom:9px;
}
.profile-name strong{
display:block;
max-width:100%;
color:#0f172a;
font-size:18px;
line-height:1.2;
font-weight:1000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
letter-spacing:-.3px;
}
.profile-name span{
display:inline-flex;
align-items:center;
max-width:100%;
margin-top:7px;
padding:5px 10px;
border-radius:999px;
background:#EAF3FF;
border:1px solid rgba(11,95,255,.11);
color:#0B5FFF;
font-size:12px;
font-weight:950;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.card-lines{
display:grid;
gap:8px;
margin:15px 0 11px;
padding:0 4px;
}
.line{
display:flex;
align-items:center;
gap:9px;
min-width:0;
color:#334155;
font-size:13px;
font-weight:850;
}
.line i{
width:33px;
height:33px;
flex:0 0 33px;
display:grid;
place-items:center;
border-radius:14px;
color:#0B5FFF;
background:linear-gradient(135deg,#EAF3FF,#DCEBFF);
box-shadow:inset 0 0 0 1px rgba(11,95,255,.08);
}
.line span{
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rating{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:11px 12px;
border-radius:20px;
background:linear-gradient(135deg,#FFF7ED,#fff);
border:1px solid rgba(255,138,0,.18);
color:#475569;
font-size:13px;
font-weight:950;
box-shadow:0 10px 26px rgba(255,138,0,.07);
overflow:hidden;
}
.rating b{
color:#E86D00;
font-size:15px;
}
.rating span{
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.card-actions{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:9px;
margin-top:12px;
}
.btn-card{
min-height:49px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:18px;
font-size:13px;
font-weight:1000;
transition:.22s ease;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.btn-card:hover{transform:translateY(-2px)}
.btn-profile{
background:linear-gradient(135deg,#0B5FFF,#2F80ED);
color:#fff;
box-shadow:0 16px 32px rgba(11,95,255,.25);
}
.btn-call{
background:#EAF3FF;
color:#0B5FFF;
border:1px solid rgba(11,95,255,.14);
}
.trust-strip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:18px;
}
.trust-item{
background:#fff;
border:1px solid rgba(11,95,255,.10);
border-radius:22px;
padding:15px;
box-shadow:0 14px 34px rgba(15,23,42,.06);
font-weight:900;
color:#0f172a;
}
.trust-item i{
color:#0B5FFF;
margin-inline-end:8px;
}
.seo-text-box{
margin-top:28px;
background:#fff;
border:1px solid rgba(11,95,255,.10);
border-radius:28px;
padding:22px;
color:#475569;
line-height:1.9;
box-shadow:0 18px 45px rgba(15,23,42,.06);
}
.seo-text-box h2{
margin:0 0 8px;
color:#0f172a;
font-size:22px;
}
@media(max-width:1080px){
.craftsmen-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.trust-strip{grid-template-columns:1fr}
}
@media(max-width:760px){
.craftsmen-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.craft-card{border-radius:23px!important;padding:7px!important;box-shadow:0 14px 34px rgba(15,23,42,.09)!important}
.craft-cover{height:106px!important;border-radius:18px!important}
.premium-badge{top:10px!important;inset-inline-start:10px!important;padding:5px 7px!important;font-size:9px!important;max-width:76px!important}
.craft-card .status-live{top:11px!important;inset-inline-end:11px!important;width:10px!important;height:10px!important;box-shadow:0 0 0 3px rgba(34,197,94,.18),0 0 12px rgba(34,197,94,.50)!important}
.craft-profile{margin-top:-24px!important;padding:0 6px!important;gap:7px!important}
.avatar{width:52px!important;height:52px!important;flex-basis:52px!important;border-width:3px!important;border-radius:18px!important}
.profile-name{padding-bottom:4px!important}
.profile-name strong{font-size:13px!important;line-height:1.25!important}
.profile-name span{font-size:10px!important;padding:3px 7px!important;margin-top:3px!important}
.card-lines{margin:8px 0 7px!important;padding:0 2px!important;gap:5px!important}
.line{font-size:10.8px!important;gap:5px!important;line-height:1.25!important}
.line i{width:22px!important;height:22px!important;flex-basis:22px!important;border-radius:8px!important;font-size:10px!important}
.rating{padding:6px 7px!important;border-radius:13px!important;font-size:10px!important;gap:4px!important}
.rating b{font-size:11.5px!important}
.card-actions{grid-template-columns:1fr 1fr!important;gap:5px!important;margin-top:7px!important}
.btn-card{min-height:36px!important;border-radius:12px!important;font-size:10.5px!important;gap:4px!important;padding:0 5px!important}
.trust-strip{gap:8px;margin-top:14px}
.trust-item{border-radius:18px;padding:12px;font-size:13px}
.seo-text-box{border-radius:22px;padding:16px;font-size:13px}
}
@media(max-width:430px){
.craftsmen-grid{gap:8px!important}
.craft-card{border-radius:20px!important;padding:6px!important}
.craft-cover{height:92px!important;border-radius:16px!important}
.avatar{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:17px!important}
.craft-profile{margin-top:-22px!important;gap:6px!important}
.profile-name strong{font-size:12.3px!important}
.profile-name span{font-size:9.3px!important;padding:3px 6px!important}
.line{font-size:10px!important}
.rating{font-size:9.4px!important;padding:5px 6px!important}
.btn-card{min-height:34px!important;font-size:9.8px!important}
}
@media(max-width:340px){
.craftsmen-grid{grid-template-columns:1fr!important}
.craft-cover{height:145px!important}
.profile-name strong{font-size:15px!important}
.profile-name span{font-size:11px!important}
.btn-card{font-size:11px!important}
}
.services-image-grid {
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.service-photo-card {
min-height:unset !important;
padding:8px !important;
border-radius:30px !important;
overflow:hidden;
background:#fff;
border:1px solid rgba(11,95,255,.12);
box-shadow:0 18px 48px rgba(15,23,42,.08);
display:block !important;
}
.service-photo {
position:relative;
height:168px;
border-radius:24px;
overflow:hidden;
background:linear-gradient(135deg,#DCEBFF,#FFE3BF);
}
.service-photo img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease, filter .35s ease;
}
.service-photo-card:hover .service-photo img {
transform:scale(1.07);
filter:saturate(1.08);
}
.service-photo-overlay {
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(6,26,64,.72), rgba(6,26,64,.05) 62%);
}
.service-floating-icon {
position:absolute;
top:12px;
inset-inline-start:12px;
width:44px;
height:44px;
border-radius:17px;
display:grid;
place-items:center;
color:#fff;
background:rgba(11,95,255,.86);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(12px);
box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.service-count-badge {
position:absolute;
bottom:12px;
inset-inline-start:12px;
inset-inline-end:12px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:#fff;
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(14px);
font-weight:1000;
font-size:12px;
text-shadow:0 1px 6px rgba(0,0,0,.18);
}
.service-photo-info {
padding:13px 8px 7px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.service-photo-info strong {
margin:0 !important;
font-size:16px !important;
color:#0f172a;
line-height:1.35;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.service-photo-info span {
flex:0 0 auto;
color:#0B5FFF !important;
background:#EAF3FF;
border:1px solid rgba(11,95,255,.10);
border-radius:999px;
padding:5px 9px;
font-size:11px !important;
font-weight:1000;
white-space:nowrap;
}
@media (max-width:1080px) {
.services-image-grid {
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
@media (max-width:760px) {
.services-image-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
}
.service-photo-card {
border-radius:23px !important;
padding:6px !important;
}
.service-photo {
height:118px;
border-radius:18px;
}
.service-floating-icon {
width:36px;
height:36px;
border-radius:14px;
font-size:14px;
top:9px;
inset-inline-start:9px;
}
.service-count-badge {
min-height:31px;
bottom:8px;
inset-inline-start:8px;
inset-inline-end:8px;
font-size:10.5px;
gap:5px;
}
.service-photo-info {
padding:9px 5px 5px;
display:block;
}
.service-photo-info strong {
display:block;
font-size:13px !important;
}
.service-photo-info span {
display:inline-flex;
margin-top:6px;
font-size:10px !important;
padding:4px 7px;
}
}
@media (max-width:360px) {
.services-image-grid {
grid-template-columns:1fr !important;
}
.service-photo {
height:155px;
}
}
@media (max-width: 760px) {
body {
background:
radial-gradient(circle at 10% 0%, rgba(47,128,237,.18), transparent 28%),
linear-gradient(180deg, #f7fffd 0%, #f8fafc 100%) !important;
padding-bottom:96px !important;
overflow-x:hidden !important;
}
.kh-container {
width:calc(100% - 18px) !important;
}
.kh-hero {
margin:8px 8px 0 !important;
min-height:auto !important;
padding:24px 0 92px !important;
border-radius:0 0 32px 32px !important;
background:
linear-gradient(135deg, rgba(6,26,64,.96), rgba(11,95,255,.84), rgba(47,128,237,.52)),
var(--kh-hero-image) center/cover no-repeat !important;
box-shadow:0 22px 60px rgba(15,23,42,.20) !important;
}
.kh-hero:before {
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,.24), transparent 28%),
radial-gradient(circle at 90% 8%, rgba(255,138,0,.18), transparent 25%),
linear-gradient(to top, rgba(6,26,64,.90), transparent 62%) !important;
}
.hero-copy {
padding-top:4px !important;
}
.hero-badge {
max-width:100%;
min-height:36px;
padding:8px 11px !important;
font-size:11.5px !important;
border-radius:999px !important;
background:rgba(255,255,255,.15) !important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.hero-title {
font-size:31px !important;
line-height:1.12 !important;
margin:15px 0 10px !important;
letter-spacing:-.9px !important;
}
.hero-text {
font-size:13.5px !important;
line-height:1.75 !important;
color:rgba(255,255,255,.88) !important;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.hero-actions {
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
margin-top:18px !important;
}
.hero-btn {
min-height:44px !important;
border-radius:15px !important;
font-size:12.2px !important;
padding:0 8px !important;
box-shadow:0 12px 25px rgba(0,0,0,.13) !important;
}
.hero-stats {
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:7px !important;
margin-top:16px !important;
}
.hero-stat {
padding:11px 5px !important;
border-radius:17px !important;
text-align:center !important;
background:rgba(255,255,255,.14) !important;
}
.hero-stat strong {
font-size:17px !important;
}
.hero-stat span {
font-size:9.8px !important;
line-height:1.25 !important;
}
.search-wrap {
margin-top:-60px !important;
position:relative !important;
z-index:10 !important;
}
.search-box {
border-radius:28px !important;
padding:11px !important;
background:rgba(255,255,255,.96) !important;
border:1px solid rgba(255,255,255,.85) !important;
box-shadow:0 22px 55px rgba(15,23,42,.16) !important;
backdrop-filter:blur(22px) !important;
}
.search-head {
padding:2px 3px 0 !important;
margin-bottom:10px !important;
}
.search-head h2 {
font-size:17px !important;
line-height:1.2 !important;
}
.search-head p {
font-size:11.5px !important;
line-height:1.45 !important;
margin-top:3px !important;
}
.search-form {
grid-template-columns:1fr !important;
gap:8px !important;
}
.field input,
.field select {
height:49px !important;
border-radius:17px !important;
font-size:13.2px !important;
font-weight:850 !important;
background:#fff !important;
box-shadow:0 9px 20px rgba(15,23,42,.05) !important;
}
.input-shell i {
font-size:13px !important;
inset-inline-start:14px !important;
}
.search-btn,
.reset-btn {
height:48px !important;
min-height:48px !important;
border-radius:17px !important;
font-size:13px !important;
font-weight:1000 !important;
}
.quick-chips {
display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
gap:7px !important;
margin-top:10px !important;
padding:0 2px 3px !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch;
}
.quick-chips::-webkit-scrollbar {
display:none !important;
}
.quick-chip {
flex:0 0 auto !important;
min-height:34px !important;
padding:0 11px !important;
border-radius:999px !important;
font-size:11.5px !important;
background:#fff !important;
box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}
.section {
padding-top:20px !important;
}
.section-head {
align-items:center !important;
margin-bottom:10px !important;
padding:0 2px !important;
}
.section-title {
font-size:20px !important;
letter-spacing:-.35px !important;
}
.section-sub {
font-size:11.8px !important;
line-height:1.45 !important;
margin-top:3px !important;
}
.services-image-grid {
display:flex !important;
overflow-x:auto !important;
gap:10px !important;
padding:2px 1px 8px !important;
scroll-snap-type:x mandatory !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch;
}
.services-image-grid::-webkit-scrollbar {
display:none !important;
}
.service-photo-card {
flex:0 0 168px !important;
width:168px !important;
border-radius:24px !important;
padding:6px !important;
scroll-snap-align:start !important;
box-shadow:0 14px 34px rgba(15,23,42,.09) !important;
}
.service-photo {
height:108px !important;
border-radius:18px !important;
}
.service-floating-icon {
width:35px !important;
height:35px !important;
border-radius:14px !important;
font-size:14px !important;
top:8px !important;
inset-inline-start:8px !important;
}
.service-count-badge {
min-height:30px !important;
bottom:7px !important;
inset-inline-start:7px !important;
inset-inline-end:7px !important;
font-size:10px !important;
padding:0 7px !important;
}
.service-photo-info {
padding:8px 4px 5px !important;
display:block !important;
}
.service-photo-info strong {
display:block !important;
font-size:12.5px !important;
line-height:1.3 !important;
}
.service-photo-info span {
display:inline-flex !important;
margin-top:5px !important;
font-size:9.5px !important;
padding:4px 7px !important;
}
.scroll-row {
gap:9px !important;
padding-bottom:8px !important;
}
.city-card {
flex:0 0 158px !important;
height:118px !important;
border-radius:22px !important;
box-shadow:0 15px 34px rgba(15,23,42,.13) !important;
}
.city-content {
inset:auto 11px 10px 11px !important;
}
.city-content strong {
font-size:14px !important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.city-content span {
font-size:9.5px !important;
padding:5px 8px !important;
margin-top:5px !important;
}
.craftsmen-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:9px !important;
}
.craft-card {
border-radius:22px !important;
padding:6px !important;
background:#fff !important;
box-shadow:0 14px 34px rgba(15,23,42,.09) !important;
}
.craft-cover {
height:100px !important;
border-radius:17px !important;
}
.craft-profile {
margin-top:-23px !important;
padding:0 6px !important;
gap:6px !important;
align-items:flex-end !important;
}
.avatar {
width:50px !important;
height:50px !important;
flex-basis:50px !important;
border-radius:18px !important;
border-width:3px !important;
}
.profile-name {
padding-bottom:4px !important;
min-width:0 !important;
}
.profile-name strong {
font-size:12.6px !important;
line-height:1.22 !important;
max-width:100% !important;
}
.profile-name span {
font-size:9.5px !important;
padding:3px 6px !important;
margin-top:3px !important;
max-width:100% !important;
}
.card-lines {
margin:8px 0 6px !important;
gap:5px !important;
padding:0 2px !important;
}
.line {
font-size:10px !important;
gap:5px !important;
}
.line i {
width:21px !important;
height:21px !important;
flex-basis:21px !important;
border-radius:8px !important;
font-size:9.5px !important;
}
.rating {
padding:5px 6px !important;
border-radius:12px !important;
font-size:9.2px !important;
gap:4px !important;
line-height:1.2 !important;
}
.rating b {
font-size:10.8px !important;
}
.card-actions {
gap:5px !important;
margin-top:7px !important;
}
.btn-card {
min-height:34px !important;
border-radius:12px !important;
font-size:9.8px !important;
padding:0 4px !important;
gap:4px !important;
}
.premium-badge {
top:9px !important;
inset-inline-start:9px !important;
font-size:8.8px !important;
padding:5px 6px !important;
max-width:72px !important;
}
.craft-card .status-live {
top:10px !important;
inset-inline-end:10px !important;
width:10px !important;
height:10px !important;
}
.trust-strip {
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
margin-top:12px !important;
}
.trust-item {
border-radius:18px !important;
padding:12px !important;
font-size:12.5px !important;
box-shadow:0 12px 26px rgba(15,23,42,.06) !important;
}
.seo-text-box {
border-radius:22px !important;
padding:15px !important;
font-size:12.5px !important;
line-height:1.8 !important;
}
.seo-text-box h2 {
font-size:17px !important;
}
}
@media (max-width: 390px) {
.hero-title {
font-size:28px !important;
}
.service-photo-card {
flex-basis:155px !important;
width:155px !important;
}
.service-photo {
height:100px !important;
}
.craftsmen-grid {
gap:8px !important;
}
.craft-cover {
height:92px !important;
}
.avatar {
width:47px !important;
height:47px !important;
flex-basis:47px !important;
}
.profile-name strong {
font-size:12px !important;
}
.btn-card {
font-size:9.2px !important;
min-height:32px !important;
}
}
@media (max-width: 340px) {
.craftsmen-grid {
grid-template-columns:1fr !important;
}
.craft-cover {
height:145px !important;
}
.profile-name strong {
font-size:15px !important;
}
.service-photo-card {
flex-basis:170px !important;
width:170px !important;
}
}
.section-more-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:42px;
padding:0 15px;
border-radius:15px;
background:linear-gradient(135deg,#0B5FFF,#2F80ED);
color:#fff;
font-size:13px;
font-weight:1000;
box-shadow:0 12px 28px rgba(11,95,255,.20);
transition:.22s ease;
white-space:nowrap;
}
.section-more-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 34px rgba(11,95,255,.28);
}
.section-more-btn i{
font-size:12px;
}
@media (max-width:760px){
.section-more-btn{
min-height:36px !important;
padding:0 12px !important;
border-radius:13px !important;
font-size:11px !important;
gap:5px !important;
box-shadow:0 10px 22px rgba(11,95,255,.18) !important;
}
.section-more-btn i{
font-size:10px !important;
}
}
@media (max-width:760px){
.hero-phone-card,
.search-count,
.section-sub,
.seo-text-box,
.trust-strip,
.hero-text{
display:none !important;
}
.kh-hero{
padding:20px 0 84px !important;
}
.hero-title{
margin:12px 0 8px !important;
max-width:100% !important;
}
.hero-actions{
margin-top:14px !important;
}
.hero-stats{
margin-top:12px !important;
}
.hero-stat{
padding:9px 4px !important;
}
.search-box{
padding:10px !important;
}
.search-head{
margin-bottom:8px !important;
}
.search-head h2{
font-size:16px !important;
}
.quick-chips{
margin-top:8px !important;
}
.section{
padding-top:16px !important;
}
.section-head{
margin-bottom:8px !important;
}
.section-title{
font-size:18px !important;
}
.city-card{
flex-basis:145px !important;
height:108px !important;
}
.craft-cover{
height:88px !important;
}
.profile-name strong{
font-size:11.8px !important;
}
.line:nth-child(2){
display:none !important;
}
.rating{
margin-top:2px !important;
}
.btn-card{
min-height:32px !important;
}
.pagination{
margin-top:16px !important;
}
}
@media (max-width:390px){
.hero-stats{
grid-template-columns:repeat(3,1fr) !important;
}
.hero-stat strong{
font-size:15px !important;
}
.hero-stat span{
font-size:9px !important;
}
.service-photo-card{
width:148px !important;
flex-basis:148px !important;
}
.city-card{
flex-basis:138px !important;
}
}
.rating-stars-box{
background:linear-gradient(135deg,#FFF7ED,#ffffff) !important;
border:1px solid rgba(255,138,0,.20) !important;
}
.rating-stars-line{
display:flex;
align-items:center;
gap:7px;
min-width:0;
}
.stars{
display:inline-flex;
align-items:center;
gap:2px;
color:#FF8A00;
font-size:14px;
line-height:1;
white-space:nowrap;
}
.stars .fa-regular{
color:#cbd5e1;
}
.rating-stars-line b{
color:#92400e !important;
font-size:14px;
font-weight:1000;
}
.reviews-count{
color:#64748b;
font-weight:900;
white-space:nowrap;
}
@media(max-width:760px){
.rating-stars-box{
flex-direction:column !important;
align-items:flex-start !important;
gap:3px !important;
}
.rating-stars-line{
gap:5px !important;
width:100%;
}
.stars{
font-size:11px !important;
gap:1px !important;
}
.rating-stars-line b{
font-size:11.5px !important;
}
.reviews-count{
font-size:9.2px !important;
}
}
body{
background:
radial-gradient(circle at top right, rgba(18,179,154,.14), transparent 28%),
radial-gradient(circle at left top, rgba(244,180,0,.10), transparent 24%),
var(--kh-bg) !important;
}
.hero-btn.main,
.search-btn,
.btn-profile,
.section-more-btn{
background:linear-gradient(135deg,var(--kh-primary),var(--kh-primary-2)) !important;
}
.hero-btn.main:hover,
.search-btn:hover,
.btn-profile:hover,
.section-more-btn:hover{
background:linear-gradient(135deg,var(--kh-primary-dark),var(--kh-primary)) !important;
}
.premium-badge{
background:linear-gradient(135deg,var(--kh-accent),#FFD54F) !important;
color:#4A3200 !important;
}
.stars,
.rating b,
.rating-stars-line b{
color:var(--kh-accent) !important;
}
.service-icon,
.service-floating-icon,
.line i{
color:#fff !important;
}
.profile-name span,
.service-photo-info span,
.quick-chip,
.btn-call{
background:var(--kh-soft) !important;
color:var(--kh-primary-dark) !important;
border-color:rgba(11,143,121,.12) !important;
}
.search-box,
.craft-card,
.service-photo-card,
.trust-item,
.seo-text-box{
box-shadow:0 18px 55px rgba(6,26,64,.08) !important;
}
.hero-stat,
.hero-badge{
border-color:rgba(255,255,255,.16) !important;
}
.search-box{
border:1px solid rgba(11,143,121,.08) !important;
}
.section-title i,
.quick-chip i,
.line i,
.service-photo-info strong{
color:var(--kh-primary) !important;
}
.city-card:after,
.craft-cover:after{
background:linear-gradient(to top, rgba(6,26,64,.82), rgba(6,26,64,.08)) !important;
}
@media(max-width:760px){
.kh-hero{
background:
linear-gradient(135deg, rgba(6,26,64,.96), rgba(11,143,121,.86), rgba(18,179,154,.56)),
var(--kh-hero-image) center/cover no-repeat !important;
}
.search-box,
.craft-card,
.service-photo-card{
box-shadow:0 12px 34px rgba(6,26,64,.08) !important;
}
}
.kh-hero{
background:
linear-gradient(135deg,
var(--header-dark),
var(--header-main),
var(--header-secondary)) !important;
}
.hero-btn.main,
.search-btn,
.btn-profile,
.section-more-btn,
.service-floating-icon,
.service-icon{
background:linear-gradient(135deg,
var(--header-main),
var(--header-secondary)) !important;
}
.hero-btn.main:hover,
.search-btn:hover,
.btn-profile:hover,
.section-more-btn:hover{
background:linear-gradient(135deg,
var(--header-dark),
var(--header-main)) !important;
}
.section-title i,
.quick-chip i,
.service-photo-info strong,
.line i{
color:var(--header-main) !important;
}
.quick-chip,
.profile-name span,
.service-photo-info span,
.btn-call{
background:rgba(18,179,154,.10) !important;
color:var(--header-dark) !important;
}
.search-box{
border:1px solid rgba(11,143,121,.10) !important;
}
.city-card:after,
.craft-cover:after{
background:linear-gradient(to top,
rgba(6,26,64,.86),
rgba(6,26,64,.08)) !important;
}
@media(max-width:760px){
.kh-hero{
background:
linear-gradient(135deg,
rgba(6,26,64,.96),
rgba(11,143,121,.88),
rgba(18,179,154,.58)),
var(--kh-hero-image) center/cover no-repeat !important;
}
}
.card-lines-inline{
display:flex;
align-items:center;
gap:8px;
margin:14px 0 10px;
flex-wrap:wrap;
}
.line-inline{
display:inline-flex;
align-items:center;
gap:6px;
min-height:34px;
padding:0 12px;
border-radius:999px;
background:#F4F8FF;
border:1px solid rgba(11,95,255,.10);
color:#334155;
font-size:12px;
font-weight:800;
max-width:100%;
}
.line-inline i{
color:#0B5FFF;
font-size:12px;
}
.line-inline span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media (max-width:760px){
.card-lines-inline{
gap:5px;
margin:10px 0 8px;
}
.line-inline{
min-height:30px;
padding:0 9px;
font-size:10px;
border-radius:999px;
}
.line-inline i{
font-size:10px;
}
}
.search-form-luxury {
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:stretch !important;
gap:12px !important;
}
.smart-search-main {
position:relative;
display:grid;
grid-template-columns:1.25fr .82fr .82fr;
gap:10px;
padding:10px;
border-radius:27px;
background:linear-gradient(135deg, rgba(234,243,255,.96), rgba(255,248,240,.94));
border:1px solid rgba(11,95,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.78), 0 18px 44px rgba(15,23,42,.07);
overflow:visible;
}
.ai-search-glow {
position:absolute;
inset:-1px;
border-radius:inherit;
pointer-events:none;
background:
radial-gradient(circle at 14% 0%, rgba(11,95,255,.18), transparent 32%),
radial-gradient(circle at 88% 10%, rgba(255,138,0,.16), transparent 28%);
opacity:.75;
z-index:0;
}
.smart-field { position:relative; z-index:2; }
.field-main { min-width:0; }
.smart-input-shell input {
background:rgba(255,255,255,.96) !important;
border:1px solid rgba(11,95,255,.16) !important;
box-shadow:0 14px 34px rgba(15,23,42,.07) !important;
}
.smart-input-shell input:focus {
border-color:rgba(255,138,0,.55) !important;
box-shadow:0 0 0 4px rgba(255,138,0,.13), 0 16px 36px rgba(11,95,255,.13) !important;
}
.voice-btn {
position:absolute;
top:50%;
transform:translateY(-50%);
inset-inline-end:9px;
width:38px;
height:38px;
border:0;
border-radius:14px;
cursor:pointer;
display:grid;
place-items:center;
color:#fff;
background:linear-gradient(135deg, var(--kh-primary), var(--kh-accent));
box-shadow:0 10px 22px rgba(11,95,255,.22);
}
html[dir="ltr"] .voice-btn { inset-inline-end:9px; }
.voice-btn.is-listening { animation:khPulse 1.1s infinite; }
@keyframes khPulse { 0%,100%{transform:translateY(-50%) scale(1)} 50%{transform:translateY(-50%) scale(1.08)} }
.smart-suggestions {
position:absolute;
top:calc(100% + 8px);
inset-inline:0;
min-width:240px;
background:rgba(255,255,255,.98);
border:1px solid rgba(11,95,255,.14);
border-radius:22px;
box-shadow:0 26px 70px rgba(15,23,42,.16);
padding:8px;
z-index:50;
display:none;
max-height:292px;
overflow:auto;
backdrop-filter:blur(18px);
}
.smart-suggestions.is-open { display:block; }
.suggestion-item {
width:100%;
border:0;
background:transparent;
display:flex;
align-items:center;
gap:10px;
padding:10px;
border-radius:16px;
cursor:pointer;
text-align:inherit;
color:#0f172a;
transition:.18s ease;
}
.suggestion-item:hover,
.suggestion-item.is-active {
background:linear-gradient(135deg, #EAF3FF, #FFF3E3);
transform:translateY(-1px);
}
.suggestion-icon {
width:38px;
height:38px;
border-radius:14px;
display:grid;
place-items:center;
flex:0 0 auto;
color:#fff;
background:linear-gradient(135deg, var(--kh-primary), var(--kh-accent));
box-shadow:0 10px 20px rgba(11,95,255,.18);
}
.suggestion-text { min-width:0; flex:1; }
.suggestion-text strong {
display:block;
font-size:13.5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.suggestion-text span {
display:block;
margin-top:2px;
font-size:11.5px;
color:#64748B;
font-weight:800;
}
.search-action-row {
display:grid;
grid-template-columns:1fr;
gap:10px;
min-width:150px;
}
.search-btn-lux,
.reset-btn-lux {
width:100%;
min-width:140px;
}
.search-btn-lux {
background:linear-gradient(135deg, #0B5FFF 0%, #2F80ED 48%, #FF8A00 100%) !important;
box-shadow:0 20px 42px rgba(11,95,255,.30), 0 8px 20px rgba(255,138,0,.16) !important;
}
.reset-btn-lux {
background:#fff !important;
border:1px solid rgba(11,95,255,.12) !important;
box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
}
.smart-hint-row {
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:10px;
}
@media (max-width: 1080px) {
.search-form-luxury { grid-template-columns:1fr !important; }
.smart-search-main { grid-template-columns:1fr 1fr !important; }
.field-main { grid-column:1 / -1; }
.search-action-row { grid-template-columns:1fr 1fr; min-width:0; }
}
@media (max-width: 760px) {
.search-form-luxury { gap:9px !important; }
.smart-search-main {
grid-template-columns:1fr !important;
padding:8px;
border-radius:24px;
gap:8px;
}
.search-action-row { grid-template-columns:1fr 1fr; gap:8px; }
.search-btn-lux,
.reset-btn-lux { min-width:0; height:50px !important; }
.smart-suggestions {
position:fixed;
left:10px;
right:10px;
top:auto;
bottom:calc(var(--bottom-space) + 12px);
max-height:42vh;
z-index:9999;
}
.voice-btn { width:36px; height:36px; border-radius:13px; }
}
.mobile-search-kicker,
.mobile-current-filters,
.mobile-filter-pill,
.mobile-bottom-search-bar,
.mobile-search-overlay {
display:none;
}
@media (max-width: 760px) {
body {
--mobile-bar-height:74px;
padding-bottom:calc(var(--bottom-space) + var(--mobile-bar-height)) !important;
}
.search-wrap {
margin-top:-72px !important;
position:relative !important;
z-index:30 !important;
}
.search-box {
position:relative !important;
border-radius:30px !important;
padding:12px !important;
background:rgba(255,255,255,.97) !important;
border:1px solid rgba(255,255,255,.82) !important;
box-shadow:0 24px 70px rgba(6,26,64,.18) !important;
backdrop-filter:blur(24px) !important;
}
.mobile-search-kicker {
display:flex !important;
align-items:center;
justify-content:space-between;
gap:8px;
margin:0 0 10px;
}
.mobile-search-kicker span {
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 10px;
border-radius:999px;
background:linear-gradient(135deg,#EAF3FF,#FFF3E3);
color:#0B5FFF;
font-size:11px;
font-weight:1000;
border:1px solid rgba(11,95,255,.12);
}
.mobile-search-kicker button {
border:0;
min-height:34px;
padding:0 12px;
border-radius:999px;
background:#061A40;
color:#fff;
font-size:11px;
font-weight:1000;
display:inline-flex;
align-items:center;
gap:6px;
box-shadow:0 12px 25px rgba(6,26,64,.18);
}
.search-head {
display:none !important;
}
.search-form-luxury {
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
.smart-search-main {
grid-template-columns:1fr !important;
gap:9px !important;
padding:10px !important;
border-radius:25px !important;
background:linear-gradient(180deg,rgba(234,243,255,.98),rgba(255,248,240,.96)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.smart-field {
background:#fff;
border:1px solid rgba(11,95,255,.10);
border-radius:22px;
padding:8px;
box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.smart-field label {
display:flex !important;
align-items:center;
justify-content:space-between;
font-size:11px !important;
color:#475569 !important;
margin:0 0 6px !important;
padding:0 4px !important;
}
.smart-field label::after {
content:"PRO";
color:#FF8A00;
background:#FFF3E3;
border:1px solid rgba(255,138,0,.18);
border-radius:999px;
padding:3px 7px;
font-size:9px;
font-weight:1000;
}
.field-main label::after { content:"AI"; }
.smart-input-shell input {
height:50px !important;
border-radius:17px !important;
font-size:14px !important;
padding-inline-start:42px !important;
padding-inline-end:48px !important;
background:#F8FBFF !important;
box-shadow:none !important;
}
.smart-input-shell i:not(.voice-btn i) {
inset-inline-start:14px !important;
color:#0B5FFF !important;
}
.voice-btn {
width:36px !important;
height:36px !important;
border-radius:14px !important;
inset-inline-end:8px !important;
}
.search-action-row {
display:grid !important;
grid-template-columns:1fr .72fr !important;
gap:8px !important;
}
.search-btn-lux,
.reset-btn-lux {
height:52px !important;
border-radius:18px !important;
font-size:13px !important;
min-width:0 !important;
padding:0 12px !important;
}
.search-btn-lux {
box-shadow:0 18px 36px rgba(11,95,255,.24), 0 7px 16px rgba(255,138,0,.16) !important;
}
.mobile-current-filters {
display:flex !important;
gap:7px;
overflow:auto;
scrollbar-width:none;
margin-top:10px;
padding:2px 0 1px;
}
.mobile-current-filters::-webkit-scrollbar { display:none; }
.mobile-filter-pill {
display:inline-flex !important;
align-items:center;
gap:6px;
flex:0 0 auto;
min-height:34px;
padding:0 10px;
border-radius:999px;
background:#fff;
color:#0B5FFF;
border:1px solid rgba(11,95,255,.12);
box-shadow:0 8px 18px rgba(15,23,42,.05);
font-size:11px;
font-weight:950;
}
.quick-chips {
display:flex !important;
flex-wrap:nowrap !important;
overflow:auto !important;
gap:8px !important;
margin-top:10px !important;
padding-bottom:3px !important;
scrollbar-width:none;
}
.quick-chips::-webkit-scrollbar { display:none; }
.quick-chip {
flex:0 0 auto;
min-height:36px !important;
font-size:11px !important;
padding:0 11px !important;
}
.smart-suggestions {
position:fixed !important;
left:10px !important;
right:10px !important;
top:auto !important;
bottom:calc(var(--bottom-space) + var(--mobile-bar-height) + 12px) !important;
max-height:48vh !important;
border-radius:26px !important;
padding:10px !important;
z-index:10050 !important;
box-shadow:0 28px 85px rgba(6,26,64,.28) !important;
}
.smart-suggestions::before {
content:"اقتراحات البحث";
display:flex;
align-items:center;
gap:7px;
color:#0B5FFF;
font-size:12px;
font-weight:1000;
padding:4px 6px 9px;
}
.suggestion-item {
min-height:60px !important;
border-radius:18px !important;
padding:10px !important;
background:#fff;
border:1px solid rgba(11,95,255,.08) !important;
margin-bottom:7px;
box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.suggestion-icon {
width:42px !important;
height:42px !important;
border-radius:16px !important;
}
.suggestion-text strong { font-size:13px !important; }
.suggestion-text span { font-size:11px !important; }
.mobile-bottom-search-bar {
position:fixed;
display:grid !important;
grid-template-columns:1fr auto;
align-items:center;
gap:10px;
left:10px;
right:10px;
bottom:calc(var(--bottom-space) - 78px);
min-height:62px;
padding:8px;
border-radius:24px;
background:rgba(255,255,255,.96);
border:1px solid rgba(11,95,255,.12);
box-shadow:0 20px 60px rgba(6,26,64,.20);
backdrop-filter:blur(20px);
z-index:10020;
}
.mobile-bottom-search-bar .mobile-mini-info {
min-width:0;
display:flex;
align-items:center;
gap:10px;
color:#061A40;
font-weight:1000;
font-size:13px;
}
.mobile-bottom-search-bar .mobile-mini-info i {
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:16px;
color:#fff;
background:linear-gradient(135deg,#0B5FFF,#FF8A00);
flex:0 0 auto;
}
.mobile-bottom-search-bar .mobile-mini-info span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mobile-bottom-search-bar button {
height:44px;
border:0;
border-radius:16px;
padding:0 14px;
background:#061A40;
color:#fff;
font-weight:1000;
display:inline-flex;
align-items:center;
gap:7px;
}
.search-wrap.mobile-focus-mode {
position:fixed !important;
inset:0 !important;
margin:0 !important;
z-index:10040 !important;
overflow:auto;
background:linear-gradient(180deg,rgba(6,26,64,.66),rgba(6,26,64,.22));
backdrop-filter:blur(10px);
padding:18px 0 calc(var(--bottom-space) + 90px) !important;
}
.search-wrap.mobile-focus-mode .kh-container {
width:min(100% - 20px, 1220px) !important;
}
.search-wrap.mobile-focus-mode .search-box {
margin-top:0 !important;
animation:khMobileSearchIn .22s ease both;
}
@keyframes khMobileSearchIn {
from { transform:translateY(24px) scale(.98); opacity:.4; }
to { transform:translateY(0) scale(1); opacity:1; }
}
}
@media (max-width: 380px) {
.search-action-row { grid-template-columns:1fr !important; }
.reset-btn-lux { height:44px !important; }
.mobile-bottom-search-bar {
left:7px;
right:7px;
border-radius:21px;
}
.mobile-bottom-search-bar button span { display:none; }
}
@media (max-width: 760px) {
html, body {
max-width:100%;
overflow-x:hidden !important;
}
body {
--kh-mobile-bottom-nav: 86px;
--kh-mobile-search-bar: 68px;
padding-bottom:calc(var(--kh-mobile-bottom-nav) + var(--kh-mobile-search-bar) + env(safe-area-inset-bottom) + 22px) !important;
}
.kh-hero {
padding-bottom:118px !important;
min-height:auto !important;
overflow:hidden !important;
}
.search-wrap {
margin-top:-54px !important;
position:relative !important;
z-index:80 !important;
isolation:isolate !important;
}
.search-wrap .kh-container,
.search-box,
.search-form-luxury,
.smart-search-main,
.smart-field,
.smart-input-shell {
min-width:0 !important;
max-width:100% !important;
}
.search-box {
overflow:visible !important;
transform:none !important;
margin-bottom:12px !important;
}
.smart-search-main {
overflow:visible !important;
}
.smart-field {
position:relative !important;
overflow:visible !important;
}
.smart-input-shell {
position:relative !important;
}
.smart-input-shell input {
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
.quick-chips,
.mobile-current-filters {
max-width:100% !important;
overscroll-behavior-x:contain !important;
}
.smart-suggestions {
position:fixed !important;
left:12px !important;
right:12px !important;
top:auto !important;
bottom:calc(var(--kh-mobile-bottom-nav) + var(--kh-mobile-search-bar) + env(safe-area-inset-bottom) + 16px) !important;
max-height:min(44vh, 360px) !important;
overflow:auto !important;
z-index:2147483000 !important;
overscroll-behavior:contain !important;
}
.mobile-bottom-search-bar {
left:12px !important;
right:12px !important;
bottom:calc(var(--kh-mobile-bottom-nav) + env(safe-area-inset-bottom) + 10px) !important;
z-index:2147482500 !important;
min-height:60px !important;
max-width:calc(100% - 24px) !important;
box-sizing:border-box !important;
}
.section:first-of-type,
#results,
.craftsmen-grid,
.services-grid,
.scroll-row {
position:relative !important;
z-index:1 !important;
}
.search-wrap.mobile-focus-mode {
z-index:2147482600 !important;
padding:14px 0 calc(var(--kh-mobile-bottom-nav) + env(safe-area-inset-bottom) + 24px) !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.search-wrap.mobile-focus-mode .search-box {
margin:0 auto !important;
max-height:none !important;
}
.search-wrap.mobile-focus-mode .smart-suggestions {
bottom:calc(var(--kh-mobile-bottom-nav) + env(safe-area-inset-bottom) + 18px) !important;
max-height:42vh !important;
}
}
@media (max-width: 430px) {
.kh-hero {
padding-bottom:110px !important;
}
.search-wrap {
margin-top:-48px !important;
}
.mobile-bottom-search-bar {
left:9px !important;
right:9px !important;
max-width:calc(100% - 18px) !important;
}
.smart-suggestions {
left:9px !important;
right:9px !important;
}
}
@media (max-width: 360px) {
body {
--kh-mobile-bottom-nav: 78px;
}
.mobile-bottom-search-bar .mobile-mini-info {
font-size:12px !important;
}
.mobile-bottom-search-bar .mobile-mini-info i {
width:38px !important;
height:38px !important;
}
}
@media (max-width: 760px) {
.search-wrap,
.search-box,
.search-form-luxury,
.smart-search-main,
.smart-field,
.smart-input-shell {
overflow: visible !important;
}
.smart-suggestions {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
max-height: 230px !important;
overflow-y: auto !important;
margin: 8px 0 0 !important;
padding: 8px !important;
border-radius: 20px !important;
z-index: 10 !important;
box-shadow: 0 14px 38px rgba(6,26,64,.14) !important;
background: rgba(255,255,255,.98) !important;
border: 1px solid rgba(11,95,255,.12) !important;
overscroll-behavior: contain !important;
}
.smart-suggestions:not(.is-open) {
display: none !important;
}
.smart-suggestions::before {
content: "اقتراحات مناسبة" !important;
display: flex !important;
padding: 2px 6px 8px !important;
color: #0B5FFF !important;
font-size: 11px !important;
font-weight: 1000 !important;
}
.suggestion-item {
min-height: 52px !important;
padding: 8px !important;
margin-bottom: 6px !important;
border-radius: 16px !important;
}
.suggestion-icon {
width: 38px !important;
height: 38px !important;
border-radius: 14px !important;
flex: 0 0 38px !important;
}
.suggestion-text strong {
font-size: 12.5px !important;
}
.suggestion-text span {
font-size: 10.5px !important;
}
.search-wrap.mobile-focus-mode .mobile-bottom-search-bar {
display: none !important;
}
.search-wrap.mobile-focus-mode {
padding-bottom: calc(var(--kh-mobile-bottom-nav, 86px) + env(safe-area-inset-bottom) + 18px) !important;
}
.search-wrap.mobile-focus-mode .smart-suggestions {
position: static !important;
max-height: 240px !important;
}
.search-action-row {
position: relative !important;
z-index: 1 !important;
margin-top: 2px !important;
}
.mobile-current-filters,
.quick-chips {
position: relative !important;
z-index: 1 !important;
}
}
@media (max-width: 430px) {
.smart-suggestions {
max-height: 205px !important;
border-radius: 18px !important;
}
}