/* ===================================================================
   price.css — فقط برای price/index.php
   چیپ‌های دسته‌بندی قیمت و جدول نمایش نرخ‌ها
   =================================================================== */

/* ✅ کانتینر گرید چیپ‌ها — این جایگزینِ کلاس Tailwind »items-start« شد
   چون ممکنه توی باندل استاتیک Tailwind وجود نداشته باشه. با این قانون،
   وقتی یه چیپ (مثل «نیاز به مشاوره») بلندتر بشه، بقیه‌ی چیپ‌های همون
   ردیف کشیده نمی‌شن و فقط بالای سلول خودشون می‌مونن. */
.price-chips-grid {
    align-items: start;
}

.price-chip {
    border-radius: 9999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
    border: 1px solid rgba(125, 211, 252, 0.6);
    /* لایه‌ی اطمینان دوم و مستقل: حتی اگه parent align-items تغییر کنه،
       خودِ چیپ همیشه بالای سلولش می‌مونه، نه کشیده. */
    align-self: start;
}

.price-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(12, 74, 110, 0.28);
    background-color: #e0f2fe;
    border-color: rgba(14, 165, 233, 0.9);
}

.price-chip-active {
    background-color: #0ea5e9 !important;
    color: #fff !important;
    box-shadow: 0 16px 32px rgba(12, 74, 110, 0.35);
}

/* ✅ چیپ‌های «نیاز به مشاوره» (متن طولانی): به‌جای اینکه فقط بلند بشن و
   با گردیِ کامل (9999px) به شکل دایره/بلاب دربیان، دو ستون از گرید رو
   می‌گیرن (پهن‌تر می‌شن) و گردیِ گوشه‌شون متعادل می‌شه، نه دایره‌ی کامل. */
.price-chip-consult {
    grid-column: span 2;
    border-radius: 28px;
}

.price-table th,
.price-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.price-table thead th {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 700;
    background-color: rgba(14, 165, 233, 0.06);
}

.price-table tbody tr:last-child td {
    border-bottom: none;
}

.price-table tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.04);
}