/* ------------------------------------------------------------------
   Sports Buddy — brand palette overrides
   Source: SB_BRAND PALLETE.pdf
   Primary:   #FAA625 (torch gold)  #414042 (charcoal)  #818181 (grey)
   Secondary: #F9ED32 (yellow) #95C93F (green) #66C8C9 (teal) #C2B59B (sand)
------------------------------------------------------------------ */
:root {
    --sb-gold: #FAA625;
    --sb-gold-dark: #e08f10;
    --sb-charcoal: #414042;
    --sb-grey: #818181;
    --sb-yellow: #F9ED32;
    --sb-green: #95C93F;
    --sb-teal: #66C8C9;
    --sb-sand: #C2B59B;
}

/* Primary actions -> torch gold */
.btn-primary {
    background-color: var(--sb-gold) !important;
    border-color: var(--sb-gold) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--sb-gold-dark) !important;
    border-color: var(--sb-gold-dark) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--sb-gold-dark) !important;
    border-color: var(--sb-gold) !important;
}
.btn-outline-primary:hover {
    background-color: var(--sb-gold) !important;
    color: #fff !important;
}

/* Secondary actions -> charcoal */
.btn-secondary {
    background-color: var(--sb-charcoal) !important;
    border-color: var(--sb-charcoal) !important;
    color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #2c2b2d !important;
    border-color: #2c2b2d !important;
}

/* Accent utilities */
.text-primary { color: var(--sb-gold) !important; }
.bg-primary { background-color: var(--sb-gold) !important; }
.text-charcoal { color: var(--sb-charcoal) !important; }
.badge-verified { background-color: var(--sb-green); color: #fff; }

/* Links & headings tuned to brand */
a { color: var(--sb-charcoal); }
a:hover { color: var(--sb-gold-dark); }
.title, a.title { color: var(--sb-charcoal); }
.title:hover, a.title:hover { color: var(--sb-gold-dark); }

/* Home stat counters */
.profile-count { color: var(--sb-gold); font-weight: 700; }

/* Progress bar (profile completeness) */
.sb-progress { height: 10px; border-radius: 6px; background: #eee; overflow: hidden; }
.sb-progress-bar { height: 100%; background: var(--sb-green); transition: width .4s ease; }

/* Compact media thumbnails (gallery / accessories / certificates) so they don't
   dominate the profile page. Photos crop-to-fill; sponsor logos are contained. */
.thumbnail .img-thumbnail {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    padding: 0;
}
.sponsors-wrapper .thumbnail .img-thumbnail,
.sb-logo-thumb {
    height: 80px;
    object-fit: contain;
    background: #fff;
    padding: 4px;
}
.thumbnail { margin-bottom: 10px; }

/* ---- Onboarding step indicator ---- */
.sb-steps { display: flex; align-items: flex-start; justify-content: center; max-width: 640px; margin: 0 auto; }
.sb-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; text-decoration: none; }
.sb-step .sb-step-dot {
    width: 36px; height: 36px; border-radius: 50%; background: #e9ecef; color: #6b7280;
    display: flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid #e9ecef;
}
.sb-step.is-done .sb-step-dot { background: var(--sb-green); border-color: var(--sb-green); color: #fff; }
.sb-step.is-current .sb-step-dot { background: var(--sb-gold); border-color: var(--sb-gold); color: #fff; }
.sb-step .sb-step-label { font-size: .78rem; margin-top: 6px; color: #6b7280; line-height: 1.2; }
.sb-step.is-current .sb-step-label { color: var(--sb-charcoal); font-weight: 600; }
.sb-step-line { flex: 1; height: 3px; background: #e9ecef; margin-top: 17px; border-radius: 2px; }
.sb-step-line.is-done { background: var(--sb-green); }

/* ---- Instagram-style athlete grid ---- */
.sb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 576px) { .sb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .sb-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.sb-tile {
    position: relative; display: block; overflow: hidden; border-radius: 12px;
    background: #e9ecef; aspect-ratio: 1 / 1;
}
.sb-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sb-tile:hover img { transform: scale(1.06); }
.sb-tile-overlay {
    position: absolute; inset: 0; padding: 10px; color: #fff; text-decoration: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.05) 55%, rgba(0,0,0,0));
}
.sb-tile-overlay:hover { color: #fff; }
.sb-tile-name { font-weight: 700; font-size: .92rem; line-height: 1.15; }
.sb-tile-sub { font-size: .74rem; opacity: .9; }
.sb-tile-badge {
    position: absolute; top: 8px; right: 8px; background: var(--sb-gold);
    color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
}

/* ---- LinkedIn-style athlete list ---- */
.sb-person-card {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff;
    border: 1px solid #eef0f2; border-radius: 12px; margin-bottom: 12px; transition: box-shadow .2s ease;
}
.sb-person-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.sb-person-avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; background: #e9ecef;
}
.sb-person-body { flex: 1 1 auto; min-width: 0; }
.sb-person-name { font-weight: 700; color: var(--sb-charcoal); font-size: 1.05rem; }
.sb-person-head { color: #6b7280; font-size: .9rem; }
.sb-person-meta { color: #9aa1a9; font-size: .8rem; }
.sb-person-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 575px) {
    .sb-person-card { flex-wrap: wrap; }
    .sb-person-actions { width: 100%; }
    .sb-person-actions .btn { flex: 1 1 auto; }
}