/* Amazon Price Tracker — site-wide chrome (nav bar + footer + theme icon hides).
 * Loaded on every front-end page. Plugin-output nav and footer use the same
 * CSS variables as public.css so the brand stays consistent.
 */

:root {
    --apt-bg: #f8fafc;
    --apt-surface: #ffffff;
    --apt-surface-alt: #f1f5f9;
    --apt-border: #e2e8f0;
    --apt-primary: #0a4d3a;        /* dark forest green — main brand color (v0.6.2) */
    --apt-primary-hover: #0d6147;
    --apt-text: #1a202c;
    --apt-muted: #64748b;
    --apt-accent: #ff9900;
    --apt-success: #047857;
}

/* ============================================================
 * Hide REHub / Rewise theme header widgets that don't belong on
 * a price-tracker site (Compare + Wishlist tabs in the header).
 * These selectors cover the variants the theme has used over
 * different releases; the !important is intentional because
 * theme styles are loaded after ours.
 * ============================================================ */
.rh-flex-eq-h .header-buttons-compare,
.rh-flex-eq-h .header-buttons-wishlist,
.rh-header-block-compare,
.rh-header-block-wishlist,
.header_compare_button,
.header_wishlist_button,
.rh-compare-wrapper,
.rh-wishlist-wrapper,
.rh-top-compare,
.rh-top-wishlist,
.compare-header-block,
.wishlist-header-block,
.rh-cmp-counter-w,
.rh-wsh-counter-w,
.menu-item-compare,
.menu-item-wishlist,
.yith-woocompare-widget,
.tinv-wraper.tinv-wishlist,
.rh-header-vertical-line,
li.menu-item.compare-page-link,
li.menu-item.wishlist-page-link,
[class*="header_compare"],
[class*="header_wishlist"] {
    display: none !important;
}

/* ============================================================
 * Plugin primary nav bar (rendered via wp_body_open).
 * Sits flush below the theme header. Theme-independent.
 * ============================================================ */
.apt-nav {
    background: var(--apt-primary);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 3px solid var(--apt-accent);
}
.apt-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2px;
    /* IMPORTANT: must stay visible so the Categories dropdown can escape
     * the nav container. overflow:hidden/auto here clips position:absolute
     * children even when overflow-x is the only one declared.
     */
    overflow: visible;
}

.apt-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px; /* overlap the accent border on the active link */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.apt-nav-link:hover,
.apt-nav-link:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
}
.apt-nav-link-active {
    border-bottom-color: var(--apt-accent);
}
.apt-nav-link .apt-nav-icon {
    font-size: 16px;
    line-height: 1;
}

/* "Categories ▾" dropdown */
.apt-nav-dropdown {
    position: relative;
}
.apt-nav-dropdown-toggle::after {
    content: "▾";
    font-size: 10px;
    margin-inline-start: 4px;
    opacity: 0.85;
}
.apt-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 280px;
    background: #fff;
    color: var(--apt-text);
    border: 1px solid var(--apt-border);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    padding: 8px;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 9999;
    max-height: 70vh;
    overflow-y: auto;
}
.apt-nav-dropdown:hover .apt-nav-dropdown-menu,
.apt-nav-dropdown:focus-within .apt-nav-dropdown-menu,
.apt-nav-dropdown.apt-nav-dropdown-open .apt-nav-dropdown-menu {
    display: block;
}
.apt-nav-dropdown-parent {
    padding: 6px 8px;
}
.apt-nav-dropdown-parent-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--apt-muted);
    padding: 6px 8px 4px;
}
.apt-nav-dropdown-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.apt-nav-dropdown-children a,
.apt-nav-dropdown-parent > a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--apt-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
}
.apt-nav-dropdown-parent > a {
    font-weight: 700;
    color: var(--apt-primary);
}
.apt-nav-dropdown-children a:hover,
.apt-nav-dropdown-parent > a:hover {
    background: var(--apt-surface-alt);
    color: var(--apt-primary);
    text-decoration: none;
}
.apt-nav-dropdown-emoji {
    margin-inline-end: 6px;
    font-size: 14px;
}

@media (max-width: 720px) {
    .apt-nav-inner { padding: 0 8px; }
    .apt-nav-link { padding: 11px 11px; font-size: 13px; }
    .apt-nav-dropdown-menu { min-width: 260px; }
}

/* ============================================================
 * Plugin site footer (rendered via wp_footer).
 * ============================================================ */
.apt-site-footer {
    background: var(--apt-primary);
    color: #cbd5e1;
    padding: 36px 16px 22px;
    border-top: 3px solid var(--apt-accent);
    margin-top: 40px;
    font-size: 14px;
    line-height: 1.65;
}
.apt-site-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.apt-site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.apt-site-footer-brand-mark { color: var(--apt-accent); }
.apt-site-footer-about {
    color: #e2e8f0;
    margin: 0 auto 18px;
    max-width: 600px;
}
.apt-site-footer-about[lang="ar"] { font-size: 15px; }
.apt-site-footer-disclosure {
    margin: 18px auto 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    font-size: 12px;
    color: #94a3b8;
    max-width: 720px;
    line-height: 1.6;
}
.apt-site-footer-copy {
    margin-top: 16px;
    font-size: 12px;
    color: #94a3b8;
}
.apt-site-footer a { color: #fff; text-decoration: underline; }
.apt-site-footer a:hover { color: var(--apt-accent); }

/* Defensive: if a theme renders an empty footer widget area placeholder
 * directly below ours (e.g. Rewise's "No widgets added" notice), hide it.
 * Also hide common REHub "empty widgets" notices that appear on archive
 * sidebars and inside the theme footer. */
.apt-site-footer + .footer-bottom-empty,
.apt-site-footer + .footer-widgets-empty,
body .footer-empty-widgets,
body .footer .footer-widgets-empty,
body .rh-footer-empty-msg,
body #footer .footer-widget-area:empty,
body #footer .empty-footer-message,
body #footer .empty-widgets-note,
body footer .empty-sidebar-message,
body .empty_sidebar,
body .no-widgets-text,
body #colophon .no-widgets-message {
    display: none !important;
}
/* Direct text-content match: Rewise/REHub renders the literal sentence
 * "No widgets added. You can disable footer widget area in theme options - footer options"
 * directly into a sidebar wrap. We target by common container classes. */
body .sidebar.widget-area:empty,
body .widget-area.empty-sidebar,
body .col-content.has-no-sidebar + .col-sidebar:empty,
body footer .sidebar-empty,
body #footer-sidebar:has(> .no-widgets-text) {
    display: none !important;
}

/* ============================================================
 * Hide the theme's own primary navigation bar (the dark-green
 * "المفضلة" strip in REHub/Rewise) — our plugin nav replaces it.
 * Only applied when .apt-chrome-active is set on <html> by chrome.js,
 * so a JS-disabled visitor still has a working theme menu.
 * ============================================================ */
.apt-chrome-active .rh-flex-eq-h-second,
.apt-chrome-active .rh-main-nav,
.apt-chrome-active .rh-primary-nav,
.apt-chrome-active .rh-primary-nav-c,
.apt-chrome-active .rh-pmenu,
.apt-chrome-active .rh-pmenu-c,
.apt-chrome-active nav.rh-second-nav,
.apt-chrome-active #mainMenu,
.apt-chrome-active .main-navigation,
.apt-chrome-active .menu-primary-container,
.apt-chrome-active .rh-flex-nav,
.apt-chrome-active .rh-second-nav-line,
.apt-chrome-active #site-navigation {
    display: none !important;
}

/* ============================================================
 * v0.8.0 — Mobile bottom navigation bar
 * Sticky 5-item bar at the bottom of the viewport on phones.
 * Hidden on tablets/desktops where the top nav is plenty.
 * Pushes body content up via padding so the bar doesn't cover content.
 * ============================================================ */
.apt-mobile-bottom { display: none; }

@media (max-width: 720px) {
    .apt-mobile-bottom {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 9990;
        background: var(--apt-primary, #0a4d3a);
        color: #fff;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
        padding-bottom: env(safe-area-inset-bottom, 0); /* iOS home indicator */
        justify-content: space-around;
        align-items: stretch;
    }
    .apt-mb-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 4px 9px;
        color: #d6e4dc;
        text-decoration: none;
        font-size: 11px;
        gap: 2px;
        min-height: 56px;
        transition: color 0.15s ease, background-color 0.15s ease;
    }
    .apt-mb-item:hover,
    .apt-mb-item:focus,
    .apt-mb-active {
        color: #fff;
        background: rgba(255,255,255,0.06);
        text-decoration: none;
    }
    .apt-mb-icon {
        font-size: 19px;
        line-height: 1;
    }
    .apt-mb-label {
        font-weight: 600;
        white-space: nowrap;
    }

    /* Reserve space at the bottom of the page so footer/content
       isn't hidden behind the fixed bar. */
    body { padding-bottom: 64px; }

    /* On mobile, the top horizontal nav is redundant — hide it so
       visitors don't have two navs competing for screen space.
       The categories dropdown lives in the top nav, so users who
       want categories scroll the homepage section rows instead. */
    .apt-nav { display: none; }
}

/* ============================================================
 * v0.8.0 — Hide WP page title on the front page only.
 * The user's homepage page has a "الصفحة الرئيسية" title that
 * REHub renders large and right-aligned, breaking the section
 * rows layout. WP body classes give us .home + .page-id-N; the
 * theme renders the title inside .entry-title / .page-title /
 * .post-title / .rh-page-title — hide all of them on .home.
 * ============================================================ */
body.home .entry-title,
body.home .page-title,
body.home h1.entry-title,
body.home h1.page-title,
body.home .rh-page-title,
body.home .rh-title,
body.home .rh-page-title-wrap,
body.home .post-title-wrap,
body.home .single-page-title,
body.home .breadcrumb_in,
body.home .breadcrumbs_wrap,
body.home .page-heading {
    display: none !important;
}

/* ============================================================
 * v0.8.0 — Aggressive empty-sidebar suppression.
 * The previous selector list still let "No widgets added"
 * messages through on /wishlist/ and /request-a-product/.
 * These rules target the literal Rewise/REHub side widget area
 * by attribute and a few more class variants.
 * ============================================================ */
body .sidebar:not(:has(.widget)),
body aside.sidebar:empty,
body aside#secondary:empty,
body .col-md-4.sidebar:not(:has(.widget)),
body .col-lg-3.sidebar:not(:has(.widget)),
body #secondary:not(:has(.widget)),
body .widget-area:not(:has(.widget)),
body .empty_sidebar,
body .empty-sidebar,
body .no-widgets,
body .no-widgets-added,
body div[class*="no-widget"],
body div[class*="empty-widget"],
body div[id*="no-widget"] {
    display: none !important;
}
/* When the right sidebar is hidden, give the content the freed width. */
body .col-md-8.content_constructor,
body .col-md-8.col-content,
body .col-md-9.content_constructor,
body .col-md-9.col-content {
    width: 100% !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
    float: none !important;
}

/* ============================================================
 * v0.9.0 — Widen the theme's site-header search input.
 * REHub/Rewise renders a narrow search field — Ahmed wanted it
 * substantially wider. Target the most common selectors and
 * force a wide layout. Logical properties so RTL still works.
 * ============================================================ */
body .rh-search-form,
body .theme-search,
body .top-search-form,
body .header-search-form,
body .header-search,
body form.search-form,
body .rh-flex-header-search,
body .rh-main-search,
body .header-search-block,
body .top-form-search,
body .search-form-wrap {
    max-width: 720px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}
body .rh-search-form input[type="search"],
body .rh-search-form input[type="text"],
body .theme-search input[type="search"],
body .header-search input[type="search"],
body form.search-form input[type="search"],
body form.search-form input[type="text"],
body .rh-main-search input,
body .top-search-form input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 10px 16px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
}

/* ============================================================
 * v0.9.1 — Widen the Gutenberg core "Search" block (.wp-block-search).
 * Ahmed inserted a Search block into the homepage page itself, so the
 * narrow rounded pill input is actually the Gutenberg block (NOT the
 * theme's header search, which v0.9.0's selectors targeted). Target
 * the block's wrapper and inputs by their generated classes.
 * ============================================================ */
body .wp-block-search {
    max-width: 100% !important;
    width: 100% !important;
}
body .wp-block-search .wp-block-search__inside-wrapper {
    width: 100% !important;
    max-width: 880px !important;
    margin-inline: auto !important;
    border-radius: 999px;
    border: 1px solid var(--apt-border, #e2e8f0);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}
body .wp-block-search .wp-block-search__input {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 12px 18px !important;
    font-size: 15px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
body .wp-block-search .wp-block-search__button {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 18px !important;
    min-height: 48px;
    background: var(--apt-primary, #0a4d3a) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700;
}
body .wp-block-search .wp-block-search__button:hover,
body .wp-block-search .wp-block-search__button:focus {
    background: var(--apt-primary-hover, #0d6147) !important;
}

/* v0.12.6 — Small hint under the homepage Gutenberg search block. Tells
 * visitors they can paste an Amazon.sa product URL straight into the box.
 * Centered, muted, doesn't compete with the search bar visually. */
.apt-search-bar-hint {
    max-width: 880px;
    margin: 8px auto 0;
    text-align: center;
    color: var(--apt-muted, #64748b);
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 720px) {
    .apt-search-bar-hint {
        font-size: 12px;
        padding: 0 12px;
        margin-top: 6px;
    }
}

/* ============================================================
 * v0.9.1 — Hide the theme's mobile hamburger / off-canvas drawer.
 *
 * REHub/Rewise renders a three-bar menu icon in the mobile header
 * that opens an empty off-canvas sidebar (the visitor sees nothing
 * inside it because we hid the theme's primary nav). Since we have
 * our own sticky bottom-nav, the hamburger is dead weight — remove
 * both the trigger and the drawer.
 * ============================================================ */
@media (max-width: 1080px) {
    body .rh-mobile-menu-trigger,
    body .mobile-menu-toggle,
    body .menu-toggle,
    body .rh-mobile-nav-toggle,
    body .mobile-nav-toggle,
    body .header-mobile-menu,
    body .rh-mobile-bar,
    body .rh-mobile-menu,
    body .rh-mobile-bar-c,
    body .mobile-menu-container,
    body .rh-offcanvas-menu,
    body .offcanvas-menu,
    body .rh-sidemenu,
    body .mobile-sidebar,
    body #mobileMenu,
    body .mobile-bar-wrap,
    body .rh-menu-toggle,
    body [class*="hamburger"],
    body [class*="mobile-toggle"],
    body button[aria-label*="menu" i],
    body button[aria-label*="navigation" i] {
        display: none !important;
    }
}

/* If the offcanvas drawer opens at any width and we couldn't trap
   the trigger above, hide the drawer body itself. */
body .rh-offcanvas-menu,
body .offcanvas-overlay,
body .rh-mobile-menu-wrap,
body .mobile-nav-overlay,
body #mobile-menu-overlay {
    display: none !important;
}

/* ============================================================
 * v0.9.2 — Defensive card styling in chrome.css.
 *
 * chrome.css loads on every front-end page; public.css only loads
 * on product/category/archive/search/shortcode pages. If the theme
 * styles <a> elements inside search/archive loops aggressively (color,
 * border-bottom, padding), the .apt-card rules in public.css might
 * lose specificity even when loaded. Restate the critical card rules
 * here with body-prefix to bump specificity. Idempotent with public.css.
 * ============================================================ */
/* v0.11.0 — card wrapper changed from <a class="apt-card"> to
   <article class="apt-card"> with an inner <a class="apt-card-link"> so a
   secondary "Check on Amazon" link can sit alongside the main product link
   without nesting two anchors. Selectors below were migrated accordingly. */
body article.apt-card,
body .apt-products-grid article.apt-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    color: #1a202c !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
body article.apt-card:hover,
body article.apt-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1 !important;
}
body article.apt-card .apt-card-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
}
body article.apt-card .apt-card-link:hover,
body article.apt-card .apt-card-link:focus {
    text-decoration: none !important;
    color: inherit !important;
}
body article.apt-card .apt-card-title {
    color: #0a4d3a !important; /* brand green */
    font-weight: 600 !important;
    text-decoration: none !important;
}
body article.apt-card .apt-card-price {
    color: #047857 !important; /* success green */
    font-weight: 700 !important;
}
body article.apt-card .apt-card-price-empty {
    color: #64748b !important;
    font-weight: normal !important;
}
body article.apt-card .apt-card-cta {
    color: #64748b !important; /* muted, NOT theme accent */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
body article.apt-card .apt-card-image {
    aspect-ratio: 1 / 1;
    background: #f1f5f9 !important;
    padding: 10px;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
body article.apt-card .apt-card-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
/* v0.11.0 — secondary Amazon-orange "Check on Amazon" button. Restated
   here so themes that style <a> in archive loops can't swallow the colors. */
body article.apt-card .apt-card-buy {
    display: block !important;
    text-align: center !important;
    background: transparent !important;
    color: #b45309 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
body article.apt-card .apt-card-buy:hover,
body article.apt-card .apt-card-buy:focus {
    background: #ff9900 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
}

/* Grid container — restate too. The theme's search results sometimes
 * inject a wrapper that resets `display`, so re-force grid here. */
body .apt-products-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--apt-grid-cols, 4), minmax(0, 1fr));
    gap: 14px;
}
body .apt-search-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    max-width: 1200px;
    margin-inline: auto;
}