/**
 * CSS بطاقات المنتجات ذات الصلة — أناقة المنازل التجارية
 * أضف هذا في: Appearance > Customize > Additional CSS
 * أو في: child-theme/style.css
 * أو عبر wp_head في functions.php
 */

/* ══ متغيرات ══ */
:root {
    --ank-primary   : #1a3c5e;
    --ank-accent    : #f5a623;
    --ank-green     : #2e7d32;
    --ank-green-dk  : #1b5e20;
    --ank-red       : #d32f2f;
    --ank-bg-section: #f5f6f8;
    --ank-card-bg   : #ffffff;
    --ank-text      : #1a1a2e;
    --ank-muted     : #888;
    --ank-radius    : 14px;
    --ank-shadow    : 0 2px 16px rgba(0,0,0,.07);
    --ank-shadow-hv : 0 8px 30px rgba(0,0,0,.14);
}

/* ══ القسم ══ */
.ank-related-section {
    background    : var(--ank-bg-section);
    border-radius : 20px;
    padding       : 36px 20px;
    margin-top    : 48px;
    direction     : rtl;
}

/* ══ العنوان ══ */
.ank-related-title {
    text-align    : center;
    font-size     : clamp(20px, 4vw, 28px);
    font-weight   : 800;
    color         : var(--ank-primary);
    margin-bottom : 28px;
    position      : relative;
    padding-bottom: 14px;
}
.ank-related-title::after {
    content      : '';
    position     : absolute;
    bottom       : 0; left: 50%;
    transform    : translateX(-50%);
    width        : 56px; height: 4px;
    background   : var(--ank-accent);
    border-radius: 2px;
}

/* ══ الشبكة ══ */
.ank-related-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 18px;
}
@media (max-width: 768px) {
    .ank-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 380px) {
    .ank-related-grid { grid-template-columns: 1fr; }
}

/* ══ البطاقة ══ */
.ank-card {
    background    : var(--ank-card-bg);
    border-radius : var(--ank-radius);
    box-shadow    : var(--ank-shadow);
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    position      : relative;
    border        : 1px solid rgba(0,0,0,.06);
    transition    : transform .3s ease, box-shadow .3s ease;
    animation     : ankFadeUp .45s ease both;
}
.ank-card:hover {
    transform : translateY(-6px);
    box-shadow: var(--ank-shadow-hv);
}

/* تأخير ظهور تدريجي */
.ank-card:nth-child(2) { animation-delay: .08s; }
.ank-card:nth-child(3) { animation-delay: .16s; }
.ank-card:nth-child(4) { animation-delay: .24s; }
.ank-card:nth-child(5) { animation-delay: .32s; }
.ank-card:nth-child(6) { animation-delay: .40s; }

@keyframes ankFadeUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0);    }
}

/* ══ شارة الخصم ══ */
.ank-badge {
    position     : absolute;
    top          : 10px;
    right        : 10px;
    background   : var(--ank-red);
    color        : #fff;
    font-size    : 11px;
    font-weight  : 800;
    padding      : 4px 9px;
    border-radius: 20px;
    z-index      : 3;
    box-shadow   : 0 2px 8px rgba(211,47,47,.4);
    letter-spacing: .3px;
}

/* ══ صورة المنتج ══ */
.ank-card-img-wrap {
    display  : block;
    overflow : hidden;
    flex-shrink: 0;
}
.ank-card-img-wrap img,
.ank-card-img {
    width      : 100% !important;
    height     : 190px !important;
    object-fit : cover !important;
    display    : block !important;
    transition : transform .4s ease !important;
}
@media (max-width: 480px) {
    .ank-card-img-wrap img,
    .ank-card-img { height: 145px !important; }
}
.ank-card:hover .ank-card-img-wrap img,
.ank-card:hover .ank-card-img { transform: scale(1.07); }

/* ══ جسم البطاقة ══ */
.ank-card-body {
    padding       : 13px 13px 15px;
    display       : flex;
    flex-direction: column;
    gap           : 7px;
    flex          : 1;
}

/* ══ اسم المنتج ══ */
.ank-card-title {
    font-size         : 13px;
    font-weight       : 700;
    color             : var(--ank-text);
    line-height       : 1.5;
    text-align        : center;
    text-decoration   : none;
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow          : hidden;
    transition        : color .2s;
}
.ank-card-title:hover { color: var(--ank-primary); }

/* ══ النجوم ══ */
.ank-stars {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 2px;
}
.ank-star {
    width : 14px; height: 14px;
    fill  : #ddd;
    stroke: #ddd;
    stroke-width: 1;
}
.ank-star.filled { fill: #f5a623; stroke: #f5a623; }
.ank-stars-count {
    font-size: 11px;
    color    : var(--ank-muted);
    margin-right: 3px;
}

/* ══ السعر ══ */
.ank-card-price {
    text-align: center;
}
.ank-card-price .woocommerce-Price-amount {
    font-size  : 16px;
    font-weight: 800;
    color      : var(--ank-primary);
}
.ank-card-price ins {
    text-decoration: none;
}
.ank-card-price ins .woocommerce-Price-amount {
    font-size  : 16px;
    font-weight: 800;
    color      : var(--ank-primary);
}
.ank-card-price del {
    font-size: 12px;
    color    : var(--ank-muted);
    margin-left: 5px;
    opacity  : .8;
}

/* ══ الأزرار ══ */
.ank-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 6px;
    width          : 100%;
    padding        : 10px 8px;
    border-radius  : 10px;
    font-size      : 13px;
    font-weight    : 700;
    text-align     : center;
    text-decoration: none;
    cursor         : pointer;
    border         : none;
    transition     : background .25s, transform .2s, box-shadow .2s;
    margin-top     : auto;
    box-sizing     : border-box;
}
.ank-btn--cart {
    background: var(--ank-green);
    color     : #fff;
    box-shadow: 0 3px 10px rgba(46,125,50,.3);
}
.ank-btn--cart:hover {
    background: var(--ank-green-dk);
    color     : #fff;
    transform : translateY(-2px);
    box-shadow: 0 5px 16px rgba(46,125,50,.4);
}
.ank-btn--options {
    background: var(--ank-primary);
    color     : #fff;
    box-shadow: 0 3px 10px rgba(26,60,94,.3);
}
.ank-btn--options:hover {
    background: #0d2137;
    color     : #fff;
    transform : translateY(-2px);
}
.ank-btn--disabled {
    background: #e0e0e0;
    color     : var(--ank-muted);
    cursor    : not-allowed;
}

/* ══ تأثير "جاري الإضافة" عبر WooCommerce AJAX ══ */
.ank-btn--cart.loading {
    opacity: .7;
    pointer-events: none;
}
.ank-btn--cart.added {
    background: #388e3c;
}