/*
 * aq-subscribe.css — أفكار القدرات
 * صفحة الاشتراك /subscribe/.
 *
 * معزولة بالكامل تحت .aq-sub — لا قاعدة عامة واحدة، ولا !important
 * إلا حيث يفرضه القالب على الروابط.
 *
 * الألوان والمسافات من نظام التصميم (aq-design-system.css) عبر
 * متغيّرات --aq-ds-*، فلا لوحة ألوان ثانية هنا. القيم المحلية الوحيدة
 * قيم تخطيط خاصة بالبطاقة.
 *
 * ═══ ثلاث محاذيات مضمونة بلا ارتفاع ثابت ولا JavaScript ═══
 *   الارتفاع  — الشبكة تُمدّد العناصر (align-items:stretch).
 *   السعر     — أول كتلتين (المدة ثم السعر) بارتفاع نصّي واحد في
 *               البطاقات الأربع، فالسعر يقع على الخط نفسه تلقائياً.
 *   الزر      — مدفوع إلى قاع البطاقة بـmargin-top:auto، فبطاقة الشهر
 *               (بلا سطر توفير) تبقى محاذية لأخواتها بلا نص حشو.
 *
 * أي قاعدة تفرض margin-top رقمياً على .aq-sub__form أو .aq-sub__cta
 * تكسر المحاذاة الثالثة. المسافة الدنيا فوق الزر تأتي من margin-bottom
 * على قائمة المزايا لا من margin-top على الزر.
 */

/* padding-top صغير عمداً: صفحة /subscribe/ تجلس داخل قسم Elementor له
   حشوته العلوية الخاصة، فحشوتنا تُضاف فوقها. الباقي من الفراغ يُضبط من
   إعدادات القسم في Elementor، لا من هنا — لا نكتب قاعدة خارج .aq-sub. */
.aq-sub{
    direction:rtl;
    width:min(1180px,100%);
    margin:0 auto;
    padding:8px 20px 64px;

    font-family:'Tajawal',Tahoma,Arial,sans-serif;
    color:var(--aq-ds-ink,#16182B);
    box-sizing:border-box;
}

.aq-sub *{ box-sizing:border-box; }

/* ── الترويسة ─────────────────────────────────────────────────────── */

.aq-sub__head{
    text-align:center;
    margin:0 0 24px;
}

.aq-sub__title{
    margin:0 0 10px;
    font-size:30px;
    font-weight:700;
    line-height:1.3;
    color:var(--aq-ds-ink,#16182B);
}

.aq-sub__lead{
    margin:0;
    font-size:16px;
    line-height:1.7;
    color:var(--aq-ds-ink-soft,#5B5F73);
}

.aq-sub__status{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin:18px 0 0;
    padding:10px 18px;

    font-size:14px;
    line-height:1.6;

    color:var(--aq-ds-color-success-deep,#15803D);
    background:var(--aq-ds-color-success-soft,#F0FBF4);
    border:1px solid var(--aq-ds-color-success-border,#C8ECD3);
    border-radius:var(--aq-ds-radius-pill,999px);
}

.aq-sub__status .ti{ font-size:18px; }

/* ── الشبكة ───────────────────────────────────────────────────────── */

.aq-sub__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    align-items:stretch;
}

@media (max-width:1100px){
    .aq-sub__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px){
    .aq-sub__grid{ grid-template-columns:1fr; gap:16px; }
    .aq-sub{ padding:6px 16px 48px; }
    .aq-sub__title{ font-size:25px; }
}

/* ── البطاقة ──────────────────────────────────────────────────────── */

.aq-sub__card{
    position:relative;
    display:flex;
    flex-direction:column;

    padding:26px 22px 22px;

    background:var(--aq-ds-surface,#FFFFFF);
    border:1px solid var(--aq-ds-line,#E9EAF1);
    border-radius:var(--aq-ds-radius-lg,16px);

    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.aq-sub__card:hover{
    border-color:var(--aq-ds-color-primary-border,#DCD6FA);
    box-shadow:0 10px 28px rgba(22,24,43,.08);
    transform:translateY(-2px);
}

.aq-sub__card--best{
    border-color:var(--aq-ds-color-primary,#6C5CE7);
    box-shadow:0 10px 30px rgba(108,92,231,.12);
}

.aq-sub__badge{
    position:absolute;
    top:-12px;
    inset-inline-start:22px;

    padding:5px 14px;

    font-size:12px;
    font-weight:700;
    line-height:1.5;
    white-space:nowrap;

    color:#FFFFFF;
    background:var(--aq-ds-color-primary,#6C5CE7);
    border-radius:var(--aq-ds-radius-pill,999px);
}

/* ── المدة ────────────────────────────────────────────────────────── */

/* أول عنصر في البطاقة، فلا فاصل علوي — الفاصل انتقل إلى عنوان القائمة.
   ارتفاعه ثابت (سطران) في البطاقات الأربع، ولذلك يقع السعر تحته على
   الخط نفسه في كلٍّ منها بلا أي قيمة ثابتة مفروضة. */
.aq-sub__duration{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.aq-sub__duration-label{
    font-size:13px;
    color:var(--aq-ds-ink-muted,#9498A8);
}

.aq-sub__duration-value{
    font-size:18px;
    font-weight:700;
    color:var(--aq-ds-ink,#16182B);
}

/* ── السعر ────────────────────────────────────────────────────────── */

/* السعر المشطوب يقع على سطر السعر نفسه لا فوقه: سطر إضافي كان سيزيح
   السعر لأسفل في البطاقات المخصومة وحدها، فتنكسر محاذاة الأسعار الأربعة
   حين تنطبق القسيمة على بعض الخطط دون بعض. */
.aq-sub__price{
    display:flex;
    align-items:baseline;
    gap:9px;
    flex-wrap:wrap;

    margin:8px 0 0;

    font-size:32px;
    font-weight:700;
    line-height:1.25;
    color:var(--aq-ds-ink,#16182B);
}

.aq-sub__price-was{
    font-size:16px;
    font-weight:600;
    color:var(--aq-ds-ink-muted,#9498A8);
    text-decoration-thickness:1px;
}

.aq-sub__plan-note{
    margin:9px 0 0;

    font-size:12.5px;
    line-height:1.6;
    color:var(--aq-ds-ink-muted,#9498A8);
}

/* wc_price تُخرج <span class="woocommerce-Price-amount"><bdi>…  */
.aq-sub__price .woocommerce-Price-amount{ font-size:inherit; font-weight:inherit; }
.aq-sub__price .woocommerce-Price-currencySymbol{ font-size:.62em; font-weight:600; margin-inline-start:4px; }
.aq-sub__price-was .woocommerce-Price-currencySymbol{ font-size:.8em; }

/* ── التوفير ──────────────────────────────────────────────────────── */

/* سطر واحد ملتصق بمحتواه لا صندوق ممتد بعرض البطاقة: كان يشغل سطرين
   (~62px) لأن العرض الكامل يجبر النص على الالتفاف، ويسحب انتباهاً أكبر
   من السعر نفسه فوقه. align-self:flex-start هو ما يمنع تمدُّده — عنصر
   flex يرث stretch على المحور العرضي، وinline-flex وحده لا يكفي لأن
   عناصر flex تُحوَّل إلى block. */
.aq-sub__save{
    display:flex;
    align-self:flex-start;
    align-items:baseline;
    gap:7px;

    margin:10px 0 0;
    padding:4px 11px;

    font-size:13px;
    line-height:1.7;
    white-space:nowrap;

    color:var(--aq-ds-color-success-deep,#15803D);
    background:var(--aq-ds-color-success-soft,#F0FBF4);
    border:1px solid var(--aq-ds-color-success-border,#C8ECD3);
    border-radius:var(--aq-ds-radius-pill,999px);
}

.aq-sub__save-pct{ font-weight:700; }

.aq-sub__save-sep{ opacity:.45; }

.aq-sub__save-amount{ font-weight:600; }
.aq-sub__save-amount .woocommerce-Price-amount{ font-weight:600; }
.aq-sub__save-amount .woocommerce-Price-currencySymbol{ font-size:.88em; margin-inline-start:2px; }

/* ── قائمة ما يشمله الاشتراك ──────────────────────────────────────── */

/* الفاصل هنا لا فوق المدة: القسم العلوي (مدة/سعر/توفير) هو ما يختلف
   بين البطاقات، وما تحته متطابق — فالخط يفصل المتغيّر عن الثابت. */
.aq-sub__includes-title{
    margin:18px 0 10px;
    padding-top:18px;
    border-top:1px solid var(--aq-ds-line,#E9EAF1);

    font-size:13.5px;
    font-weight:700;
    line-height:1.6;
    color:var(--aq-ds-ink,#16182B);
}

.aq-sub__features{
    list-style:none;
    margin:0 0 22px;   /* أدنى مسافة مضمونة قبل الزر مهما بلغ الفراغ. */
    padding:0;
}

.aq-sub__feature{
    display:flex;
    align-items:center;
    gap:9px;

    padding:5px 0;

    font-size:14.5px;
    line-height:1.6;
    color:var(--aq-ds-ink-soft,#5B5F73);
}

.aq-sub__feature .ti{
    flex:0 0 auto;
    font-size:17px;
    color:var(--aq-ds-color-success,#16A34A);
}

/* ── كود الخصم ────────────────────────────────────────────────────── */

.aq-sub__coupon{
    width:min(420px,100%);
    margin:0 auto 26px;
}

.aq-sub__coupon-label{
    display:block;
    margin:0 0 7px;

    font-size:13px;
    font-weight:600;
    color:var(--aq-ds-ink-soft,#5B5F73);
}

.aq-sub__coupon-row{
    display:flex;
    gap:8px;
}

.aq-sub__coupon-input{
    flex:1 1 auto;
    min-width:0;

    height:44px;
    padding:0 13px;

    font-family:inherit;
    font-size:14.5px;
    color:var(--aq-ds-ink,#16182B);

    background:var(--aq-ds-surface,#FFFFFF);
    border:1px solid var(--aq-ds-line,#E9EAF1);
    border-radius:var(--aq-ds-radius-md,12px);
}

.aq-sub__coupon-input:focus{
    outline:none;
    border-color:var(--aq-ds-color-primary,#6C5CE7);
}

.aq-sub__coupon-btn{
    flex:0 0 auto;

    height:44px;
    padding:0 22px;

    font-family:inherit;
    font-size:14.5px;
    font-weight:700;

    color:var(--aq-ds-color-primary-deep,#5B4FCF);
    background:var(--aq-ds-surface,#FFFFFF);
    border:1px solid var(--aq-ds-color-primary-border,#DCD6FA);
    border-radius:var(--aq-ds-radius-md,12px);
    cursor:pointer;
}

.aq-sub__coupon-btn:hover{
    background:#F6F4FF;
}

.aq-sub__coupon-msg{
    display:flex;
    align-items:center;
    gap:7px;

    margin:9px 0 0;

    font-size:13px;
    line-height:1.6;
}

.aq-sub__coupon-msg .ti{ flex:0 0 auto; font-size:16px; }

.aq-sub__coupon-msg--ok{  color:var(--aq-ds-color-success-deep,#15803D); }
.aq-sub__coupon-msg--bad{ color:#B4232A; }

/* ── زر الشراء ────────────────────────────────────────────────────── */

/* الزر إمّا <button> داخل نموذج (مسجَّل) أو <a> إلى الدخول (زائر).
   النموذج هو من يُدفع إلى قاع البطاقة، فتتساوى الارتفاعات في الحالتين. */
.aq-sub__form{
    margin-top:auto;
    padding:0;
    border:0;
}

.aq-sub__cta,
.aq-sub__cta:link,
.aq-sub__cta:visited{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:48px;
    margin-top:auto;
    padding:0 16px;

    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;

    font-family:inherit;
    font-size:15.5px;
    font-weight:700;
    text-decoration:none;

    color:#FFFFFF !important;
    background:var(--aq-ds-color-primary,#6C5CE7);
    border:none;
    border-radius:var(--aq-ds-radius-md,12px);

    transition:background .16s ease;
}

.aq-sub__cta:hover,
.aq-sub__cta:focus{
    color:#FFFFFF !important;
    background:var(--aq-ds-color-primary-deep,#5B4FCF);
}

.aq-sub__cta:focus-visible{
    outline:2px solid var(--aq-ds-color-primary-deep,#5B4FCF);
    outline-offset:2px;
}

/* ⚠️ كانت هنا أربع قواعد بمُحدِّد شقيق (.aq-sub__price + .aq-sub__form …)
   تفرض margin-top:22px، فتهزم margin-top:auto أعلاه — نفس الأولوية
   وأسبقية الترتيب. أثرها أن بطاقة الشهر الواحد (بلا سطر توفير) يصعد
   زرها فلا يقع على خط الأزرار. حُذفت، والمسافة الدنيا مضمونة أصلاً من
   margin-bottom:22px على قائمة المزايا، ولا انهيار هوامش داخل flex. */

/* ── رسالة خطأ عائدة من معالج الشراء ── */

.aq-sub__error{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin:18px 0 0;
    padding:10px 18px;

    font-size:14px;
    line-height:1.6;

    color:#B84F45;
    background:#FFF4F2;
    border:1px solid #F2BDB6;
    border-radius:var(--aq-ds-radius-pill,999px);
}

.aq-sub__error .ti{ font-size:18px; }

/* ── التذييل والحالات الفارغة ─────────────────────────────────────── */

.aq-sub__note{
    margin:30px 0 0;
    text-align:center;

    font-size:13.5px;
    line-height:1.7;
    color:var(--aq-ds-ink-muted,#9498A8);
}

.aq-sub--empty{
    padding:48px 20px;
    text-align:center;
    font-size:15px;
    color:var(--aq-ds-ink-muted,#9498A8);
}