/* components.css — المكوّنات المشتركة بين صفحة الهبوط ولوحة العميل.
   بطاقات الباقات والأزرار ومفتاح دورة الفوترة تظهر في المكانين، فتُعرَّف
   هنا مرة واحدة. أي تعديل عليها يسري على الصفحتين معًا. */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s,border-color .25s;white-space:nowrap;line-height:1.2;position:relative}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue2)}
.btn-cyan{background:var(--cyan);color:var(--ink)}
.btn-cyan:hover{background:#67E8F9}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#E0F7FB}
.plan .ptop{display:grid;gap:12px}
.plan .price{font-size:40px}
.plan .price small{font-size:13px}
.toggle{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;margin-bottom:36px}
.toggle button{border:0;background:transparent;padding:9px 18px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted);transition:.25s}
.toggle button.on{background:var(--ink);color:#fff}
.toggle .save{font-size:12px;color:#065F46;background:#D1FAE5;border-radius:999px;padding:3px 9px;font-weight:700}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:22px;padding:26px;background:#fff;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .3s,box-shadow .3s,opacity 1s var(--ease)}
.plan:hover{transform:translateY(-4px)!important;box-shadow:0 24px 50px rgba(15,23,42,.08)}
.plan.hot{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 30px 60px rgba(10,10,15,.3)}
.plan.hot .muted{color:#9CA3AF}
.plan.hot li{border-color:rgba(255,255,255,.1)}
.plan .tag{position:absolute;top:-13px;right:26px;background:var(--cyan);color:var(--ink);font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px}
.plan h3{margin:0;font-size:21px}
.plan .muted{color:var(--muted);font-size:13.5px}
.price{font-family:'Rubik';font-size:46px;font-weight:600;line-height:1;display:flex;align-items:baseline;gap:8px}
.price small{font-family:'IBM Plex Sans Arabic';font-size:14px;font-weight:500;color:var(--muted)}
.plan.hot .price small{color:#9CA3AF}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.plan li{display:flex;gap:9px;align-items:center;font-size:14px;padding:7px 0;border-bottom:1px dashed var(--line)}
.plan li svg{color:var(--blue);flex-shrink:0}
.plan.hot li svg{color:var(--cyan)}
.plan .btn{margin-top:auto}
.plan{padding:18px 20px;gap:10px}
.plan li{padding:5px 0;font-size:13.5px}
.plan .price{font-size:34px}