/**
 * Components - Football IQ Score
 * Reusable UI components (buttons, cards, badges, etc.)
 */

/* ===================================
   BUTTONS
   =================================== */

.btn-take-quiz,
.btn-primary {
    display: inline-block;
    color: #373737;
    background: #fddc00;
    padding: 1.3rem 3rem 1rem;
    border-radius: 0;
    font-size: 12px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    letter-spacing: 2px;
    font-family: 'redzone', sans-serif;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.btn-take-quiz:hover,
.btn-take-quiz:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: #373737;
    color: #fddc00;
    text-decoration: none;
}

/* ===================================
   QUIZ CARDS
   =================================== */

.quiz-cta {
    flex: 0 0 30%;
    text-align: center;
    padding: 1.5rem 1rem;
    position: relative;
    box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.05);
    background-color: rgba(145, 148, 147, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quiz-cta:hover {
    transform: translateY(-2px);
    box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
}

.quiz-cta * {
    text-decoration: none !important;
}

.quiz-cta__icon img {
    height: 50px;
    margin-bottom: 1rem;
}

.quiz-cta__title {
    font-size: 32px;
    line-height: 28px;
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: bold;
    color: #fddc00;
    margin-bottom: 1rem;
}

.quiz-cta__title .subtitle {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    font-family: Arial, sans-serif;
    font-style: italic;
    display: block;
    margin-top: 0.5rem;
}

.quiz-cta__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: auto;
    width: 100%;
}

.quiz-cta__button {
    display: block;
    color: #373737;
    background: #fddc00;
    padding: 1.3rem 3rem 1rem;
    border-radius: 0;
    font-size: 12px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    letter-spacing: 2px;
    font-family: 'redzone', sans-serif;
    text-decoration: none;
}

.quiz-cta:hover .quiz-cta__button {
    background: #373737;
    color: #fddc00;
}

/* ===================================
   POSITION BADGES
   =================================== */

.position-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

.position-qb { background: #e74c3c; }  /* Red */
.position-rb { background: #1abc9c; }  /* Teal */
.position-wr { background: #3498db; }  /* Blue */
.position-te { background: #2ecc71; }  /* Green */
.position-ol { background: #e67e22; }  /* Orange */
.position-dl { background: #9b59b6; }  /* Purple */
.position-lb { background: #f39c12; }  /* Yellow-orange */
.position-db { background: #e91e63; }  /* Pink */
.position-k  { background: #95a5a6; }  /* Gray */

/* ===================================
   SCORE BADGES - DISABLED (Conflicted with database page)
   =================================== */

/* Removed score-badge styles - these created yellow circles on database page
   If you need score badges elsewhere, use a different class name like .score-display */

/* ===================================
   CATEGORY BADGES
   =================================== */

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #fddc00;
    color: #373737;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

/* ===================================
   CONTENT CARDS
   =================================== */

.content-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.content-card h3 {
    font-family: 'Roboto Slab', Georgia, serif;
    color: #5a2425;
    font-size: 20px;
    margin-bottom: 0.75rem;
}

.content-card h3 a {
    color: #5a2425;
    text-decoration: none;
    transition: color 0.2s ease;
}

.content-card h3 a:hover {
    color: #fddc00;
    text-decoration: none;
}

.content-card p {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.content-card .meta {
    color: #666;
    font-size: 12px;
}

/* ===================================
   PLAYER CARDS
   =================================== */

.player-card {
    background: rgba(0, 0, 0, 0.75);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
}

.player-card:hover {
    transform: translateY(-4px);
    border-color: #fddc00;
}

.player-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1rem;
    border: 3px solid #fddc00;
}

.player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-card h4 {
    font-family: 'Roboto Slab', Georgia, serif;
    color: #fff;
    font-size: 18px;
    margin-bottom: 0.5rem;
}

.player-score {
    font-family: 'scoreboard', monospace;
    font-size: 36px;
    color: #fddc00;
    margin: 1rem 0;
}

.btn-view-profile {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #fddc00;
    color: #373737;
    font-family: 'redzone', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view-profile:hover {
    background: #373737;
    color: #fddc00;
    text-decoration: none;
}

/* ===================================
   AD PLACEHOLDERS
   =================================== */

.ad-placeholder {
    display: flex;
    background: #f0f0f0;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    text-align: center;
}

.ad-placeholder--rectangle {
    width: 336px;
    height: 280px;
}

.ad-placeholder--leaderboard {
    width: 728px;
    height: 90px;
    margin: 20px auto;
}

.ad-placeholder--square {
    width: 300px;
    height: 250px;
}

/* ===================================
   FORMS & FILTERS
   =================================== */

.filter-panel {
    background: rgba(145, 148, 147, 0.9);
    padding: 1.5rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.filter-select,
.filter-search {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    margin-bottom: 1rem;
}

.filter-select:focus,
.filter-search:focus {
    outline: none;
    border-color: #fddc00;
}

.btn-apply-filters {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: #fddc00;
    color: #373737;
    border: none;
    border-radius: 4px;
    font-family: 'redzone', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply-filters:hover {
    background: #373737;
    color: #fddc00;
    text-decoration: none;
}

/* ===================================
   TABLES
   =================================== */

.data-table {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-collapse: collapse;
    border-radius: 4px;
    overflow: hidden;
}

.data-table thead {
    background: #5a2425;
    color: #fff;
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
}

.data-table th {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.data-table tbody tr:hover {
    background: rgba(253, 220, 0, 0.1);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sortable headers */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ===================================
   PAGINATION
   =================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.pagination button,
.pagination a {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    color: #373737;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pagination button:hover,
.pagination a:hover {
    background: #fddc00;
    border-color: #fddc00;
    text-decoration: none;
}

.pagination button.active,
.pagination a.active {
    background: #5a2425;
    color: #fff;
    border-color: #5a2425;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================================
   BREADCRUMBS
   =================================== */

.breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #fddc00;
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 0.5rem;
}

/* ===================================
   HIGHLIGHT BOXES
   =================================== */

.highlight-box {
    background: rgba(253, 220, 0, 0.1);
    border-left: 4px solid #fddc00;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.highlight-box p {
    color: #333;
    margin: 0;
}

/* ===================================
   STATS CARDS
   =================================== */

.stats-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 4px;
    text-align: center;
}

.stats-card__value {
    font-family: 'scoreboard', monospace;
    font-size: 36px;
    color: #5a2425;
    margin-bottom: 0.5rem;
}

.stats-card__label {
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 991px) {
    .quiz-cta {
        flex: 0 0 45%;
    }

    .btn-take-quiz,
    .btn-primary {
        font-size: 9px;
        letter-spacing: 0;
    }
}

@media (max-width: 768px) {
    .ad-placeholder--leaderboard {
        width: 100%;
        max-width: 728px;
    }

    .data-table {
        font-size: 12px;
    }

    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 615px) {
    .quiz-cta {
        flex: 0 0 100%;
        margin-bottom: 2rem;
    }

    .filter-panel {
        padding: 1rem;
    }
}