/* ===== Camel Racing — desert palette ===== */
:root {
    --cr-sand: #f6efe2;
    --cr-dune: #e7d3ae;
    --cr-amber: #c8873a;
    --cr-terracotta: #a8492a;
    --cr-night: #2a1f17;
    --cr-ink: #3b2e24;
    --cr-gold: #d4a017;
    --cr-silver: #9aa3ad;
    --cr-bronze: #b0703c;

    --bs-primary: #a8492a;
    --bs-primary-rgb: 168, 73, 42;
    --bs-link-color: #a8492a;
    --bs-link-color-rgb: 168, 73, 42;
    --bs-link-hover-color: #7f3519;
    --bs-link-hover-color-rgb: 127, 53, 25;
    --bs-body-bg: #fbf8f2;
    --bs-body-color: #3b2e24;
}

body {
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bs-body-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.stretched-link:hover, .btn:hover, .nav-link:hover, .list-group-item-action:hover, .stat-card:hover { text-decoration: none; }

/* ----- Buttons ----- */
.btn-primary {
    --bs-btn-bg: var(--cr-terracotta);
    --bs-btn-border-color: var(--cr-terracotta);
    --bs-btn-hover-bg: #8e3b20;
    --bs-btn-hover-border-color: #8e3b20;
    --bs-btn-active-bg: #7f3519;
    --bs-btn-active-border-color: #7f3519;
    --bs-btn-disabled-bg: var(--cr-terracotta);
    --bs-btn-disabled-border-color: var(--cr-terracotta);
}
.btn-outline-primary {
    --bs-btn-color: var(--cr-terracotta);
    --bs-btn-border-color: var(--cr-terracotta);
    --bs-btn-hover-bg: var(--cr-terracotta);
    --bs-btn-hover-border-color: var(--cr-terracotta);
    --bs-btn-active-bg: var(--cr-terracotta);
    --bs-btn-active-border-color: var(--cr-terracotta);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cr-terracotta);
    --bs-nav-link-color: var(--cr-ink);
    --bs-nav-link-hover-color: var(--cr-terracotta);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--cr-amber);
    box-shadow: 0 0 0 .2rem rgba(200, 135, 58, .25);
}
.form-check-input:checked { background-color: var(--cr-terracotta); border-color: var(--cr-terracotta); }

/* ----- Navbar & footer ----- */
.site-nav {
    background: linear-gradient(90deg, var(--cr-night), #4a3020);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--cr-amber);
    color: #fff;
}
.lang-switch { font-weight: 600; }

.site-footer {
    background: var(--cr-night);
    color: #d9c9ad;
}
.site-footer a { color: var(--cr-dune); }

/* ----- Hero ----- */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    padding-bottom: 10rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 214, 140, .55), transparent 40%),
        linear-gradient(160deg, #c8873a 0%, #a8492a 55%, #5a2a17 100%);
}
.hero::after { /* dunes and racing camels */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 170px;
    background: url("../img/hero-camels.svg") bottom center / cover no-repeat;
    pointer-events: none;
}
[dir="rtl"] .hero::after { transform: scaleX(-1); }
.hero > * { position: relative; z-index: 1; }
.hero-kicker {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.hero .btn-light { color: var(--cr-terracotta); font-weight: 700; }

.stat-tile {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 1rem;
    padding: 1rem .5rem;
    backdrop-filter: blur(4px);
}
.stat-tile .stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.stat-tile .stat-label { font-size: .85rem; opacity: .9; }

/* ----- Headings ----- */
.page-title { font-weight: 800; color: var(--cr-night); }
.section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--cr-night);
    margin-bottom: 1rem;
    padding-inline-start: .75rem;
    border-inline-start: 4px solid var(--cr-amber);
}

/* ----- Cards ----- */
.card {
    border: 1px solid #eadfcb;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(59, 46, 36, .04);
    overflow: hidden; /* keep inner lists/tables inside the rounded corners */
}
.card > .table-responsive { border-radius: 1rem; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #7b6a58;
    background: var(--cr-sand);
    border-bottom-color: #eadfcb;
    white-space: nowrap;
}

.race-card, .camel-card, .owner-card { transition: transform .15s ease, box-shadow .15s ease; }
.race-card:hover, .camel-card:hover, .owner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 46, 36, .1);
}
.race-card .card-title a { color: var(--cr-night); font-weight: 700; }
.race-meta li { margin-bottom: .25rem; }
.race-meta i { color: var(--cr-amber); margin-inline-end: .25rem; }

.category-badge { background: var(--cr-dune); color: var(--cr-ink); font-weight: 600; }

.winner-strip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: #fdf3d8;
    font-weight: 600;
}

/* Position / medal badges */
.position {
    display: inline-grid;
    place-items: center;
    min-width: 28px; height: 28px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #efe6d6;
    font-weight: 700;
    font-size: .85rem;
}
.position.gold { background: var(--cr-gold); color: #fff; }
.position.silver { background: var(--cr-silver); color: #fff; }
.position.bronze { background: var(--cr-bronze); color: #fff; }

.podium li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0;
    border-bottom: 1px dashed #eadfcb;
}
.podium li:last-child { border-bottom: 0; }

.rank-num {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: #efe6d6;
    font-weight: 800;
}
.rank-num.top { background: var(--cr-terracotta); color: #fff; }
.points-pill {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--cr-night);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

/* ----- Camel photos & illustrations ----- */
.camel-photo {
    position: relative;
    height: 170px;
    overflow: hidden;
    background: var(--cr-dune);
}
.camel-photo-lg { height: 260px; }
.camel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.camel-art {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
.camel-art svg { width: 78%; max-height: 88%; }
[dir="rtl"] .camel-art svg { transform: scaleX(-1); } /* camels run toward the reading direction */

.camel-avatar {
    display: inline-block;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #eadfcb;
}
.camel-avatar .camel-art svg { width: 92%; }
.camel-avatar-sm { width: 32px; height: 32px; }
.name-with-avatar { display: inline-flex; align-items: center; gap: .6rem; }

.photo-preview { width: 220px; height: 150px; border-radius: .75rem; overflow: hidden; }

/* ----- Race covers & galleries ----- */
.race-cover {
    height: 140px;
    background: var(--cr-dune) center / cover no-repeat;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--cr-dune);
    cursor: zoom-in;
    border: 0;
    padding: 0;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem .75rem .5rem;
    color: #fff;
    font-size: .85rem;
    text-align: start;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}
.gallery-admin .gallery-item { cursor: default; }
.gallery-admin .delete-photo { position: absolute; top: .5rem; inset-inline-end: .5rem; z-index: 2; }
.lightbox .modal-content { background: transparent; border: 0; }
.lightbox img { max-height: 80vh; object-fit: contain; border-radius: .75rem; }
.lightbox .caption { color: #fff; text-align: center; margin-top: .75rem; }

.avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--cr-amber);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
}
.avatar-lg { width: 72px; height: 72px; font-size: 2rem; }

.stat-card {
    background: #fff;
    border: 1px solid #eadfcb;
    border-radius: 1rem;
    padding: 1rem .5rem;
    color: var(--cr-ink);
}
a.stat-card:hover { border-color: var(--cr-amber); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--cr-terracotta); }
.stat-card .stat-label { font-size: .85rem; color: #7b6a58; }

.race-header {
    background: #fff;
    border: 1px solid #eadfcb;
    border-radius: 1rem;
    padding: 1.5rem;
}
.fact span { display: block; font-size: .8rem; color: #7b6a58; }
.fact strong { font-size: 1rem; }

.profile-list dt { font-weight: 600; color: #7b6a58; }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #7b6a58;
}
.empty-state i { font-size: 2.5rem; color: var(--cr-amber); }

.admin-nav .nav-link { white-space: nowrap; }
.auth-card { margin-top: 2rem; }

/* Mirror directional icons in Arabic */
[dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); }

/* Keep numbers/times left-to-right inside RTL text */
.font-monospace { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 575.98px) {
    .hero { padding: 2rem 1.25rem; }
}