/* Ad Details Page Specific Styles */

/* Stripe 1: Home icon ONLY on Ad Details (scoped by has-home-icon) */
.header-strip.has-home-icon .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 6px; /* tiny enterprise shift right */
}

.header-strip.has-home-icon .strip-left {
    display: flex;
    align-items: center;
    transform: translateX(12px); /* tiny enterprise nudge */
}

/* keep link style same; just ensure no weird underline */
.header-strip.has-home-icon .strip-left .strip-link {
    text-decoration: none;
}

/* Legacy .home-btn (no longer used) — keep harmless, but remove fixed positioning behavior */
.home-btn {
    display: none;
}

/* Ad container breathing space (Ad Details only)
   Adds 24px top gap so white ad container sits below header with breathing space.
   Scoped here in adverts-show.css so Main Menu is unaffected.
*/
.ad-container {
    /* If .ad-container exists elsewhere, this will override for Ad Details page only.
       24px ≈ 2 lines of vertical breathing space — adjust to 32px if you prefer more. */
    margin-top: 24px;
}

/* Ad Details: make grey details box sharper (border + cleaner shadow) */
.ad-container .details-box {
    border: 1px solid #b5b5b5;          /* dark grey thin border */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* softer shadow so border is visible */
}

/* Ad Details: breathing space for reviews section (prevents cramped look near sticky bar) */
.ad-reviews.bj-section-gap {
    margin-top: 18px;
    margin-bottom: 110px; /* space so reviews don't sit under the bottom sticky bar */
}

/* Title & tagline */
.site-title {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 48px;
    color: #0F9F9A;
    margin: 40px auto 5px;
}

.site-tagline {
    display: block;
    text-align: center;
    font-size: 20px;
    color: #000;
    margin: 0 0 40px;
}

.footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin: 40px 0 20px;
}

/* Sell Button - EXACT COPY from homepage */
.sell-btn { 
    display: inline-block;
    width: 180px;
    background: #0F9F9A; 
    color: #fff; 
    padding: 10px 20px; 
    border-radius: 30px; 
    font-weight: bold; 
    text-decoration: none; 
    font-size: 16px; 
    box-shadow: 0 3px 8px rgba(0,0,0,0.2); 
    transition: all 0.3s ease; 
    text-align: center;
    box-sizing: border-box;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}
.sell-btn:hover { 
    background: #e85a20; 
}

/* MOBILE ONLY: hide thumbnail images on ad details page */
@media (max-width: 768px) {

    .image-section .thumbnails-container {
        display: none;
    }

}

/* MOBILE ONLY: show FULL description text (Ad Details only) */
@media (max-width: 768px) {

    /* Force the FULL text to be visible on mobile */
    .ad-container .short-description,
    .ad-container .short-description.truncated {
        max-height: none;
        height: auto;
        overflow: visible;
        display: block;
    }

    /* Remove the fade overlay that visually "cuts" text */
    .ad-container .short-description::after {
        display: none;
    }

    /* Also show the full-description block (in case template uses it) */
    .ad-container .full-description {
        display: block;
    }

    /* Hide Read More button on mobile since we show everything */
    .ad-container .read-more-toggle {
        display: none;
    }

}

/* ==========================================
   Ad Details Trust Badges
   Scope: adverts-show.css
   ========================================== */

.ad-container .ad-details-badge-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.ad-container .ad-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ad-container .ad-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 19px;
    border-radius: 9px 9px 12px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    clip-path: polygon(50% 0%, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
}

.ad-container .ad-trust-icon--shield {
    background: #f4b400;
    color: #ffffff;
}

.ad-container .ad-trust-badge--protected {
    background: #eef4ff;
    color: #2f5ea8;
    border: 1px solid #bfd3ff;
}

.ad-container .ad-trust-badge--meetup {
    background: #fff1eb;
    color: #0F9F9A;
    border: 1px solid #ffb89f;
}

.ad-container .ad-details-badge-row .owner-badge {
    margin-left: 0;
}


/* DESKTOP ONLY: Ad Details description should preserve seller formatting and expand naturally */
@media (min-width: 769px) {
    .ad-container .short-description {
        max-height: none;
        height: auto;
        overflow: visible;
        white-space: pre-line;
        line-height: 1.7;
    }

    .ad-container .short-description::after {
        display: none;
    }

    .ad-container .full-description {
        white-space: pre-line;
        line-height: 1.7;
    }
}

/* =========================================================
   Ad Details - Buyer Orders Context (Desktop Scoped)
   ========================================================= */

.bj-ad-order-context-desktop {
    display: none;
}

@media (min-width: 1281px) {
    .bj-ad-order-context-desktop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;

        max-width: 1100px;
        margin: 18px auto 40px;
        padding: 16px 18px;

        background: #ffffff;
        border: 1px solid #ffe1d6;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        box-sizing: border-box;
    }

    .bj-ad-order-context-desktop__text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: #222222;
        font-size: 14px;
    }

    .bj-ad-order-context-desktop__text strong {
        color: #0F9F9A;
        font-size: 16px;
    }

    .bj-ad-order-context-desktop__text span {
        color: #555555;
    }

    .bj-ad-order-context-desktop__meta {
        white-space: nowrap;
    }

    .bj-ad-order-context-desktop__actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .bj-ad-order-context-desktop__btn {
        min-height: 38px;
        padding: 0 18px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        border: 1px solid #0F9F9A;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .bj-ad-order-context-desktop__btn--ghost {
        background: #ffffff;
        color: #0F9F9A;
    }

    .bj-ad-order-context-desktop__btn--primary {
        background: #0F9F9A;
        color: #ffffff;
    }
}