/* Basic layout */
.bf-showcase-wrap { max-width: 1100px; margin: 0 auto; padding: 20px; }
.bf-slider { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.bf-slide { display: none; position: relative; }
.bf-slide-active { display: block; }
.bf-slide img, .bf-slide iframe { width: 100%; display: block; border-radius: 16px; }
.bf-slide-placeholder { padding: 60px; text-align: center; background: #f5f5f5; border-radius: 16px; }
.bf-slide-caption { position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 10px 15px; background: rgba(0,0,0,0.5); color: #fff; font-size: 14px; border-radius: 999px; }

/* Filters + Kid of Month */
.bf-top-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
.bf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-filter-btn { border-radius: 999px; padding: 6px 14px; font-size: 13px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.bf-filter-btn.bf-filter-active { color: #fff; }
.bf-top-note { font-size: 12px; color: #777; }

.bf-kotm { margin-bottom: 22px; padding: 16px; border-radius: 18px; background: linear-gradient(120deg, #ffb300, #ff7043); color: #fff; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.bf-kotm-image img { width: 160px; height: 160px; border-radius: 18px; object-fit: cover; box-shadow: 0 8px 16px rgba(0,0,0,0.35); }
.bf-kotm-placeholder { width: 160px; height: 160px; border-radius: 18px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bf-kotm-info h3 { margin: 0 0 4px; font-size: 22px; }
.bf-kotm-badge { display: inline-block; margin-bottom: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.25); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.bf-kotm-talent { font-weight: 600; }
.bf-kotm-likes { margin-top: 6px; font-size: 14px; }
.bf-kotm-likes a { color: #fff; text-decoration: underline; }
.bf-kotm-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards */
.bf-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.bf-card { background: #ffffff; border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; }
.bf-card-header { position: relative; }
.bf-card-header img { width: 100%; display: block; height: 220px; object-fit: cover; }
.bf-card-placeholder { width: 100%; height: 220px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bf-talent-badge { position: absolute; top: 10px; left: 10px; color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.bf-card-body { padding: 14px 16px 10px; flex: 1; display: flex; flex-direction: column; }
.bf-kid-name { font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.bf-likes-row { font-size: 13px; margin-bottom: 10px; color: #666; display: flex; align-items: center; gap: 6px; }
.bf-likes-row a.bf-like-count { font-weight: 600; text-decoration: underline; }
.bf-card-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.bf-btn { border-radius: 999px; border: none; padding: 8px 14px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.bf-btn-primary { color: #fff; }
.bf-btn-like { color: #fff; }
.bf-btn-outline { background: #fff; color: #333; border: 1px solid #ddd; }
.bf-btn:disabled { opacity: 0.6; cursor: default; }

/* Profile */
.bf-profile-block { margin-top: 20px; padding: 20px; border-radius: 16px; background: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.bf-profile-header { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.bf-profile-thumb img { width: 180px; height: 180px; object-fit: cover; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.bf-profile-info h2 { margin: 0 0 6px; font-size: 26px; }
.bf-profile-talent-badge { display: inline-block; color: #fff; padding: 5px 10px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.bf-profile-likes { margin-top: 10px; font-size: 14px; color: #555; display: flex; align-items: center; gap: 8px; }
.bf-section-title { margin-top: 18px; margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.bf-profile-body { margin-top: 5px; font-size: 15px; line-height: 1.6; }
.bf-videos-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bf-video-thumb { position: relative; cursor: pointer; }
.bf-video-thumb img { width: 100%; border-radius: 14px; display: block; }
.bf-video-thumb::after { content: '\25B6'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.65); color: #fff; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.bf-video-fallback { padding: 20px; border-radius: 10px; background: #f5f5f5; font-size: 13px; }

/* Encouragement block */
.bf-encouragement-block { margin-top: 24px; padding: 20px; border-radius: 16px; background: #fff3cd; border: 1px solid #ffeeba; color: #856404; }
.bf-encouragement-block h3 { margin: 0 0 8px; font-size: 20px; }
.bf-encouragement-intro { margin: 0 0 10px; font-size: 14px; }
.bf-encouragement-empty { font-size: 13px; margin-bottom: 10px; }
.bf-encouragement-list { margin: 10px 0 15px; }
.bf-encouragement-item { background: rgba(255,255,255,0.9); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.bf-encouragement-meta { font-size: 12px; color: #8a6d3b; display: flex; justify-content: space-between; }
.bf-encouragement-content { font-size: 14px; margin-top: 4px; }
.bf-encouragement-form { margin-top: 10px; }
.bf-encouragement-form .bf-form-row { margin-bottom: 8px; }
.bf-encouragement-form label { display: block; font-size: 13px; margin-bottom: 3px; }
.bf-encouragement-form input[type="text"],
.bf-encouragement-form input[type="email"],
.bf-encouragement-form textarea { width: 100%; border-radius: 8px; border: 1px solid #ddd; padding: 8px 10px; font-size: 14px; }
.bf-encouragement-notice { font-size: 12px; margin-top: 6px; color: #8a6d3b; }

/* Ticker */
.bf-talent-ticker { margin-top: 24px; overflow: hidden; border-radius: 999px; background: #0d47a1; padding: 8px 0; box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.bf-ticker-track { display: inline-flex; gap: 24px; align-items: center; animation: bfTicker 30s linear infinite; will-change: transform; }
.bf-ticker-item { display: inline-flex; align-items: center; gap: 8px; color: #fff; padding: 4px 0 4px 12px; white-space: nowrap; }
.bf-ticker-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.7); }
.bf-ticker-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3); display: inline-block; }
.bf-ticker-text { font-size: 13px; }
@keyframes bfTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Application form */
.bf-application-form { margin-top: 30px; padding: 20px; border-radius: 16px; background: #f9fafb; box-shadow: 0 6px 16px rgba(0,0,0,0.05); }
.bf-application-form h3 { margin-top: 0; margin-bottom: 6px; font-size: 20px; }
.bf-application-form p.description { margin-top: 0; font-size: 13px; color: #666; }
.bf-form-row { margin-bottom: 10px; }
.bf-form-row label { display: block; font-size: 13px; margin-bottom: 4px; }
.bf-form-row input,
.bf-form-row textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px; }
.bf-app-success { margin-top: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: #e8f5e9; color: #2e7d32; font-size: 13px; }
.bf-app-error { margin-top: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: #ffebee; color: #c62828; font-size: 13px; }

@media (max-width: 768px) {
    .bf-top-bar { flex-direction: column; align-items: flex-start; }
    .bf-kotm { flex-direction: column; }
}