/* BrokerBoost YouTube Feed 1.2.0
   Theme via CSS vars: --bb-yt-accent, --bb-yt-radius (set from Settings > BB YT Feed).
   Override anything below with site CSS if a client needs a custom look. */

/* ---------- Reel Slider Mode (9:16 vertical) ---------- */
.bb-yt-reels-wrap { position: relative; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; --bb-yt-gap: 16px; }
.bb-yt-reels { display: flex !important; gap: var(--bb-yt-gap, 16px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0 16px 0; scrollbar-width: thin; }
.bb-yt-reels::-webkit-scrollbar { height: 6px; }
.bb-yt-reels::-webkit-scrollbar-track { background: rgba(0,0,0,.05); border-radius: 3px; }
.bb-yt-reels::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 3px; }
.bb-yt-reel { flex: 0 0 calc((100% - (var(--bb-yt-visible, 4) - 1) * var(--bb-yt-gap, 16px)) / var(--bb-yt-visible, 4)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; scroll-snap-align: start; text-decoration: none !important; color: inherit !important; display: block !important; transition: transform .25s ease; }
.bb-yt-reel:hover { transform: translateY(-4px); }
.bb-yt-reel-thumb { position: relative !important; width: 100% !important; padding-bottom: 177.78% !important; overflow: hidden !important; border-radius: var(--bb-yt-radius, 12px); background: #000; display: block !important; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.bb-yt-reel-thumb img { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 177.78% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; display: block !important; }
.bb-yt-reel-title { margin-top: 12px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; color: inherit !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-yt-arrow { position: absolute; top: calc(50% - 30px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 12px rgba(0,0,0,.18); cursor: pointer; font-size: 24px; line-height: 1; color: #111; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
.bb-yt-arrow:hover { background: #f5f5f5; transform: translateY(-50%) scale(1.05); }
.bb-yt-arrow-prev { left: 8px; }
.bb-yt-arrow-next { right: 8px; }
.bb-yt-arrow:disabled { opacity: 0; pointer-events: none; }
.bb-yt-reels-wrap.bb-yt-no-titles .bb-yt-arrow { top: 50%; }

/* Fewer across as the viewport narrows */
@media (max-width: 1100px) { .bb-yt-reels { --bb-yt-visible: 3 !important; } }
@media (max-width: 900px)  { .bb-yt-reels { --bb-yt-visible: 2.4 !important; } }
@media (max-width: 768px) {
    .bb-yt-reels { --bb-yt-visible: 2.2 !important; padding-left: 0; padding-right: 0; }
    .bb-yt-arrow { display: none !important; }
}
@media (max-width: 520px) { .bb-yt-reels { --bb-yt-visible: 1.6 !important; } }

/* ---------- Grid Mode (16:9 horizontal) ---------- */
.bb-yt-grid { display: grid !important; gap: 20px; grid-template-columns: repeat(var(--bb-yt-cols, 3), 1fr) !important; }
.bb-yt-grid[data-cols="1"] { --bb-yt-cols: 1; }
.bb-yt-grid[data-cols="2"] { --bb-yt-cols: 2; }
.bb-yt-grid[data-cols="3"] { --bb-yt-cols: 3; }
.bb-yt-grid[data-cols="4"] { --bb-yt-cols: 4; }
.bb-yt-grid[data-cols="5"] { --bb-yt-cols: 5; }
.bb-yt-grid[data-cols="6"] { --bb-yt-cols: 6; }
@media (max-width: 900px) { .bb-yt-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .bb-yt-grid { grid-template-columns: 1fr !important; } }
.bb-yt-item { display: block !important; text-decoration: none !important; color: inherit !important; transition: transform .2s ease; }
.bb-yt-item:hover { transform: translateY(-3px); }
.bb-yt-thumb { position: relative !important; width: 100% !important; padding-bottom: 56.25% !important; overflow: hidden !important; border-radius: calc(var(--bb-yt-radius, 12px) * 0.66); background: #000; display: block !important; }
.bb-yt-thumb img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; display: block !important; }
.bb-yt-title { display: block !important; margin-top: 10px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; color: inherit !important; }

/* ---------- Shared ---------- */
.bb-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; pointer-events: none; }
.bb-yt-play::after { content: ""; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.bb-yt-reel:hover .bb-yt-play, .bb-yt-item:hover .bb-yt-play { background: var(--bb-yt-accent, #c00); transform: translate(-50%, -50%) scale(1.08); }
.bb-yt-error { padding: 20px; background: #f8f8f8; border-radius: 8px; color: #666; text-align: center; }
.bb-yt-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.bb-yt-modal.active { display: flex; }
.bb-yt-modal-inner { width: 100%; max-width: 420px; position: relative; }
.bb-yt-iframe-wrap { width: 100%; padding-bottom: 177.78%; position: relative; }
.bb-yt-iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: var(--bb-yt-radius, 12px); }
.bb-yt-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 32px; cursor: pointer; line-height: 1; padding: 4px 8px; }
@media (min-width: 769px) {
    .bb-yt-modal-inner.bb-yt-modal-grid { max-width: 1000px; }
    .bb-yt-modal-inner.bb-yt-modal-grid .bb-yt-iframe-wrap { padding-bottom: 56.25%; }
}