/*
Theme Name:   ptshop-child
Theme URI:    https://ptshop.potentialtop.com
Description:  PTShop is a multi-purpose theme that offers the ultimate PotentialTop and PtopCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       potentialtop
Author URI:   https://www.potentialtop.com
Template:     ptshop
Version:      1.0
Text Domain:  ptshop-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, ptopcommerce, shop, elementor, business, corporate, blog, news, light, dark
*/
/*
 * تصميم احترافي لتفاصيل التحويل المصرفي
 * يدعم CSS3
 */

.ptopcommerce-bacs-bank-details {
    background-color: #f9f9f9; /* خلفية فاتحة للسكشن بالكامل */
    border: 1px solid #eee; /* حدود خفيفة */
    border-radius: 8px; /* حواف دائرية */
    padding: 30px; /* مسافة داخلية */
    max-width: 1200px; /* زيادة أقصى عرض للسكشن لاستيعاب 3 أعمدة */
    margin: 30px auto; /* توسيط السكشن مع مسافة علوية وسفلية */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* ظل خفيف لإضافة عمق */
    direction: rtl; /* دعم اللغة العربية */
    text-align: right; /* محاذاة النص لليمين */

    /* استخدام CSS Grid لتخطيط الكتل */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 أعمدة بشكل افتراضي على الشاشات الكبيرة */
    gap: 20px; /* المسافة بين الكتل */
}

.wc-bacs-bank-details-heading {
    grid-column: 1 / -1; /* لجعل العنوان يمتد عبر جميع الأعمدة في الـ Grid */
    font-size: 28px; /* حجم عنوان السكشن */
    color: #333; /* لون داكن للعنوان */
    margin-bottom: 30px; /* مسافة أسفل العنوان */
    text-align: center; /* توسيط العنوان */
    position: relative;
    padding-bottom: 15px; /* مسافة للخط السفلي */
}

.wc-bacs-bank-details-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* طول الخط السفلي */
    height: 3px; /* سمك الخط السفلي */
    background-color: #007bff; /* لون مميز للخط */
    border-radius: 2px;
}

.bacs-account-block {
    background-color: #fff; /* خلفية بيضاء لكل بلوك حساب */
    border: 1px solid #e0e0e0; /* حدود أفتح */
    border-radius: 6px; /* حواف دائرية */
    padding: 20px 25px; /* مسافة داخلية */
    /* margin-bottom: 20px; تم إزالته لأنه تم استبداله بالـ gap في الـ grid */
    transition: all 0.3s ease; /* تأثير انتقال سلس عند التفاعل */
    display: flex; /* استخدام Flexbox لترتيب العناصر داخل البلوك */
    flex-direction: column; /* ترتيب عمودي للعناصر داخل البلوك */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ظل خفيف للبلوك */
    /* تأكد من أن ارتفاع الكتل متساوٍ (اختياري، قد يتأثر بمحتوى كل بلوك) */
    align-items: stretch;
}

.bacs-account-block:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* ظل أكبر عند التحويم */
    transform: translateY(-3px); /* حركة رفع خفيفة عند التحويم */
}

.wc-bacs-bank-details-account-name {
    font-size: 22px; /* حجم اسم الحساب */
    color: #007bff; /* لون مميز لاسم الحساب */
    margin-top: 0;
    margin-bottom: 15px; /* مسافة أسفل اسم الحساب */
    border-bottom: 2px solid #f0f0f0; /* خط فاصل أسفل الاسم */
    padding-bottom: 10px;
}

.wc-bacs-bank-details {
    list-style: none; /* إزالة النقاط الافتراضية للقائمة */
    margin: 0;
    padding: 0;
    font-size: 17px; /* حجم خط تفاصيل الحساب */
    color: #555; /* لون نص تفاصيل الحساب */
    flex-grow: 1; /* للسماح للقائمة بأن تأخذ المساحة المتبقية داخل البلوك */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* توزيع العناصر بالتساوي */
}

.wc-bacs-bank-details li {
    margin-bottom: 12px; /* مسافة بين عناصر القائمة */
    display: flex; /* استخدام Flexbox لتوزيع العناصر */
    align-items: center; /* محاذاة رأسية للعناصر */
    text-align: right;
    border-radius: 6px;
    background: #f2f2f2;
    justify-content: space-between; /* توزيع المساحة بين النص والزر */
    padding: 6px 10px;
    border-bottom: 1px dashed #e9e9e9; /* خط منقط خفيف */
}

.wc-bacs-bank-details li:last-child {
    margin-bottom: 0;
    border-bottom: none; /* إزالة الخط السفلي لآخر عنصر */
}

.wc-bacs-bank-details li strong {
    color: #333; /* لون أغمق للأرقام والأسماء المهمة */
    background: #e7e7e7;
    font-weight: 600; /* خط سميك قليلاً */
    flex-grow: 1; /* السماح للنص بأخذ المساحة المتبقية */
    text-align: center; /* محاذاة الأرقام لليسار */
    padding: 7px; /* مسافة بين الرقم وزر النسخ */
    border-radius: 6px;
}

/* زر النسخ */
.et-copy-bacs-btn {
    background-color: #28a745; /* لون أخضر جذاب */
    color: #fff; /* نص أبيض */
    border: none;
    padding: 8px 15px;
    border-radius: 5px; /* حواف دائرية للزر */
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0; /* منع الزر من الانكماش */
}

.et-copy-bacs-btn:hover {
    background-color: #218838; /* لون أخضر أغمق عند التحويم */
    transform: translateY(-1px); /* رفع خفيف للزر */
}

.et-copy-bacs-btn:active {
    background-color: #1e7e34; /* لون أخضر أغمق عند الضغط */
    transform: translateY(0); /* إعادة الزر لمكانه عند الضغط */
}

/* التجاوبية (Responsive Design) */
@media (max-width: 1024px) { /* شاشات اللابتوب الأصغر والتالبت الأفقي */
    .ptopcommerce-bacs-bank-details {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2 عمود على الشاشات المتوسطة */
        max-width: 900px;
    }
}

@media (max-width: 768px) { /* شاشات التابلت العمودي */
    .ptopcommerce-bacs-bank-details {
        grid-template-columns: 1fr 1fr; /* 2 عمود على التابلت (صريح) */
        padding: 20px;
        margin: 20px 15px; /* تقليل الهامش على الشاشات الأصغر */
        max-width: 100%; /* السماح بأخذ كامل العرض */
    }

    .wc-bacs-bank-details-heading {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .bacs-account-block {
        padding: 15px 20px;
    }

    .wc-bacs-bank-details-account-name {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .wc-bacs-bank-details {
        font-size: 16px;
    }

    .wc-bacs-bank-details li {
        flex-direction: column; /* ترتيب عمودي للعناصر على الشاشات الصغيرة */
        align-items: flex-end; /* محاذاة لليمين للنص وزر النسخ */
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .wc-bacs-bank-details li strong {
        text-align: right; /* محاذاة النص لليمين */
        padding-right: 0;
        margin-bottom: 8px; /* مسافة بين الرقم والزر */
        width: 100%; /* جعل الرقم يأخذ كامل العرض */
    }

    .et-copy-bacs-btn {
        width: 100%; /* جعل الزر يأخذ كامل العرض */
        text-align: center;
        font-size: 14px;
        padding: 10px;
    }
}

@media (max-width: 480px) { /* شاشات الجوال */
    .ptopcommerce-bacs-bank-details {
        grid-template-columns: 1fr; /* عمود واحد على الجوالات الصغيرة جدًا */
        padding: 15px;
        margin: 15px 10px;
    }

    .wc-bacs-bank-details-heading {
        font-size: 22px;
    }

    .bacs-account-block {
        padding: 15px;
    }

    .wc-bacs-bank-details-account-name {
        font-size: 18px;
    }
}