/* khpartner Landing — Minimal vanilla CSS, responsive & RTL-aware */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --brand:#10b981;
  --brand-ink:#065f46;
  --radius:18px;
  --shadow:0 10px 25px rgba(2,6,23,.08);
  --font-ar: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-lat: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html[lang="ar"] body{font-family:var(--font-ar);}
html[lang="de"] body{font-family:var(--font-lat);}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1152px;margin-inline:auto;padding:0 20px}
.row{display:flex;gap:8px}
.wrap{flex-wrap:wrap}
.center{justify-content:center}
.center-y{align-items:center}
.between{justify-content:space-between}
.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.max-60{max-width:60ch}
.block{display:block}
.small{font-size:.9rem}
.text-muted,.muted{color:var(--muted)}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}

.header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);z-index:40;}
.header .logo{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;text-transform:uppercase}
.brand-title{font-weight:800;font-size:20px}
.brand-sub{font-size:12px;color:var(--muted)}
.nav{display:none;gap:18px;align-items:center}
.lang-switch{display:flex;gap:6px}
.lang-btn{border:1px solid var(--line);background:#fff;padding:6px 10px;border-radius:999px;font-size:12px;cursor:pointer}
.lang-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

@media(min-width:900px){.nav{display:flex}}

.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid transparent;font-weight:700;transition:.2s box-shadow,.2s background,.2s border-color;box-shadow:0 0 0 rgba(0,0,0,0)}
.btn:hover{box-shadow:var(--shadow)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:#0ea371}
.btn-ghost{background:#fff;border:1px solid var(--line)}
.btn-outline{border:1px solid var(--line);background:#fff}

.h1{font-size:clamp(2rem,3.5vw,3rem);line-height:1.2;margin:0}
.h2{font-size:clamp(1.6rem,2.5vw,2.2rem);margin:0}
.h3{font-size:1.4rem;margin:0}
.h4{font-size:1.15rem;margin:0}
.h5{font-size:1rem;margin-bottom:8px}
.lead{font-size:1.1rem}
.eyebrow{color:#047857;font-weight:700}
.accent{color:var(--brand)}

.hero{background:linear-gradient(180deg,#e7fdf5 0%, var(--bg) 60%);padding:48px 0}
.mockup{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;border:1px solid var(--line);padding:12px;border-radius:24px;box-shadow:var(--shadow);aspect-ratio:4/3}
.tile{border-radius:16px}
.t1,.t4{background:#e2e8f0}.t2,.t3{background:#e2e8f0}
.rating{position:relative;margin-top:12px;background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:12px;display:inline-block;box-shadow:var(--shadow)}

.trust{background:#fff;border-block:1px solid var(--line);padding:14px 0}

.section{padding:64px 0}
.section.alt{background:#fff;border-block:1px solid var(--line)}

.grid-2{display:grid;gap:28px;grid-template-columns:1fr}
.grid-3{display:grid;gap:18px;grid-template-columns:1fr}
.grid-4{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:2fr 1fr 1fr 1fr}}

.cards .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 1px 0 rgba(2,6,23,.02)}
.card .icon{width:40px;height:40px;border-radius:12px;background:rgba(16,185,129,.12);margin-bottom:10px}
.card.featured{border:2px solid var(--brand)}
.price{font-size:1.6rem;font-weight:800;margin-top:8px}

.list{padding-inline-start:18px}
.list li{margin:.4rem 0}
.list.small li{font-size:.95rem}

.cta-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 1px 0 rgba(2,6,23,.02)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.step .bubble{width:32px;height:32px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800}
@media(max-width:800px){.steps{grid-template-columns:repeat(2,1fr)}}

.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.label{font-weight:700;margin-top:8px;margin-bottom:6px;display:block}
.note{margin-top:10px;color:var(--muted);font-size:.9rem}

.stack{display:flex;flex-direction:column}
.footer{background:#0b1220;color:#e2e8f0;padding:36px 0;margin-top:24px}
.footer a{color:#e2e8f0}
.footer .container{padding-top:4px}

/* --- Fixes added 2025-08-30 --- */
@media (max-width: 700px){
  .mockup{display:none;}
}
/* Ensure images/tiles never overflow */
img, .mockup, .tile{max-width:100%;height:auto}


/* --- 2025-08-30: Keep icon and text on one line --- */
.btn{display:inline-flex;align-items:center;gap:8px;min-width:0}
.footer ul li{display:flex;align-items:center;gap:8px;}


/* --- 2025-08-30: Responsive fix (remove forced nowrap, allow wrapping) --- */
.btn{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.footer ul li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
a, .btn{overflow-wrap:anywhere}

/* Guard against accidental horizontal scroll */
html, body{max-width:100%;overflow-x:hidden}


/* Make contact buttons wrap nicely on small screens */
.card .row.wrap .btn{flex:1 1 auto}
@media (max-width: 480px){
  .steps{grid-template-columns:1fr}
}

/* --- 2025-08-30: Adjust featured tag positioning --- */
.card.featured{position:relative}
.card .tag{
  position:absolute;
  top:-10px;
  inset-inline-start:12px; /* works for RTL/LTR */
  background:var(--brand);
  color:#fff;
  border-radius:999px;
  font-size:12px;
  padding:4px 8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}


/* --- 2025-08-30: Robust responsive improvements (v6) --- */

/* Safer container padding on very small screens */
.container{padding-left:16px;padding-right:16px}

/* Make service/pricing card grids auto-fit nicely */
.cards.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Footer grid: 4 -> 2 -> 1 columns on smaller widths */
@media(max-width:700px){
  .grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .grid-4{grid-template-columns:1fr}
}

/* Prevent long labels/emails from causing horizontal scroll */
a, .btn, .price, .brand-sub{overflow-wrap:anywhere;word-break:break-word}

/* Ensure rows can wrap on narrow screens */
.row{flex-wrap:wrap}

/* Make hero mockup hide earlier to reduce overflow risks */
@media (max-width: 900px){
  .mockup{display:none}
}

/* Steps: 4 -> 2 -> 1 columns progressively */
@media(max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .steps{grid-template-columns:1fr}
}

/* Prevent horizontal overflow globally */
html, body{max-width:100%;overflow-x:hidden}


/* --- 2025-08-30: Responsive v7 harden --- */
:root{--container-max:1152px}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:16px}
.row{flex-wrap:wrap}
img, video{max-width:100%;height:auto}
a, .btn{overflow-wrap:anywhere;word-break:break-word}
/* Grids auto-fit */
.cards.grid-3{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards.grid-2{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr 1fr}
@media(max-width:900px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.grid-4{grid-template-columns:1fr}}
/* Steps */
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
/* Hide heavy mockup on narrow */
@media(max-width:900px){.mockup{display:none}}
/* Prevent horizontal scroll */
html, body{max-width:100%;overflow-x:hidden}
/* Featured tag positioning */
.card.featured{position:relative}
.card .tag{position:absolute;top:-10px;inset-inline-start:12px;background:var(--brand);color:#fff;border-radius:999px;font-size:12px;padding:4px 8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
/* Footer brand capitalization */
.footer .brand-title{text-transform:capitalize}


/* --- 2025-08-30: Footer list should be vertical (column) --- */
.footer ul{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}
.footer ul li{
  display:flex;            /* override inline-flex earlier */
  align-items:center;
  gap:8px;
  white-space:normal;      /* allow wrapping */
}


@media (min-width:900px){
  
}


/* --- Nav toggle visibility fix --- */
.nav-toggle {
  background: none;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
  display: none; /* hidden by default */
}

@media (max-width:899px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width:900px) {
  .nav-toggle {
    display: none !important;
  }
}


/* === NAVBAR RESTORE (robust) === */

/* Desktop: show nav */
@media (min-width:900px){
  .nav{
    display:flex;
    align-items:center;
    gap:18px;
  }
}

/* Mobile: hidden by default, show when .open */
@media (max-width:899px){
  .nav{ display:none; }
  .nav.open{
    display:flex;
    flex-direction:column;
    gap:10px;
    background: transparent;
    border: none;
    padding: 12px;
    margin-top: 12px;
  }
}

/* Link interactions */
.nav a{
  padding:10px 12px;
  border-radius:10px;
  transition: background .2s, color .2s, box-shadow .2s, transform .06s;
  line-height:1;
}
.nav a:hover,
.nav a:focus-visible{
  background: rgba(16,185,129,.12);
  color: var(--brand-ink);
  outline: none;
  box-shadow: 0 0 0 2px rgba(16,185,129,.15) inset;
}
.nav a:active{ transform: translateY(1px); }
/* current link has no special fill, but still hovers */
.nav a[aria-current="true"]{
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.nav a[aria-current="true"]:hover,
.nav a[aria-current="true"]:focus-visible{
  background: rgba(16,185,129,.12);
  color: var(--brand-ink);
  box-shadow: 0 0 0 2px rgba(16,185,129,.15) inset;
}

/* === END NAVBAR RESTORE === */


/* --- Logo responsive visibility --- */
@media (max-width:899px){
  .logo-img{
    display:none;
  }
}

@media (min-width:900px){
  .logo-img{ display:block; height:60px;
    width:auto;
    object-fit:contain;
    margin-inline-end:12px;
   margin-bottom:4px; box-shadow:0 3px 6px rgba(0,0,0,.12); border-radius:8px;}
}


/* --- Mobile brand text instead of logo --- */
@media (max-width:899px){
  .brand-title{
    font-weight:800;
    font-size:0; /* hide original text */
  }
  .brand-title::after{
    content:"KH PARTNER";
    display:block;
    font-size:22px;
    line-height:1.2;
  }
}


/* --- Footer brand text override --- */
.footer .brand-title{
  font-size:0; /* hide original */
}
.footer .brand-title::after{
  content:"KH PARTNER";
  font-size:20px;
  font-weight:800;
  line-height:1.2;
}


/* --- Header brand text override for mobile (force) --- */
@media (max-width:899px){
  header .brand-title{
    font-size:0 !important; /* hide original text */
  }
  header .brand-title::after{
    content:"KH PARTNER";
    display:block;
    font-size:22px;
    font-weight:800;
    line-height:1.2;
  }
}


/* --- Header brand text override (always) --- */
header .brand-title{
  font-size:0; /* hide original */
}
header .brand-title::after{
  content:"KH PARTNER";
  font-size:22px;
  font-weight:800;
  line-height:1.2;
}


/* KHPARTNER TILE BG IMAGES */
.mockup .tile{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 140px;
}
@media (min-width: 900px){
  .mockup .tile{ min-height: 180px; }
}

/* === NEW: Services Gallery (3 صور فوق بطاقات الخدمات) === */
.services-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-bottom:32px;
}
.services-gallery .svc-img{
  border-radius:16px;
  background-size:cover;
  background-position:center;
  min-height:200px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
@media (min-width:900px){
  .services-gallery .svc-img{ min-height:240px; }
}


/* Fix: Keep icon and text together in footer */
.footer ul li a,
.footer ul li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;   /* يمنع فصل الأيقونة عن النص */
  overflow-wrap: anywhere; /* يسمح بكسر النص الطويل إذا ما فيه مسافة */
  word-break: break-word;
}


/* Keep only the phone number LTR in Arabic */
html[lang="ar"] .footer .ltr-num {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
  text-align: left;
}


/* Footer-only: icon stays RTL, number LTR (Arabic only) */
html[lang="ar"] .footer .ltr-num{
  direction: ltr;
  unicode-bidi: isolate; /* don't let surrounding RTL affect order */
  display: inline-block;
  text-align: left;
}
.footer .ico{
  display: inline-block;
}


/* اجعل أي عنصر يحمل ltr-num يُعرض كـ LTR داخل الواجهة العربية */
html[lang="ar"] .ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}


/* --- Form Status Card --- */
#formStatusCard {
  display: none;
  margin-top: 16px;
  padding: 12px;
  font-weight: 600;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#formStatusCard.success {
  background: #d1fae5;      /* أخضر فاتح */
  border: 1px solid #10b981;
  color: #065f46;           /* أخضر غامق */
}

#formStatusCard.error {
  background: #fee2e2;      /* أحمر فاتح */
  border: 1px solid #ef4444;
  color: #7f1d1d;           /* أحمر غامق */
}


/* === RTL/LTR header normalization === */
html[lang="ar"] .header .container{direction:ltr;}
html[lang="ar"] .header .brand,
html[lang="ar"] .header .nav,
html[lang="ar"] .header .lang-switch{direction:rtl;}

/* Unify mobile nav appearance across languages */
@media (max-width:899px){
  .nav.open{
    width:100%;
    align-items:stretch;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
  }
  .nav.open a{width:100%;text-align:start;}
}


/* === Fix: spacing between header bottom line and language buttons === */
.lang-switch {
  margin-top: 6px;   /* تنزل الأزرار تحت الخط شوي */
}

.header {
  padding-bottom: 6px; /* تعطي فراغ إضافي أسفل الهيدر */
}