/**
 * AtreMahdi Original Badge - Modern Stylesheet
 * Version: 2.0.0
 *
 * پشتیبانی کامل از:
 * - متغیرهای CSS داینامیک (رنگ و فونت از تنظیمات)
 * - ۶ استایل مدرن
 * - ۵ موقعیت مختلف روی تصویر
 * - سازگاری با ووکامرس و وودمارت
 * - RTL کامل
 */

/* ===== Variables (به‌روزرسانی می‌شود توسط PHP) ===== */
:root {
    --atm-primary: #7c3aed;
    --atm-secondary: #ec4899;
    --atm-accent: #06b6d4;
    --atm-text: #ffffff;
    --atm-font: 'Vazirmatn', 'Tahoma', sans-serif;
    --atm-font-size: 12px;
    --atm-font-weight: 700;
    --atm-padding-y: 6px;
    --atm-padding-x: 14px;
    --atm-radius: 999px;
}

/* ===== Base Badge ===== */
.atremahdi-ob-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 6px;
    font-family: var(--atm-font);
    direction: rtl;
    line-height: 1.4;
    position: relative;
    z-index: 5;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: atm-fade-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.atremahdi-ob-badge[data-lang="en"] {
    font-family: var(--atm-font);
    direction: ltr;
}

.atremahdi-ob-badge-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--atm-padding-y) var(--atm-padding-x);
    border-radius: var(--atm-radius);
    font-family: var(--atm-font);
    font-size: var(--atm-font-size);
    font-weight: var(--atm-font-weight);
    line-height: 1.4;
    color: var(--atm-text);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    isolation: isolate;
}

.atremahdi-ob-badge:hover .atremahdi-ob-badge-inner {
    transform: translateY(-2px) scale(1.04);
}

.atremahdi-ob-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--atm-font-size) + 2px);
    height: calc(var(--atm-font-size) + 2px);
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.atremahdi-ob-badge-icon svg {
    width: 100%;
    height: 100%;
}

.atremahdi-ob-badge-text {
    position: relative;
    z-index: 2;
    letter-spacing: 0.2px;
}

.atremahdi-ob-badge-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    z-index: 1;
    pointer-events: none;
    animation: atm-shine 3.5s ease-in-out infinite;
}

@keyframes atm-shine {
    0%, 100% { left: -100%; opacity: 0; }
    20% { opacity: 1; }
    60%, 100% { left: 200%; opacity: 0; }
}

@keyframes atm-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   Overlay Mode - موقعیت‌های مختلف روی تصویر
   z-index بالا برای جلوگیری از رفتن پشت برچسب‌های تخفیف
   ============================================ */
.atremahdi-ob-mode-overlay {
    position: absolute;
    z-index: 99 !important;
    pointer-events: none;
    margin: 0;
}

/* موقعیت بالا-چپ - با فاصله از برچسب‌های تخفیف معمول */
.atremahdi-ob-pos-top-left {
    top: 10px;
    left: 10px;
}

/* موقعیت بالا-راست - پایین‌تر از برچسب تخفیف برای جلوگیری از تداخل */
.atremahdi-ob-pos-top-right {
    top: 50px;
    right: 10px;
}

/* موقعیت پایین-چپ (پیش‌فرض توصیه شده - دور از برچسب‌های تخفیف) */
.atremahdi-ob-pos-bottom-left {
    bottom: 10px;
    left: 10px;
}

/* موقعیت پایین-راست */
.atremahdi-ob-pos-bottom-right {
    bottom: 10px;
    right: 10px;
}

/* موقعیت مرکز */
.atremahdi-ob-pos-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* موقعیت هوشمند - زیر برچسب تخفیف به صورت خودکار توسط JS تنظیم می‌شود */
.atremahdi-ob-pos-smart {
    top: 10px;
    left: 10px;
}

/* اگر برچسب تخفیف در گوشه بالا-راست باشد، این کلاس جایگزین می‌شود */
.atremahdi-ob-pos-smart.has-discount-top-right {
    top: 50px;
    right: 10px;
    left: auto;
}

.atremahdi-ob-pos-smart.has-discount-top-left {
    top: 50px;
    left: 10px;
}

.atremahdi-ob-pos-smart.has-discount-bottom-right {
    bottom: 50px;
    right: 10px;
    top: auto;
}

.atremahdi-ob-pos-smart.has-discount-bottom-left {
    bottom: 50px;
    left: 10px;
    top: auto;
}

/* ===== Inline Mode ===== */
.atremahdi-ob-mode-inline {
    margin-top: 6px;
    margin-bottom: 6px;
    display: inline-flex;
}

.atremahdi-ob-mode-after-title {
    display: block;
    margin: 8px 0;
}

/* ===== Price Mode - نمایش بج کنار قیمت ===== */
.atremahdi-ob-mode-price {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: 8px;
    margin-inline-end: 4px;
    position: relative;
    top: -2px;
}

/* در صفحه آرشیو وودمارت - بج کنار قیمت */
.product .price,
.products .product .price,
.woocommerce-LoopProduct-link .price,
.product-grid-item .price,
.woodmart-product-grid-item .price,
.wc-block-grid__product-price {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* اطمینان از نمایش صحیح بج کنار قیمت در صفحه تکی */
.single-product .price,
.single-product p.price,
.single-product .woocommerce-Price-amount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* اگر قیمت داخل wrapper باشد */
.price > .atremahdi-ob-mode-price,
p.price > .atremahdi-ob-mode-price {
    margin-inline-start: 8px;
    margin-inline-end: 0;
}

/* در حالت hover وودمارت */
.woodmart-hover-content .atremahdi-ob-mode-price,
.product-image-flip + * .atremahdi-ob-mode-price {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* در لیست محصولات وودمارت با چیدمان مختلف */
.products-grid .atremahdi-ob-mode-price,
.products-elements .atremahdi-ob-mode-price {
    margin-inline-start: 6px;
}

/* ===== Mini Mode ===== */
.atremahdi-ob-mode-mini .atremahdi-ob-badge-inner {
    padding: 3px 8px;
    font-size: 10px;
}

.atremahdi-ob-mode-mini .atremahdi-ob-badge-icon {
    width: 10px;
    height: 10px;
}

/* ===== Preview Mode ===== */
.atremahdi-ob-mode-preview {
    transform: scale(1.4);
    margin: 20px;
}

/* ============================================
   1. AURORA STYLE
   ============================================ */
.atremahdi-ob-style-aurora .atremahdi-ob-badge-inner {
    background: linear-gradient(135deg,
        var(--atm-primary, #7c3aed) 0%,
        var(--atm-secondary, #ec4899) 35%,
        var(--atm-primary, #7c3aed) 70%,
        var(--atm-accent, #06b6d4) 100%);
    background-size: 300% 300%;
    box-shadow:
        0 4px 20px rgba(124, 58, 237, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    animation: atm-aurora 6s ease infinite;
    backdrop-filter: blur(4px);
}

@keyframes atm-aurora {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ============================================
   2. NEON GLOW STYLE
   ============================================ */
.atremahdi-ob-style-neon .atremahdi-ob-badge-inner {
    background: rgba(15, 15, 35, 0.85);
    color: #fff;
    border: 1.5px solid var(--atm-accent, #06b6d4);
    box-shadow:
        0 0 8px var(--atm-accent, #06b6d4),
        0 0 16px rgba(6, 182, 212, 0.6),
        0 0 24px rgba(124, 58, 237, 0.4),
        inset 0 0 8px rgba(6, 182, 212, 0.2);
    text-shadow:
        0 0 6px var(--atm-accent, #06b6d4),
        0 0 12px rgba(6, 182, 212, 0.8);
    animation: atm-neon-pulse 2s ease-in-out infinite;
    backdrop-filter: blur(6px);
}

@keyframes atm-neon-pulse {
    0%, 100% {
        box-shadow:
            0 0 8px var(--atm-accent, #06b6d4),
            0 0 16px rgba(6, 182, 212, 0.6),
            0 0 24px rgba(124, 58, 237, 0.4),
            inset 0 0 8px rgba(6, 182, 212, 0.2);
    }
    50% {
        box-shadow:
            0 0 12px var(--atm-accent, #06b6d4),
            0 0 24px rgba(6, 182, 212, 0.9),
            0 0 36px rgba(124, 58, 237, 0.6),
            inset 0 0 12px rgba(6, 182, 212, 0.4);
    }
}

/* ============================================
   3. GLASS STYLE
   ============================================ */
.atremahdi-ob-style-glass .atremahdi-ob-badge-inner {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 32px rgba(124, 58, 237, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    position: relative;
}

.atremahdi-ob-style-glass .atremahdi-ob-badge-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
    border-radius: var(--atm-radius) var(--atm-radius) 0 0;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   4. HOLOGRAPHIC STYLE
   ============================================ */
.atremahdi-ob-style-holographic .atremahdi-ob-badge-inner {
    background: linear-gradient(
        45deg,
        #ff006e 0%,
        #ffbe0b 14%,
        #8338ec 28%,
        #3a86ff 42%,
        #06ffa5 56%,
        #ff006e 70%,
        #ffbe0b 84%,
        #8338ec 100%
    );
    background-size: 400% 400%;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 4px 20px rgba(255, 0, 110, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    animation: atm-holographic 4s linear infinite;
    position: relative;
}

@keyframes atm-holographic {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.atremahdi-ob-style-holographic .atremahdi-ob-badge-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: atm-holo-shine 3s ease-in-out infinite;
    border-radius: var(--atm-radius);
    pointer-events: none;
    z-index: 1;
}

@keyframes atm-holo-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   5. GRADIENT BORDER STYLE
   ============================================ */
.atremahdi-ob-style-gradient-border .atremahdi-ob-badge-inner {
    background: #0f0f1e;
    color: #fff;
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.atremahdi-ob-style-gradient-border .atremahdi-ob-badge-inner::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    z-index: -1;
    background: conic-gradient(
        from var(--atm-angle, 0deg),
        var(--atm-primary, #7c3aed),
        var(--atm-secondary, #ec4899),
        var(--atm-accent, #06b6d4),
        var(--atm-primary, #7c3aed)
    );
    animation: atm-rotate-border 4s linear infinite;
}

@property --atm-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes atm-rotate-border {
    0% { --atm-angle: 0deg; }
    100% { --atm-angle: 360deg; }
}

/* ============================================
   6. MINIMAL GLOW STYLE
   ============================================ */
.atremahdi-ob-style-minimal-glow .atremahdi-ob-badge-inner {
    background: #ffffff;
    color: var(--atm-primary, #7c3aed);
    border: 1px solid rgba(124, 58, 237, 0.2);
    box-shadow:
        0 2px 8px rgba(124, 58, 237, 0.15),
        0 0 0 4px rgba(124, 58, 237, 0.05);
    text-shadow: none;
    font-weight: 600;
}

.atremahdi-ob-style-minimal-glow .atremahdi-ob-badge-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--atm-primary), var(--atm-secondary), var(--atm-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.atremahdi-ob-style-minimal-glow .atremahdi-ob-badge-icon {
    color: var(--atm-primary, #7c3aed);
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.6));
}

/* ============================================
   سازگاری با قالب وودمارت و ووکامرس
   ============================================ */

/* در محصول آرشیو */
.woodmart-hover-content .atremahdi-ob-badge,
.product-grid-item .atremahdi-ob-badge,
.products .product .atremahdi-ob-badge,
.products > li .atremahdi-ob-badge,
.woodmart-product-grid-item .atremahdi-ob-badge,
.wc-block-grid__product .atremahdi-ob-badge,
.type-product .atremahdi-ob-badge {
    pointer-events: none;
}

/* اطمینان از relative بودن container تصویر محصول */
.product-image,
.product-element-image,
.product-image-flip,
.woocommerce-LoopProduct-link,
.attachment-shop_catalog,
.woodmart-product-grid-item__image,
.product-item,
.product .product-image,
.product .attachment-shop_catalog,
.wc-block-grid__product-image {
    position: relative;
}

/* در صفحه محصول تکی */
.single-product .product-image-summary .atremahdi-ob-mode-overlay,
.single-product .woocommerce-product-gallery .atremahdi-ob-mode-overlay,
.single-product .product-images .atremahdi-ob-mode-overlay {
    z-index: 8;
}

/* سازگاری با بج‌های خود وودمارت و ووکامرس - بج اورجینال بالاتر از همه */
.product-labels,
.woodmart-product-labels,
.onsale,
.product-label.onsale,
.product-labels .onsale,
.wd-product-labels,
.product-label,
.wd-product-label {
    z-index: 5 !important;
}

/* بج اورجینال همیشه بالاترین z-index */
.atremahdi-ob-badge,
.atremahdi-ob-mode-overlay {
    z-index: 99 !important;
}

/* اطمینان از اینکه container تصویر relative است */
.product .product-image,
.product .product-element-image,
.product-image-flip,
.woocommerce-LoopProduct-link .product-image,
.attachment-shop_catalog,
.woodmart-product-grid-item__image,
.product-item .product-image {
    position: relative;
}

/* در دکمه سبد */
.atremahdi-ob-mode-mini {
    display: inline-flex;
    margin-inline-end: 8px;
}

/* روی تصویر محصول */
.product-image-flip .atremahdi-ob-mode-overlay,
.product-image > .atremahdi-ob-mode-overlay {
    z-index: 8;
}

/* اطمینان از نمایش بج بالای تصویر */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper {
    position: relative;
}

/* ============================================
   Animations - چرخش متن
   ============================================ */
@keyframes atm-text-out {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes atm-text-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.atremahdi-ob-badge-text.rotating-out {
    animation: atm-text-out 0.4s ease forwards;
}

.atremahdi-ob-badge-text.rotating-in {
    animation: atm-text-in 0.4s ease forwards;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .atremahdi-ob-badge *,
    .atremahdi-ob-badge-shine,
    .atremahdi-ob-badge-inner {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .atremahdi-ob-badge-inner {
        font-size: calc(var(--atm-font-size) * 0.92);
        padding: calc(var(--atm-padding-y) * 0.83) calc(var(--atm-padding-x) * 0.78);
    }

    .atremahdi-ob-mode-overlay {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        bottom: auto !important;
    }

    .atremahdi-ob-pos-top-right {
        left: auto !important;
        right: 8px !important;
    }

    .atremahdi-ob-pos-bottom-left {
        top: auto !important;
        bottom: 8px !important;
    }

    .atremahdi-ob-pos-bottom-right {
        top: auto !important;
        left: auto !important;
        right: 8px !important;
        bottom: 8px !important;
    }

    .atremahdi-ob-mode-preview {
        transform: scale(1.2);
    }
}

@media (max-width: 480px) {
    .atremahdi-ob-badge-inner {
        font-size: calc(var(--atm-font-size) * 0.83);
        padding: calc(var(--atm-padding-y) * 0.66) calc(var(--atm-padding-x) * 0.66);
    }

    .atremahdi-ob-mode-mini {
        display: none;
    }
}

/* ============================================
   Dark Mode Support
   ============================================ */
@media (prefers-color-scheme: dark) {
    .atremahdi-ob-style-minimal-glow .atremahdi-ob-badge-inner {
        background: rgba(30, 30, 45, 0.9);
        color: #c4b5fd;
    }
}

/* ============================================
   High Contrast
   ============================================ */
@media (prefers-contrast: high) {
    .atremahdi-ob-badge-inner {
        border: 2px solid currentColor;
    }
}

/* ============================================
   Utility - hide badges that fail
   ============================================ */
.atremahdi-ob-badge:empty,
.atremahdi-ob-badge .atremahdi-ob-badge-text:empty {
    display: none !important;
}

/* نمایش بج فقط وقتی متن دارد */
.atremahdi-ob-badge:not(:has(.atremahdi-ob-badge-text:not(:empty))) {
    display: none;
}