/**
 * User Awards Styles
 *
 * @package RandoBrevets
 */

/* Container */
.rb-awards {
    margin: 2rem 0;
    font-family: inherit;
}

/* Earned Awards Section */
.rb-awards-earned {
    margin-bottom: 2rem;
}

.rb-awards-earned h3,
.rb-awards-progress h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1a1a1a;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 0.5rem;
}

/* Badges Grid */
.rb-awards-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Individual Badge */
.rb-award-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    min-width: 140px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #dee2e6;
}

.rb-award-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Badge variants */
.rb-award-badge--rose {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%);
    border-color: #ffc9c9;
}

.rb-award-badge--sr {
    background: linear-gradient(135deg, #f3f0ff 0%, #e5dbff 100%);
    border-color: #d0bfff;
}

.rb-award-badge--streak {
    background: linear-gradient(135deg, #e6fcf5 0%, #c3fae8 100%);
    border-color: #96f2d7;
}

.rb-badge-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icon styles */
.rb-icon-rose {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e64980'%3E%3Cpath d='M12 2C10.5 2 9 3.5 9 5s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm0 2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-7.5 8c-.83 0-1.5.67-1.5 1.5S3.67 15 4.5 15c.58 0 1.08-.33 1.33-.81l2.17 1.57v3.24c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-3.24l2.17-1.57c.25.48.75.81 1.33.81.83 0 1.5-.67 1.5-1.5S20.33 12 19.5 12c-.58 0-1.08.33-1.33.81L12 17l-6.17-4.19C5.58 12.33 5.08 12 4.5 12z'/%3E%3C/svg%3E");
}

.rb-icon-sr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed'%3E%3Cpath d='M12 2L4.5 6v6c0 5.52 3.2 10.74 7.5 12 4.3-1.26 7.5-6.48 7.5-12V6L12 2zm0 2.18l5.5 3.19v4.64c0 4.4-2.55 8.56-5.5 9.9-2.95-1.34-5.5-5.5-5.5-9.9V7.37L12 4.18zM12 6L9 9l3 3 3-3-3-3z'/%3E%3C/svg%3E");
}

.rb-icon-streak {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312b886'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z'/%3E%3C/svg%3E");
}

.rb-icon-default {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.rb-badge-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.rb-badge-date {
    font-size: 0.75rem;
    color: #868e96;
}

/* Progress Section */
.rb-awards-progress {
    margin-top: 2rem;
}

.rb-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Progress Card */
.rb-progress-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
}

.rb-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e5e5;
}

.rb-card-icon {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.rb-card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

.rb-card-body {
    padding-top: 0.5rem;
}

/* Stats */
.rb-stat {
    text-align: center;
    margin-bottom: 1rem;
}

.rb-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.rb-stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-left: 0.25rem;
}

.rb-stat-unit {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Current Level Badge */
.rb-current-level {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.rb-level--bronze {
    background: linear-gradient(135deg, #b9936c 0%, #a67c52 100%);
    color: #fff;
}

.rb-level--silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
    color: #fff;
}

.rb-level--gold {
    background: linear-gradient(135deg, #ffd700 0%, #e5c100 100%);
    color: #333;
}

.rb-level--diamond {
    background: linear-gradient(135deg, #b9f2ff 0%, #89d4e8 100%);
    color: #006080;
}

/* Progress Bar */
.rb-progress-bar-container {
    position: relative;
    margin-bottom: 1rem;
}

.rb-progress-bar {
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.rb-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.rb-progress-fill.rb-level--none {
    background: linear-gradient(90deg, #dee2e6 0%, #adb5bd 100%);
}

.rb-progress-fill.rb-level--bronze {
    background: linear-gradient(90deg, #c9a66c 0%, #b9936c 100%);
}

.rb-progress-fill.rb-level--silver {
    background: linear-gradient(90deg, #d0d0d0 0%, #c0c0c0 100%);
}

.rb-progress-fill.rb-level--gold {
    background: linear-gradient(90deg, #ffe14d 0%, #ffd700 100%);
}

.rb-progress-fill.rb-level--diamond {
    background: linear-gradient(90deg, #c9f7ff 0%, #89d4e8 100%);
}

.rb-progress-markers {
    position: relative;
    height: 16px;
    margin-top: 4px;
}

.rb-marker {
    position: absolute;
    width: 3px;
    height: 10px;
    border-radius: 2px;
    transform: translateX(-50%);
    cursor: help;
}

.rb-marker--bronze {
    background: #b9936c;
}

.rb-marker--silver {
    background: #c0c0c0;
}

.rb-marker--gold {
    background: #ffd700;
}

.rb-marker--diamond {
    background: #89d4e8;
}

/* SR Checklist */
.rb-sr-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rb-sr-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: #f8f9fa;
}

.rb-sr-item--complete {
    background: #e6fcf5;
}

.rb-sr-item--pending {
    background: #fff5f5;
}

.rb-sr-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
}

.rb-sr-item--complete .rb-sr-check {
    background: #12b886;
    color: #fff;
}

.rb-sr-item--pending .rb-sr-check {
    background: #fff;
    border: 2px solid #dee2e6;
    color: #adb5bd;
}

.rb-sr-distance {
    font-weight: 600;
    flex: 1;
}

.rb-sr-date {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Streak Progress */
.rb-streak-current,
.rb-streak-best {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.rb-streak-range {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Messages */
.rb-next-goal,
.rb-missing,
.rb-complete {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.rb-next-goal {
    background: #fff3cd;
    color: #856404;
}

.rb-missing {
    background: #f8d7da;
    color: #721c24;
}

.rb-complete {
    background: #d4edda;
    color: #155724;
    text-align: center;
    font-weight: 600;
}

.rb-awards-empty,
.rb-awards-notice {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
    text-align: center;
}

/* Responsive */
@media (max-width: 640px) {
    .rb-awards-badges {
        flex-direction: column;
    }

    .rb-award-badge {
        flex-direction: row;
        gap: 1rem;
        min-width: auto;
    }

    .rb-badge-icon {
        margin-bottom: 0;
    }

    .rb-progress-cards {
        grid-template-columns: 1fr;
    }

    .rb-stat-value {
        font-size: 1.5rem;
    }
}