/*
 * Offer Plugin — استایل سمت فروشگاه (نسخه‌ی ۲: تنوع بصری)
 * قبلاً همه‌ی بج‌ها یک شکل داشتند: جعبه/پیلِ لبه‌گرد. این نسخه به هر بج
 * یک هویت بصریِ متفاوت و معنادار می‌دهد:
 *   - خرید اقساطی  → شکل «بلیت/کوپن» با دندانه‌های نیم‌دایره روی خط جداکننده
 *   - تخفیف نقدی   → شکل «برچسبِ قیمت» با یک سوراخِ واقعی گوشه‌ی بج
 *   - اصالت کالا   → آیکن «سپر» به‌جای دایره
 *   - روبان کارت   → شکل «تگِ نوک‌تیز» به‌جای پیلِ ساده
 *   - ارسال رایگان → شکل «پیکان/برچسبِ حمل» به‌جای پیلِ ساده
 */

/* ---------- پایه‌ی مشترک همه‌ی بج‌های صفحه‌ی محصول ---------- */
.op-badge {
    box-sizing: border-box;
    margin: 10px 0 0;
    padding: 12px 14px;
    font-family: inherit;
    text-align: right;
    line-height: 1.5;
}

/* ===================================================================
   خرید اقساطی — شکل «بلیت/کوپن» آبی، با دندانه‌های نیم‌دایره روی خط جدا
   =================================================================== */
.op-badge--installment {
    position: relative;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    overflow: visible;
}
.op-badge-main { display: flex; align-items: center; gap: 10px; }
.op-badge-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px; /* مربع گردشده، نه دایره — برای تمایز از آیکن اصالت کالا */
    background: #2563eb;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}
.op-badge--installment .op-badge-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.op-badge--installment .op-badge-content strong { font-size: 14px; color: #1e3a8a; }
.op-badge--installment .op-badge-content span { font-size: 12.5px; color: #475569; }
.op-badge--installment .op-badge-content span bdi { font-weight: bold; color: #1e40af; }

.op-badge-footer {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #93c5fd;
    font-size: 12.5px;
    color: #475569;
}
.op-badge-footer b { color: #1e3a8a; }
/* دندانه‌های نیم‌دایره‌ی دو طرفِ خط جداکننده — حس واقعیِ «کوپن کندنی» */
.op-badge-footer::before,
.op-badge-footer::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #93c5fd;
}
.op-badge-footer::before { right: -21px; }
.op-badge-footer::after  { left: -21px; }

/* ===================================================================
   تشویق به خرید نقدی — شکل «برچسب قیمت» با سوراخ واقعی گوشه‌ی سمت راست
   =================================================================== */
.op-badge--cash {
    position: relative;
    background: #f0fdf4;
    border: 1px solid #86efac;
    text-align: center;
    border-radius: 4px 14px 14px 4px;
    padding-right: 22px;
}
.op-badge--cash::before {
    /* سوراخِ برچسبِ قیمت */
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #86efac;
    transform: translateY(-50%);
}
.op-badge-pill {
    display: inline-block;
    background: #1fa855;
    color: #fff;
    padding: 5px 16px 5px 18px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: bold;
    line-height: 1.6;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.op-badge-price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.op-badge-price-now { font-size: 17px; font-weight: bold; color: #14532d; }
.op-badge-price-old { font-size: 12.5px; color: #9aa8a1; text-decoration: line-through; }
.op-badge-savings { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #86efac; color: #166534; font-size: 12.5px; }
.op-badge-savings bdi { font-weight: bold; color: #15803d; }

/* ===================================================================
   اصالت کالا — آیکن «سپر» به‌جای دایره‌ی معمول
   =================================================================== */
.op-badge--auth.op-auth-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eff9f1;
    border: 1px solid #a7e3b4;
    border-radius: 6px;
}
.op-auth-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 34px;
    background: #1fa855;
    color: #fff;
    clip-path: polygon(50% 0%, 100% 22%, 100% 62%, 50% 100%, 0% 62%, 0% 22%);
}
.op-auth-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-auth-text strong { font-size: 13.5px; color: #14532d; }
.op-auth-text span { font-size: 12px; color: #3f6b4a; }

.op-auth-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1fa855;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px 6px 8px;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}

/* ---------- نوار تمام‌عرض «خرید نقدی» ---------- */
.op-cash-banner {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: 700;
    background: var(--op-banner-bg, #1a1a1a);
    color: var(--op-banner-color, #fff);
    border: 2px solid var(--op-banner-border, #e5433c);
    border-radius: 4px;
    margin: 8px 0 0;
    line-height: 1.5;
}
.op-cash-banner bdi { color: inherit; font-weight: 700; }
.op-cash-banner-normal { font-size: clamp(10px, 2.6vw, 12px); padding: 5px 8px; }
.op-cash-banner-large { font-size: clamp(12.5px, 3.4vw, 16px); padding: 9px 12px; }
.op-cash-banner-product { margin-top: 14px; }

/* ===================================================================
   بج کوچک خرید اقساطی روی کارت محصول — چیپِ مستطیلی با لبه‌ی بریده
   =================================================================== */
.op-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 4px 10px 4px 12px;
    background: var(--op-pill-bg, #2563eb);
    color: var(--op-pill-color, #fff);
    font-size: clamp(9.5px, 2.6vw, 11px);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%);
}
.op-card-pill-dot {
    width: 5px;
    height: 5px;
    background: currentColor;
    opacity: .9;
    flex: 0 0 auto;
    transform: rotate(45deg); /* الماس، نه دایره */
}

/* ===================================================================
   متن «قیمت نقدی» زیر قیمت، روی کارت محصول
   =================================================================== */
.op-card-cash-price {
    margin: 4px 0 2px;
    font-size: clamp(11px, 2.8vw, 12.5px);
    line-height: 1.5;
    color: #52606d;
}
.op-card-cash-price bdi {
    font-weight: 700;
    color: var(--op-card-cash-color, #e5433c);
}

/* موقعیت‌های چهارگانه/شش‌گانه‌ی گوشه‌ی کارت — مشترک بین همه‌ی بج‌های کارت */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
    position: relative;
    overflow: visible;
}
.op-badge-corner {
    position: absolute;
    z-index: 9;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    pointer-events: none;
}
.op-badge-pos-top-right     { top: 10px; right: 10px; }
.op-badge-pos-top-left      { top: 10px; left: 10px; }
.op-badge-pos-top-center    { top: 10px; left: 50%; transform: translateX(-50%); }
.op-badge-pos-bottom-right  { bottom: 10px; right: 10px; }
.op-badge-pos-bottom-left   { bottom: 10px; left: 10px; }
.op-badge-pos-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }

/* حذف بج پیش‌فرض «Sale!» قالب، چون روبانِ ما جایش را می‌گیرد */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
ul.products li.product .onsale {
    display: none !important;
}

/* ===================================================================
   بج ارسال رایگان روی کارت محصول — شکل «پیکان/برچسب حمل»
   =================================================================== */
.op-free-shipping-badge {
    color: #fff;
    background: #2271b1;
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 1.3;
    padding: 4px 14px 4px 8px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

/* بج تخفیف پرداخت نقدی کنار عنوان درگاه، در صفحه‌ی تسویه‌حساب */
.op-checkout-discount-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    padding: 2px 10px 2px 6px;
    margin-right: 6px;
    display: inline-block;
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}

/* فاصله‌ی استاندارد دور دکمه‌ی «افزودن به سبد خرید» در صفحه‌ی محصول */
.single-product .woocommerce div.product form.cart { margin-bottom: 16px; }
.single-product .woocommerce div.product form.cart .quantity { margin-left: 10px; margin-bottom: 8px; }
.single-product .woocommerce div.product form.cart .button,
.single-product .woocommerce div.product form.cart .single_add_to_cart_button { margin-bottom: 8px; }

@media (max-width: 480px) {
    .op-badge-pos-top-right,
    .op-badge-pos-top-left,
    .op-badge-pos-top-center { top: 6px; }
    .op-badge-pos-bottom-right,
    .op-badge-pos-bottom-left,
    .op-badge-pos-bottom-center { bottom: 6px; }
    .op-badge-pos-top-right,
    .op-badge-pos-bottom-right { right: 6px; }
    .op-badge-pos-top-left,
    .op-badge-pos-bottom-left { left: 6px; }
    .op-free-shipping-badge,
    .op-auth-ribbon { font-size: 9.5px; padding: 3px 10px 3px 6px; }
}