/* ===============================
   Fonts
=============================== */

@font-face {
    font-family: 'YekanBakh';
    src: url('../fonts/YekanBakh-regular.woff2') format('woff2'),
         url('../fonts/YekanBakh-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YekanBakh';
    src: url('../fonts/YekanBakh-semibold.woff2') format('woff2'),
         url('../fonts/YekanBakh-semibold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'YekanBakh';
    src: url('../fonts/YekanBakh-bold.woff2') format('woff2'),
         url('../fonts/YekanBakh-bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'YekanBakh';
    src: url('../fonts/YekanBakh-extrablack.woff2') format('woff2'),
         url('../fonts/YekanBakh-extrablack.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}


/* ===============================
   Variables (Design System)
=============================== */

:root {
    --primary: #0d6efd;
    --bg: #ffffff;
    --surface: #f6f7f9;
    --text: #111;
    --muted: #777;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --shadow-sm: 0 6px 16px rgba(0,0,0,.06);
    --shadow-md: 0 18px 40px rgba(0,0,0,.08);
}

/* ===============================
   Reset & Base
=============================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'YekanBakh';
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    line-height: 1.7;
}

body {
    position: relative;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(39.19% 32.99% at 2.74% 35.4%, rgba(255, 187, 0, .16) 0, rgba(255, 187, 0, 0) 100%),
        radial-gradient(16.02% 16.02% at 100% 31.65%, rgba(35, 65, 223, .08) 0, rgba(35, 65, 223, 0) 100%),
        radial-gradient(110.88% 76.94% at 4.48% 58.84%, rgba(0, 143, 255, .16) 0, rgba(0, 143, 255, 0) 53.26%);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

/* ======================================
   ✅ Persian Numbers (CSS Only – Pro)
====================================== */

html,
body {
    font-family: 'YekanBakh';
    font-feature-settings: "ss01";
    -moz-font-feature-settings: "ss01";
    -webkit-font-feature-settings: "ss01";
}

.price,
.amount,
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.product-price-box,
.cart_totals,
.order-total,
.total,
.quantity,
.qty,
.count,
.badge,
.star-rating,
.rating-count,
time,
.date,
.meta,
.product-meta,
.footer-bottom,
.header-cart-count {
    font-family:'YekanBakh';
    font-variant-numeric: proportional-nums;
}

/* ===============================
   Layout
=============================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 20px;
}

::marker {
  color: var(--primary);
  box-shadow: 0px 5px 15px 0px rgba(14, 68, 230, 0.42);
}

.star-service {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 5px;
}
.kksr-legend {
    color: #777;
}

@media (max-width: 768px) {
    .star-service {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
}