/* BBO Ad Showcase — mobile sticky bottom anchor.
   Hidden by default everywhere; anchor.js adds .bbo-anchor--on (mobile, not
   dismissed) and the display rule lives INSIDE the mobile media query, so it
   can never show on desktop even if the class is present. */

.bbo-anchor {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990; /* below #ttb-floater (9999), above page content */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px 56px 6px 8px; /* right room for the 44px close button */
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}

.bbo-anchor__inner {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 0; /* kill inline-image gap */
}

.bbo-anchor__inner img,
.bbo-anchor__slot img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bbo-anchor__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #f9fafb;
    color: #374151;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.bbo-anchor__close:hover,
.bbo-anchor__close:focus {
    background: #f3f4f6;
    color: #111827;
}

/* Mobile only: the anchor shows here and nowhere else. */
@media (max-width: 782px) {
    .bbo-anchor.bbo-anchor--on {
        display: flex;
    }
    /* Reserve space so the bar never permanently covers footer links. */
    body.bbo-anchor-spacer {
        padding-bottom: 64px;
    }
}

/* Lift the theme's floating action menu clear of the anchor bar while it's
   visible. At <=768px the theme bottom-anchors #ttb-floater (top:auto;
   bottom:1.5rem; transform:none), so we raise `bottom` — margin-top/transform
   can't move a bottom-anchored element. Keeps its ~1.5rem gap, now above the
   bar; reverts when the bar is dismissed (class removed). */
@media (max-width: 768px) {
    body.bbo-anchor-spacer #ttb-floater {
        bottom: calc(1.5rem + 64px);
        transition: bottom 0.3s ease;
    }
}