/* ==========================================================
   كثافة العرض — تقليل الفراغ الرأسي وتصغير النص
   ----------------------------------------------------------
   القياس على صفحة بطاقة أظهر ارتفاعاً ٢٤٦٢px، وأكبر مستهلكيه
   فراغٌ لا محتوى: هوامش الأقسام، وحشوة الفوتر، وهامش سفلي ٢٥px
   تحت كل عمود، وحشوة ١٣px فوق كل زر وتحته.
   النص يُصغَّر ١٢٪ — وسط المدى الذي طلبه المالك (١٠–١٥٪).
   يُحمَّل بعد أنماط الصفحة ليغلبها، ولهذا !important في مواضع:
   كثير من القيم مكتوب داخل سمة style في PHP، ولا يُغلَب بغيرها.
   ========================================================== */

/* ---------- النص: تصغير ١٢٪ ---------- */
h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 25px; }
h3, .h3 { font-size: 21px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 15px; }

body {
    font-size: 14px;
}

.btn,
button:not(.close) {
    font-size: 14px;
}

.section-title,
.customizer-title {
    font-size: 21px !important;
}

.customizer-subtitle,
.section-subtitle {
    font-size: 14px !important;
}

/* ---------- الفراغ الرأسي ---------- */
.section,
.customizer-section {
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

.customizer-card {
    padding: 18px !important;
}

/* هامش سفلي تحت كل عمود: ٢٥px مضروبة في عدد الأعمدة تصنع
   فراغاً ظاهراً في صفحة بأربعة صفوف. */
.row > [class*="col-"] {
    margin-bottom: 14px;
}

.form-group {
    margin-bottom: 12px;
}

.btn-card-action {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.entity-hero-section {
    padding-top: 22px !important;
    padding-bottom: 10px !important;
}

.entity-footer {
    margin-top: 24px !important;
    padding-top: 14px !important;
}

.footer-col-title {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    padding-bottom: 5px !important;
}

.footer-bottom-bar {
    margin-top: 16px !important;
    padding-top: 10px !important;
}

/* ==========================================================
   مكوّن صندوق وبانر «موقعنا» الموحد لجميع الصفحات
   ----------------------------------------------------------
   البطاقة بأكملها رابط تفاعلي (<a class="website-cta-box">).
   لوحة السهم لوحة نحيفة بارتفاع البطاقة كاملاً على الحاسوب،
   وتتحول إلى شريط بعرض كامل في أسفل البطاقة على الجوال.
   ========================================================== */
.website-cta-wrapper {
    margin: 20px auto 10px auto;
    width: 100%;
    max-width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* لمنع مضاعفة الهوامش الجانبية حين يكون المكوّن داخل حاوية مقيدة ومحشوة مسبقاً (المدونة، الجهة، البطاقة) */
.container .website-cta-wrapper,
.blog-archive-container .website-cta-wrapper,
.blog-archive-wrapper .website-cta-wrapper,
.article-content .website-cta-wrapper {
    max-width: 1140px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.website-cta-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: none !important;
    box-shadow: 0 0 0 1.5px #e2e8f0, 0 2px 12px rgba(0, 0, 0, 0.04);
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    transition: all 0.25s ease;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

.website-cta-box:hover,
.website-cta-box:focus {
    box-shadow: 0 0 0 1.5px var(--brand-color, #2948c9), 0 8px 24px rgba(var(--brand-rgb, 41, 72, 201), 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    color: inherit !important;
    text-decoration: none !important;
}

.website-cta-box:active {
    transform: translateY(0);
    box-shadow: 0 0 0 1.5px var(--brand-color, #2948c9), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.website-cta-main {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 16px;
}

.website-cta-thumb {
    width: 109px;
    height: 109px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.website-cta-box:hover .website-cta-thumb {
    border-color: rgba(var(--brand-rgb, 41, 72, 201), 0.35);
    box-shadow: 0 2px 8px rgba(var(--brand-rgb, 41, 72, 201), 0.08);
}

.website-cta-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    border: none !important;
    box-shadow: none !important;
    display: block;
}

.website-cta-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    text-align: right;
}

.website-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--brand-rgb, 41, 72, 201), 0.1);
    color: var(--brand-color, #2948c9);
    font-size: 11px !important;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 15px;
    margin-bottom: 4px;
}

.website-cta-title {
    font-size: 15px !important;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.website-cta-desc {
    font-size: 12.5px !important;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}


.visitorscounter {
    margin-top: 14px !important;
}

/* ---------- مربعات الإدخال ---------- */
.form-control-custom,
.live-field-input,
.dynamic-line-input,
.table-grid-cell-input,
.cardy-box-input {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* نص المدخلات يبقى ١٦px على الجوال مهما صغّرنا غيره:
   أقل منه يجعل iOS يكبّر الشاشة عند التركيز على أي حقل،
   وهو عطل أوضح للمستخدم من فارق بكسلين. */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---------- شدّ ثانٍ بعد القياس ----------
   الجولة الأولى وفّرت ٦٪ فقط، لأن كثيراً من الهوامش مكتوب داخل سمة
   style في PHP فيغلب الملف. هذه المواضع قيست بعدها وهي التي بقيت
   تستهلك أكبر فراغ. */
.row > [class*="col-"] {
    margin-bottom: 10px !important;
}

.field-group {
    margin-bottom: 8px !important;
}

.customizer-card {
    padding: 14px !important;
}

.entity-meta-chip {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.footer-col-title {
    margin-top: 2px !important;
    margin-bottom: 5px !important;
    padding-bottom: 3px !important;
}

.entity-footer {
    margin-top: 16px !important;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
}

.entity-hero-section {
    padding-top: 16px !important;
    padding-bottom: 6px !important;
}

.section,
.customizer-section {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
}

.footer-bottom-bar {
    margin-top: 10px !important;
    padding-top: 8px !important;
}

/* ==========================================================
   تخطيط الجوال — أربعة مواضع طلبها المالك بعد المعاينة
   ========================================================== */
@media (max-width: 767.98px) {

    /* (١) البحث: الحقل والزر على سطر واحد.
       كان الصندوق ينقلب عمودياً تحت ٥٧٦px فيأخذ الزر عرض الشاشة
       كاملاً ويزيد ارتفاع الصفحة بلا داعٍ — والزر لا يحتاج ذلك. */
    .hero-search-box {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 14px 5px 5px !important;
        border-radius: 40px !important;
    }

    .hero-search-input {
        min-width: 0 !important;
        font-size: 16px !important;
    }

    .hero-search-submit {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 9px 16px !important;
        font-size: 13.5px !important;
        white-space: nowrap;
    }

    /* (٢) التصنيفات: تمتد من الحافة إلى الحافة فلا تبقى فراغات
       متفاوتة على يمين السطر ويساره. كل عنصر يأخذ حصة متساوية من
       سطره بدل أن يتمدّد بعرض نصّه. */
    .cat-nav-pills {
        justify-content: stretch !important;
        gap: 8px !important;
        margin: 12px auto 16px auto !important;
    }

    .cat-nav-pills > li {
        /* العدد يتبع طول النص: ثلاثة إن قصرت الأسماء، واثنان إن
           طالت. الأساس هو عرض المحتوى، والنمو يملأ ما تبقى من
           السطر فلا تظهر فراغات متفاوتة.
           والحد الأدنى ثلثٌ فلا يزيد الصف على ثلاثة، والحد الأعلى
           نصفٌ فلا يتمدد عنصرٌ جاء وحده في سطره بعرض الشاشة. */
        flex: 1 1 auto;
        min-width: calc(33.333% - 6px);
        max-width: calc(50% - 4px);
    }

    /* الغلاف بين الخانة والزر يمتد أيضاً.
       التصنيف ذو القائمة المنسدلة يلفّ زرَّه في .cat-dropdown، فعرض
       الزر ١٠٠٪ كان ينسب إلى الغلاف لا إلى الخانة — والغلاف بعرض
       محتواه. فبدت أزرار القوائم أضيق من غيرها في العمود نفسه. */
    .cat-nav-pills > li > .cat-dropdown {
        width: 100%;
        display: block;
    }

    .cat-pill {
        width: 100%;
        justify-content: center;
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    /* (٣) المميزات: اثنتان في كل سطر. الافتراض col-xs-12 يجعلها
       واحدة تحت الأخرى فيطول القسم بلا مبرر — بطاقة المميزة صغيرة
       ويسعها نصف السطر. */
    .features-section .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 10px !important;
    }

    .feature-card {
        height: 100%;
    }

    /* (٤) البانر الإعلاني على الجوال:
       مظهر موحد يطابق الحاسوب: صورة مصغرة مربعة بإطار أبيض جانبية وبجوارها النص
       (aspect-ratio: 1 / 1 مع احتواء كامل contain دون أي مط أو اقتصاص)،
       وإلغاء لوحة السهم بالكامل ليكون الصندوق بأكمله هو الهدف التفاعلي. */
    .website-cta-box {
        padding: 12px 14px !important;
        align-items: center !important;
    }

    .website-cta-main {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    .website-cta-thumb {
        width: 94px !important;
        height: 94px !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        overflow: hidden !important;
    }

    .website-cta-thumb img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border-radius: 5px !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
    }

    .website-cta-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    .website-cta-title {
        font-size: 14px !important;
    }

    .website-cta-desc {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
        white-space: pre-line !important;
    }
}


/* ==========================================================
   شدّ ثالث — قيس على الجوال والحاسوب بعد ملاحظة المالك
   ==========================================================
   القياس قبل التعديل (٣٧٥px): العنوان ٢٤px، اسم الجهة في الرأس
   والفوتر ٢٠px، وكل مربعات التعبئة ١٦px بارتفاع ٤٦–٥٢px.

   ملاحظة لا تُخالَف: نص المدخلات على الجوال يبقى ١٦px بالضبط.
   أقل منه يجعل iOS يكبّر الصفحة عند التركيز على أي حقل — وهو عطل
   أوضح بكثير من فارق بكسلين. فالتصغير هنا يقع على العناوين
   وعلى ارتفاع المربعات وحشوها، لا على نص المدخل. */

.brand-title-main,
.footer-brand-title {
    font-size: 17px !important;
}

/* القائمة المنسدلة كانت وحدها ١٦px على الحاسوب بينما بقية المربعات
   ١٤٫٥px — فرقٌ يظهر كأنها عنصر من صفحة أخرى. */
@media (min-width: 768px) {
    select.form-control-custom,
    .template-picker-container .template-select {
        font-size: 14.5px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 767.98px) {
    .section-title,
    .customizer-title {
        font-size: 19px !important;
    }

    .brand-title-main,
    .footer-brand-title {
        font-size: 16px !important;
    }

    /* ارتفاع المربعات مضبوط في card-page.css حيث يعيش حارس iOS —
       مصدر واحد لا اثنان. هنا خلية الجدول وحدها لأنها ليست هناك. */
    .table-grid-cell-input {
        min-height: 42px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .cardy-file-drop {
        min-height: 44px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

}

/* ==========================================================
   شدّ رابع — الفوتر والمميزات وزر الموقع
   ==========================================================
   قياس قبل التعديل على ٣٧٥px: روابط الفوتر ١٣٫٥px، وسطر الحقوق
   ١٤px بوزن ٧٠٠ — أثقل من روابط الصفحة نفسها مع أنه أقلّ ما يُقرأ.
   وعناوين المميزات ١٦px ووصفها ١٣px، وعنوان صندوق الموقع ١٨px. */

.footer-links-list a,
.footer-contact-row {
    font-size: 12.5px !important;
}

.footer-col-title {
    font-size: 13.5px !important;
}

/* سطر الحقوق: أصغر وأخفّ وزناً. سطرٌ قانوني لا عنوان. */
.footer-bottom-bar,
.footer-copy-right,
.footer-copy-left,
.footer-bottom-bar a {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.footer-about-text {
    font-size: 12.5px !important;
}

/* المميزات */
.feature-title,
.feature-box h4,
.features-section h3 {
    font-size: 14px !important;
}

.feature-desc,
.feature-box p {
    font-size: 12px !important;
}

.features-title,
.section-title.features-title {
    font-size: 19px !important;
}

/* صندوق «موقعنا»: العنوان والوصف والزر كلها كانت تنافس محتوى
   الصفحة على الانتباه. */
.website-cta-title {
    font-size: 15px !important;
}

.website-cta-desc {
    font-size: 12.5px !important;
    white-space: pre-line;
}

.website-cta-badge {
    font-size: 11px !important;
}

/* ==========================================================
   مكوّن شبكة البطاقات الموحّد (Card Grid)
   ----------------------------------------------------------
   - نسبة موحدة عرضية بنسبة A4 (1754:1240) لكل البلاطات، على طريقة
     my-card.one (بطلب المالك 2026-10-24) فتستوي الصفوف.
   - العرضية تملأ البلاطة، والطولية والمربعة تُعرض كاملة في المنتصف
     (contain) والجانبان بلون التصميم نفسه: المصغّرة المولّدة
     (card_thumb.php) مرسومة بهذا الشكل أصلاً، وقبل توليدها تملأ
     الجانبين نسخة مموّهة من الصورة نفسها (.card-bg-fill).
   - ظل التحويم الافتراضي محايد rgba(0,0,0,0.18)، ويمكن تخصيصه
     عبر متغير --card-hover-shadow ليتوهج بلون الجهة.
   - دعم كامل للشارات: التحميلات، التصنيف، شارة القفل الإداري.
   ========================================================== */
.card-item-box {
    background: transparent;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-img-wrapper {
    position: relative;
    background: #1e293b;
    overflow: hidden;
    display: block;
    width: 100%;
    aspect-ratio: 1754 / 1240;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* الطولية والمربعة تُحتوى كاملة بلا اقتصاص، والجانبان تملؤهما .card-bg-fill: الصورة نفسها
   مكبّرة ومموّهة خلفها، فيأخذ الفراغ لون التصميم لا لوناً ثابتاً. العرضية والمصغّرة المولّدة
   بنسبة البلاطة نفسها فتملأ كما هي. */
.card-item-box:not(.is-landscape):not(.has-thumb) .card-img-wrapper img.card-main-img {
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.card-img-wrapper img.card-bg-fill {
    position: absolute;
    inset: -12%;
    width: 124%;
    height: 124%;
    object-fit: cover;
    filter: blur(22px) saturate(1.1);
    pointer-events: none;
}

.card-item-box:hover .card-img-wrapper {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px var(--card-hover-shadow, rgba(0, 0, 0, 0.18));
    border-color: rgba(var(--brand-rgb), 0.4);
}

.card-img-wrapper a.card-img-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.card-img-wrapper img.card-main-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-item-box:hover .card-img-wrapper img.card-main-img {
    transform: scale(1.04);
}

.card-item-box.is-locked img.card-main-img {
    filter: grayscale(35%) contrast(0.92) opacity(0.85);
}

.card-badge-downs {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    padding: 3px 9px;
    border-radius: 14px;
    font-size: 11.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}

.card-badge-locked {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(220, 38, 38, 0.92);
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 5;
}

.card-badge-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    padding: 3px 9px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
    max-width: calc(50% - 14px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.card-badge-cat:hover {
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    transform: scale(1.03);
}

.card-badge-title {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--brand-color, #2948c9);
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
    z-index: 2;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none !important;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.card-item-box:hover .card-badge-title {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
    filter: brightness(1.08);
}

.card-content-wrapper {
    display: none;
}

/* ==========================================================
   مكوّن بطاقة المحتوى والـ SEO الموحّد (SEO Content Card)
   ========================================================== */
.seo-content-section {
    padding: 20px 0 10px 0;
}

.seo-content-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    text-align: right;
    line-height: 1.8;
    color: #334155;
}

.seo-content-card h2 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.seo-content-card h2 i,
.seo-content-card .seo-card-title-icon {
    color: var(--brand-color, #2948c9);
}

.seo-content-card p,
.seo-card-content p {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 10px;
}

.seo-content-card p:last-child,
.seo-card-content p:last-child {
    margin-bottom: 0;
}

.seo-card-content strong,
.seo-content-card strong {
    color: #1e293b;
    font-weight: 700;
}

.home-articles-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.home-article-item {
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.home-article-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-article-item h3 i {
    color: var(--brand-color, #2948c9);
    font-size: 15px;
}

.home-article-item p {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 0;
}

/* ==========================================================
   مكوّن الحالة الفارغة الموحّد (Empty State Component)
   ========================================================== */
.cardy-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 18px;
    margin-top: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    width: 100%;
    box-sizing: border-box;
}

.cardy-empty-state .empty-state-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
    color: #94a3b8;
    font-size: 30px;
}

.cardy-empty-state h3 {
    color: #1e293b;
    font-weight: 700;
    font-size: 20px;
    margin: 0 auto 10px auto;
    text-align: center !important;
    width: 100%;
}

.cardy-empty-state p {
    color: #64748b;
    font-size: 14px;
    margin: 0 auto 20px auto;
    text-align: center !important;
    max-width: 520px;
    line-height: 1.6;
    width: 100%;
}

.cardy-empty-state p:last-child {
    margin-bottom: 0;
}

.cardy-empty-state .empty-state-action {
    text-align: center !important;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
}

.cardy-empty-state .empty-state-btn {
    background: var(--brand-color, #2948c9);
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 10px 26px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cardy-empty-state .empty-state-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}