/**
 * Anic Marketplace — Global Polish Stylesheet
 * ------------------------------------------------------------
 * This file wraps every new Phase-2 component (.anic-*) with
 * defensive CSS to prevent text overflow, button misalignment,
 * z-index clashes, and mobile layout glitches. It is loaded
 * AFTER the individual component inline styles so it wins.
 */

/* =============================================================
   1. GLOBAL RESETS FOR ALL PHASE-2 COMPONENTS
   ============================================================= */
[class*="anic-od-"],
[class*="anic-wal-"],
[class*="anic-inv-"],
[class*="anic-india-"],
[class*="anic-bt-"],
[class*="anic-cmp-"],
[class*="anic-anchor-"],
[class*="anic-bulk-"],
[class*="anic-proj-"],
[class*="anic-ss-"],
[class*="anic-wl-"],
[class*="anic-rv-"],
[class*="anic-verified-"],
[class*="anic-ordercount"],
[class*="anic-viewing-"],
[class*="anic-stickybuy-"],
[class*="anic-exit-"],
[class*="anic-rev-"],
[class*="anic-trust-"],
[class*="anic-chat-"],
[class*="anic-ticker-"],
[class*="anic-pub-"],
[class*="anic-psub-"],
[class*="anic-loy-"],
[class*="anic-ref-"],
[class*="anic-nps-"],
[class*="anic-rep-"],
[class*="anic-aiw-"],
[class*="anic-ag-"],
[class*="anic-api-"] {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* Any text inside these components: safe wrapping */
[class*="anic-od-"] *,
[class*="anic-wal-"] *,
[class*="anic-inv-"] *,
[class*="anic-india-"] *,
[class*="anic-bt-"] *,
[class*="anic-cmp-"] *,
[class*="anic-anchor-"] *,
[class*="anic-bulk-"] *,
[class*="anic-proj-"] *,
[class*="anic-ss-"] *,
[class*="anic-wl-"] *,
[class*="anic-rv-"] *,
[class*="anic-rev-"] *,
[class*="anic-trust-"] *,
[class*="anic-pub-"] *,
[class*="anic-psub-"] *,
[class*="anic-loy-"] *,
[class*="anic-ref-"] *,
[class*="anic-rep-"] *,
[class*="anic-aiw-"] *,
[class*="anic-ag-"] *,
[class*="anic-api-"] * {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    min-width: 0;  /* allow flex children to shrink */
}

/* =============================================================
   2. COLOR NORMALIZATION — all Phase-2 components use theme orange
   ============================================================= */
:root {
    --anic-brand: #e67e22;
    --anic-brand-hover: #d35400;
    --anic-brand-soft: rgba(230, 126, 34, 0.08);
    --anic-brand-border: rgba(230, 126, 34, 0.25);
    --anic-ink: #1a1a2e;
    --anic-ink-soft: #374151;
    --anic-muted: #6b7280;
    --anic-line: #e5e7eb;
    --anic-line-soft: #f3f4f6;
    --anic-bg-soft: #fafbfc;
    --anic-success: #047857;
    --anic-error: #dc2626;
}

/* =============================================================
   3. BUTTONS — no more overflow, consistent 44px touch targets
   ============================================================= */
[class*="anic-od-"] button,
[class*="anic-wal-"] button,
[class*="anic-inv-"] button,
[class*="anic-india-"] button,
[class*="anic-bt-"] button,
[class*="anic-cmp-"] button,
[class*="anic-bulk-"] button,
[class*="anic-proj-"] button,
[class*="anic-ss-"] button,
[class*="anic-wl-"] button,
[class*="anic-trust-"] button:not(.anic-chat-btn),
[class*="anic-rev-"] button,
[class*="anic-pub-"] button,
[class*="anic-psub-"] button,
[class*="anic-loy-"] button,
[class*="anic-ref-"] button,
[class*="anic-rep-"] button,
[class*="anic-aiw-"] button,
[class*="anic-ag-"] button,
[class*="anic-api-"] button {
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px solid transparent;
    transition: all .18s ease;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Primary button accent across all modules */
button.anic-primary,
[class*="anic-"] button.primary,
[class*="anic-"] button[class*="-submit"],
[class*="anic-"] button[class*="-save"],
[class*="anic-"] button[class*="-generate"],
[class*="anic-"] button[class*="-apply"] {
    background: var(--anic-brand) !important;
    color: #fff !important;
    border-color: var(--anic-brand) !important;
}
button.anic-primary:hover,
[class*="anic-"] button.primary:hover,
[class*="anic-"] button[class*="-submit"]:hover,
[class*="anic-"] button[class*="-save"]:hover,
[class*="anic-"] button[class*="-generate"]:hover,
[class*="anic-"] button[class*="-apply"]:hover {
    background: var(--anic-brand-hover) !important;
    border-color: var(--anic-brand-hover) !important;
}

/* Disabled state */
[class*="anic-"] button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* =============================================================
   4. INPUTS — consistent heights, no overflow, 16px font on mobile
   ============================================================= */
[class*="anic-od-"] input[type="text"],
[class*="anic-od-"] input[type="email"],
[class*="anic-od-"] input[type="url"],
[class*="anic-od-"] input[type="number"],
[class*="anic-od-"] input[type="tel"],
[class*="anic-od-"] input[type="password"],
[class*="anic-od-"] select,
[class*="anic-od-"] textarea,
[class*="anic-wal-"] input,
[class*="anic-wal-"] select,
[class*="anic-wal-"] textarea,
[class*="anic-inv-"] input,
[class*="anic-inv-"] select,
[class*="anic-inv-"] textarea,
[class*="anic-india-"] input,
[class*="anic-india-"] select,
[class*="anic-bt-"] input,
[class*="anic-bt-"] select,
[class*="anic-bt-"] textarea,
[class*="anic-bulk-"] input,
[class*="anic-bulk-"] select,
[class*="anic-proj-"] input,
[class*="anic-proj-"] textarea,
[class*="anic-ss-"] input,
[class*="anic-ss-"] textarea,
[class*="anic-wl-"] input,
[class*="anic-exit-"] input,
[class*="anic-rev-"] input,
[class*="anic-rev-"] textarea,
[class*="anic-trust-"] input,
[class*="anic-pub-"] input,
[class*="anic-pub-"] select,
[class*="anic-pub-"] textarea,
[class*="anic-psub-"] input,
[class*="anic-psub-"] select,
[class*="anic-psub-"] textarea,
[class*="anic-ref-"] input,
[class*="anic-rep-"] input,
[class*="anic-rep-"] select,
[class*="anic-aiw-"] input,
[class*="anic-aiw-"] select,
[class*="anic-aiw-"] textarea,
[class*="anic-ag-"] input,
[class*="anic-ag-"] select,
[class*="anic-ag-"] textarea,
[class*="anic-api-"] input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 1.5px solid var(--anic-line);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--anic-ink-soft);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
[class*="anic-"] input:focus,
[class*="anic-"] select:focus,
[class*="anic-"] textarea:focus {
    border-color: var(--anic-brand) !important;
    box-shadow: 0 0 0 3px var(--anic-brand-soft) !important;
}

/* =============================================================
   5. CARDS — consistent surface, no overflow
   ============================================================= */
[class*="anic-"][class*="-card"],
[class*="anic-"][class*="-panel"] {
    background: #fff;
    border: 1px solid var(--anic-line);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* =============================================================
   6. TABLES — horizontal scroll instead of overflow
   ============================================================= */
[class*="anic-"] table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
[class*="anic-"] [class*="-table-wrap"],
[class*="anic-"][class*="-history"],
[class*="anic-"][class*="-list-wrap"] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
[class*="anic-"] table th,
[class*="anic-"] table td {
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid var(--anic-line-soft);
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
[class*="anic-"] table th {
    font-weight: 700;
    color: var(--anic-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
    background: var(--anic-bg-soft);
}

/* =============================================================
   7. Z-INDEX LAYERS — prevent floating widget clashes
   ============================================================= */
.anic-stickybuy-bar     { z-index: 940 !important; }
.anic-ticker            { z-index: 945 !important; }
.anic-ticker-toast      { z-index: 945 !important; }
.anic-cmp-bar           { z-index: 950 !important; }
#anic-cmp-bar           { z-index: 950 !important; }
.anic-chat-btn,
.anic-chat-widget       { z-index: 960 !important; }
.anic-exit-overlay,
.anic-exit-modal        { z-index: 980 !important; }
.anic-nps-modal         { z-index: 985 !important; }

/* =============================================================
   8. MODAL / OVERLAY — safe close buttons, mobile-friendly
   ============================================================= */
[class*="anic-"][class*="-overlay"] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
[class*="anic-"][class*="-modal"] {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
[class*="anic-"][class*="-close"] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--anic-line-soft);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    color: var(--anic-muted);
}

/* =============================================================
   9. STAT CARDS, BADGES, PILLS
   ============================================================= */
[class*="anic-"][class*="-stat"],
[class*="anic-"][class*="-kpi"] {
    background: #fff;
    border: 1px solid var(--anic-line);
    border-radius: 12px;
    padding: 18px;
    text-align: left;
}
[class*="anic-"][class*="-stat"] [class*="-num"],
[class*="anic-"][class*="-kpi"] [class*="-num"] {
    font-size: 24px;
    font-weight: 800;
    color: var(--anic-ink);
    line-height: 1.1;
}
[class*="anic-"][class*="-stat"] [class*="-label"],
[class*="anic-"][class*="-kpi"] [class*="-label"] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--anic-muted);
    margin-top: 6px;
}

[class*="anic-"][class*="-badge"],
[class*="anic-"][class*="-pill"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================
   10. GRID LAYOUTS — safe wrapping
   ============================================================= */
[class*="anic-"][class*="-grid"] {
    display: grid;
    gap: 16px;
}
[class*="anic-"][class*="-grid-2"] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
[class*="anic-"][class*="-grid-3"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
[class*="anic-"][class*="-grid-4"] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

[class*="anic-"][class*="-row"] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
[class*="anic-"][class*="-row"] > * { min-width: 0; }

/* =============================================================
   11. ICONS — shrink protection
   ============================================================= */
[class*="anic-"] svg {
    flex-shrink: 0;
}

/* =============================================================
   12. MOBILE — breakpoint polish (≤ 768px)
   ============================================================= */
@media (max-width: 768px) {
    /* Prevent iOS zoom on focus */
    [class*="anic-"] input,
    [class*="anic-"] select,
    [class*="anic-"] textarea {
        font-size: 16px !important;
    }

    /* Stack all grids to single column */
    [class*="anic-"][class*="-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Tighter card padding */
    [class*="anic-"][class*="-card"],
    [class*="anic-"][class*="-panel"] {
        padding: 16px 14px;
    }

    /* Bigger touch targets for buttons */
    [class*="anic-"] button {
        min-height: 44px !important;
    }

    /* Modals: full width with safer padding */
    [class*="anic-"][class*="-modal"] {
        padding: 22px 18px;
        margin: 0;
        border-radius: 14px;
    }

    /* Make the sticky buy bar safer for notch devices */
    .anic-stickybuy-bar {
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    /* Hide social proof ticker on very small screens so it doesn't cover content */
    .anic-ticker-toast {
        max-width: calc(100vw - 24px) !important;
        font-size: 12px !important;
    }

    /* Compare bar stays bottom-centered */
    .anic-cmp-bar, #anic-cmp-bar {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Chat button slightly smaller, doesn't overlap mobile nav */
    .anic-chat-btn {
        width: 54px !important;
        height: 54px !important;
        bottom: 76px !important;
        right: 14px !important;
    }

    /* Exit intent modal fits screen */
    .anic-exit-modal {
        max-width: calc(100vw - 24px);
    }

    /* Tables — make scroll obvious */
    [class*="anic-"][class*="-table-wrap"]::after {
        content: '';
        display: block;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--anic-line), transparent);
        margin-top: 4px;
    }
}

/* =============================================================
   13. EXTRA SMALL (≤ 480px) — ultra-tight
   ============================================================= */
@media (max-width: 480px) {
    [class*="anic-"] h1 { font-size: 20px !important; line-height: 1.25; }
    [class*="anic-"] h2 { font-size: 17px !important; line-height: 1.3; }
    [class*="anic-"] h3 { font-size: 15px !important; }

    [class*="anic-"][class*="-stat"] [class*="-num"],
    [class*="anic-"][class*="-kpi"] [class*="-num"] {
        font-size: 20px;
    }

    /* Two-button rows stack */
    [class*="anic-"][class*="-actions"] {
        flex-direction: column;
        align-items: stretch;
    }
    [class*="anic-"][class*="-actions"] button {
        width: 100%;
    }
}

/* =============================================================
   14. FIX NESTED INTERACTIONS WITH THEME HEADER / FOOTER
   ============================================================= */
body.anic-drawer-open [class*="anic-chat-"],
body.anic-drawer-open .anic-cmp-bar,
body.anic-drawer-open .anic-stickybuy-bar,
body.anic-drawer-open .anic-ticker-toast {
    display: none !important;
}

/* Don't show trust-ui floating widgets on checkout/account/cart/login pages */
body.page-template-page-checkout [class*="anic-exit-"],
body.page-template-page-checkout .anic-chat-btn,
body.page-template-page-checkout .anic-stickybuy-bar,
body.page-template-page-checkout .anic-ticker-toast,
body.page-template-page-cart [class*="anic-exit-"],
body.page-template-page-cart .anic-stickybuy-bar,
body.page-template-page-account [class*="anic-exit-"],
body.page-template-page-account .anic-stickybuy-bar,
body.page-template-page-login [class*="anic-exit-"],
body.page-template-page-login .anic-stickybuy-bar {
    display: none !important;
}

/* =============================================================
   15. PRINT SAFETY — hide floating widgets when printing invoice/report
   ============================================================= */
@media print {
    .anic-stickybuy-bar,
    .anic-cmp-bar,
    #anic-cmp-bar,
    .anic-chat-btn,
    .anic-chat-widget,
    .anic-ticker-toast,
    .anic-exit-overlay,
    .anic-exit-modal,
    .anic-nps-modal,
    [class*="anic-"][class*="-no-print"] {
        display: none !important;
    }
}