/* ==========================================================================
   SERVICE.CSS — Kashmir Decor service pages
   Shared across all 4 service pages: arabic-majlis, luxury-sofas,
   custom-curtains, upholstery-repair (and their /ar/ counterparts).
   Self-contained: loads only global.css + service.css.
   ========================================================================== */

/* --- BASE PAGE WRAPPER --- */
.kd-home { background: var(--color-linen); color: var(--color-black); }
.kd-home img { max-width: 100%; display: block; object-fit: contain; box-sizing: border-box; }
.kd-home a { color: inherit; text-decoration: none; }
.kd-home h1, .kd-home h2, .kd-home h3, .kd-home h4 {
    font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.01em;
}
.kd-container { width: 90%; max-width: var(--global-width); margin: 0 auto; }

/* --- EYEBROW --- */
.kd-eyebrow {
    display: inline-flex; align-items: center; gap: var(--dim-8px);
    font-size: var(--font-small); letter-spacing: var(--letter-spacing);
    text-transform: uppercase; color: var(--color-gold) !important;
    margin-bottom: var(--dim-16px);
}
.kd-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-gold); }

/* --- BUTTONS --- */
.kd-btn {
    display: inline-flex; align-items: center; gap: var(--dim-10px);
    padding: var(--dim-16px) var(--dim-24px); border-radius: var(--roundness-full);
    font-size: var(--font-medium); cursor: pointer; border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.kd-btn-primary { background: var(--color-emerald); color: var(--color-white) !important; box-sizing: border-box; }
.kd-btn-primary:hover { background: var(--color-emerald-dark); transform: translateY(-3px); box-shadow: var(--color-shadow-emerald); }
.kd-btn-ghost { border-color: var(--color-stroke-warm); color: var(--color-black); }
.kd-btn-ghost:hover { border-color: var(--color-emerald); transform: translateY(-3px); }
.kd-btn-gold { background: var(--color-gold); color: var(--color-emerald-dark); }
.kd-btn-gold:hover { background: var(--color-gold-light); transform: translateY(-3px); }
.kd-btn-whatsapp { background: #1DA851; color: var(--color-white) !important; }
.kd-btn-whatsapp:hover { background: #17903f; transform: translateY(-3px); }

/* --- SWATCH STRIP --- */
.kd-swatch-strip { display: flex; height: var(--dim-12px); }
.kd-swatch-strip span { flex: 1; }
.kd-swatch-strip span:nth-child(1) { background: var(--color-emerald); }
.kd-swatch-strip span:nth-child(2) { background: var(--color-gold); }
.kd-swatch-strip span:nth-child(3) { background: var(--color-brick); }
.kd-swatch-strip span:nth-child(4) { background: var(--color-sand); }
.kd-swatch-strip span:nth-child(5) { background: var(--color-emerald-dark); }
.kd-swatch-strip span:nth-child(6) { background: var(--color-gold-light); }
.kd-swatch-strip span:nth-child(7) { background: var(--color-black); }
.kd-swatch-strip span:nth-child(8) { background: var(--color-emerald); }

/* --- NAV --- */
.kd-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(246, 241, 231, 0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-stroke-warm);
}
.kd-nav-inner {
    width: 90%; max-width: var(--global-max-width); margin: 0 auto;
    height: var(--dim-nav-size); min-height: 84px;
    display: flex; align-items: center; justify-content: space-between;
}
.kd-nav-brand {
    font-family: var(--font-display); font-size: var(--font-large); letter-spacing: -0.01em;
    display: flex; align-items: center; gap: var(--dim-16px);
}
.kd-nav-brand > img:nth-child(1) { width: 40px; height: 40px; }
.kd-nav-brand > img:nth-child(2) { width: fit-content; height: 24px; }
.kd-nav-links { display: none; align-items: center; gap: var(--dim-40px); font-size: var(--font-medium); }
.kd-nav-links a:hover { color: var(--color-emerald); }
.kd-nav-links a.kd-nav-active { color: var(--color-emerald); }
.kd-nav-actions { display: flex; align-items: center; gap: var(--dim-16px); }
.kd-lang-switch {
    font-size: var(--font-small); border: 1px solid var(--color-stroke-warm);
    border-radius: var(--roundness-full); padding: var(--dim-8px) var(--dim-12px);
    background: none; cursor: pointer;
}
.kd-lang-switch:hover { border-color: var(--color-emerald); }

@media only screen and (min-width: 960px) { .kd-nav-links { display: flex; } }
@media only screen and (max-width: 1350px) {
    .kd-nav-links > a:nth-child(3), .kd-nav-links > a:nth-child(4), .kd-nav-links > a:nth-child(5) { display: none; }
}
@media only screen and (max-width: 700px) {
    .kd-nav-inner { height: 64px; min-height: 64px; }
    .kd-nav-brand { font-size: var(--font-medium); gap: var(--dim-8px); }
    .kd-nav-brand > img:nth-child(1) { width: 30px; height: 30px; }
    .kd-nav-brand > img:nth-child(2) { height: 18px; }
    .kd-nav-actions .kd-btn { padding: var(--dim-10px) var(--dim-16px); font-size: var(--font-small); }
}
@media only screen and (max-width: 480px) { .kd-nav-actions > a:nth-child(2) { display: none; } }

/* --- BREADCRUMB --- */
.kd-crumb { padding: var(--dim-16px) 0; background: var(--color-white); border-bottom: 1px solid var(--color-stroke-warm); }
.kd-crumb-inner { display: flex; align-items: center; gap: var(--dim-8px); font-size: var(--font-small); color: var(--color-gray); flex-wrap: wrap; }
.kd-crumb-inner a:hover { color: var(--color-emerald); }
.kd-crumb-current { color: var(--color-emerald); font-weight: 700; }

/* --- FOOTER --- */
.kd-footer { background: var(--color-black); color: rgba(255, 255, 255, 0.7); padding: var(--dim-64px) 0 var(--dim-16px); }
.kd-footer-grid {
    display: grid; grid-template-columns: 1fr; gap: var(--dim-40px);
    padding-bottom: var(--dim-40px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kd-footer-brand { font-family: var(--font-display); font-size: var(--font-large); color: var(--color-white); margin-bottom: var(--dim-16px); }
.kd-footer-col p { font-size: var(--font-medium); line-height: var(--line-height); max-width: 320px; color: var(--color-white); }
.kd-footer-col h5 {
    font-size: var(--font-small); font-weight: 700; letter-spacing: var(--letter-spacing);
    text-transform: uppercase; color: var(--color-white); margin-bottom: var(--dim-16px);
}
.kd-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--dim-10px); font-size: var(--font-small); color: var(--color-white); }
.kd-footer-col a { color: var(--color-white); }
.kd-footer-col ul a:hover { color: var(--color-gold-light); }
.kd-footer-social { display: flex; gap: var(--dim-10px); margin-top: var(--dim-16px); }
.kd-footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center;
}
.kd-footer-social a:hover { background: var(--color-gold); color: var(--color-black); }
.kd-footer-bottom {
    display: flex; flex-direction: column; gap: var(--dim-16px);
    justify-content: space-between; align-items: center; padding-top: var(--dim-24px); font-size: var(--font-small);
}
.kd-footer-bottom * { color: var(--color-white); }
.kd-footer-lang-btn {
    background: none; border: none; color: var(--color-white); font-family: inherit;
    font-size: var(--font-small); cursor: pointer; padding: 0; text-decoration: underline;
}
.kd-footer-lang-btn:hover { color: var(--color-gold-light); }

@media only screen and (min-width: 800px) {
    .kd-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .kd-footer-bottom { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { .kd-home * { transition: none !important; } }

/* ==========================================================================
   SERVICE PAGE SECTIONS
   ========================================================================== */

/* --- HERO --- */
.kd-svc-hero { padding: var(--dim-64px) 0; background: var(--color-white); }
.kd-svc-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-40px); align-items: center; }
.kd-svc-hero-copy h1 {
    font-size: clamp(32px, 5vw, 52px); color: var(--color-emerald); margin-bottom: var(--dim-16px);
}
.kd-svc-hero-copy > p {
    font-size: var(--font-medium); color: var(--color-gray); line-height: var(--line-height);
    max-width: 520px; margin-bottom: var(--dim-24px);
}
.kd-svc-hero-actions { display: flex; flex-wrap: wrap; gap: var(--dim-12px); margin-bottom: var(--dim-24px); }
.kd-svc-hero-visual {
    position: relative; border-radius: var(--roundness-28px); overflow: hidden;
    box-shadow: var(--color-shadow-emerald); aspect-ratio: 4 / 3;
}
.kd-svc-hero-visual img { width: 100%; height: 100%; object-fit: cover; }

@media only screen and (min-width: 960px) {
    .kd-svc-hero-grid { grid-template-columns: 1fr 1fr; }
}

/* --- TRUST STRIP --- */
.kd-svc-trust { padding: var(--dim-40px) 0; background: var(--color-emerald-dark); color: var(--color-white); }
.kd-svc-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dim-24px); text-align: center; }
.kd-svc-trust-stat strong { display: block; font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 36px); color: var(--color-gold-light); margin-bottom: var(--dim-6px); }
.kd-svc-trust-stat span { font-size: var(--font-small); color: rgba(255, 255, 255, 0.72); }
@media only screen and (min-width: 700px) { .kd-svc-trust-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- FEATURES --- */
.kd-svc-features { padding: var(--dim-92px) 0; background: var(--color-linen); }
.kd-section-head { display: flex; flex-direction: column; max-width: 640px; margin-bottom: var(--dim-48px); }
.kd-section-head h2 { font-size: clamp(28px, 4vw, 40px); color: var(--color-emerald); }
.kd-section-head p { margin-top: var(--dim-12px); color: var(--color-gray); font-size: var(--font-medium); line-height: var(--line-height); }
.kd-svc-features-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-24px); }
.kd-svc-feature-card { background: var(--color-white); border: 1px solid var(--color-stroke-warm); border-radius: var(--roundness-28px); padding: var(--dim-24px); }
.kd-svc-feature-icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--color-emerald); color: var(--color-gold-light);
    display: flex; align-items: center; justify-content: center; font-size: var(--font-large); margin-bottom: var(--dim-16px);
}
.kd-svc-feature-card h3 { font-size: var(--font-large); color: var(--color-black); margin-bottom: var(--dim-8px); }
.kd-svc-feature-card p { font-size: var(--font-small); color: var(--color-gray); line-height: var(--line-height); }
@media only screen and (min-width: 700px) { .kd-svc-features-grid { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 1100px) { .kd-svc-features-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- PROCESS --- */
.kd-svc-process { padding: var(--dim-92px) 0; background: var(--color-emerald); color: var(--color-white); }
.kd-svc-process .kd-section-head h2 { color: var(--color-white); }
.kd-svc-process .kd-section-head p { color: rgba(255, 255, 255, 0.72); }
.kd-svc-process-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-32px); }
.kd-svc-process-step { position: relative; padding-inline-start: var(--dim-24px); border-inline-start: 1px solid rgba(255, 255, 255, 0.22); }
.kd-svc-process-num { font-family: var(--font-display); font-size: 36px; color: var(--color-gold-light); margin-bottom: var(--dim-8px); }
.kd-svc-process-step h4 { font-size: var(--font-large); margin-bottom: var(--dim-6px); color: var(--color-white); }
.kd-svc-process-step p { font-size: var(--font-small); line-height: var(--line-height); color: rgba(255, 255, 255, 0.72); }
@media only screen and (min-width: 900px) { .kd-svc-process-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- GALLERY TEASER --- */
.kd-svc-gallery { padding: var(--dim-92px) 0; background: var(--color-linen); }
.kd-svc-gallery-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--dim-16px); margin-bottom: var(--dim-40px); }
.kd-svc-gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-16px); }
.kd-svc-gallery-item {
    position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--roundness-28px);
    overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.kd-svc-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.kd-svc-gallery-item:hover img { transform: scale(1.06); }
.kd-svc-gallery-item-tag {
    position: absolute; bottom: var(--dim-16px); inset-inline-start: var(--dim-16px);
    background: rgba(255,255,255,0.92); color: var(--color-emerald); font-size: var(--font-small);
    font-weight: 700; padding: var(--dim-8px) var(--dim-16px); border-radius: var(--roundness-full);
}
@media only screen and (min-width: 700px) { .kd-svc-gallery-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- FAQ --- */
.kd-svc-faq { padding: var(--dim-92px) 0; background: var(--color-white); }
.kd-svc-faq-list {
    display: flex; flex-direction: column; max-width: 820px;
    background: var(--color-linen); border: 1px solid var(--color-stroke-warm); border-radius: var(--roundness-28px); overflow: hidden;
}
.kd-svc-faq-item { border-bottom: 1px solid var(--color-stroke-warm); }
.kd-svc-faq-item:last-child { border-bottom: none; }
.kd-svc-faq-question {
    width: 100%; text-align: start; background: none; border: none; padding: var(--dim-20px) var(--dim-24px);
    display: flex; justify-content: space-between; align-items: center; gap: var(--dim-16px);
    font-family: inherit; font-size: var(--font-medium); font-weight: 600; color: var(--color-black); cursor: pointer;
}
.kd-svc-faq-question:hover { background: var(--color-white); }
.kd-svc-faq-question .kd-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-stroke-warm);
    display: flex; align-items: center; justify-content: center; font-size: var(--font-medium);
    color: var(--color-emerald); transition: transform 0.25s ease, background 0.25s ease;
}
.kd-svc-faq-item.active .kd-svc-faq-question .kd-icon { background: var(--color-emerald); transform: rotate(45deg); }
.kd-svc-faq-item.active .kd-svc-faq-question .kd-icon i { color: var(--color-white) !important; }
.kd-svc-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.kd-svc-faq-answer p { padding: 0 var(--dim-24px) var(--dim-20px); color: var(--color-gray); font-size: var(--font-medium); line-height: var(--line-height); }
.kd-svc-faq-item.active .kd-svc-faq-answer { max-height: 300px; }

/* --- CTA --- */
.kd-svc-cta { padding: var(--dim-64px) 0; background: var(--color-sand); }
.kd-svc-cta-inner { display: flex; flex-direction: column; gap: var(--dim-24px); align-items: flex-start; justify-content: space-between; }
.kd-svc-cta-inner h2 { font-size: clamp(26px, 4vw, 36px); color: var(--color-emerald); margin-bottom: var(--dim-8px); }
.kd-svc-cta-inner p { font-size: var(--font-medium); color: var(--color-gray); max-width: 480px; }
@media only screen and (min-width: 800px) { .kd-svc-cta-inner { flex-direction: row; align-items: center; } }

/* --- FLOATING WHATSAPP BUTTON --- */
.kd-whatsapp-float {
    position: fixed;
    bottom: var(--dim-24px);
    inset-inline-end: var(--dim-24px);
    z-index: 200;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1DA851;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
    text-decoration: none;
}
.kd-whatsapp-float:hover { transform: scale(1.08); }

/* --- RESPONSIVE --- */
@media only screen and (max-width: 700px) {
    .kd-svc-hero { padding: var(--dim-48px) 0; }
    .kd-svc-trust { padding: var(--dim-24px) 0; }
    .kd-svc-features, .kd-svc-process, .kd-svc-gallery, .kd-svc-faq { padding: var(--dim-48px) 0; }
    .kd-svc-feature-card { padding: var(--dim-20px); }
    .kd-whatsapp-float { width: 52px; height: 52px; font-size: 22px; bottom: var(--dim-16px); inset-inline-end: var(--dim-16px); }
}

/* --- RTL --- */
[dir="rtl"] .kd-home { font-family: var(--font-body-ar); }
[dir="rtl"] .kd-home h1, [dir="rtl"] .kd-home h2, [dir="rtl"] .kd-home h3, [dir="rtl"] .kd-home h4,
[dir="rtl"] .kd-nav-brand, [dir="rtl"] .kd-footer-brand {
    font-family: var(--font-display-ar);
}