/* ==========================================================================
   شاشة الباقات — ثلاث بطاقات في صفّ، بإيقاع خاصّ بنا.

   الصفّ الثلاثي مقصود: يُرى كاملاً بلا تمرير فلا تضيع باقة تحت الطيّة.
   والتمييز عن الشكل الشائع يأتي من التفاصيل لا من قلب التخطيط:

     • المميَّزة بشريط علويّ لا برفعها فوق أخواتها.
     • السعر في سطر واحد مع المشطوب، لا رقم ضخم يتوسّط البطاقة.
     • المجانية بإطار متقطّع: بداية لا منافِس.
     • أربع مزايا ظاهرة والباقي مطويّ.

   ولا يُمسّ ملف المصمم: كل ما هنا تحت .pl-* ويُحمَّل بعده،
   والمتغيّرات من ملفه فتبقى الهوية واحدة.
   ========================================================================== */

.pl-x {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* stretch لا start: البطاقات الثلاث بارتفاع واحد مهما اختلف محتواها،
       فالمجانية بلا سعر مشطوب ولا شارة توفير وكانت تقصُر عن أختيها. */
    align-items: stretch;
}

.pl-c {
    position: relative;
    border: 1.5px solid var(--line, #e6e9f0);
    border-radius: 16px;
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s;
    background: var(--paper, transparent);
}
.pl-c:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line, #e6e9f0)) }

/* المجانية: إطار متقطّع — إشارة بصرية إلى أنها بداية لا اشتراك */
.pl-c.pl-free { border-style: dashed }

/* المميَّزة: شريط علويّ لا رفعة — فتبقى البطاقات الثلاث بارتفاع واحد */
.pl-c.pl-best { border-color: var(--brand) }
.pl-c.pl-best::before {
    content: ""; position: absolute; inset-inline: -1.5px; top: -1.5px; height: 4px;
    background: var(--brand); border-radius: 16px 16px 0 0;
}
.pl-tag {
    position: absolute; top: -10px; inset-inline-start: 18px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--brand); color: #fff;
}

.pl-c h3 { margin: 4px 0 5px; font-size: 17px }
.pl-who { margin: 0 0 14px; font-size: 12.5px; opacity: .66; line-height: 1.55; min-height: 34px }

/* كتلة السعر بارتفاع محجوز: المجانية بلا مشطوب ولا شارة توفير، فبدون
   حجز يصعد زرّها عن أختيه ولا تستقيم البطاقات على خطّ واحد. */
.pl-price { min-height: 92px; display: flex; flex-direction: column; justify-content: flex-start }
.pl-amt { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 3px }
.pl-amt b { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1 }
.pl-amt s { font-size: 13px; opacity: .42; font-weight: 600 }
.pl-per { font-size: 12px; opacity: .6; margin-bottom: 10px; line-height: 1.5 }
.pl-save { display: inline-block; font-size: 11.5px; font-weight: 700; align-self: flex-start }

.pl-c .btn { width: 100%; margin-bottom: 14px }

/* المزايا تتمدّد لتملأ ما تبقّى، فتستوي أطراف البطاقات السفلى */
.pl-feat {
    list-style: none; margin: 0; padding: 12px 0 0;
    border-top: 1px solid var(--line, #eef1f6);
    flex: 1 1 auto;
}
.pl-feat li { display: flex; gap: 7px; align-items: flex-start; padding: 4px 0; font-size: 12.5px; opacity: .84; line-height: 1.5 }
.pl-feat svg { flex: none; margin-top: 3px; color: var(--brand) }

/* بقية المزايا مطويّة — تفتح مكانها بلا مغادرة الشاشة */
.pl-more { margin-top: 8px }
.pl-more summary {
    cursor: pointer; font-size: 12px; font-weight: 650;
    color: var(--brand); list-style: none; padding: 3px 0;
}
.pl-more summary::-webkit-details-marker { display: none }
.pl-more[open] summary { margin-bottom: 4px }
.pl-more .pl-feat { border: 0; padding-top: 4px; flex: none }

/* ── الجوّال ──
   عمود واحد: ثلاث بطاقات بعرض 360px تُقرأ بخطّ لا يُقرأ.
   وترتيب DOM هو بيسك ثم ادفانس ثم برو، وهو الترتيب الصحيح للتمرير:
   يبدأ بالمجاني ويتدرّج صعوداً. */
@media (max-width: 900px) {
    .pl-x { grid-template-columns: 1fr; gap: 14px }

    /* الارتفاع المحجوز لا لزوم له في عمود واحد — يترك فراغاً بلا سبب */
    .pl-price { min-height: 0 }
    .pl-who { min-height: 0 }

    .pl-c { padding: 18px 18px 16px }
    .pl-c.pl-best { order: -1 }   /* المميَّزة أولاً حين تُقرأ واحدة تلو أخرى */
    .pl-tag { inset-inline-start: 16px }

    /* على الجوّال تُطوى كل المزايا خلف الملخّص، فلا تطول الصفحة بلا داعٍ */
    .pl-feat li { font-size: 13px; padding: 5px 0 }
}

/* الشاشات الضيّقة جداً */
@media (max-width: 380px) {
    .pl-c { padding: 16px 14px 14px }
    .pl-amt b { font-size: 23px }
}