/* ===========================================================================
   SKD Birdy — تجديد بصري: اتجاه عصري نظيف
   ---------------------------------------------------------------------------
   يُحمَّل بعد refresh.css فيتجاوزه ويتجاوز الثيم، دون تعديل أي منهما.
   للتراجع: احذف سطر تحميله من head.blade.php ويعود الشكل السابق كما كان.

   ملاحظة مهمة: الثيم يضبط جذر الخط على 62.5% أي 1rem = 10px،
   لذا كل القيم هنا بالبكسل لتظهر بالحجم المقصود.
   =========================================================================== */

:root {
    /* مقياس مسافات موحّد بدل قيم متفرّقة */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
}

/* ---------------------------------------------------------------------------
   1) الخطوط والعناوين
   الثيم يستخدم Marcellus (خط زخرفي بلا دعم للعربية والتركية) في العناوين
   الرئيسية، فتظهر الحروف التركية بأشكال غير متّسقة والعربية بخط بديل.
   نوحّد كل شيء على Jost، وهو خط الواجهة الأساسي أصلاً.
--------------------------------------------------------------------------- */

.hero-section-v2 .signle-banner .hero-title,
.popular-categories-area-v2 .catagory-left .catagory-title,
.section-header-two .section-title,
.blog-area-v2 .blog-area-top .blog-left-title,
.single-grid-blog-v2 .blog-info .blog-category,
.single-grid-blog-v2 .blog-info .blog-title,
.section-title,
.page-title,
.checkout-title,
.widget-title,
h1, h2, h3, h4, h5, h6 {
    font-family: "Jost", -apple-system, "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.015em;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* مقياس عناوين متدرّج ومتجاوب */
.section-header-two .section-title,
.section-header-area .section-title,
.section-title {
    font-size: clamp(24px, 18px + 1.2vw, 34px);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--sp-2);
}

/* الفاصل الصغير تحت عناوين الأقسام */
.section-header-two { margin-bottom: var(--sp-6); }

/* الثيم يرسم خطّين زخرفيين على يمين العنوان ويساره بمسافة ثابتة
   (±100px) محسوبة لحجم الخط القديم، فيمرّان فوق النص بعد تكبيره
   ويبدوان كخط شطب. نستبدلهما بخط واحد أنيق تحت العنوان. */
.section-header-two .section-title::before,
.section-header-two .section-title::after {
    display: none;
}

.section-header-two.text-center .section-title,
.section-header-two .section-title {
    position: relative;
    padding-bottom: 14px;
    display: inline-block;
}

.section-header-two .section-title::after {
    display: block;
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    top: auto;
    right: auto;
    left: 50%;
}

/* ---------------------------------------------------------------------------
   2) الترويسة
--------------------------------------------------------------------------- */

.header-area-v2 {
    border-bottom: 1px solid var(--line);
}

/* الشريط العلوي: كان النص برتقالياً كاملاً فيتنافس مع الأزرار */
.header-area-v2 .header-top {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.header-area-v2 .header-top a,
.header-area-v2 .header-top span,
.header-area-v2 .header-top li {
    color: var(--ink-2);
}

.header-area-v2 .header-top a:hover { color: var(--brand); }

/* حقل البحث: كان خطاً سفلياً فقط فلا يبدو حقلاً */
.header-area-v2 .search-area .form-control,
.header-middle .search-area .form-control {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    padding: 11px 44px 11px 18px;
    height: auto;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.header-area-v2 .search-area .form-control:focus,
.header-middle .search-area .form-control:focus {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(236, 128, 33, .12);
}

.direction-rtl .header-area-v2 .search-area .form-control,
.direction-rtl .header-middle .search-area .form-control {
    padding: 11px 18px 11px 44px;
}

/* أيقونات الحساب والسلة */
.header-area-v2 .single-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--ink-2);
    transition: background .2s var(--ease), color .2s var(--ease);
}

.header-area-v2 .single-btn:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

/* شارة العدّاد فوق الأيقونة بدل جوارها */
.header-area-v2 .btn-list .item-count,
.header-area-v2 .single-item .item-count {
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 999px;
    text-align: center;
    padding: 0 5px;
}

/* شريط التنقّل */
.header-area-v2 .menu-area .main-menu > li > a,
.menu-area .main-menu > li > a {
    font-size: 15px;
    font-weight: 600;
    padding: 16px 14px;
    color: var(--ink);
    position: relative;
}

.header-area-v2 .menu-area .main-menu > li > a:hover,
.menu-area .main-menu > li > a:hover { color: var(--brand); }

/* مؤشّر سفلي للعنصر النشط بدل تلوين النص فقط */
.menu-area .main-menu > li.active > a::after,
.menu-area .main-menu > li > a.active::after {
    content: "";
    position: absolute;
    inset-inline: 14px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

/* ---------------------------------------------------------------------------
   3) البطل — كان طويلاً بفراغ كبير وبلا دعوة قوية للشراء
--------------------------------------------------------------------------- */

.hero-section-v2 {
    background: linear-gradient(180deg, var(--surface-2) 0%, #fdf8f3 100%);
    border-radius: 0;
}

.hero-section-v2 .signle-banner {
    /* كان padding رأسياً ضخماً يترك مساحة مهدورة */
    padding-block: clamp(28px, 4vw, 56px);
}

.hero-section-v2 .hero-section-wrap { background: transparent; }

.hero-section-v2 .signle-banner .hero-title,
.hero-section-v2 .hero-title {
    font-size: clamp(30px, 20px + 2.2vw, 52px);
    font-weight: 600;
    line-height: 1.12;
    margin-bottom: 14px;
}

.hero-section-v2 .signle-banner .hero-text,
.hero-section-v2 .hero-text {
    font-size: clamp(15px, 14px + .3vw, 17px);
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 50ch;
    margin-bottom: 22px;
}

/* زر البطل: كان مفرّغاً باهتاً؛ صار الدعوة الأوضح في الصفحة */
.hero-section-v2 .hero-btn .secondary-btn,
.hero-section-v2 .signle-banner .secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(236, 128, 33, .25);
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.hero-section-v2 .hero-btn .secondary-btn:hover,
.hero-section-v2 .signle-banner .secondary-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(236, 128, 33, .3);
}

.hero-section-v2 .hero-image {
    max-height: 420px;
    width: auto;
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .hero-section-v2 .hero-image { max-height: 260px; }

    /* العنوان كان يتجاوز حدود الشاشة على الهواتف الضيقة؛
       الثيم يفرض حجماً ثابتاً بمُحدِّد أكثر تخصيصاً. */
    .hero-section-v2 .signle-banner .hero-title,
    .hero-section-v2 .hero-title {
        font-size: clamp(22px, 15px + 3.2vw, 30px);
        line-height: 1.22;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .hero-section-v2 .signle-banner .hero-text,
    .hero-section-v2 .hero-text {
        font-size: 14.5px;
        max-width: 100%;
    }

    .hero-section-v2 .hero-btn .secondary-btn,
    .hero-section-v2 .signle-banner .secondary-btn {
        padding: 12px 22px;
        font-size: 14.5px;
    }
}

/* ---------------------------------------------------------------------------
   4) شريط الثقة — تنعيم وربطه بالبطل
--------------------------------------------------------------------------- */

.trust-strip {
    border-top: 0;
    margin-top: -1px;
}

.trust-item__icon {
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(236, 128, 33, .14);
}

/* ---------------------------------------------------------------------------
   5) بطاقات المنتجات
--------------------------------------------------------------------------- */

.single-product,
.single-grid-product,
.single-grid-product-v2 {
    border-radius: var(--r-md);
    border-color: var(--line);
    position: relative;
    overflow: hidden;
}

.single-product:hover,
.single-grid-product:hover,
.single-grid-product-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .10);
    border-color: #e2e6ea;
}

/* الصورة على خلفية محايدة بنسبة ثابتة */
.single-product .product-thumbnal,
.single-grid-product .product-thumbnal,
.single-grid-product-v2 .product-thumbnal {
    padding: 16px;
    background: #fafbfc;
}

/* اسم المنتج أوضح */
.single-product .product-name,
.single-grid-product .product-name,
.single-grid-product-v2 .product-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* السعر: الحالي أبرز والقديم أخفت */
.single-product .product-price .price,
.single-grid-product .product-price .price,
.single-grid-product-v2 .product-price .price {
    font-size: 18px;
    font-weight: 700;
}

.single-product .product-price .regular-price,
.single-grid-product .product-price .regular-price,
.single-grid-product-v2 .product-price .regular-price {
    font-size: 13px;
}

/* زر السلة: كان مستطيلاً صلباً يملأ البطاقة ويتجاوز حوافها.
   نحصره داخل حشوة البطاقة بعرض محسوب لا 100% مطلق. */
.single-product .product-info,
.single-grid-product .product-info,
.single-grid-product-v2 .product-info {
    padding-inline: 14px;
    padding-bottom: 16px;
}

/* الثيم يفرض عرضاً ثابتاً (312px، و250px دون 1200px) على زر السلة،
   وهو أوسع من البطاقة فيتجاوز حوافها. نجعله يتبع عرض البطاقة. */
.single-grid-product-v2 .product-info .add-cart,
.single-grid-product .product-info .add-cart,
.single-product .product-info .add-cart,
.single-product .add-cart,
.single-grid-product .add-cart,
.single-grid-product-v2 .add-cart {
    border-radius: 999px;
    font-size: 14px;
    padding: 11px 16px;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    box-sizing: border-box;
}

@media (max-width: 1199px) {
    .single-grid-product-v2 .product-info .add-cart { width: 100%; }
}

.single-product .add-cart:hover,
.single-grid-product .add-cart:hover,
.single-grid-product-v2 .add-cart:hover {
    box-shadow: 0 4px 14px rgba(236, 128, 33, .28);
}

/* شارات الخصم أنعم */
.product-flag {
    border-radius: 7px;
    font-size: 11px;
    padding: 4px 8px;
    letter-spacing: .01em;
}

/* أزرار المفضّلة/المقارنة تظهر بنعومة */
.single-product .prdouct-btn-wrapper .product-btn,
.single-grid-product .prdouct-btn-wrapper .product-btn,
.single-grid-product-v2 .prdouct-btn-wrapper .product-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   5b) آراء العملاء
   الثيم يرسم البطاقة كحبّة سوداء (#222 مع border-radius: 500px) ويكتب
   النص والاسم بالأبيض فوقها. نحوّلها إلى بطاقة بيضاء هادئة بحدّ خفيف،
   فيجب معها إعادة تلوين النص والاسم وإلا صارا أبيض على أبيض.
--------------------------------------------------------------------------- */

.testimonial-area-v2 .single-testimonial {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: 32px 28px 36px;
}

/* القوس الفاتح خلف الصورة كان يُقصّ دائرةً لتفصل الصورة عن الخلفية
   السوداء؛ لم يعد له معنى على بطاقة بيضاء. */
.testimonial-area-v2 .single-testimonial .testimonial-top {
    padding-top: 0;
    margin-bottom: 18px;
}

.testimonial-area-v2 .single-testimonial .testimonial-top::before {
    display: none;
}

.testimonial-area-v2 .single-testimonial .testimonial-top .testimonial-image {
    width: 76px;
    height: 76px;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-1);
}

.testimonial-area-v2 .single-testimonial .testimonial-content {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.testimonial-area-v2 .single-testimonial .testimonial-title {
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
}

.testimonial-area-v2 .single-testimonial .testimonial-review .review-item.active {
    color: var(--accent);
}

/* عنوان القسم كان برتقالياً بالكامل */
.testimonial-area-v2 .section-title { color: var(--ink); }

/* ---------------------------------------------------------------------------
   6) التذييل — كان كتلة رمادية بلا تسلسل واضح
--------------------------------------------------------------------------- */

.footer-area,
.footer-area-v2 {
    background: #14181d;
    color: #aab2bd;
    border-top: 0;
}

/* التذييل داكن الآن، فكل نص بداخله يجب أن يكون فاتحاً.
   الثيم يلوّن روابط الخدمات برمادي داكن فتكاد تختفي. */
.footer-area a,
.footer-area-v2 a,
.footer-area p,
.footer-area-v2 p,
.footer-area li,
.footer-area-v2 li,
.footer-area span,
.footer-area-v2 span,
.footer-area .footer-list li a,
.footer-area-v2 .footer-list li a,
.footer-area-v2 .menu-list li a,
.footer-area-v2 .widget-menu .menu-list a,
.footer-area-v2 .single-widget a,
.footer-area-v2 .single-widget p,
.footer-area-v2 .single-widget li,
.footer-widget a,
.footer-widget li,
.footer-widget p,
.footer-widget span {
    color: #c3cbd4;
}

/* عناوين أعمدة التذييل */
.footer-area-v2 .widget-title,
.footer-area .widget-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

/* الثيم يلوّن روابط التذييل بـ #0d0d0d (شبه أسود) بمُحدِّد رباعي،
   وكان مقبولاً على تذييل فاتح؛ صار غير مقروء بعد تحويله للداكن.
   (لاحظ خطأ إملائي في اسم الصنف داخل الثيم: meni-item) */
.footer-area-v2 .footer-widget-area .widget-menu .meni-item .menu-link,
.footer-area-v2 .footer-widget-area .widget-menu .menu-item .menu-link,
.footer-area-v2 .footer-widget-area .about-widget .address-text,
.footer-area-v2 .footer-widget-area .about-widget .block-content .contact {
    color: #c3cbd4;
}

.footer-area-v2 .footer-widget-area .widget-menu .meni-item .menu-link:hover,
.footer-area-v2 .footer-widget-area .widget-menu .menu-item .menu-link:hover {
    color: var(--brand);
}

.footer-area-v2 .menu-list li a:hover,
.footer-area-v2 .single-widget a:hover { color: var(--brand); }

/* شعار المتجر كان على مربّع أبيض صريح داخل تذييل داكن */
.footer-area-v2 .footer-brand-logo img,
.footer-area .footer-brand-logo img {
    background: rgba(255, 255, 255, .92);
    border-radius: var(--r-sm);
    padding: 10px 14px;
}

.footer-area a:hover,
.footer-area-v2 a:hover { color: var(--brand); }

.footer-area .footer-title,
.footer-area-v2 .footer-title,
.footer-area h3,
.footer-area-v2 h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

/* روابط التذييل بمسافات مريحة */
.footer-area .footer-list li,
.footer-area-v2 .footer-list li { margin-bottom: 9px; }

.footer-area .footer-list li a,
.footer-area-v2 .footer-list li a {
    font-size: 14px;
    transition: color .2s var(--ease), padding-inline-start .2s var(--ease);
}

.footer-area .footer-list li a:hover,
.footer-area-v2 .footer-list li a:hover { padding-inline-start: 4px; }

/* أيقونات التواصل */
.footer-area .social-list a,
.footer-area-v2 .social-list a,
.social-links a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #cfd6de;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.footer-area .social-list a:hover,
.footer-area-v2 .social-list a:hover,
.social-links a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* شريط الحقوق السفلي */
.footer-bottom,
.copyright-area {
    border-top: 1px solid rgba(255, 255, 255, .10);
    color: #8b949e;
    font-size: 13px;
}

/* شرائح طرق الدفع على خلفية داكنة */
.footer-area .payment-method-chip,
.footer-area-v2 .payment-method-chip {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #cfd6de;
}

.footer-area .payment-method-chip i,
.footer-area-v2 .payment-method-chip i { color: var(--brand); }

/* ---------------------------------------------------------------------------
   7) إيقاع المسافات العام
--------------------------------------------------------------------------- */

.section { padding-block: clamp(32px, 4vw, 64px); }

/* ---------------------------------------------------------------------------
   8) لمسات صغيرة
--------------------------------------------------------------------------- */

/* الماركات: تهدأ رمادية وتتلوّن عند المرور */
.brads-area-v2 .sigle-brad img { height: 46px; }

/* شريط التمرير الأفقي للأقسام المتحرّكة */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-2) !important;
    box-shadow: var(--shadow-1);
}

.owl-carousel .owl-nav button:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}