/* Cockfight24 Design System — driven by CSS variables from backend settings */
:root {
    --cf-primary-color: #0000a2;
    --cf-secondary-color: #c60102;
    --cf-accent-color: #c60102;
    --cf-button-color: #c60102;
    --cf-bg-color: #ffffff;
    --cf-card-bg: #ffffff;
    --cf-text-color: #232323;
    --cf-muted-text: #666666;
    --cf-border-color: #e8e8e8;
    --cf-font-main: "Kanit", Tahoma, Arial, sans-serif;
    --cf-font-heading: "Kanit", Tahoma, Arial, sans-serif;
    --cf-font-fallback: "Noto Sans Thai", sans-serif;
    --cf-border-radius: 8px;
    --cf-container-width: 1024px;
    --cf-header-bg: #0000a2;
    --cf-header-text: #ffffff;
    --cf-header-active: #c60102;
    --cf-header-hover: #c60102;
    --cf-footer-bg: #232323;
    --cf-footer-text: #ffffff;
}

body {
    font-family: var(--cf-font-main), var(--cf-font-fallback);
    color: var(--cf-text-color);
    background: var(--cf-bg-color);
}

.container-s {
    max-width: var(--cf-container-width);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cf-font-heading), var(--cf-font-fallback);
}

/* Header — legacy navtop (fallback if old markup used) */
.navtop {
    background: var(--cf-header-logo-bg) !important;
    border-bottom: 3px solid var(--cf-accent-color) !important;
}

/* Footer */
.footer {
    background: var(--cf-footer-bg) !important;
    color: var(--cf-footer-text) !important;
}

.footer p,
.footer-cf-links a {
    color: var(--cf-footer-text);
}

.footer-sitemap a,
.footer-cf-links a:hover {
    color: var(--cf-accent-color);
}

.footer-tags .tag-item:hover {
    background: var(--cf-accent-color);
}

/* Cards & buttons use theme tokens */
.cf-card {
    background: var(--cf-card-bg);
    border-color: var(--cf-border-color);
    border-radius: var(--cf-border-radius);
}

.cf-section-title,
.cf-page-title {
    color: var(--cf-text-color);
    border-left-color: var(--cf-accent-color);
}

.cf-section-more,
.cf-breadcrumb a {
    color: var(--cf-secondary-color);
}

.cf-btn-primary {
    background: var(--cf-button-color);
    border-color: var(--cf-button-color);
}

.cf-btn-outline {
    color: var(--cf-button-color);
    border-color: var(--cf-button-color);
}

.cf-btn-outline:hover {
    background: var(--cf-button-color);
}

/* Badges from settings */
.badge-pending { background: var(--cf-badge-pending, #6c757d); }
.badge-live { background: var(--cf-badge-live, #c60102); }
.badge-finished { background: var(--cf-badge-finished, #28a745); }
.badge-cancelled { background: var(--cf-badge-cancelled, #343a40); }
.badge-waiting { background: var(--cf-badge-waiting, #ffc107); color: #333; }
.badge-win { background: var(--cf-badge-win, #28a745); }
.badge-lose { background: var(--cf-badge-lose, #c60102); }

.cf-scroll-top {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cf-primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.cf-scroll-top.cf-visible {
    display: flex;
}