/* =========================================================
   LINE x PlayStation x iOS — FULL THEME
   RTL • Mobile-First • Glassmorphism • Modern
   ========================================================= */

/* --------------------
   0) Root & Tokens
-------------------- */
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  /* Brand */
  --bg:#0b1020;
  --bg-elev:#11172a;
  --card:rgba(20,28,45,.75);
  --glass:rgba(16,23,42,.55);
  --line:#06C755;
  --accent:#2dd56f;
  --ps-blue:#0f6bff;
  --ps-purple:#6a5cff;

  /* Text & Strokes */
  --text:#EAF2FF;
  --text-dim:#9fb0d3;
  --stroke:rgba(255,255,255,.06);

  /* Radii & Shadows */
  --radius:16px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow-1:0 4px 12px rgba(0,0,0,.25);
  --shadow-2:0 8px 24px rgba(0,0,0,.35);
  --inner-glow:inset 0 1px 0 rgba(255,255,255,.05);

  /* Gradients */
  --grad-ps:linear-gradient(135deg,var(--ps-blue),var(--ps-purple));
  --grad-line:linear-gradient(135deg,#18e06f,#00c853);
  --grad-btn:linear-gradient(170deg,#21d36c,#0abf5a);

  --blur:blur(18px);
  --tap:48px;
}

*{box-sizing:border-box}
html{direction:rtl}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{
  margin:0;
  font-family:'Almarai',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(66,104,255,.18), transparent 45%),
    radial-gradient(900px 600px at -10% 20%, rgba(145,100,255,.16), transparent 45%),
    linear-gradient(180deg,#060914,#0a0f1f);
  min-height:100dvh;
  padding-bottom:calc(70px + var(--safe-bottom));
}

/* Containers & Layout */
.container{width:min(1120px,92%);margin:auto}
.section{margin:26px 0}
.sep{border:0;border-top:1px solid var(--stroke);margin:14px 0}
.muted{color:var(--text-dim)}
.hidden{display:none!important}

/* Typography helpers */
h1,h2,h3{margin:0 0 10px}
h1{font-size:clamp(1.4rem,4.5vw,2.2rem)}
h2{font-size:clamp(1.2rem,3.8vw,1.6rem)}
h3{font-size:1.1rem}
.prose{--lh:1.9;--fs:1rem}
.prose p,.prose li{line-height:var(--lh);font-weight:400;font-size:var(--fs);margin:0 0 10px;color:var(--text)}
.prose ul,.prose ol{margin:0;padding:0 1.2rem}
.prose li{margin-bottom:8px}
.prose h3{margin:0 0 10px;font-weight:700}

/* Links & Images */
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* --------------------
   1) NAV / HEADER
-------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:var(--blur);
  background:linear-gradient(180deg, rgba(20,28,45,.9), rgba(20,28,45,.6));
  border-bottom:1px solid var(--stroke);
  padding-top:var(--safe-top);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 6px;
}
.logo{
  display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px;
  background:var(--grad-ps);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.15rem;
}
.nav-actions{display:flex;gap:8px;align-items:center}
.user-name{color:#ffd700;font-weight:800}
.user-name:hover{color:#fff}

/* تحصين: إخفاء أزرار دخول/تسجيل/خروج من الهيدر */
.nav .btn[href*="login"],
.nav .btn[href*="register"],
.nav .btn[href*="logout"]{display:none!important}

/* --------------------
   2) FOOTER
-------------------- */
.footer{
  margin-top:34px;text-align:center;color:var(--text-dim);
  padding:20px 0;border-top:1px solid var(--stroke)
}

/* --------------------
   3) Buttons
-------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding-inline:16px;border-radius:var(--radius-pill);
  border:1px solid transparent;background:var(--grad-btn);color:#052c1a;font-weight:800;
  box-shadow:var(--shadow-1);cursor:pointer;transition:transform .08s,box-shadow .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-1px) scale(1.01);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--text);border:1px solid var(--stroke)
}
.btn.ghost{background:transparent;border:1px dashed var(--stroke);color:var(--text-dim)}
.btn.danger{background:linear-gradient(170deg,#ff4d4d,#d92f2f);color:#fff}
.btn.danger:hover{box-shadow:0 10px 24px rgba(217,47,47,.35)}
.center{display:inline-flex;align-items:center;justify-content:center;margin:10px auto 0}

/* --------------------
   4) Forms
-------------------- */
.input,.select,textarea{
  width:100%;min-height:48px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--stroke);color:var(--text);outline:none;
  transition:box-shadow .2s,border-color .2s;
}
.input:focus,.select:focus,textarea:focus{
  border-color:rgba(45,213,111,.6);box-shadow:0 0 0 6px rgba(45,213,111,.08)
}
label{display:block;margin:8px 2px 4px;color:var(--text-dim);font-size:.95rem}

/* Switch */
.switch{appearance:none;width:52px;height:32px;border-radius:999px;position:relative;background:#263049;border:1px solid var(--stroke);cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:50%;transform:translateY(-50%);right:2px;width:28px;height:28px;border-radius:50%;background:#fff;transition:right .2s,background .2s;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.switch:checked{background:linear-gradient(135deg,#28e06d,#11c85a)}
.switch:checked::after{right:22px}

/* --------------------
   5) Cards & Surfaces
-------------------- */
.card{
  background:var(--card);backdrop-filter:var(--blur);
  border:1px solid var(--stroke);border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--inner-glow),var(--shadow-1)
}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--text-dim)}

/* Alerts */
.alert{border:1px solid var(--stroke);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.04)}
.alert.success{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.08)}
.alert.warn{border-color:rgba(243,156,18,.35);background:rgba(243,156,18,.08)}
.alert.danger{border-color:rgba(231,76,60,.35);background:rgba(231,76,60,.08)}
.alert.info{border-color:rgba(52,152,219,.35);background:rgba(52,152,219,.08)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text-dim)}

/* --------------------
   6) Hero
-------------------- */
.hero{position:relative;margin:18px 0;border-radius:var(--radius-lg);overflow:hidden}
.hero.small-hero{max-height:260px}
.hero-img{width:100%;height:260px;object-fit:cover;filter:saturate(1.05) contrast(1.04)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,0),rgba(4,6,14,.45) 70%,rgba(4,6,14,.75))}
.hero-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center;padding:24px;z-index:2}
.hero-text a.btn{margin-top:8px}
.small-hero.shrink .hero-img{height:220px}.small-hero.shrink .hero-text h1{font-size:1.55rem}.small-hero.shrink .hero-text p{display:none}

/* --------------------
   7) Slider
-------------------- */
.slider{display:flex;gap:12px;overflow-x:auto;padding:10px 2px;scroll-snap-type:x mandatory}
.slide{min-width:200px;background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:12px;scroll-snap-align:start;box-shadow:var(--shadow-1)}
.slide:hover{transform:translateY(-2px)}

/* --------------------
   8) Game Cards Grid
-------------------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.game-card{display:block;color:inherit;background:var(--glass);border:1px solid var(--stroke);padding:14px;border-radius:14px;text-align:center;box-shadow:var(--inner-glow),var(--shadow-1);transition:transform .12s,box-shadow .2s,background .2s;cursor:pointer}
.game-card *{text-decoration:none}
.game-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.06);box-shadow:var(--shadow-2)}
.game-card img{width:100%;border-radius:12px;margin-bottom:10px;height:150px;object-fit:cover}

/* --------------------
   9) Players (Top / Latest)
-------------------- */
.top-players.compact{margin:14px 0}
.player-card.row{
  display:flex;align-items:center;gap:12px;min-width:260px;background:var(--glass);
  border:1px solid var(--stroke);padding:12px 14px;border-radius:14px
}
.player-card.row:hover{background:rgba(255,255,255,.06)}
.player-avatar,.player-mini img,.group-img{
  border-radius:16px;width:90px;height:90px;object-fit:cover;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.25);transition:transform .25s
}
.player-avatar.sm{width:60px;height:60px;border-radius:12px}
.player-avatar:hover{transform:translateY(-2px)}
.player-info.sm{display:flex;align-items:center;gap:10px;min-width:0}
.player-info.sm .name{font-weight:800;color:var(--text);max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-info .meta{display:inline-flex;gap:6px;white-space:nowrap;color:var(--text-dim)}
.player-info .lvl,.player-info .pts{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--stroke);font-size:.8rem}

/* Latest players grid */
.players-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:12px}
.player-mini{text-align:center;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:6px}
.player-mini img{width:96px;height:96px;border-radius:12px}
.player-mini span{display:block;margin:0;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Groups */
.group-img{width:150px;height:150px}

/* --------------------
   10) Game UI
-------------------- */
.game-container{background:var(--glass);border:1px solid var(--stroke);padding:16px;border-radius:18px;box-shadow:var(--shadow-2)}
.game-header{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--stroke);border-radius:14px;padding:10px 12px
}
.game-header h2{margin:0;background:var(--grad-ps);-webkit-background-clip:text;background-clip:text;color:transparent}
#timerDisplay,#jk_timer{
  font-size:1.6rem;font-weight:900;letter-spacing:.5px;color:#fff;background:linear-gradient(180deg,#1a263f,#0f1a34);
  border:1px solid var(--stroke);border-radius:999px;padding:6px 18px;box-shadow:var(--inner-glow)
}
.question-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:14px;padding:16px;box-shadow:var(--inner-glow),var(--shadow-1)}
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:10px}
.answers button{
  min-height:46px;padding:10px 12px;font-weight:800;border-radius:12px;border:1px solid rgba(0,0,0,.05);
  color:#052c1a;background:var(--grad-line);box-shadow:var(--shadow-1);cursor:pointer;transition:transform .08s,box-shadow .2s
}
.answers button:hover{transform:translateY(-1px)}
.answers button:active{transform:translateY(1px) scale(.98)}
.round-result{margin-top:10px;color:var(--text-dim);font-weight:700}

/* Overlays / Modals */
.overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);background:rgba(4,6,14,.5)}
.modal{
  width:min(520px,92%);border-radius:18px;padding:18px;
  background:linear-gradient(180deg,rgba(20,28,45,.95),rgba(20,28,45,.85));
  border:1px solid var(--stroke);box-shadow:var(--shadow-2)
}
.modal h3{margin-top:0;color:#fff}
.modal-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.player-option{width:48%;display:flex;gap:10px;align-items:center;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:12px;padding:10px;transition:transform .15s,background .2s}
.player-option:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.player-option img{width:38px;height:38px;border-radius:12px;object-fit:cover}

/* --------------------
   11) Tables / Tabs / Pagination / Breadcrumbs
-------------------- */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--stroke);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--stroke);text-align:right}
.table thead th{background:rgba(255,255,255,.05);color:#cfe0ff;font-weight:700}
.table tr:hover td{background:rgba(255,255,255,.04)}
.table .num{text-align:center;min-width:64px}
.table .avatar{display:flex;align-items:center;gap:10px}
.table .avatar img{width:36px;height:36px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.08)}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);color:var(--text-dim);cursor:pointer;background:rgba(255,255,255,.04)}
.tab.is-active{background:var(--grad-line);color:#052c1a;border-color:transparent}

.pagination{display:flex;gap:8px;justify-content:center;margin:14px 0}
.page{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);cursor:pointer}
.page.is-active{background:var(--grad-line);color:#052c1a;border-color:transparent}

.breadcrumbs{display:flex;gap:6px;flex-wrap:wrap;color:var(--text-dim);font-size:.95rem}
.breadcrumbs a{color:#cfe0ff}
.breadcrumbs .sep{margin:0;border-color:transparent}

/* --------------------
   12) Pages: Leaders / Rooms / Profile / Auth
-------------------- */
/* Leaders (المتصدرون) */
.leaders-table .rank{font-weight:900}
.leaders-table .points{font-weight:800;color:#a7ffcb}
.leaders-hero{display:flex;gap:12px;flex-wrap:wrap}
.stat-card{flex:1;min-width:180px}
.stat-card .value{font-size:1.4rem;font-weight:900}

/* Rooms (الغرف) */
.rooms-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.room-card{background:var(--glass);border:1px solid var(--stroke);border-radius:16px;padding:14px}
.room-card .meta{display:flex;gap:8px;color:var(--text-dim);font-size:.95rem}

/* Profile (الملف) */
.profile-card{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center}
.profile-card img{width:92px;height:92px;border-radius:16px;object-fit:cover;border:1px solid rgba(255,255,255,.08)}
.profile-fields{display:grid;gap:10px}
.kv{display:flex;gap:8px;align-items:center}
.kv .k{color:var(--text-dim);min-width:100px}

/* Auth (تسجيل/دخول) */
.auth-card{max-width:420px;margin:10px auto}
.auth-alt{display:flex;gap:10px;justify-content:center;color:var(--text-dim);font-size:.95rem}

/* --------------------
   13) Tabbar (Mobile Bottom Nav)
-------------------- */
.tabbar{
  position:fixed;z-index:60;inset-inline:12px;bottom:calc(10px + var(--safe-bottom));
  height:64px;display:flex;align-items:center;justify-content:space-around;gap:8px;
  border-radius:18px;padding:0 10px;background:rgba(16,23,42,.7);backdrop-filter:blur(12px);
  border:1px solid var(--stroke);box-shadow:var(--shadow-2)
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:.85rem;padding-block:8px
}
.tabbar a.is-active{color:#fff;font-weight:800}
.tabbar a span{display:block;font-size:.85rem}

/* --------------------
   14) Utilities
-------------------- */
.flex{display:flex}.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}
.p-0{padding:0}.p-6{padding:6px}.p-8{padding:8px}.p-10{padding:10px}.p-12{padding:12px}.p-14{padding:14px}.p-16{padding:16px}
.mt-0{margin-top:0}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.w-full{width:100%}

/* Status badges */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04)}
.tag.success{background:rgba(46,204,113,.08);border-color:rgba(46,204,113,.35)}
.tag.warn{background:rgba(243,156,18,.08);border-color:rgba(243,156,18,.35)}
.tag.danger{background:rgba(231,76,60,.08);border-color:rgba(231,76,60,.35)}
.tag.info{background:rgba(52,152,219,.08);border-color:rgba(52,152,219,.35)}

/* --------------------
   15) Responsive
-------------------- */
@media (max-width:720px){
  /* Grid tweaks */
  .answers{grid-template-columns:1fr 1fr}
  .player-card{padding:9px}
  .player-avatar{width:64px;height:64px}
  .slide{min-width:180px}

  /* Top Players: ملء الشاشة تقريبا + lvl فوق النقاط */
  .top-players.compact .slider{gap:10px;padding-inline:10px;scroll-snap-type:x mandatory;scroll-padding-inline:10px}
  .top-players.compact .slide.player-card.row{min-width:92vw;max-width:92vw;align-items:center}
  .top-players.compact .player-info.sm .name{max-width:52vw}
  .player-info .meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .player-info .lvl{order:-1}

  /* Latest 20: الاسم تحت الصورة مباشرة وتقريب */
  .players-grid{gap:8px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
  .player-mini img{width:70px;height:70px}
  .player-mini span{font-size:.9rem}

  /* مركز القروبات */
  .section .slider{justify-content:center}
  .slide{margin-inline:auto}

  /* إظهار التاب بار في الجوال */
  .tabbar{display:flex}
}
@media (min-width:721px){
  .tabbar{display:none}
}

/* =========================
   Fix: Top Players on Mobile (RTL start + sane width)
   ========================= */
@media (max-width: 720px){
  .top-players.compact .slider{
    direction: rtl;
    justify-content: flex-start;
    gap: 10px;
    padding-inline: 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .top-players.compact .slide.player-card.row{
    min-width: clamp(260px, 78vw, 200px);
    max-width: clamp(260px, 78vw, 350px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .top-players.compact .player-avatar.sm{ width:64px; height:64px; }
  .top-players.compact .player-info.sm{ min-width: 0; }
  .top-players.compact .player-info.sm .name{
    max-width: 56vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .top-players.compact .slide{ width: auto; }
}

/* =========================
   Table Row Accordion (Mobile Columns) — Unified
   ========================= */

/* زر إظهار التفاصيل داخل الخلية (يظهر فقط على الجوال) */
.row-acc-btn{
  display:none; /* يظهر في الجوال فقط */
  margin-top:6px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}

/* صف تفاصيل الأكورديون */
.acc-details-row .acc-details{
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border-top:1px solid var(--stroke);
  text-align:right; /* المحتوى لليمين */
}

/* عناصر key-value داخل التفاصيل */
.acc-kv{display:flex; justify-content:space-between; gap:12px; padding:6px 0;}
.acc-kv .k{color:var(--text-dim); min-width:90px;}
.acc-kv .v{color:var(--text); font-weight:700;}

/* ===== موبايل ===== */
@media (max-width:720px){
  /* إظهار زر التفاصيل */
  .row-acc-btn{display:inline-flex; align-items:center; gap:6px;}

  /* إخفاء الأعمدة الثانوية في الجوال — Users */
  .table-acc .th-email,
  .table-acc .th-role,
  .table-acc .th-lvl,
  .table-acc .th-pts{ display:none; }

  /* إخفاء الأعمدة الثانوية في الجوال — Rooms */
  .table-acc .th-type,
  .table-acc .th-max{ display:none; }

  /* إخفاء الأعمدة الثانوية في الجوال — Players */
  .table-acc .th-level,
  .table-acc .th-points,
  .table-acc .th-line{ display:none; }

  /* مسافات أصغر داخل خلايا الجدول على الجوال */
  .table th, .table td{ padding:10px 12px; }
}

/* ===== ديسكتوب ===== */
@media (min-width:721px){
  /* صف التفاصيل لا يظهر على الديسكتوب */
  .acc-details-row{ display:none; }
}

/* =========================================
   Buttons & Spacing — Responsive Overrides
   ========================================= */

/* حجم زر موحّد ومتوازن بكل الشاشات */
:root{
  --btn-h: clamp(42px, 5.2vw, 50px);      /* ارتفاع الزر */
  --btn-px: clamp(12px, 2.2vw, 18px);     /* الحشوة الأفقية */
  --btn-fs: clamp(.86rem, .9vw, .98rem);  /* حجم الخط */
  --btn-gap: 8px;                          /* مسافة بين الأزرار */
  --stack-gap: 12px;                        /* مسافة رأسية افتراضية */
}

.btn{
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  font-size: var(--btn-fs);
  line-height: 1.15;
}

/* أزرار داخل الجداول */
.table td .btn{
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  font-size: var(--btn-fs);
}

/* مسافة تلقائية بين الأزرار المتجاورة */
.btn + .btn{ margin-inline-start: var(--btn-gap); }

/* مجموعات أزرار جاهزة */
.btn-row{
  display:flex; flex-wrap:wrap; gap: var(--btn-gap);
}
.btn-stack > .btn{ display:block; width:100%; }
@media (min-width:721px){
  .btn-stack{ display:flex; gap: var(--btn-gap); }
  .btn-stack > .btn{ width:auto; }
}

/* مسافات بين الجداول/الأقسام/الحقول والأزرار */
.card{ margin-bottom: 16px; }                 /* فراغ بين الأقسام */
.table{ margin-top: 10px; }                   /* فراغ أعلى الجدول */
.search-bar{ row-gap: var(--btn-gap); }       /* إن كانت Flex Wrap */
.search-bar .btn{ margin-top: 6px; }          /* زر البحث بعيد عن الحقل قليلًا */

input + .btn,
.select + .btn,
textarea + .btn{ margin-top: 8px; }           /* مسافة عمودية بعد الحقول */

.table td form{ display:inline-block; margin: 2px 4px; } /* فراغ بسيط بين نماذج الأزرار */

/* توحيد قياسات الأنواع المختلفة */
.btn.secondary,
.btn.ghost,
.btn.danger{
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  font-size: var(--btn-fs);
}

/* تحسين لمحتوى الأكورديون داخل الصفوف */
.acc-details-row .acc-details .btn{ margin-top: 6px; }

/* لمسة صغيرة للجوال */
.btn svg, .btn i{ font-size: 1em; }
@media (max-width:720px){
  .btn{ min-width: auto; }
  .search-bar .btn{ width:auto; }
}

/* ====== Groups slider cards: center image, tidy spacing, consistent button ====== */
.group-card{
  /* تحويل البطاقة لفلِكس عمودي لتوسيط المحتوى وضبط المسافات */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:10px;                  /* مسافات متناسقة بين العناصر */
  padding:14px;              /* نفس البادينغ لكل البطاقات */
  min-height:auto;           /* لا نكبرها زيادة */
}

/* الصورة وسط البوكس تمامًا */
.group-card .group-img{
  width:150px; height:150px;
  border-radius:16px;
  object-fit:cover; object-position:center;
  margin:0 auto;             /* وسط أفقياً */
  display:block;
}

/* اسم القروب بدون هوامش زائدة */
.group-card .group-name{
  font-size:1rem; font-weight:800; margin:2px 0 2px 0;
}

/* زر متناسق + تقليل الفراغات أسفله */
.group-card .group-btn{
  width:100%;
  max-width:140px;
  min-height: var(--btn-h, 46px);
  padding-inline: var(--btn-px, 14px);
  font-size: var(--btn-fs, .95rem);
  margin-top:6px;
  margin-bottom:0;           /* منع فراغ كبير أسفل الزر */
  align-self:center;
}

/* حالة القروبات الخاصة */
.group-card .group-locked{
  margin-top:6px;
}

/* تقليل أي فراغات رأسية زائدة داخل السلايدر */
.slider .slide.group-card > *:last-child{ margin-bottom:0; }

/* على الجوال: الحفاظ على نفس التناسق بدون فراغات تحت كبيرة */
@media (max-width:720px){
  .group-card{ gap:8px; padding:12px; }
  .group-card .group-img{ width:136px; height:136px; }
  .group-card .group-btn{ max-width:136px; }
}

/* لو فيه بطاقات مختلفة الارتفاع، خفّض أثر اختلاف الارتفاعات */
.slider{ align-items:stretch; }

/* ==== Hero: تبديل صور تلقائي مع نص/أزرار ثابتة ==== */
.hero.small-hero{ position:relative; overflow:hidden; }
.hero-auto .hero-images{ position:relative; width:100%; height:260px; }
.hero-auto .hero-images .hero-img{
  position:absolute; inset:0;
  width:100%; height:260px; object-fit:cover;
  opacity:0; transition:opacity .6s ease;
  filter:saturate(1.05) contrast(1.04);
}
.hero-auto .hero-images .hero-img.is-active{ opacity:1; }

/* لو رفعت/قللت ارتفاع البنر غيّر 260px في الموضعين أعلاه */
@media (max-width:720px){
  .hero-auto .hero-images,
  .hero-auto .hero-images .hero-img{ height:220px; }
}

/* ===== User menu (dropdown) ===== */
.nav-right{ display:flex; align-items:center; gap:10px; }

.user-chip{
  display:inline-flex; align-items:center; gap:8px;
  max-width:52vw; padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  color:#ffd700; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.user-chip:hover{ color:#fff; }
.user-chip__name{ display:inline-block; max-width:38vw; overflow:hidden; text-overflow:ellipsis; }

@media (min-width:751px){
  .user-chip{ max-width:420px; }
  .user-chip__name{ max-width:360px; }
}

.user-menu{ position:relative; }
.user-menu__panel{
  position:absolute; inset-inline-end:0; top:calc(100% + 8px);
  min-width:180px; padding:8px;
  background:linear-gradient(180deg,rgba(20,28,45,.98),rgba(20,28,45,.92));
  border:1px solid var(--stroke); border-radius:12px; box-shadow:var(--shadow-2);
  backdrop-filter:var(--blur);
  z-index:100;
}
.user-menu__panel[hidden]{ display:none; }

.user-menu__item{
  display:flex; align-items:center; justify-content:flex-start;
  gap:8px; padding:10px 12px; border-radius:10px;
  color:var(--text); text-decoration:none;
}
.user-menu__item:hover{ background:rgba(255,255,255,.06); }
.user-menu__item--danger{ color:#fff; background:linear-gradient(180deg,rgba(255,77,77,.12),rgba(255,77,77,.06)); }
.user-menu__item--danger:hover{ background:linear-gradient(180deg,rgba(255,77,77,.22),rgba(255,77,77,.12)); }

/* (اختياري) سهم صغير أعلى القائمة */
.user-menu__panel::before{
  content:""; position:absolute; top:-7px; inset-inline-end:16px;
  width:12px; height:12px; transform:rotate(45deg);
  background:linear-gradient(180deg,rgba(20,28,45,.98),rgba(20,28,45,.92));
  border-left:1px solid var(--stroke); border-top:1px solid var(--stroke);
}

/* ===== Room cover image in table ===== */
.td-cover{
  width: 84px;
  text-align: center;
}
.room-cover{
  width:72px; height:72px;
  border-radius:12px; object-fit:cover; object-position:center;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}

/* على الموبايل: نخفي عمود النوع والحد الأقصى (موجودة في تفاصيل الأكورديون) */
@media (max-width:720px){
  .table-acc .th-type,
  .table-acc .th-max{ display:none; }
}

/* ===== Rooms grid cards (image + name + event) ===== */
.rooms-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.room-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:12px;
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow: var(--inner-glow), var(--shadow-1);
  transition: transform .12s, box-shadow .2s, background .2s;
  cursor:default; /* غيّرها لـ pointer إذا البطاقة قابلة للنقر */
}
.room-tile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-2);
}

/* صورة البطاقة */
.room-tile__img{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; object-position:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  margin-bottom:10px;
}

/* النصوص */
.room-tile__name{
  font-weight:800; font-size:1rem; color:var(--text);
  margin-bottom:6px;
  width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.room-tile__event{
  color:var(--text-dim); font-size:.95rem; font-weight:700;
}

/* (اختياري) عند جعل البطاقة قابلة للنقر/فتح مودال بالكيبورد */
.room-tile[role="button"]{
  cursor:pointer;
  outline: none;
}
.room-tile[role="button"]:focus{
  box-shadow: 0 0 0 4px rgba(45,213,111,.18), var(--shadow-2);
}

/* شبكة أضيق على الجوال إن رغبت */
@media (max-width:520px){
  .rooms-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
/* بطاقة واحدة في كل سطر على الشاشات الصغيرة */
@media (max-width: 720px){
  .rooms-grid{
    grid-template-columns: 1fr;   /* عمود واحد */
  }
  .room-tile{
    width: 100%;                  /* تأكيد الامتداد بعرض السطر */
  }
}
.room-tile{
  cursor: pointer;                 /* كان default قبل — خلّها pointer */
  user-select: none;
}
.room-tile:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(45,213,111,.18), var(--shadow-2);
}