/**
 * =======================================================================
 * SILVERFOX ENGINE EXTENSION: BLIND BOX (CLASSIFIEDS)
 * Path: /httpdocs/slfx_extensions/blind_box/css/blind_box.css
 * Version: 2.0.0 (Architect Revision - Compacted & Flex-Fixed)
 * =======================================================================
 */

/* =======================================================================
   1. CORE LAYOUT & FLEXBOX UTILITIES
   ======================================================================= */
.display-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.full-height { height: 100%; display: flex; flex-direction: column; }

/* =======================================================================
   2. CARD COMPONENT STYLES & ANIMATIONS
   ======================================================================= */
/* ARCHITECT FIX: Equal Height Flex Cards & Shadow Clipping */
.ad-item { display: flex; }
.ad-item .drop-shadow.lifted { position: relative; display: flex; flex-direction: column; width: 100%; flex-grow: 1; margin: 0 auto; }
.ad-item .drop-shadow.lifted::before, .ad-item .drop-shadow.lifted::after { top: auto; bottom: 15px; height: 40px; }
.blind-box-public .drop-shadow.lifted::before, .blind-box-public .drop-shadow.lifted::after, .ad-item .drop-shadow.lifted::before, .ad-item .drop-shadow.lifted::after { top: auto; bottom: 15px; height: 40px; }

.blind-box-public .white-bg { padding: 20px; position: relative; z-index: 3; }
.blind-box-public .drop-shadow:hover .white-bg { position: relative; z-index: 3; }
.blind-box-admin .drop-shadow .white-bg { position: relative; z-index: 3; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.bottom-20 { bottom: 20px; }
.left-20 { left: 20px; }
.padding-20 { padding: 20px; }
.padding-bottom-60 { padding-bottom: 60px !important; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-40 { margin-bottom: 40px; }
.text-large { font-size:1.3rem; }
.margin-bottom-15 { margin-bottom:15px; }

/* =======================================================================
   3. TYPOGRAPHY & INTERACTION
   ======================================================================= */
.hover-text-primary:hover { color: #8a2a1f !important; text-decoration: none; }
.line-height-1-3 { line-height: 1.3; }
.line-height-1-5 { line-height: 1.5; }
.line-height-1-6 { line-height: 1.6; }

/* =======================================================================
   4. FORM & SUBMISSION STYLES
   ======================================================================= */
.card-radius { border-radius: 8px; }
.border-radius-4 { border-radius: 4px; }
.border-solid-1 { border: 1px solid; }
.border-light { border-color: #e0e0e0; }
.security-box { border-left: 4px solid #8a2a1f; }
.bb-law-disclaimer { border-left: 4px solid #b71c1c; background: #fff3f3; }
.bb-law-title { color: #b71c1c; margin-top: 0; }
.bb-law-text { font-size: 0.9em; margin-bottom: 10px; }
.bb-license-input { max-width: 300px; }
.bb-file-input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; background: #fdfdfd; }
.bb-file-hint { font-size: 0.85em; color: #666; display: block; margin-top: 5px; }
.bb-tier-header { border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 15px; }
.bb-tier-label { display: block; margin-bottom: 10px; cursor: pointer; font-weight: normal; }
.bb-reload-link { float: right; font-size: 13px; color: #dd4B39; font-weight: normal; text-decoration: none; }

/* =======================================================================
   5. ADMIN MODERATION QUEUE
   ======================================================================= */
.bb-admin-action { transition: opacity 0.2s ease; }
.bb-admin-action:disabled { opacity: 0.5; cursor: not-allowed; }
.data_table tr { transition: background-color 0.15s ease; }
.data_table tbody tr:hover { background-color: #fcfcfc; }

/* =======================================================================
   CLASSIFIEDS VIEW MODES (MODERN FLEXBOX)
   ======================================================================== */
.bb-card-inner { text-align: left !important; padding: 12px !important; flex-grow: 1; display: flex; flex-direction: column; }
.bb-content-wrap { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start !important; text-align: left !important; }
.bb-content-wrap * { text-align: left !important; } 
.bb-title { font-style: normal !important; font-weight: bold; font-size: 1.15rem !important; margin: 0 0 4px 0 !important; line-height: 1.2 !important; }
.bb-meta { font-size: 0.8rem !important; margin: 0 0 4px 0 !important; }
.bb-desc { font-size: 0.9rem !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; }
.bb-action-wrap { margin-top: auto; padding-top: 4px; }
.bb-action-wrap .button { padding: 4px 10px !important; font-size: 0.75rem !important; }

/* Expanded View (Grid) */
#classifieds-feed.view-expanded .bb-thumb { display:block; width:100%; height:140px; margin-bottom:10px; background-position:center; background-size:cover; border-radius:3px; border:1px solid #eee; }

/* Normal View (Tight Horizontal List) */
#classifieds-feed.view-normal .ad-item { width: 100%; margin-bottom: 12px; }
#classifieds-feed.view-normal .bb-card-inner { flex-direction: row; gap: 15px; align-items: flex-start; }
#classifieds-feed.view-normal .bb-thumb-wrap { width: 130px; flex-shrink: 0; }
#classifieds-feed.view-normal .bb-thumb { height: 90px; margin-bottom: 0; display:block; background-position:center; background-size:cover; border-radius:3px; border:1px solid #eee; }
#classifieds-feed.view-normal .bb-action-wrap { margin-top: auto; }

/* Compact View (Craigslist Style) */
#classifieds-feed.view-compact .ad-item { width: 100%; margin-bottom: 0; display: block; }
#classifieds-feed.view-compact .drop-shadow { box-shadow: none !important; border: none !important; margin-bottom: 0 !important; }
#classifieds-feed.view-compact .lifted:before, #classifieds-feed.view-compact .lifted:after { display: none !important; }
#classifieds-feed.view-compact .bb-card-inner { padding: 6px 10px !important; flex-direction: row; align-items: center; border-bottom: 1px solid #eaeaea; background: #fff !important; border-radius: 0; border-top: none !important; }
#classifieds-feed.view-compact .bb-card-inner:hover { background: #f9f9f9 !important; }
#classifieds-feed.view-compact .bb-thumb-wrap, #classifieds-feed.view-compact .bb-desc, #classifieds-feed.view-compact .bb-action-wrap { display: none; }
#classifieds-feed.view-compact .bb-content-wrap { flex-direction: row; align-items: center !important; justify-content: space-between; width: 100%; }
#classifieds-feed.view-compact .bb-title-link { flex-grow: 1; margin-right: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#classifieds-feed.view-compact .bb-title { font-size: 1.05rem !important; margin: 0 !important; color: #1a0dab; }
#classifieds-feed.view-compact .bb-meta { flex-shrink: 0; margin: 0 !important; }

@media (max-width: 600px) {
    #classifieds-feed.view-normal .bb-card-inner { flex-direction: column; gap: 8px; }
    #classifieds-feed.view-normal .bb-thumb-wrap { width: 100%; }
    #classifieds-feed.view-normal .bb-thumb { height: 140px; }
    #classifieds-feed.view-compact .bb-content-wrap { flex-direction: column; align-items: flex-start !important; }
    #classifieds-feed.view-compact .bb-title-link { margin-bottom: 4px; white-space: normal; }
}

/* =======================================================================
   NEWSPAPER VIEW (PRINT SIMULATION)
   ======================================================================== */
#newspaper-feed { font-family: "Times New Roman", Times, serif; color: #111; text-align: left !important; }
.np-columns { column-count: 3; column-gap: 40px; column-rule: 1px solid #ccc; text-align: left !important; }
.np-category { break-inside: avoid; page-break-inside: avoid; margin-bottom: 30px; text-align: left !important; }
.np-header { font-family: "Times New Roman", Times, serif; text-transform: uppercase; font-style: italic; font-weight: bold; border-bottom: 1px solid #111; text-align: center !important; margin: 0 0 12px 0; padding-bottom: 4px; font-size: 1.2rem; }
.np-ad { font-size: 0.9rem; line-height: 1.25; margin-bottom: 15px; text-align: justify !important; hyphens: auto; }
.np-title { font-weight: 900; letter-spacing: 0.5px; }
.np-link { color: #111; text-decoration: underline; font-weight: bold; font-size: 0.8rem; margin-left: 5px; }
.np-link:hover { color: #8a2a1f; }

@media (max-width: 991px) { .np-columns { column-count: 2; } }
@media (max-width: 767px) { .np-columns { column-count: 1; column-rule: none; } }

/* =======================================================================
   6. RESPONSIVE MOBILE TWEAKS
   ======================================================================= */
@media (max-width: 768px) {
    .margin-top-15-xs { margin-top: 15px; }
    .text-left-xs { text-align: left !important; }
    .bottom-20 { bottom: 15px; }
    .left-20 { left: 15px; }
}