/* =========================================
   1. تعریف فونت‌ها (Pinar)
   ========================================= */
@font-face {
    font-family: 'Pinar';
    src: url('../fonts/woff2/Pinar-DS4-Regular.woff2') format('woff2'), url('../fonts/ttf/Pinar-DS4-Regular.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pinar';
    src: url('../fonts/woff2/Pinar-DS4-Medium.woff2') format('woff2'), url('../fonts/ttf/Pinar-DS4-Medium.ttf') format('truetype');
    font-weight: 250;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pinar';
    src: url('../fonts/woff2/Pinar-DS4-Bold.woff2') format('woff2'), url('../fonts/ttf/Pinar-DS4-Bold.ttf') format('truetype');
    font-weight: bold; /* 700 */
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. متغیرهای سراسری (تنظیمات تم)
   ========================================= */
:root {
    /* رنگ‌های اصلی (مشابه دیجی‌کالا یا تم آبی مد نظر شما) */
    --bs-primary: #1b6ec2; /* رنگ اصلی دکمه‌ها و لینک‌ها */
    --bs-primary-hover: #155596; /* رنگ هاور */
    --bs-secondary: #6c757d;
    --bs-body-bg: #fcfcfc; /* رنگ پس‌زمینه کل سایت */
    --bs-card-bg: #ffffff;
    /* تنظیمات متون */
    --font-main: 'Pinar', Tahoma, Arial, sans-serif;
    --text-color: #333333;
    --text-muted: #818181;
}

/* =========================================
   3. تنظیمات پایه و ریسپانسیو فونت
   ========================================= */
html {
    direction: rtl;
    /* سایز پایه فونت برای موبایل */
    font-size: 10px;
}

@media (min-width: 480px) {
    html {
        /* سایز پایه فونت برای لپ‌تاپ و مانیتور بزرگ */
        font-size: 11px;
    }
}

body {
    font-family: var(--font-main);
    background-color: var(--bs-body-bg);
    color: var(--text-color);
    font-size: 1.2rem !important;
    line-height: 2; /* فاصله خطوط برای خوانایی بهتر فارسی */
    text-align: right;
    /* بهبود نمایش فونت */
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* اعمال فونت به تمام ورودی‌ها و دکمه‌ها */
input, button, select, textarea, .btn, .form-control {
    font-family: var(--font-main) !important;
    font-size: 1.1rem;
}

/* =========================================
   4. تایپوگرافی و لینک‌ها
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    margin-bottom: 0.8rem;
    color: #000;
}

a {
    color: inherit; /* ارث‌بری رنگ از والد */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

    a:hover {
        color: var(--bs-primary);
    }

.text-justify {
    text-align: justify;
}

/* =========================================
   5. کلاس‌های کمکی (Utilities)
   ========================================= */

/* سایزهای فونت اختصاصی */
.fs-7 {
    font-size: 1.2rem !important;
}
/* متن‌های کوچک مثل فوتر */
.fs-8 {
    font-size: 1.2rem !important;
}
/* متن‌های خیلی ریز */

/* قیمت و اعداد */
.price-tag {
    font-weight: 200 !important;
    color: var(--text-color);
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.currency {
    font-size: 1.2rem;

    color: var(--text-muted);
    margin-right: 3px;
    font-weight: normal;
}

/* رنگ‌بندی اختصاصی */
.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* =========================================
   6. کامپوننت‌ها (دکمه، کارت، اینپوت)
   ========================================= */

/* دکمه‌ها */
.btn-primary {
    border-radius: 6px !important;
    font-size: 1.15rem;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover {
        background-color: var(--bs-primary-hover);
        border-color: var(--bs-primary-hover);
    }

.btn {
    border-radius: 6px !important; /* گوشه‌های گردتر برای دکمه‌ها */
}

/* کارت‌های محصول (Product Cards) */
.card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--bs-card-bg);
    overflow: hidden;
}

    .card:hover {
        transform: translateY(-5px); /* حرکت به بالا هنگام هاور */
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
        border-color: transparent;
    }

.card-title {
    font-weight: normal !important;
    font-size: 1.2rem;
    line-height: 2.5;
    height: 2.8em; /* محدود کردن ارتفاع تیتر به دو خط */
    overflow: hidden;
}

/* اینپوت‌ها و فرم‌ها */
.form-control {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 0.6rem 1rem;
}

    .form-control:focus {
        box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.15);
        border-color: var(--bs-primary);
    }

/* =========================================
   7. اسکرول‌بار زیبا (فقط برای کروم و اج)
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 8px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* جلوگیری از فوکوس پیش‌فرض زشت مرورگر */
h1:focus, h2:focus, h3:focus, main:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================
   8. راهنمای شناور (Tooltip) سفارشی
   ========================================= */

/* ظرف اصلی که بالون نسبت به آن موقعیت می‌گیرد */
.custom-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* استایل خود بالون که روی دکمه شناور می‌شود */
.tooltip-balloon {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    white-space: nowrap;
    background-color: #dc3545; /* رنگ قرمز استاندارد برای عملیات حذف */
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 4px 10px;
    /* تنظیمات موقعیت شناور */
    position: absolute;
    z-index: 1050; /* عدد بالا برای اطمینان از قرارگیری روی سایر عناصر جدول */
    bottom: 115%; /* فاصله از بالای دکمه */
    left: 50%;
    transform: translateX(-50%) translateY(8px); /* نقطه شروع انیمیشن */

    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* افکت حرکتی نرم و کمی کشسان */
    font-size: 1.1rem; /* هماهنگ با سایز فونت پایه سایت شما */
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); /* سایه همرنگ با بالون */
    pointer-events: none; /* جلوگیری از تداخل با کلیک موس */
}

    /* فلش کوچک (مثلث) زیر بالون */
    .tooltip-balloon::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #dc3545 transparent transparent transparent; /* باید همرنگ پس‌زمینه بالون باشد */
    }

/* نمایش بالون هنگام رفتن موس روی ظرف اصلی */
.custom-tooltip-wrapper:hover .tooltip-balloon {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* حرکت به جایگاه نهایی */
}