/* WhatsApp Business Platform — Product Pages (main site)
   Reuses Mostafa Elwan brand DNA. WhatsApp green is an ACCENT, never the base theme. */
:root {
    --brand-primary: #1E90FF;
    --brand-secondary: #40E0D0;
    --brand-gradient: linear-gradient(135deg, #40E0D0 0%, #1E90FF 100%);
    --wa-accent: #25D366;
    --wa-accent-dark: #128C7E;
    --surface: #ffffff;
    --surface-soft: #f7fafc;
    --text-primary: #1a2733;
    --text-muted: #64748b;
    --border: #e6ebf0;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-soft: 0 8px 30px rgba(30,144,255,.08);
    --shadow-card: 0 4px 18px rgba(15,23,42,.06);
}

.wa-section { padding: 4.5rem 0; position: relative; }
.wa-section-soft {
    background:
        radial-gradient(1200px 500px at 15% 0%, rgba(37,211,102,.06), transparent 60%),
        radial-gradient(1000px 500px at 100% 100%, rgba(30,144,255,.05), transparent 60%),
        var(--surface-soft);
}
.wa-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(30,144,255,.08); color: var(--brand-primary);
    font-weight: 700; font-size: .8rem; padding: .5rem 1rem; border-radius: 999px;
    margin-bottom: 1.25rem;
}
.wa-h1 { font-weight: 800; line-height: 1.25; font-size: clamp(1.9rem, 4vw, 3rem); }
.wa-h2 { font-weight: 800; line-height: 1.3; font-size: clamp(1.5rem, 3vw, 2.25rem); position: relative; padding-bottom: .9rem; }
.wa-h2::after {
    content: ''; position: absolute; bottom: 0; right: 50%; transform: translateX(50%);
    width: 64px; height: 4px; border-radius: 999px; background: var(--brand-gradient);
}
.wa-lead { color: var(--text-muted); font-size: 1.1rem; max-width: 620px; }
.wa-max-text { max-width: 65ch; }

.wa-btn-primary {
    background: var(--brand-gradient); color: #fff; border: none; border-radius: 999px;
    padding: .9rem 2.2rem; font-weight: 700; box-shadow: var(--shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wa-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(30,144,255,.18); color: #fff; }
.wa-btn-outline {
    background: transparent; border: 1.5px solid var(--border); color: var(--text-primary);
    border-radius: 999px; padding: .9rem 2rem; font-weight: 600; transition: border-color .15s ease, background .15s ease;
}
.wa-btn-outline:hover { border-color: var(--brand-primary); background: rgba(30,144,255,.05); color: var(--text-primary); }
.wa-btn-wa {
    background: var(--wa-accent); color: #fff; border: none; border-radius: 999px;
    padding: .8rem 1.8rem; font-weight: 700; transition: background .15s ease;
}
.wa-btn-wa:hover { background: var(--wa-accent-dark); color: #fff; }

/* Product mockup — built from real UI vocabulary, explicitly labeled as illustrative */
.wa-mockup-frame {
    position: relative;
    padding: 2.5rem 1rem;
    border-radius: 28px;
    background:
        radial-gradient(700px 320px at 30% 20%, rgba(37,211,102,.14), transparent 65%),
        radial-gradient(700px 320px at 80% 90%, rgba(30,144,255,.10), transparent 65%);
}
.wa-mockup {
    background: var(--surface); border-radius: 20px; box-shadow: 0 30px 70px rgba(15,23,42,.14);
    border: 1px solid var(--border); overflow: hidden; position: relative; z-index: 1;
}
.wa-mockup-topbar { display: flex; gap: .35rem; padding: .8rem 1rem; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.wa-mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: #d8dee4; }
.wa-mockup-body { display: flex; min-height: 280px; }
.wa-mockup-sidebar { width: 34%; border-left: 1px solid var(--border); padding: .9rem; }
.wa-mockup-main { flex: 1; padding: 1rem; }
.wa-mockup-chip { background: var(--surface-soft); border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .78rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.wa-mockup-bubble { background: var(--surface-soft); border-radius: 14px; padding: .6rem .9rem; font-size: .82rem; max-width: 78%; margin-bottom: .6rem; }
.wa-mockup-bubble.out { background: rgba(30,144,255,.08); margin-right: auto; margin-left: 0; }
.wa-demo-label { position: absolute; top: 10px; left: 10px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: .2rem .7rem; font-size: .68rem; color: var(--text-muted); }

/* Capability layout — asymmetric, not a uniform grid */
.wa-cap-hero { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--wa-accent); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 2rem; height: 100%; }
.wa-cap-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand-primary); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.5rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.wa-cap-card:hover, .wa-cap-hero:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15,23,42,.12); }
.wa-icon-box {
    width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(30,144,255,.1); color: var(--brand-primary); font-size: 1.3rem; margin-bottom: 1rem;
}
.wa-icon-box.wa-icon-green { background: rgba(37,211,102,.12); color: var(--wa-accent-dark); }
.wa-badge-soon { background: #fff4e5; color: #b45309; font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }

/* Use cases */
.wa-usecase-tabs .nav-link {
    border-radius: 999px; padding: .6rem 1.4rem; font-weight: 700; color: var(--text-muted);
    border: 1px solid var(--border); margin-inline-end: .5rem;
    -webkit-tap-highlight-color: transparent; outline: none;
}
.wa-usecase-tabs .nav-link.active { background: var(--brand-gradient); color: #fff !important; border-color: transparent; }
.wa-usecase-tabs .nav-link:focus,
.wa-usecase-tabs .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,144,255,.25); }
.wa-usecase-tabs .nav-link.active:focus,
.wa-usecase-tabs .nav-link.active:focus-visible { box-shadow: 0 0 0 3px rgba(37,211,102,.35); }

/* Pricing */
.wa-price-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--wa-accent); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 2.25rem 1.75rem; height: 100%; position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.wa-price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15,23,42,.1); }
.wa-price-card.featured { border: 2px solid var(--brand-primary); border-top: 2px solid var(--brand-primary); box-shadow: 0 16px 40px rgba(30,144,255,.16); transform: scale(1.02); }
.wa-price-badge { position: absolute; top: -14px; right: 50%; transform: translateX(50%); background: var(--brand-gradient); color: #fff; font-size: .75rem; font-weight: 700; padding: .35rem 1rem; border-radius: 999px; white-space: nowrap; }
.wa-price-toggle { display: inline-flex; background: var(--surface-soft); border-radius: 999px; padding: .3rem; }
.wa-price-toggle button { border: none; background: transparent; padding: .5rem 1.3rem; border-radius: 999px; font-weight: 700; color: var(--text-muted); }
.wa-price-toggle button.active { background: var(--surface); color: var(--brand-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Status badges — one design system, reused everywhere */
.wa-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }
.wa-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wa-status-connected, .wa-status-active { background: rgba(37,211,102,.12); color: #128C7E; }
.wa-status-disconnected, .wa-status-failed { background: rgba(239,68,68,.1); color: #dc2626; }
.wa-status-pending, .wa-status-draft { background: rgba(148,163,184,.15); color: #64748b; }
.wa-status-suspended { background: rgba(245,158,11,.12); color: #b45309; }

/* FAQ accordion — replace flat Bootstrap default with the product's card language */
#faqAccordion .accordion-item {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card); margin-bottom: 1rem; overflow: hidden;
}
#faqAccordion .accordion-button {
    font-weight: 700; color: var(--text-primary); padding: 1.15rem 1.5rem; background: var(--surface);
}
#faqAccordion .accordion-button:not(.collapsed) {
    color: var(--wa-accent-dark); background: rgba(37,211,102,.06); box-shadow: none;
}
#faqAccordion .accordion-button:focus { box-shadow: none; border-color: var(--border); }
#faqAccordion .accordion-button::after { flex-shrink: 0; }
#faqAccordion .accordion-body { padding: 0 1.5rem 1.25rem; }

/* Use-case content card gets the same accent treatment as capabilities */
#uc1 .wa-cap-hero, #uc2 .wa-cap-hero, #uc3 .wa-cap-hero, #uc4 .wa-cap-hero { border-top-color: var(--wa-accent); }

@media (prefers-reduced-motion: reduce) {
    .wa-btn-primary, .wa-cap-card, .wa-cap-hero { transition: none; }
}
@media (max-width: 767.98px) {
    .wa-section { padding: 2.75rem 0; }
    .wa-mockup-body { flex-direction: column; }
    .wa-mockup-sidebar { width: 100%; border-left: none; border-bottom: 1px solid var(--border); }
}

/* Homepage — Featured Product frame + corner ribbon (additive, does not affect landing page) */
.wa-featured-frame {
    background: var(--surface);
    border-radius: calc(var(--radius) + 6px);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--surface), var(--surface)), var(--brand-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 24px 60px rgba(30,144,255,.14);
    overflow: hidden;
}
.wa-ribbon {
    position: absolute;
    top: 22px;
    inset-inline-start: -46px;
    transform: rotate(-45deg);
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    padding: .45rem 3.2rem;
    box-shadow: 0 6px 16px rgba(30,144,255,.28);
    z-index: 2;
}
.wa-eyebrow-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--brand-gradient); color: #fff;
    font-weight: 800; font-size: .8rem; padding: .5rem 1.1rem; border-radius: 999px;
    box-shadow: 0 8px 20px rgba(30,144,255,.22);
}
@media (max-width: 767.98px) {
    .wa-ribbon { top: 14px; inset-inline-start: -52px; font-size: .72rem; padding: .4rem 3.4rem; }
}

/* Landing page — Hero (page-header pattern, matching hosting.php/shop-systems.php, in WhatsApp brand green) */
.page-header-whatsapp {
    background: linear-gradient(135deg, var(--wa-accent) 0%, var(--wa-accent-dark) 100%);
    padding: 3.5rem 0;
    color: #fff;
    margin-bottom: 0;
}
.page-header-whatsapp .page-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: .75rem;
    color: #fff;
}
.page-header-whatsapp .page-subtitle {
    font-size: 1.1rem;
    opacity: .92;
}
.page-header-whatsapp .breadcrumb-item a { color: rgba(255,255,255,.85); }
.page-header-whatsapp .breadcrumb-item a:hover { color: #fff; }
.page-header-whatsapp .breadcrumb-item.active { color: rgba(255,255,255,.75); }
.page-header-whatsapp .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }
.wa-btn-outline-light {
    background: transparent; border: 1.5px solid rgba(255,255,255,.65); color: #fff;
    border-radius: 999px; padding: .9rem 2rem; font-weight: 600; transition: background .15s ease, border-color .15s ease;
}
.wa-btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.whatsapp-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.whatsapp-hero-stats .stat-item {
    background: rgba(255,255,255,.15);
    padding: 1.5rem;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(10px);
}
.whatsapp-hero-stats .stat-icon {
    width: 60px; height: 60px;
    background: rgba(255,255,255,.2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.whatsapp-hero-stats .stat-number { font-size: 1.5rem; font-weight: 800; }
.whatsapp-hero-stats .stat-label { font-size: .85rem; opacity: .9; }

@media (max-width: 767.98px) {
    .page-header-whatsapp { padding: 2.5rem 0; text-align: center; }
    .page-header-whatsapp .page-title { font-size: 1.7rem; }
    .whatsapp-hero-stats { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }
}