/* ═══════════════════════════════════════════════════════════
   مستجاب — Glass Component Layer (v3)
   Liquid glass panels, cards, footer, forms, breadcrumbs
   ═══════════════════════════════════════════════════════════ */

/* ── Glass utilities ── */
.glass-panel,
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-xl);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.glass-panel--dark {
    background: var(--glass-dark-bg);
    border-color: var(--glass-dark-border);
    box-shadow: 0 12px 40px rgba(6, 10, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(220, 38, 38, 0.18);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-card:active {
    transform: translateY(-1px) scale(0.995);
}

/* ── Global ambient grain (fixed, no scroll repaint) ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.page-home::before,
.page-service::before {
    opacity: 0.025;
}

/* ── Breadcrumb (replaces inline styles) ── */
.breadcrumb-nav {
    padding: 16px 0 0;
}

.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    align-items: center;
}

.breadcrumb-nav a {
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.2s var(--ease-out);
}

.breadcrumb-nav a:hover {
    color: var(--color-primary, var(--p-red));
}

.breadcrumb-nav li[aria-current="page"] {
    color: var(--text-main);
    font-weight: 700;
}

/* ── Section chrome ── */
.section-glass {
    position: relative;
    padding: var(--section-y, clamp(48px, 8vw, 96px)) 0;
}

.section-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(220, 38, 38, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.section-title {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.section-title h2 {
    font-family: var(--font-display, 'IBM Plex Sans Arabic', 'Tajawal', sans-serif);
    text-wrap: balance;
}

.section-title p {
    margin-inline: auto;
    color: var(--text-muted);
}

/* ── Service / feature cards — glass bento ── */
.service-card,
.feature-card,
.step-card,
.price-card,
.testimonial-card,
.related-card,
.blog-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.service-card:hover,
.feature-card:hover,
.step-card:hover,
.price-card:hover,
.testimonial-card:hover,
.related-card:hover,
.blog-card:hover {
    border-color: rgba(220, 38, 38, 0.14);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Card grids — CTA bottom alignment */
.card-grid-align {
    display: grid;
    gap: var(--space-lg);
}

.card-grid-align .service-card,
.card-grid-align .price-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-grid-align .service-card .btn,
.card-grid-align .price-card .btn {
    margin-top: auto;
}

/* ── Trust cards on dark sections ── */
.trust-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Neighborhood tags — brand glass chips ── */
.neighborhood-tag {
    border: 1px solid rgba(220, 38, 38, 0.2);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.neighborhood-tag:hover {
    border-color: rgba(220, 38, 38, 0.45);
    background: rgba(254, 242, 242, 0.95);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.12);
}

.neighborhood-dot {
    background: var(--color-primary, var(--p-red));
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.45);
}

/* ── Footer — premium glass dark ── */
.site-footer,
.footer {
    position: relative;
    background: linear-gradient(180deg, rgba(6, 10, 18, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.site-footer::after,
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), rgba(255, 255, 255, 0.15), transparent);
    pointer-events: none;
}

.footer-inner,
.footer-grid {
    position: relative;
    z-index: 1;
}

.footer-col {
    padding: 8px 0;
}

.footer-newsletter .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-newsletter input[type="email"] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: #fff;
    backdrop-filter: blur(8px);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.footer-newsletter input[type="email"]:focus {
    outline: none;
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.footer-newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* ── Forms — glass inputs ── */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--radius-md);
    backdrop-filter: blur(6px);
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ── FAQ accordion — minimal glass ── */
.faq-item,
.accordion-item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: transparent;
}

.faq-question,
.accordion-button {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: background 0.2s var(--ease-out);
}

.faq-question:hover,
.accordion-button:hover {
    background: rgba(254, 242, 242, 0.6);
}

/* ── Floating WhatsApp — glass orb ── */
.sticky-whatsapp,
.desktop-floating a[href*="wa.me"],
.floating-wa {
    background: rgba(5, 150, 101, 0.92) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(5, 150, 101, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .glass-card:hover,
    .service-card:hover,
    .feature-card:hover {
        transform: none;
    }

    body::before {
        display: none;
    }
}