/**
 * CordobaMU Theme - Visual identity layer
 * Gold/dark gaming aesthetic for WebEngine 1.2.4
 *
 * IMPORTANT: bs3-compat.css handles WE module styling.
 * This file handles only the CordobaMU visual identity (colors, fonts, spacing).
 */

:root {
    --zhael-bg-body: #0d0d0d;
    --zhael-bg-card: rgba(25, 18, 14, 0.95);
    --zhael-bg-card-hover: rgba(35, 25, 18, 0.97);
    --zhael-border: rgba(201, 162, 39, 0.35);
    --zhael-border-strong: #c9a227;
    --zhael-text-primary: #f5f0e8;
    --zhael-text-secondary: #ddd4c4;
    --zhael-text-muted: #9e8f78;
    --zhael-accent-gold: #f5c518;
    --zhael-accent-orange: #ff9500;
    --zhael-shadow: rgba(0, 0, 0, 0.45);
}

/* === Body base === */
body {
    background: var(--zhael-bg-body);
    color: var(--zhael-text-primary);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    color: var(--zhael-text-primary);
    font-family: 'Chakra Petch', sans-serif;
}

p, span, li {
    color: var(--zhael-text-secondary);
}

/* === Section titles (GamePlex) === */
.section-title h2,
.section-title h3,
.section-title h4,
.section-title span {
    color: var(--zhael-accent-gold);
}

.section-title p {
    color: var(--zhael-text-secondary);
}

/* === GamePlex section backgrounds === */
section,
footer {
    background: transparent;
}

.section-bg,
.section-bg2,
.section-bg3,
.section-bg4 {
    background: rgba(18, 18, 18, 0.95) !important;
}

/* === GamePlex cards (only actual GamePlex component cards) === */
.feature-card,
.single-item,
.single-cards,
.single-product,
.single-blog,
.single-news,
.single-item-box {
    background: var(--zhael-bg-card) !important;
    border: 1px solid var(--zhael-border) !important;
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--zhael-shadow);
}

.feature-card:hover,
.single-item:hover,
.single-cards:hover,
.single-product:hover,
.single-blog:hover,
.single-news:hover,
.single-item-box:hover {
    background: var(--zhael-bg-card-hover) !important;
    border-color: var(--zhael-border-strong) !important;
}

/* === Form inputs (global dark theme) === */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    background: rgba(40, 30, 22, 0.9) !important;
    border: 1px solid var(--zhael-border) !important;
    color: var(--zhael-text-primary) !important;
    border-radius: 6px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--zhael-border-strong) !important;
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.3) !important;
    outline: none;
}

::placeholder {
    color: var(--zhael-text-muted) !important;
    opacity: 1;
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(20, 15, 10, 0.8);
}

::-webkit-scrollbar-thumb {
    background: var(--zhael-border-strong);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--zhael-accent-gold);
}

/* === Text selection === */
::selection {
    background: var(--zhael-accent-gold);
    color: #1a1208;
}

/* === Guide content === */
.guide-content,
.guide-body,
.news-content {
    background: var(--zhael-bg-card) !important;
    padding: 25px;
    border-radius: 10px;
    color: var(--zhael-text-secondary);
    line-height: 1.8;
}

.guide-content img,
.news-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}