/* PosterBot Frontend Styles — scoped under #posterbot-post-content */

/* ─── Root Container (fixed max-width, centered) ─── */
#posterbot-post-content {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    font-size: inherit !important;
    line-height: inherit !important;
    box-sizing: border-box !important;
}

/* ─── Two-Column Layout ─── */
#posterbot-post-content .posterbot-layout {
    display: grid !important;
    grid-template-columns: 1fr 240px !important;
    gap: 48px !important;
    align-items: start !important;
}

#posterbot-post-content .posterbot-main {
    min-width: 0 !important;
}

/* ─── Sticky Sidebar (desktop) ─── */
#posterbot-post-content .posterbot-sidebar {
    position: sticky !important;
    top: 100px !important;
    text-align: center !important;
}

/* ══════════════════════════════════════
   SIDEBAR ELEMENTS (no card container)
   ══════════════════════════════════════ */

/* Neutralize old posts' .posterbot-product-card box */
#posterbot-post-content .posterbot-product-card {
    all: unset !important;
    display: block !important;
    text-align: center !important;
}

/* Hide old product card images (legacy posts) */
#posterbot-post-content .posterbot-product-card img,
#posterbot-post-content .posterbot-card-img {
    display: none !important;
}

/* ── Sidebar Thumbnail ── */
#posterbot-post-content .posterbot-sidebar-thumb {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    margin: 0 0 12px !important;
    object-fit: cover !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* ── Price ── */
#posterbot-post-content .posterbot-card-price {
    font-size: 2em !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 4px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

/* ── Reviews ── */
#posterbot-post-content .posterbot-card-reviews {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#posterbot-post-content .posterbot-stars {
    color: #f59e0b !important;
    font-size: 1.1em !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

#posterbot-post-content .posterbot-review-text {
    font-size: 0.78em !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* ── Payment Icons (SVG via CSS) ── */
#posterbot-post-content .posterbot-card-payments {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}

#posterbot-post-content .posterbot-pay-icon {
    display: inline-block !important;
    width: 38px !important;
    height: 24px !important;
    border-radius: 3px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-size: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#posterbot-post-content .posterbot-pay-visa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect width='48' height='32' rx='4' fill='%231A1F71'/%3E%3Cpath d='M20.5 10.5l-3.5 11h-3l-1.8-8.8c-.1-.4-.3-.7-.6-.8-1-.5-2.3-.9-3.6-1.1l.1-.3h4.6c.6 0 1.1.4 1.2 1l1.1 6L18 10.5h2.5zm6.2 0l-2.5 11H21l2.5-11h3.2zm10.3 7.4l1.7-4.6.9 4.6h-2.6zm3.5 3.6h3l-2.6-11h-2.4c-.5 0-1 .3-1.2.8l-4.4 10.2h3l.6-1.6h3.8l.3 1.6zm-9.5-3.4c0-2.9-4-3-4-4.3 0-.4.4-.8 1.2-.9a5.3 5.3 0 012.8.5l.5-2.3a7.7 7.7 0 00-2.7-.5c-2.8 0-4.8 1.5-4.8 3.7 0 1.6 1.4 2.5 2.5 3 1.1.6 1.5.9 1.5 1.4 0 .8-.9 1.1-1.7 1.1a6 6 0 01-2.9-.7l-.5 2.4c.7.3 1.9.5 3.2.5 3 0 5-1.5 5-3.8z' fill='%23fff'/%3E%3C/svg%3E") !important;
    border: none !important;
}

#posterbot-post-content .posterbot-pay-mc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect width='48' height='32' rx='4' fill='%23252525'/%3E%3Ccircle cx='18' cy='16' r='9' fill='%23EB001B'/%3E%3Ccircle cx='30' cy='16' r='9' fill='%23F79E1B'/%3E%3Cpath d='M24 9a9 9 0 010 14 9 9 0 000-14z' fill='%23FF5F00'/%3E%3C/svg%3E") !important;
    border: none !important;
}

#posterbot-post-content .posterbot-pay-crypto {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect width='48' height='32' rx='4' fill='%23F7931A'/%3E%3Cpath d='M30.2 14.3c.4-2.5-1.5-3.8-4.1-4.7l.8-3.4-2-.5-.8 3.3a39 39 0 01-1.6-.4l.8-3.3-2-.5-.8 3.4-1.3-.3-2.8-.7-.5 2.2s1.5.3 1.5.4c.8.2.9.7.9 1.1l-1 3.9c0 .1.1.1.2.2h-.2l-1.3 5.3c-.1.3-.4.7-.9.5 0 0-1.5-.4-1.5-.4l-1 2.3 2.6.6 1.4.4-.9 3.4 2 .5.9-3.4 1.6.4-.8 3.4 2 .5.9-3.5c3.5.7 6.1.4 7.2-2.8.9-2.5 0-4-1.9-4.9 1.3-.3 2.4-1.2 2.6-3.1zm-4.7 6.7c-.6 2.6-4.9 1.2-6.3.8l1.1-4.5c1.4.3 5.9 1 5.2 3.7zm.7-6.7c-.6 2.3-4.1 1.2-5.3.9l1-4c1.2.3 4.9.8 4.3 3.1z' fill='%23fff'/%3E%3C/svg%3E") !important;
    border: none !important;
}

/* ── CTA Button (sidebar) ── */
#posterbot-post-content .posterbot-card-cta,
#posterbot-post-content .posterbot-card-cta:link,
#posterbot-post-content .posterbot-card-cta:visited {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-radius: 8px !important;
    border: none !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    margin: 10px 0 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    box-sizing: border-box !important;
}

#posterbot-post-content .posterbot-card-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    text-decoration: none !important;
    filter: brightness(1.06) !important;
}

#posterbot-post-content .posterbot-card-cta:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

/* ── Trust Features ── */
#posterbot-post-content .posterbot-card-trust {
    text-align: left !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

#posterbot-post-content .posterbot-trust-item {
    font-size: 0.78em !important;
    color: #374151 !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Old dividers — hide */
#posterbot-post-content .posterbot-card-divider {
    display: none !important;
}

/* Old .posterbot-secure badge — hide */
#posterbot-post-content .posterbot-secure {
    display: none !important;
}

/* ══════════════════════════════════════
   CONTENT SECTIONS — SPACING
   ══════════════════════════════════════ */

/* ── CTA Header (Title - Price) ── */
#posterbot-post-content .posterbot-cta-header {
    font-size: 0.95em !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ── Inline CTA Buttons (bottom) ── */
#posterbot-post-content .posterbot-cta {
    margin: 2.5em 0 !important;
    padding: 0 !important;
    text-align: center !important;
    clear: both !important;
}

#posterbot-post-content .posterbot-cta a,
#posterbot-post-content .posterbot-cta a:link,
#posterbot-post-content .posterbot-cta a:visited {
    display: block !important;
    width: fit-content !important;
    min-width: 260px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 16px 44px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    position: relative !important;
    float: none !important;
}

#posterbot-post-content .posterbot-cta a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    filter: brightness(1.06) !important;
}

#posterbot-post-content .posterbot-cta a:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ── Mid-content Button (Add to Cart) ── */
#posterbot-post-content .posterbot-add-to-cart {
    margin: 2em 0 !important;
    padding: 0 !important;
    text-align: center !important;
    clear: both !important;
}

#posterbot-post-content .posterbot-add-to-cart a,
#posterbot-post-content .posterbot-add-to-cart a:link,
#posterbot-post-content .posterbot-add-to-cart a:visited {
    display: block !important;
    width: fit-content !important;
    min-width: 220px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 13px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    border-radius: 8px !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    position: relative !important;
    float: none !important;
}

#posterbot-post-content .posterbot-add-to-cart a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    text-decoration: none !important;
    filter: brightness(1.06) !important;
}

#posterbot-post-content .posterbot-add-to-cart a:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

/* ── Article Body ── */
#posterbot-post-content .posterbot-article {
    margin: 0 0 2em !important;
    padding: 0 !important;
}

#posterbot-post-content .posterbot-article h2 {
    margin: 2em 0 0.6em !important;
    font-size: 1.4em !important;
    line-height: 1.3 !important;
}

#posterbot-post-content .posterbot-article h3 {
    margin: 1.6em 0 0.5em !important;
    font-size: 1.15em !important;
    line-height: 1.3 !important;
}

#posterbot-post-content .posterbot-article p {
    margin: 0 0 1.1em !important;
    line-height: 1.75 !important;
}

#posterbot-post-content .posterbot-article ul,
#posterbot-post-content .posterbot-article ol {
    margin: 0 0 1.1em !important;
    padding-left: 1.5em !important;
}

#posterbot-post-content .posterbot-article li {
    margin-bottom: 0.35em !important;
    line-height: 1.7 !important;
}

/* ── Table of Contents ── */
#posterbot-post-content .posterbot-toc {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 0 2em !important;
    max-width: 100% !important;
}

#posterbot-post-content .posterbot-toc-details {
    padding: 0 !important;
}

#posterbot-post-content .posterbot-toc-title {
    font-weight: 700 !important;
    font-size: 1.05em !important;
    color: #1a202c !important;
    cursor: pointer !important;
    padding: 1em 1.5em !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
}

#posterbot-post-content .posterbot-toc-title::-webkit-details-marker {
    display: none !important;
}

#posterbot-post-content .posterbot-toc-title::after {
    content: "\25B6" !important;
    font-size: 0.7em !important;
    transition: transform 0.2s ease !important;
    margin-left: 0.5em !important;
}

#posterbot-post-content .posterbot-toc-details[open] > .posterbot-toc-title::after {
    transform: rotate(90deg) !important;
}

#posterbot-post-content .posterbot-toc-details ol {
    margin: 0 !important;
    padding: 0 1.5em 1.2em 2.8em !important;
    list-style: decimal !important;
}

#posterbot-post-content .posterbot-toc li {
    margin-bottom: 0.3em !important;
    line-height: 1.5 !important;
}

#posterbot-post-content .posterbot-toc li a {
    text-decoration: none !important;
    color: #2563eb !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

#posterbot-post-content .posterbot-toc li a:hover {
    text-decoration: underline !important;
}

#posterbot-post-content .posterbot-toc .posterbot-toc-sub {
    padding-left: 1.2em !important;
    list-style-type: lower-alpha !important;
    font-size: 0.95em !important;
}

/* ── FAQ Section ── */
#posterbot-post-content .posterbot-faq {
    margin: 2.5em 0 !important;
    padding: 1.5em !important;
    background: #fafafa !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
}

#posterbot-post-content .posterbot-faq-item {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1em 0 !important;
}

#posterbot-post-content .posterbot-faq-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

#posterbot-post-content .posterbot-faq-item:first-child {
    padding-top: 0 !important;
}

#posterbot-post-content .posterbot-faq-q {
    font-size: 1.05em !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin: 0 0 0.4em !important;
}

#posterbot-post-content .posterbot-faq-a {
    color: #4a5568 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* ── Product Backlink ── */
#posterbot-post-content .posterbot-backlink {
    margin: 2.5em 0 !important;
    padding: 1em 1.5em !important;
    background: #f0f9ff !important;
    border-left: 3px solid #2563eb !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 0.95em !important;
}

#posterbot-post-content .posterbot-backlink a {
    color: #2563eb !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

#posterbot-post-content .posterbot-backlink a:hover {
    text-decoration: underline !important;
}

/* ══════════════════════════════════════
   MOBILE STICKY BOTTOM BAR
   ══════════════════════════════════════ */

/* Hidden on desktop */
#posterbot-post-content .posterbot-mobile-bar {
    display: none !important;
}

/* ══════════════════════════════════════
   RESPONSIVE: Tablet (601px – 960px)
   ══════════════════════════════════════ */
@media (max-width: 960px) {
    #posterbot-post-content {
        padding: 0 20px !important;
        padding-bottom: 80px !important;
    }

    /* Single column */
    #posterbot-post-content .posterbot-layout {
        display: block !important;
    }

    /* Hide sidebar on mobile — mobile bar replaces it */
    #posterbot-post-content .posterbot-sidebar {
        display: none !important;
    }

    /* Inline buttons full width */
    #posterbot-post-content .posterbot-cta a,
    #posterbot-post-content .posterbot-add-to-cart a {
        min-width: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
    }

    /* ── Mobile Sticky Bottom Bar ── */
    #posterbot-post-content .posterbot-mobile-bar {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: #1e293b !important;
        padding: 10px 14px !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25) !important;
        box-sizing: border-box !important;
    }

    #posterbot-post-content .posterbot-mbar-thumb {
        width: 48px !important;
        height: 48px !important;
        border-radius: 6px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    #posterbot-post-content .posterbot-mbar-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    #posterbot-post-content .posterbot-mbar-price {
        font-size: 1.1em !important;
        font-weight: 800 !important;
        color: #fff !important;
        line-height: 1.2 !important;
    }

    #posterbot-post-content .posterbot-mbar-reviews .posterbot-stars {
        color: #f59e0b !important;
        font-size: 0.85em !important;
        letter-spacing: 1px !important;
    }

    #posterbot-post-content .posterbot-mbar-payments {
        display: flex !important;
        gap: 3px !important;
        align-items: center !important;
    }

    #posterbot-post-content .posterbot-mbar-payments .posterbot-pay-icon {
        width: 28px !important;
        height: 18px !important;
    }

    #posterbot-post-content .posterbot-mbar-cta,
    #posterbot-post-content .posterbot-mbar-cta:link,
    #posterbot-post-content .posterbot-mbar-cta:visited {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 18px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        border-radius: 8px !important;
        border: none !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1.3 !important;
    }

    #posterbot-post-content .posterbot-mbar-cta:hover {
        text-decoration: none !important;
        filter: brightness(1.06) !important;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE: Mobile (≤ 600px)
   ══════════════════════════════════════ */
@media (max-width: 600px) {
    #posterbot-post-content {
        padding: 0 16px !important;
        padding-bottom: 76px !important;
    }

    #posterbot-post-content .posterbot-article h2 {
        font-size: 1.25em !important;
    }

    #posterbot-post-content .posterbot-faq {
        padding: 1em !important;
        margin: 2em 0 !important;
    }

    #posterbot-post-content .posterbot-backlink {
        margin: 2em 0 !important;
        padding: 0.8em 1em !important;
    }

    /* Smaller mobile bar on phones */
    #posterbot-post-content .posterbot-mobile-bar {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    #posterbot-post-content .posterbot-mbar-thumb {
        width: 42px !important;
        height: 42px !important;
    }

    #posterbot-post-content .posterbot-mbar-price {
        font-size: 1em !important;
    }

    #posterbot-post-content .posterbot-mbar-cta {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ── Legacy: old posts without #posterbot-post-content wrapper ── */
.posterbot-cta {
    margin: 2em 0 !important;
    padding: 0 !important;
    text-align: center !important;
    clear: both !important;
}

.posterbot-cta a {
    display: block !important;
    width: fit-content !important;
    min-width: 260px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 16px 44px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    float: none !important;
}

.posterbot-add-to-cart {
    margin: 2em 0 !important;
    padding: 0 !important;
    text-align: center !important;
    clear: both !important;
}

.posterbot-add-to-cart a {
    display: block !important;
    width: fit-content !important;
    min-width: 220px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 13px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    border-radius: 8px !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    float: none !important;
}

/* Legacy price pill (old posts) — tighter spacing */
.posterbot-price,
#posterbot-post-content .posterbot-price {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 6px !important;
    padding: 6px 18px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 2px solid #22c55e !important;
    border-radius: 50px !important;
    font-size: 1.2em !important;
    font-weight: 800 !important;
    color: #15803d !important;
    text-align: center !important;
}