/* ==========================================
   THEME: Dark Red (Crimson)
   ========================================== */

:root {
    --primary: #FF4757;
    --primary-dark: #CC3945;
    --primary-light: #FFE0E3;
    --primary-rgb: 255, 71, 87;
    --bg-body: #120A0A;
    --bg-card: #1E1212;
    --bg-card-hover: #2D1A1A;
    --bg-navbar: rgba(18, 10, 10, 0.95);
    --bg-footer: #0A0505;
    --text-primary: #FFFFFF;
    --text-secondary: #AA8888;
    --border-color: #3D2A2A;
}

/* Override Bootstrap .text-warning to use theme primary color */
.text-warning {
    color: var(--primary) !important;
}

/* Navbar brand color */
.navbar-brand {
    color: var(--primary) !important;
}

/* Links */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-light);
}

/* Card title links */
.card-title a:hover {
    color: var(--primary) !important;
}

/* Badge kategori */
.badge-kategori {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    color: var(--primary) !important;
}

/* Buttons */
.btn-warning {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.btn-warning:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-outline-warning {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-outline-warning:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Sidebar */
.sidebar .card-title {
    color: var(--primary) !important;
}

.sidebar .text-warning {
    color: var(--primary) !important;
}

/* Article headings */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: var(--primary) !important;
}

.article-content blockquote {
    border-left-color: var(--primary) !important;
}

/* Meta info icons */
.meta-info i {
    color: var(--primary) !important;
}

/* Footer */
footer h5,
footer h6 {
    color: var(--primary) !important;
}

/* Breadcrumb */
.breadcrumb-item.active {
    color: var(--primary) !important;
}

.breadcrumb-item a:hover {
    color: var(--primary) !important;
}

/* Carousel indicators */
.carousel-indicators button {
    border-color: var(--primary) !important;
}

.carousel-indicators button.active {
    background-color: var(--primary) !important;
}

/* Rating stars */
.rating-stars {
    color: var(--primary) !important;
}

/* Alert */
.alert-warning {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Scroll to top */
.scroll-top {
    background-color: var(--primary) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.pagination .page-link:hover {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* CTA Box */
.cta-box {
    border-color: var(--primary) !important;
}

.cta-box h4 {
    color: var(--primary) !important;
}

/* Share buttons hover */
.share-buttons a:hover {
    background-color: var(--primary) !important;
}

/* Social links hover */
footer .social-links a:hover {
    background-color: var(--primary) !important;
}

/* Form focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

/* Sidebar list hover */
.sidebar .list-group-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary) !important;
}

/* Popular item hover */
.popular-item h6 a:hover {
    color: var(--primary) !important;
}

/* List unstyled links */
.list-unstyled a:hover {
    color: var(--primary) !important;
}

/* Tags icon */
.article-tags i {
    color: var(--primary) !important;
}

/* Background warning override */
.bg-warning {
    background-color: var(--primary) !important;
}

.badge.bg-warning {
    background-color: var(--primary) !important;
    color: #fff !important;
}