/* ===========================================================
   زفّات روائع — صفحة الزوار
   طابع "بطاقة الدعوة الذهبية": نفس الألوان الذهبية الداكنة وخط
   IBM Plex Sans Arabic، بلغة بصرية مستوحاة من دعوات الأعراف بدل
   قالب تطبيق موسيقى عام. وضعان: ليلي (افتراضي) ونهاري.
   =========================================================== */

/* ---------- الوضع الليلي (الافتراضي) — دفء خشب العود بدل الأسود البارد ---------- */
:root{
  --bg:#15100a;
  --bg-2:#1e160e;
  --bg-3:#241a10;
  --card:#1e160e;
  --card-border:rgba(169,121,58,.28);
  --card-border-hover:rgba(232,194,122,.6);
  --card-featured-bg:linear-gradient(180deg, rgba(232,194,122,.06), transparent 45%), #1e160e;
  --gold:#a9793a;
  --gold-bright:#e8c27a;
  --gold-on-solid:#241a0c;
  --text:#f3ead9;
  --text-dim:#b8a688;
  --text-dim-2:#8a7a5f;
  --chip-bg:transparent;
  --bar-bg:linear-gradient(180deg, rgba(21,16,10,.98), rgba(15,11,7,.99));
  --header-bg:linear-gradient(180deg, rgba(21,16,10,.97), rgba(21,16,10,.92) 72%, rgba(21,16,10,0));
  --glow-1:rgba(232,194,122,.08);
  --glow-2:rgba(124,53,53,.10);
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --heart:#c46767;
  --heart-solid:#7c3535;
  --radius:14px;
  color-scheme:dark;
}

/* ---------- الوضع النهاري ---------- */
html[data-theme="light"]{
  --bg:#faf6ee;
  --bg-2:#f3ecdd;
  --bg-3:#ffffff;
  --card:#ffffff;
  --card-border:rgba(150,105,40,.25);
  --card-border-hover:rgba(150,105,40,.6);
  --card-featured-bg:linear-gradient(180deg, rgba(200,150,60,.10), #ffffff 45%);
  --gold:#8a611f;
  --gold-bright:#6e4d18;
  --gold-on-solid:#ffffff;
  --text:#2b2115;
  --text-dim:#6b5a3e;
  --text-dim-2:#8f7f61;
  --chip-bg:transparent;
  --bar-bg:linear-gradient(180deg, #ffffff, #f8f2e6);
  --header-bg:linear-gradient(180deg, rgba(250,246,238,.98), rgba(250,246,238,.93) 72%, rgba(250,246,238,0));
  --glow-1:rgba(200,150,60,.14);
  --glow-2:rgba(150,105,40,.06);
  --shadow:0 14px 34px rgba(90,65,20,.14);
  --heart:#a04747;
  --heart-solid:#a04747;
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* خاصية hidden يجب أن تتغلّب على أي display نحدّده في الأصناف أدناه،
   وإلا ظهرت عناصر يُفترض إخفاؤها (مثل صف اختيار النسخ خارج المفضلة). */
[hidden]{display:none !important;}
body{
  background:
    radial-gradient(1100px 550px at 12% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at 108% 12%, var(--glow-2), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size:15px;
  min-height:100vh;
  padding-bottom:120px;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
a{color:inherit;}

/* ---------- الترويسة: ختم ذهبي + خط زخرفي بدل شعار عام ---------- */
header.site{
  position:sticky; top:0; z-index:30;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  padding:20px 20px 16px;
  border-bottom:1px solid var(--card-border);
}
.header-top{
  max-width:1080px; margin:0 auto 2px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0;}
.seal-mark{width:34px; height:34px; flex-shrink:0; opacity:.92;}
.seal-mark svg{width:100%; height:100%; display:block;}
.brand-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
.brand h1{
  font-weight:300; font-size:clamp(19px,3.2vw,25px); margin:0; letter-spacing:.01em;
  color:var(--text); white-space:nowrap;
}
.brand h1 b{font-weight:600; color:var(--gold-bright);}
.brand small{color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.1em;}

.header-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}

/* زر تبديل الوضع */
.theme-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--card-border);
  background:var(--chip-bg); color:var(--gold-bright);
  cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.theme-btn:hover{border-color:var(--gold); transform:rotate(-15deg);}

.divider{
  width:150px; height:9px; margin:12px auto 14px;
  opacity:.75;
}
.divider svg{width:100%; height:100%; display:block;}

.controls{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}

/* ---------- التبويبات ---------- */
.tabs{display:flex; gap:7px; justify-content:center; flex-wrap:wrap;}
.tab{
  border:1px solid var(--card-border);
  background:var(--chip-bg); color:var(--text-dim);
  padding:8px 20px; border-radius:3px;
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:all .15s;
}
.tab:hover{border-color:var(--gold); color:var(--text);}
.tab.active{
  background:var(--gold-bright);
  color:var(--gold-on-solid); border-color:var(--gold-bright); font-weight:600;
}
.tab .count{
  background:rgba(0,0,0,.18); border-radius:99px;
  padding:1px 8px; font-size:12px; font-weight:700;
}
.tab:not(.active) .count{background:var(--gold); color:var(--gold-on-solid);}

/* ---------- شريط البحث والفلترة — على هيئة "طرف تذكرة" مثقوب الحواف ---------- */
.control-bar{
  max-width:880px; margin:26px auto 0; background:var(--bg-2);
  border:1px solid var(--card-border); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden;
}
.search-row{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:15px 22px; border-bottom:1px dashed var(--card-border);
}
.search-row:after, .search-row:before{
  content:''; position:absolute; top:50%; width:16px; height:16px;
  background:var(--bg); border-radius:50%; transform:translateY(-50%);
}
.search-row:after{right:-8px;}
.search-row:before{left:-8px;}
.search-row input{
  flex:1; width:100%; background:transparent;
  border:none; color:var(--text);
  padding:2px 30px 2px 0; outline:none;
  font-family:inherit; font-size:15px; font-weight:300;
}
.search-row input::placeholder{color:var(--text-dim-2);}
.search-row .icon{
  color:var(--gold); pointer-events:none; font-size:15px; flex-shrink:0;
}

#filterArea{padding:13px 20px 15px; display:flex; flex-direction:column; gap:11px;}

/* زر إظهار/إخفاء الفلاتر — مخفي على الشاشات الواسعة (الفلاتر تبقى ظاهرة دومًا هناك)،
   ويظهر فقط على الجوال حيث تحتاج الفلاتر مساحة كبيرة تُبعد قائمة الزفات عن الأنظار. */
.filter-toggle{
  display:none; flex-shrink:0; align-items:center; gap:6px;
  background:var(--chip-bg); border:1px solid var(--card-border); color:var(--text-dim);
  border-radius:8px; padding:7px 12px; font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.filter-toggle .fcount{
  background:var(--gold-bright); color:var(--gold-on-solid); border-radius:99px;
  min-width:16px; height:16px; padding:0 4px; font-size:10.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.filter-toggle .fchev{font-size:10px; color:var(--gold); transition:transform .2s;}
.filter-toggle[aria-expanded="true"] .fchev{transform:rotate(180deg);}

/* ---------- الفلاتر ---------- */
.filter-group{display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.filter-group .glabel{
  font-size:10.5px; color:var(--gold); font-weight:600; letter-spacing:.08em;
  margin-left:2px; white-space:nowrap; min-width:56px;
}
.chip{
  border:1px solid var(--card-border); background:var(--chip-bg); color:var(--text-dim);
  padding:6px 14px; border-radius:8px;
  font-size:12.5px; font-family:inherit; font-weight:400;
  cursor:pointer; user-select:none; white-space:nowrap; transition:all .15s;
}
.chip:hover{border-color:var(--gold); color:var(--text);}
.chip.active{
  background:var(--gold-bright);
  color:var(--gold-on-solid); border-color:var(--gold-bright); font-weight:600;
}
.meta-row{text-align:center; color:var(--text-dim-2); font-size:12.5px; margin-top:2px;}

/* ---------- الشبكة والبطاقات: طراز "بطاقة الدعوة" ---------- */
main{max-width:1080px; margin:30px auto 0; padding:0 20px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:16px;}

.card{
  background:var(--card); border-radius:4px; padding:20px 18px 16px;
  transition:transform .18s ease, box-shadow .2s; position:relative;
  box-shadow:0 0 0 1px var(--card-border) inset;
}
.card:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--card-border-hover) inset;}
.card.is-featured{background:var(--card-featured-bg);}

/* زوايا الإطار الزخرفية بدل حدود مستطيلة كاملة */
.card .corner{position:absolute; width:14px; height:14px; border:1.3px solid var(--gold); opacity:.7; pointer-events:none;}
.card .corner.tl{top:6px; right:6px; border-left:none; border-bottom:none;}
.card .corner.tr{top:6px; left:6px; border-right:none; border-bottom:none;}
.card .corner.bl{bottom:6px; right:6px; border-left:none; border-top:none;}
.card .corner.br{bottom:6px; left:6px; border-right:none; border-top:none;}

.card .eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--gold);
  margin-bottom:9px; display:flex; align-items:center; gap:6px; min-height:15px;
}
.card .eyebrow .fseal{width:14px; height:14px; flex-shrink:0;}

.card h3{
  margin:0 0 6px; font-size:16px; font-weight:500; line-height:1.5; color:var(--text);
}
.card .artists{font-size:12.5px; color:var(--text-dim); font-weight:300; margin-bottom:16px;}

/* زر المفضلة */
.fav-btn{
  position:absolute; top:16px; left:16px;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--card-border); background:transparent;
  color:var(--text-dim-2); cursor:pointer; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .16s;
}
.fav-btn:hover{border-color:var(--heart); color:var(--heart); transform:scale(1.12);}
.fav-btn.on{background:var(--heart-solid); border-color:var(--heart-solid); color:#f3ead9;}

/* تذييل البطاقة: زر تشغيل دائري (ختم) + شريط النسخ المتاحة كـ"ribbon" */
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.play-seal{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:1px solid var(--gold); background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--gold-bright);
  position:relative; transition:all .2s; padding:0;
}
.play-seal svg{width:12px; height:12px;}
.play-seal:before{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid transparent;
}
.play-seal:hover{background:var(--gold-bright); color:var(--gold-on-solid); border-color:var(--gold-bright);}
.play-seal.playing{background:var(--gold-bright); color:var(--gold-on-solid); border-color:var(--gold-bright);}
.play-seal.playing:before{border-color:var(--card-border-hover); animation:seal-breathe 2.2s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.play-seal.playing:before{animation:none;}}
@keyframes seal-breathe{
  0%,100%{transform:scale(1); opacity:.5;}
  50%{transform:scale(1.2); opacity:0;}
}

.ribbon{display:flex; align-items:center; gap:0; flex-wrap:wrap; font-size:11.5px; min-width:0;}
.ribbon button{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:11.5px; color:var(--text-dim); white-space:nowrap;
  transition:color .15s;
}
.ribbon button:hover{color:var(--gold-bright);}
.ribbon button.playing{color:var(--gold-bright); font-weight:600;}
.ribbon .sep{margin:0 6px; color:var(--text-dim-2); opacity:.6;}

/* اختيار النسخة المطلوبة داخل المفضلة */
.want-row{
  margin-top:12px; padding-top:11px; border-top:1px dashed var(--card-border);
  display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center;
}
.want-row .wlabel{font-size:11px; color:var(--gold); font-weight:600; letter-spacing:.03em;}
.want{
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text-dim); cursor:pointer; user-select:none;
}
.want input{width:15px; height:15px; accent-color:var(--gold-bright); cursor:pointer;}
.want-warn{display:none; font-size:11px; color:var(--heart); font-weight:600; margin-right:auto;}
.want-row.need-pick{border-top-color:var(--heart);}
.want-row.need-pick .want-warn{display:inline;}

/* ---------- شريط أدوات المفضلة ---------- */
.fav-toolbar{
  background:var(--bg-2); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:16px;
}
.fav-toolbar .ft-title{font-weight:600; font-size:14.5px; margin-bottom:3px; color:var(--text);}
.fav-toolbar .ft-sub{font-size:12.5px; color:var(--text-dim-2); margin-bottom:12px; line-height:1.8;}
.fav-actions{display:flex; flex-wrap:wrap; gap:8px;}
.act-btn{
  border:1px solid var(--card-border); background:transparent; color:var(--text);
  padding:9px 16px; border-radius:8px;
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; display:flex; align-items:center; gap:7px; transition:all .15s;
  text-decoration:none;
}
.act-btn:hover{border-color:var(--gold); color:var(--gold-bright);}
.act-btn.primary{
  background:var(--gold-bright);
  color:var(--gold-on-solid); border-color:var(--gold-bright); font-weight:600;
}
.act-btn.primary:hover{filter:brightness(1.07); color:var(--gold-on-solid);}
.act-btn.wa{background:#25d366; border-color:#25d366; color:#fff; font-weight:600;}
.act-btn.wa:hover{filter:brightness(1.06); color:#fff;}
.act-btn.wa.disabled{
  background:transparent; border-color:var(--card-border); color:var(--text-dim-2);
  cursor:not-allowed; pointer-events:none;
}
.act-btn.danger{color:var(--heart); border-color:var(--heart);}

/* ---------- الحالات الفارغة ---------- */
.empty-state, .loading{text-align:center; color:var(--text-dim); padding:55px 20px;}
.empty-state{display:none;}
.empty-big{font-size:34px; margin-bottom:10px; opacity:.55;}
.empty-title{font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px;}
.empty-sub{font-size:13.5px; color:var(--text-dim-2); line-height:1.9; max-width:420px; margin:0 auto;}

/* ---------- شريط التشغيل ---------- */
#player-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:var(--bar-bg); border-top:1px solid var(--card-border);
  box-shadow:var(--shadow); padding:10px 16px 14px;
  transform:translateY(115%); transition:transform .3s ease;
}
#player-bar.show{transform:translateY(0);}
.player-inner{max-width:920px; margin:0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.now-playing{flex:1; min-width:150px;}
.now-playing .t{font-weight:600; font-size:14px; color:var(--gold-bright);}
.now-playing .v{font-size:12px; color:var(--text-dim); font-weight:300;}
#player-bar audio{flex:2; min-width:220px; height:38px;}
#player-close{
  background:none; border:1px solid var(--card-border); color:var(--text-dim);
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#player-close:hover{border-color:var(--heart); color:var(--heart);}

/* ---------- إشعار سريع ---------- */
#toast{
  position:fixed; bottom:96px; left:50%; transform:translate(-50%,20px);
  background:var(--bg-3); color:var(--text);
  border:1px solid var(--gold); border-radius:10px;
  padding:10px 20px; font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
#toast.show{opacity:1; transform:translate(-50%,0);}

/* ---------- لافتة القائمة المشتركة ---------- */
.shared-banner{
  max-width:1080px; margin:14px auto 0; padding:0 20px;
}
.shared-banner .inner{
  background:var(--card-featured-bg); border:1px solid var(--gold);
  border-radius:var(--radius); padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13.5px;
}

footer{text-align:center; color:var(--text-dim-2); font-size:12px; padding:34px 20px 10px; font-weight:300;}

/* حركة دخول خفيفة للبطاقات عند أول تحميل فقط */
@media (prefers-reduced-motion: no-preference){
  .card{animation:card-rise .45s ease backwards;}
  .card:nth-child(n+1){animation-delay:calc(var(--i, 0) * 18ms);}
}
@keyframes card-rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- الطباعة (لأخذ لقطة أو طباعة القائمة) ---------- */
@media print{
  header.site, #player-bar, .fav-actions, .fav-btn, .card-foot, #toast, footer{display:none !important;}
  body{background:#fff; color:#000; padding:0;}
  .card{break-inside:avoid; border:1px solid #ccc; box-shadow:none;}
}

/* ---------- الجوال ---------- */
@media (max-width:640px){
  header.site{padding:14px 14px;}
  main{padding:0 14px;}
  .grid{grid-template-columns:1fr;}
  #player-bar audio{min-width:140px;}
  .fav-actions .act-btn{flex:1; justify-content:center; min-width:130px;}

  /* الفلاتر تُخفى افتراضيًا خلف زر "فلاتر" — بلا هذا كانت تشغل أغلب الشاشة
     وتدفع قائمة الزفات كلها للأسفل، فلا تظهر إلا زفة واحدة فوق الطية. */
  .filter-toggle{display:inline-flex;}
  #filterArea{overflow:hidden; max-height:2000px;}
  #filterArea.collapsed{max-height:0; padding-top:0; padding-bottom:0; opacity:0;}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  #filterArea{transition:max-height .28s ease, opacity .2s ease, padding .28s ease;}
}