/* ۱. لود کردن فونت */
@font-face {
    font-family: 'BYekan';
    src: url('fonts/BYekan.ttf') format('truetype');
}

/* ۲. تنظیمات کلی بدنه با فونت یکان */
body {
    font-family: 'BYekan', tahoma;
    direction: rtl;
    text-align: center;
    padding: 20px;
    background: #f4f6f9;
}

/* ۳. انگلیسی نگه داشتن اعداد ID و ورودی UUID */
input[type="text"]#fname, .uuid-text, .en-num {
    font-family: tahoma, Arial, sans-serif !important;
    direction: ltr !important;
    text-align: left;
    unicode-bidi: bidi-override;
}

/* ۴. استایل ورودی‌ها و دکمه بررسی */
input[type="text"] {
    padding: 12px; margin: 5px; width: 80%; max-width: 400px;
    border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box;
    font-size: 14px;
}

button#getBtn {
    padding: 10px 25px; cursor: pointer; background: #007bff;
    color: white; border: none; border-radius: 8px; font-weight: bold;
    font-family: 'BYekan';
}

/* ۵. استایل کارت اطلاعات */
.card {
    background: white; border-radius: 12px; padding: 15px;
    margin: 15px auto; max-width: 420px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-align: right;
}

.card h3 { color: #007bff; border-bottom: 1px solid #eee; padding-bottom: 10px; font-family: 'BYekan'; }
.infoRow { display: flex; justify-content: space-between; margin: 12px 0; font-size: 14px; }
.label { color: #666; }
.value { font-weight: bold; color: #333; }

/* ۶. نوارهای پیشرفت */
.progressContainer { background: #eee; border-radius: 8px; height: 16px; width: 100%; margin-top: 6px; overflow: hidden; }
.progressBar { height: 100%; border-radius: 8px; width: 0%; transition: width 0.5s, background-color 0.5s; }

/* ۷. استایل دکمه‌های عملیاتی */
.configBtn {
    display: block; background: #28a745; color: white; text-decoration: none;
    padding: 12px; border-radius: 8px; font-weight: bold; text-align: center;
    margin-top: 10px; cursor: pointer; width: 100%; box-sizing: border-box;
    border: none; font-size: 15px; font-family: 'BYekan';
}

/* ۸. بخش پرداخت و شماره کارت */
.payment-box { display: none; background: #fff8e1; border: 1px solid #ffe082; padding: 15px; border-radius: 10px; margin-top: 15px; text-align: center; }
.card-number {
    font-size: 21px; font-weight: bold; color: #d84315; margin: 10px 0;
    padding: 12px; border: 2px dashed #ffb300; background: #fff;
    border-radius: 8px; cursor: pointer; font-family: tahoma; /* شماره کارت انگلیسی خواناتر است */
}

/* ۹. استایل جدید دکمه انتخاب فایل (مشابه عکس) */
.file-upload-wrapper {
    position: relative; width: 100%; margin: 15px 0;
}

#receiptFile {
    position: absolute; left: 0; top: 0; opacity: 0;
    width: 100%; height: 45px; cursor: pointer; z-index: 2;
}


.file-upload-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

#receiptFile {
    position: absolute;
    left: 0; top: 0;
    opacity: 0; /* ورودی واقعی رو مخفی میکنه تا دکمه خوشگل دیده بشه */
    width: 100%; height: 45px;
    cursor: pointer;
    z-index: 10;
}

.file-upload-button {
    display: block;
    width: 100%; height: 45px;
    line-height: 45px;
    background: #fff;
    border: 2px dashed #007bff;
    color: #007bff;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    z-index: 1;
}


.file-upload-button {
    display: block; width: 100%; height: 45px; line-height: 45px;
    background: #fff; border: 2px dashed #007bff; color: #007bff;
    border-radius: 8px; text-align: center; font-weight: bold; font-family: 'BYekan';
}

#fileNameDisplay {
    display: block; margin-top: 5px; font-size: 12px; color: #28a745; font-weight: bold; font-family: 'BYekan';
}

.submit-receipt { background: #6f42c1 !important; }