/**
 * tax-law-explorer/assets/css/tle-t3-vat-callup.css
 * استایل‌های اختصاصی رابط کاربری ابزار فراخوان ارزش افزوده
 */

/* کانتینر اصلی ابزار */
.tle-vat-main-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e4e7;
    margin-top: 20px;
    font-family: Tahoma, Arial, sans-serif; /* فونت استاندارد پنل */
}

/* استایل چک‌باکس مرحله صفر */
.tle-vat-checkbox-label {
    background: #f6f7f7;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #c3c4c7;
    transition: background 0.3s;
}
.tle-vat-checkbox-label:hover {
    background: #f0f0f1;
}

/* استایل گزینه‌های (Radio Buttons) داینامیک */
.tle-vat-options-wrapper {
    margin-top: 15px;
}
.tle-vat-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: #ffffff;
    border: 2px solid #e2e4e7;
    padding: 14px 18px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    margin-bottom: 12px;
}

/* افکت هاور و انتخاب شده (Selected) برای گزینه‌ها */
.tle-vat-radio-label:hover {
    border-color: #2271b1;
    background: #f0f6fc;
}
.tle-vat-radio-label.tle-vat-selected {
    border-color: #2271b1;
    background: #f0f8ff;
    box-shadow: 0 0 0 1px #2271b1;
}
.tle-vat-radio-label input[type="radio"] {
    margin-left: 10px;
    width: 18px;
    height: 18px;
    accent-color: #2271b1;
}

/* دکمه‌های اکشن */
.tle-vat-btn-wrapper button {
    padding: 6px 24px;
    font-size: 15px;
    height: 40px;
}
.tle-vat-btn-wrapper button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* باکس نتیجه نهایی */
.tle-vat-result-box {
    animation: fadeInScale 0.4s ease-out forwards;
}

/* انیمیشن‌ها */
@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}



/* استایل نوار بنر لینک‌دار جدید در پایین کارت‌ها */
.tle-tool-card.tle-locked {
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .tle-lock-banner {
        position: absolute;
        bottom: -60px; /* مخفی شدن زیر کارت در حالت عادی */
        left: 0;
        width: 100%;
        height: 45px;
        background: rgba(240, 246, 252, 0.98); /* آبی شیشه‌ای بسیار ملایم */
        color: #2271b1 !important; /* رنگ آبی استاندارد دکمه‌های وردپرس */
        text-align: center;
        line-height: 45px;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10;
        border-top: 2px solid #2271b1;
        box-sizing: border-box;
        display: block;
    }

    /* حرکت نرم بنر از پایین به بالا فقط به اندازه ۴۵ پیکسل در حالت هاور */
    .tle-tool-card.tle-locked:hover .tle-lock-banner {
        bottom: 0;
    }
}

/* نمایش همیشگی و ریسپانسیو بنر در موبایل به دلیل عدم وجود هاور */
@media (max-width: 767px) {
    .tle-lock-banner {
        display: block;
        background: #f0f6fc;
        color: #2271b1 !important;
        text-align: center;
        padding: 10px;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none !important;
        border-top: 1px solid #2271b1;
        margin-top: 15px;
        border-radius: 0 0 8px 8px;
    }
}

/* ایجاد فاصله استاندارد برای دکمه مرحله بعد در گام صفر */
#tle-vat-start-btn,
.tle-vat-start-btn-wrapper {
    margin-top: 25px !important;
}





/* ---------------------------------------------------
   اصلاحات ظاهری: استایل‌دهی استاندارد متن سوال اصلی
--------------------------------------------------- */

/* ۱. استایل‌دهی به متن سوال اصلی (دسکتاپ) */
.tle-vat-q-title {
    font-size: 17px !important;        /* سایز فونت استاندارد و شکیل برای دسکتاپ */
    font-weight: 700 !important;       /* وزن بولد استاندارد (جلوگیری از دفرمه شدن فونت فارسی) */
    line-height: 1.8 !important;       /* فاصله بین خطوط مناسب برای متون فارسی */
    text-align: right !important;     /* وسط‌چین کردن متن */
    color: #0073aa !important;         /* رنگ آبی سازمانی */
    margin-top: 10px !important;       /* فاصله از بالا */
    margin-bottom: 15px !important;    /* فاصله از پایین */
    white-space: pre-line !important;  /* حفظ اینترها و خطوط جدید در متن JSON */
}

/* ۲. تنظیمات اختصاصی برای نمایش در موبایل و تبلت */
@media (max-width: 767px) {
    .tle-vat-q-title {
        font-size: 15px !important;    /* سایز متناسب با صفحه نمایش گوشی */
        line-height: 1.7 !important;   /* تراکم مناسب خطوط در موبایل */
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
}

/* در موبایل کمی فونت رو معقول‌تر می‌کنیم که از کادر بیرون نزند */
@media (max-width: 767px) {
    .tle-vat-q-title {
        font-size: 20px !important;
    }
}

/* ۲. وسط‌چین کردن کادر دربرگیرنده دکمه */
.tle-vat-btn-wrapper {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important; /* اطمینان از وسط‌چین شدن دکمه‌های فلکس */
    gap: 10px; /* فاصله بین دکمه مرحله قبل و بعد */
}

/* ۳. پررنگ‌تر کردن دکمه مرحله بعد (مخصوصاً در حالت غیرفعال) */
.tle-vat-next-btn:disabled, 
.tle-vat-next-btn[disabled] {
    color: #d63638 !important;          /* رنگ متن پررنگ‌تر */
    border-color: #d63638 !important;   /* حاشیه پررنگ‌تر */
    background: #fcf0f1 !important;     /* پس‌زمینه خیلی ملایم برای حالت قفل */
    opacity: 0.7 !important;            /* خروج از حالت محوشدگی کامل */
    cursor: not-allowed !important;
}

/* ۴. استایل دکمه وقتی کاربر گزینه را انتخاب کرد و فعال شد */
.tle-vat-next-btn:not([disabled]) {
    color: #fff !important;
    background: #d63638 !important;
    border-color: #d63638 !important;
    opacity: 1 !important;
}



/* استایل بج (نشان) نام ابزار در بالاترین قسمت فرم */
.tle-tool-top-badge-wrapper {
    text-align: center !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #f0f6fc !important;
    padding-bottom: 15px !important;
}

.tle-tool-top-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f0f6fc !important; /* پس‌زمینه آبی بسیار ملایم و خنثی */
    color: #50575e !important; /* متن خاکستری تیره برای کاهش جلب توجه */
    font-size: 13px !important; /* فونت ریزتر */
    font-weight: bold !important;
    padding: 6px 16px !important;
    border-radius: 30px !important; /* کادر بیضی شکل و مدرن */
}

.tle-tool-top-badge .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: #0073aa !important; /* حفظ رنگ سازمانی در آیکون */
}



/* جلوگیری از انتخاب و کپی متن در محیط ابزار */
.tle-vat-main-box {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}