/* ==========================================================
   Shawky AI — site-wide fixes (2026-11-10)
   Loaded last on the home page and the main layout.
   ========================================================== */

html { scroll-padding-top: 84px; }

/* ---------- Language button: label on desktop, short code on mobile ---------- */
.lang-switch .lang-code { display: none; font-family: var(--font-en, 'Inter', sans-serif); font-weight: 800; letter-spacing: .02em; }

/* ---------- Floating buttons: chat always right, WhatsApp always left ---------- */
body[dir="ltr"] #ai-chat-widget { right: 28px !important; left: auto !important; }
body[dir="ltr"] #ai-chat-window { right: 0 !important; left: auto !important; transform-origin: bottom right !important; }
@media (max-width: 640px) {
    #ai-chat-widget, body[dir="ltr"] #ai-chat-widget { right: 16px !important; left: auto !important; bottom: 18px !important; }
}

/* ---------- Navbar: lower height, uniform square buttons ---------- */
@media (max-width: 1120px) {
    .navbar, .navbar.scrolled { padding: 8px 0 !important; }
    .navbar .container, .navbar .nav-shell { min-height: 48px !important; }
    .navbar-actions { gap: 8px !important; align-items: center !important; }

    nav.navbar .navbar-actions > .lang-switch,
    nav.navbar .navbar-actions > .icon-btn,
    nav.navbar .navbar-actions > .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        background: var(--bg-glass) !important;
        color: var(--text-primary) !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }
    .navbar-actions .lang-switch:not(#themeToggleBtnMain) > i,
    .navbar-actions .lang-switch .lang-label,
    .navbar-actions .lang-switch [data-home-lang-label] { display: none !important; }
    .navbar-actions .lang-switch .lang-code { display: inline !important; font-size: .82rem; }
    .navbar-actions .mobile-menu-btn i,
    .navbar-actions .icon-btn i,
    .navbar-actions .lang-switch i { color: inherit !important; }

    /* Login / CTA buttons live inside the menu on small screens */
    nav.navbar .navbar-actions > .btn:not(.lang-switch),
    nav.navbar .navbar-actions > form { display: none !important; }

    /* Mobile menu panel: opaque, scrollable, inside the viewport */
    .navbar-links {
        max-height: calc(100vh - 66px);
        max-height: calc(100dvh - 66px);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    [data-theme="light"] .catalog-home-nav .navbar-links { background: #fcfbf8 !important; }
    [data-theme="dark"] .catalog-home-nav .navbar-links { background: #1c1c1c !important; }
    .catalog-layout-nav .navbar-links { background: #212121 !important; }

    /* Mega menus were pushed off-screen by a desktop centering transform */
    .navbar-links .catalog-mega-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 4px !important;
        box-sizing: border-box;
    }
    .navbar-links .catalog-mega-menu > * { min-width: 0; max-width: 100%; }
    .navbar-links .catalog-mega-feature strong,
    .navbar-links .catalog-mega-feature small,
    .navbar-links .catalog-mega-column a span { white-space: normal !important; overflow-wrap: anywhere; }
}

/* The main layout keeps its hamburger menu up to 1440px */
@media (max-width: 1440px) {
    .catalog-layout-nav .mobile-menu-btn { color: var(--text-primary) !important; }
}

/* ---------- First section must clear the fixed navbar ---------- */
@media (max-width: 1120px) {
    main > .work-showcase-section { padding-top: 104px !important; }
}

/* ---------- Mobile overflow: text and buttons cut off past the screen edge ---------- */
@media (max-width: 1080px) {
    .hero-stack { grid-template-columns: minmax(0, 1fr) !important; }
    .home-sales-shell { grid-template-columns: minmax(0, 1fr) !important; }
    .home-sales-shell > *, .home-sales-board, .home-sales-board > * { min-width: 0 !important; max-width: 100% !important; }
    .home-sales-lead { grid-template-columns: 34px minmax(0, 1fr) auto !important; }
    .home-sales-lead > * { min-width: 0; }
    .flow-message { grid-template-columns: 38px minmax(0, 1fr) !important; }
    .flow-message > div { min-width: 0; }
}
@media (max-width: 820px) {
    main .btn { white-space: normal !important; max-width: 100%; text-align: center; line-height: 1.45; }
    main .btn.btn-lg { padding-inline: 18px !important; }
    .hero-actions, .hero-buttons, .cta-actions { max-width: 100%; }
    .hero-actions > .btn, .hero-buttons > .btn { width: 100%; }
    .home-sales-points { flex-wrap: wrap; }
    .journey-channel-ribbon strong, .crm-builder-body small, .crm-builder-body strong { white-space: normal !important; overflow-wrap: anywhere; }

    /* Revenue Workspace panel */
    .journey-results-demo { overflow: hidden; }
    .journey-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .journey-metrics > span { min-width: 0; }
    .journey-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .journey-pipeline > div { min-width: 0; overflow: hidden; }
    .journey-pipeline > div > span { min-width: 0; max-width: 100%; }
    .journey-pipeline > div > span { align-items: center; height: auto !important; }
    .journey-pipeline span small { min-width: 0; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; line-height: 1.35; }
}

/* ---------- Small visual corrections from the review ---------- */
#partners .section-eyebrow { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

.crm-generated-block h3 > span { background: transparent !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; }

.ecosystem-footnote { margin-top: 26px !important; }

.hero-visual .scene-lead .motion-scene-heading { margin-bottom: 6px !important; }
.hero-visual .scene-lead .motion-lead-card { margin: 8px 0 !important; }
.hero-visual .scene-lead .motion-data-row { padding-block: 5px !important; min-height: 0 !important; }
.hero-visual .scene-lead .motion-automation-flow { margin: 10px 2px 0 !important; }
.hero-visual .scene-lead .motion-analysis { margin-top: 12px !important; line-height: 1.5; }

/* Sales Agent landing: CTA buttons centred and inside the card */
@media (max-width: 900px) {
    .sales-hero { grid-template-columns: minmax(0, 1fr) !important; }
    .sales-hero > * { min-width: 0; }
    .sales-actions { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .sales-actions .btn { width: 100%; justify-content: center; margin: 0 !important; }
    .sales-proof { display: flex !important; flex-wrap: wrap; gap: 10px 16px; }
    .sales-proof span { white-space: normal; }
}

/* ---------- Unified footer ---------- */
.sfooter { position: relative; margin-top: 0; padding: 56px 0 0; background: #11110f; border-top: 1px solid rgba(255, 255, 255, .1); color: #aaa498; }
.sfooter .sfooter-inner { width: min(100% - 40px, 1200px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.sfooter-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; direction: ltr; }
.sfooter-brand-link img { width: 38px; height: 38px; object-fit: contain; }
.sfooter-brand-link strong { display: block; color: #fffaf0; font: 900 1.45rem/1 var(--font-en, 'Inter', sans-serif); letter-spacing: -.5px; }
.sfooter-brand-link strong span { color: #e9a426; }
.sfooter-brand-link small { display: block; margin-top: 5px; color: #aaa498; font: 700 .64rem/1 var(--font-en, 'Inter', sans-serif); letter-spacing: 3px; text-transform: uppercase; }
.sfooter-brand p { margin: 16px 0 18px; max-width: 360px; color: #aaa498; font-size: .92rem; line-height: 1.85; }
.sfooter-social { display: flex; gap: 10px; }
.sfooter-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px; color: #fffaf0; transition: .2s ease; }
.sfooter-social a:hover { border-color: #e9a426; color: #e9a426; }
.sfooter-col h4 { margin: 0 0 16px; color: #fffaf0; font-size: 1rem; font-weight: 800; }
.sfooter-col a { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 0; color: #aaa498; font-size: .92rem; text-decoration: none; transition: color .2s ease; }
.sfooter-col a:hover { color: #e9a426; }
.sfooter-col a i { width: 16px; text-align: center; color: #e9a426; }
.sfooter-col a [dir="ltr"] { unicode-bidi: isolate; }
.sfooter-bottom { margin-top: 40px; padding: 18px 20px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; color: #8d877b; font-size: .85rem; }
.sfooter-bottom p { margin: 0; color: inherit; }
@media (max-width: 900px) {
    .sfooter .sfooter-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 20px; }
    .sfooter-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .sfooter { padding-top: 40px; }
    .sfooter .sfooter-inner { width: min(100% - 28px, 1200px); }
    .sfooter-bottom { padding-bottom: 84px; }
}

/* ---------- Legal pages ---------- */
.legal-page { padding: 130px 0 80px; min-height: 70vh; }
.legal-wrap { width: min(100% - 32px, 860px); margin: 0 auto; padding: 32px; border: 1px solid var(--border-color); border-radius: 24px; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.legal-wrap h1 { margin: 0 0 8px; color: var(--text-primary); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.4; }
.legal-wrap .legal-updated { margin: 0 0 24px; color: var(--text-muted); font-size: .88rem; }
.legal-wrap h2 { margin: 26px 0 8px; color: var(--text-primary); font-size: 1.12rem; }
.legal-wrap p { margin: 0 0 10px; color: var(--text-secondary); line-height: 1.95; }
@media (max-width: 560px) { .legal-page { padding-top: 96px; } .legal-wrap { padding: 22px 18px; } }

/* ---------- Pricing: link to the plan details page ---------- */
.pricing-details-link { display: block; margin-top: 12px; text-align: center; color: var(--accent-blue); font-size: .88rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Desktop navbar (home): keep every link on one line ---------- */
@media (min-width: 1121px) {
    .catalog-home-nav { padding: 10px 0 !important; }
    .catalog-home-nav .navbar-links { gap: clamp(8px, 1.1vw, 22px) !important; flex-wrap: nowrap !important; }
    .catalog-home-nav .navbar-links > a,
    .catalog-home-nav .catalog-nav-trigger { white-space: nowrap !important; font-size: clamp(.78rem, .92vw, .95rem) !important; }
    .catalog-home-nav .navbar-actions { gap: 8px !important; }
    .catalog-home-nav .navbar-actions .btn { padding-inline: 14px !important; white-space: nowrap; font-size: .85rem !important; }
}

/* ---------- Hidden anti-spam fields must not widen the page ---------- */
html body div.trial-honeypot[aria-hidden], html body div.restaurant-honeypot[aria-hidden] {
    position: absolute !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- Customers page: show every filter on small screens ---------- */
@media (max-width: 760px) {
    .customer-filter-bar { flex-wrap: wrap !important; overflow: visible !important; justify-content: center; gap: 8px !important; }
}