/* ==========================================================================
   components.css — مكونات قابلة لإعادة الاستخدام: الأزرار، كارت التعريف (Popup)، رسالة toast
   ========================================================================== */

/* ===== الأزرار ===== */
/* زرار أيقونة دايري صغير (تبديل الثيم والقائمة) */
.icon-btn{width:42px;height:42px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--chip-bg);border:1px solid var(--glass-border);color:var(--ink);cursor:pointer;transition:background .2s}
.icon-btn:hover{background:var(--glass-bg-strong)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* أيقونة الثيم: الشمس في الداكن (تضغط تروح فاتح)، والقمر في الفاتح */
[data-bs-theme=dark] .i-moon,[data-bs-theme=light] .i-sun{display:none}
/* زرار القائمة (3 خطوط) بيتحول لـ ✕ لما يتفتح. Bootstrap بيحدّث aria-expanded بنفسه */
.navbar-toggler.icon-btn{flex-direction:column;gap:5px;border:1px solid var(--glass-border)}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler .bar{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.navbar-toggler[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar-toggler[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.navbar-toggler[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* أزرار كبسولة: ink (مملوء) و ghost (حد فقط) */
.btn.btn-ink{background:var(--ink);color:var(--bg);border:1px solid var(--ink);font-weight:600;padding:10px 20px}
.btn.btn-ink:hover{background:transparent;color:var(--ink)}
.btn.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:600;padding:10px 20px}
.btn.btn-ghost:hover{background:var(--ink);color:var(--bg)}
/* أزرار الأيقونات الدايرية الكبيرة في قسم التواصل وتحت الكارت */
.ibtn{width:50px;height:50px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--chip-bg);border:1px solid var(--ink);color:var(--ink);cursor:pointer;font:inherit;transition:background .2s,color .2s}
.ibtn:hover{background:var(--ink);color:var(--bg)}
.ibtn.solid{background:var(--ink);color:var(--bg)}
.ibtn.solid:hover{background:transparent;color:var(--ink)}
.ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn svg.fill{fill:currentColor;stroke:none}

/* ===== كارت التعريف كـ Popup ===== */
/* الطبقة المعتمة اللي بتغطي الشاشة. مخفية لحد ما card.js يضيف الكلاس open */
.idwrap{position:fixed;inset:0;z-index:2000;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:auto}
.idwrap.open{display:flex;animation:fade .25s ease both}
/* الكارت يطلع بحركة Pop مع ارتداد خفيف */
.idwrap.open .idcard{animation:popup .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes popup{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:none}}
.idcard{position:relative;width:100%;max-width:420px;margin:0 0 18px;border-radius:24px;padding:22px;text-align:start;background:var(--glass-bg-strong)}
.idtop{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.idtop img{width:84px;height:84px;border-radius:50%;object-fit:cover;background:rgba(127,127,127,.2);flex:none}
.idtop h3{margin:0;font-size:22px;font-weight:800}
.idtop p{margin:2px 0 0;color:var(--muted);font-size:15px}
.idtop .role{color:var(--ink);font-size:17px;font-weight:600}
.idlinks{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:12px}
.idlinks li{display:flex;align-items:center;gap:12px;font-size:16px;word-break:break-word}
.idlinks a{text-decoration:none}
.idlinks a:hover{text-decoration:underline;text-underline-offset:4px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* إيموجي التلويح 👋 على ركن الكارت */
.wave{position:absolute;top:-20px;right:20px;font-size:36px;line-height:1;transform-origin:70% 70%}
.idwrap.open .wave{animation:wave 1.3s .5s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(16deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.idclose{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;width:44px;height:44px;padding:0;border-radius:50%;background:var(--glass-bg-strong);color:var(--ink);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer}
.idclose svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.idactions{display:flex;gap:14px;justify-content:center}
.idwrap .idcard,.idwrap .ibtn{color:var(--ink)}

/* ===== رسالة toast صغيرة + تقليل الحركة ===== */
.toast-msg{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3000}
.toast-msg.show{opacity:1;transform:translate(-50%,0)}