/* =================================================================
   صور الحكاية | Design System
   Premium Black & Gold, Editorial, RTL
================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
    --color-black: #080A0C;
    --color-charcoal: #111315;
    --color-charcoal-2: #16181B;
    --color-gold: #D6A62E;
    --color-gold-light: #E9C45A;
    --color-text: #F5F5F5;
    --color-text-muted: #A6A6A6;
    --color-border: rgba(214, 166, 46, 0.22);
    --color-danger: #C1453B;
    --color-success: #3E8E5E;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --font-ar: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --container: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    background: var(--color-black);
    color: var(--color-text);
    font-family: var(--font-ar);
    direction: rtl;
    text-align: right;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.gold-text { color: var(--color-gold); }
.muted { color: var(--color-text-muted); }

h1, h2, h3, h4 { font-weight: 800; margin: 0; }

.section { padding: 90px 0; }
.section-charcoal { background: var(--color-charcoal); }
.section-title {
    font-size: 30px;
    text-align: center;
    margin-bottom: 12px;
}
.section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--color-gold);
    margin: 18px auto 0;
}

/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid transparent;
    transition: all .25s ease;
}
.btn-gold {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: #14110A;
}
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 9px 18px; font-size: 13px; }

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 10, 12, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand img { height: 40px; width: auto; }
.main-nav ul { display: flex; gap: 28px; align-items: center; }
.main-nav a { font-size: 14.5px; color: var(--color-text-muted); transition: color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--color-gold); }

/* "المزيد" dropdown — desktop: hover/focus reveal; mobile: always
   expanded inline (handled in the mobile media query below). */
.nav-item-dropdown { position: relative; }
.nav-item-dropdown > .dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-item-dropdown > .dropdown-toggle::after { content: "\25BE"; font-size: 10px; color: var(--color-gold); }
.main-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 14px;
    min-width: 200px;
    background: var(--color-charcoal);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
    z-index: 150;
    flex-direction: column;
    gap: 2px;
}
.nav-item-dropdown:hover > .dropdown-menu,
.nav-item-dropdown:focus-within > .dropdown-menu { display: flex; }
.main-nav .dropdown-menu a { display: block; padding: 10px 14px; border-radius: 6px; }
.main-nav .dropdown-menu a:hover, .main-nav .dropdown-menu a.active { background: rgba(214,166,46,.08); color: var(--color-gold); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 26px; }
/* "تسجيل الدخول" duplicate entry inside the ☰ menu — kept hidden on
   desktop (where the existing .header-actions login button already
   covers it) and revealed only inside the mobile breakpoint below,
   since the desktop login button is itself hidden at that width. */
.nav-login-mobile-only { display: none; }

@media (max-width: 960px) {
    /* The header's backdrop-filter (used for the blur-behind effect)
       makes it the CSS containing block for any position:fixed
       descendant. Since .main-nav lives inside .site-header, that
       trapped the "fixed" mobile menu inside the header's own small
       box instead of the viewport, letting page content show through
       underneath it. Disabling backdrop-filter at mobile widths lets
       .main-nav's fixed positioning resolve against the viewport
       correctly, so it covers the full screen with its solid
       background as intended. Desktop is untouched. */
    .site-header { backdrop-filter: none; }
    .main-nav { position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 320px; background: var(--color-charcoal); padding: 90px 24px 24px; transform: translateX(100%); transition: transform .3s ease; border-inline-start: 1px solid var(--color-border); z-index: 200; }
    .main-nav.open { transform: translateX(0); }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: 20px; }
    .nav-toggle { display: block; }
    .nav-login-mobile-only { display: list-item; }
    /* "المزيد" has no separate hover state on touch — show its two
       links expanded inline under the label instead, so every link
       stays reachable in the ☰ menu with nothing hidden or removed. */
    .nav-item-dropdown > .dropdown-toggle { pointer-events: none; color: var(--color-text); }
    .nav-item-dropdown > .dropdown-toggle::after { display: none; }
    .main-nav .dropdown-menu { display: flex; position: static; flex-direction: column; gap: 14px; background: none; border: none; box-shadow: none; padding: 4px 0 0; padding-inline-start: 20px; margin-top: 10px; min-width: 0; }
}

/* -----------------------------------------------------------
   Hero
----------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,10,12,.96) 10%, rgba(8,10,12,.68) 55%, rgba(8,10,12,.25) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 640px; }
.hero-eyebrow { color: var(--color-gold); letter-spacing: 1px; font-weight: 700; margin-bottom: 10px; }
.hero h1 { font-size: 52px; line-height: 1.25; margin-bottom: 14px; }
.hero .slogan { font-size: 22px; color: var(--color-gold-light); font-weight: 500; margin-bottom: 22px; font-style: italic; }
.hero p.desc { color: var(--color-text-muted); margin-bottom: 30px; max-width: 520px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .hero h1 { font-size: 34px; }
    .hero .slogan { font-size: 18px; }
    .hero { min-height: 560px; padding-top: 40px; }
}

/* -----------------------------------------------------------
   Info bar
----------------------------------------------------------- */
.info-bar {
    background: var(--color-charcoal);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.info-bar .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 30px 24px;
}
.info-item { display: flex; align-items: center; gap: 14px; }
.info-item .icon { color: var(--color-gold); font-size: 26px; }
.info-item .label { font-size: 13px; color: var(--color-text-muted); }
.info-item .value { font-weight: 700; font-size: 15px; }
@media (max-width: 860px) { .info-bar .container { grid-template-columns: repeat(2, 1fr); } }

/* -----------------------------------------------------------
   Cards
----------------------------------------------------------- */
.card {
    background: var(--color-charcoal-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.prize-card { text-align: center; }
.prize-card .medal { font-size: 34px; margin-bottom: 14px; color: var(--color-gold); }
.prize-card h3 { margin-bottom: 8px; }
.prize-card .amount { color: var(--color-gold-light); font-size: 20px; font-weight: 800; }

/* Category cards (فئات المسابقة) */
.categories-section .section-title { margin-bottom: 6px; }
.categories-subtitle { text-align: center; color: var(--color-text-muted); font-size: 15px; margin-bottom: 46px; }
.category-card {
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.category-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 34px rgba(214, 166, 46, 0.14);
}
.category-icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    color: var(--color-gold);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.category-card:hover .category-icon {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(214, 166, 46, 0.08);
}
.category-icon svg { width: 30px; height: 30px; }
.category-card h3 { font-size: 17px; margin-bottom: 10px; }
.category-card p { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 20px; min-height: 40px; }

/* Steps */
.steps-row { display: flex; justify-content: space-between; gap: 12px; position: relative; }
.steps-row::before { content:""; position:absolute; top:26px; right:6%; left:6%; height:1px; background: var(--color-border); border-top: 1px dashed var(--color-border); z-index:0;}
.step-item { flex:1; text-align:center; position:relative; z-index:1; }
.step-circle { width:54px; height:54px; border-radius:50%; border:1px solid var(--color-gold); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; background: var(--color-black); color: var(--color-gold); font-weight:800; }
.step-item h4 { font-size:15px; margin-bottom:6px; }
.step-item p { font-size:13px; color: var(--color-text-muted); }
@media (max-width: 780px){ .steps-row{ flex-direction: column; } .steps-row::before{ display:none; } }

/* Gallery */
.gallery-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gallery-strip img { border-radius: var(--radius-md); height: 260px; object-fit: cover; width: 100%; border: 1px solid var(--color-border); }
@media (max-width: 960px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question { display:flex; align-items:center; justify-content:space-between; padding: 20px 4px; cursor:pointer; font-weight:700; }
.faq-answer { display:none; padding: 0 4px 20px; color: var(--color-text-muted); }
.faq-item.open .faq-answer { display:block; }
.faq-item.open .faq-question .chevron { transform: rotate(180deg); }
.chevron { transition: transform .2s; color: var(--color-gold); }

/* CTA */
.cta-band { background: var(--color-charcoal); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--color-charcoal); border-top: 1px solid var(--color-border); padding: 60px 0 24px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h5 { color: var(--color-gold); font-size:15px; margin-bottom: 16px; }
.footer-grid li { margin-bottom: 10px; font-size: 14px; color: var(--color-text-muted); }
.footer-bottom { border-top:1px solid var(--color-border); padding-top:20px; text-align:center; font-size:13px; color: var(--color-text-muted); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* -----------------------------------------------------------
   Forms
----------------------------------------------------------- */
.form-group { margin-bottom: 20px; }
label { display:block; margin-bottom: 8px; font-size: 14px; color: var(--color-text-muted); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], select, textarea {
    width: 100%; background: var(--color-black); border: 1px solid var(--color-border); color: var(--color-text);
    padding: 13px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 14.5px;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-gold); }
.checkbox-row { display:flex; align-items:flex-start; gap:10px; margin-bottom: 14px; font-size: 14px; color: var(--color-text-muted); }
.form-card { max-width: 520px; margin: 0 auto; background: var(--color-charcoal-2); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px; }
.form-hint { font-size: 12.5px; color: var(--color-text-muted); margin-top: 6px; }
.char-counter { font-size: 12px; color: var(--color-text-muted); text-align: left; }

.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; border: 1px solid transparent; }
.alert-error { background: rgba(193,69,59,.12); border-color: var(--color-danger); color: #f0a8a2; }
.alert-success { background: rgba(62,142,94,.12); border-color: var(--color-success); color: #9fe0b8; }
.alert-info { background: rgba(214,166,46,.1); border-color: var(--color-gold); color: var(--color-gold-light); }

/* Dropzone */
.dropzone { border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 50px 20px; text-align: center; cursor: pointer; transition: border-color .2s; }
.dropzone.dragover, .dropzone:hover { border-color: var(--color-gold); }
.dropzone .icon { font-size: 34px; color: var(--color-gold); margin-bottom: 10px; }

/* Status badges */
.badge { display:inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.badge-draft { background: rgba(166,166,166,.15); color: #ccc; }
.badge-submitted { background: rgba(214,166,46,.15); color: var(--color-gold-light); }
.badge-under_review { background: rgba(90,140,220,.15); color: #8fb4ee; }
.badge-qualified { background: rgba(62,142,94,.15); color: #9fe0b8; }
.badge-disqualified { background: rgba(193,69,59,.15); color: #f0a8a2; }
.badge-winner { background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); color: #14110A; }

/* -----------------------------------------------------------
   Dashboard / Admin shared layout
----------------------------------------------------------- */
.dash-shell { display: flex; min-height: 100vh; }
.dash-sidebar { width: 260px; background: var(--color-charcoal); border-inline-start: 1px solid var(--color-border); padding: 24px 18px; flex-shrink: 0; }
.dash-sidebar .brand { margin-bottom: 30px; }
.dash-sidebar nav a { display:flex; align-items:center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 14px; margin-bottom: 4px; }
.dash-sidebar nav a:hover, .dash-sidebar nav a.active { background: rgba(214,166,46,.1); color: var(--color-gold); }
.dash-main { flex: 1; padding: 30px 34px; max-width: 100%; overflow-x: hidden; }
.dash-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.stat-card { background: var(--color-charcoal-2); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; }
.stat-card .num { font-size: 28px; font-weight: 800; color: var(--color-gold); }
.stat-card .label { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }

table.data-table { width: 100%; border-collapse: collapse; background: var(--color-charcoal-2); border-radius: var(--radius-md); overflow: hidden; }
table.data-table th, table.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--color-border); font-size: 13.5px; text-align: right; }
table.data-table th { color: var(--color-gold); font-weight: 700; background: rgba(255,255,255,.02); }
table.data-table tr:hover td { background: rgba(255,255,255,.02); }
.table-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); }

.pagination { display:flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.pagination a, .pagination span { padding: 8px 13px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 13px; }
.pagination .active { background: var(--color-gold); color: #14110A; border-color: var(--color-gold); }

@media (max-width: 900px) {
    .dash-sidebar { position: fixed; z-index: 200; height: 100vh; transform: translateX(100%); transition: transform .3s; }
    .dash-sidebar.open { transform: translateX(0); }
    .dash-main { padding: 20px; }
}

/* -----------------------------------------------------------
   Responsive audit fixes (mobile/tablet only — no desktop change)
----------------------------------------------------------- */

/* Table container: lets wide admin tables scroll horizontally WITHIN
   their own box instead of either breaking the whole page layout or
   being silently clipped by .dash-main's overflow-x:hidden. The page
   itself never scrolls sideways — only this inner container does. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.data-table { min-width: 640px; }

/* Many existing filter/detail layouts set grid-template-columns via
   an inline style (not the .grid-3/.grid-4 utility classes, which
   already collapse responsively on their own and are intentionally
   excluded here so their existing behavior is untouched). Since an
   inline style can only be overridden with !important from an
   external stylesheet, this is what actually lets those forms/filters
   stack into one or two columns on narrow screens instead of forcing
   several fixed-fraction columns into too little width. */
@media (max-width: 860px) {
    .grid:not(.grid-3):not(.grid-4) { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .grid:not(.grid-3):not(.grid-4) { grid-template-columns: 1fr !important; }
    .card { padding: 20px; }
    .form-card { padding: 24px; }
}

@media (max-width: 480px) {
    /* A 5-across image strip already becomes 2 columns at <=960px;
       at true small-phone widths a fixed 260px height on a ~140px-wide
       column reads as an oddly narrow crop, so it's reduced here. */
    .gallery-strip img { height: 160px; }
    /* Defensive: keeps a long admin-configured site name from pushing
       the header's buttons/hamburger off-screen. */
    .brand span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Maintenance */
.maintenance-body { display:flex; align-items:center; justify-content:center; height:100vh; text-align:center; }
.maintenance-box h1 { font-size: 40px; margin-bottom: 14px; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top:0 } .mb-0 { margin-bottom:0 }
.flex { display:flex; flex-wrap: wrap; } .items-center{ align-items:center; } .gap-2{ gap:8px;} .gap-3{gap:16px;}