/*
Theme Name: پـروکاسـت
Theme URI: https://procost.ir
Description: پلتفرم اختصاصی محاسبه قیمت نهایی پـروکاسـت
Author: ProCost Team
Author URI: https://procost.ir
Version: 1.0.0
*/


/* ==========================================================================
   تعریف فونت وریبل (متغیر) ایران یکان ایکس
   ========================================================================== */
@font-face {
    font-family: 'IRANYekanXVF';
    /* مسیر فایل‌ها بر اساس پوشه fonts که در کنار style.css قرار دارد تنظیم شده است */
    src: url('fonts/IRANYekanXVF.woff2') format('woff2-variations'),
         url('fonts/IRANYekanXVF.woff2') format('woff2'),
         url('fonts/IRANYekanXVF.woff') format('woff-variations'),
         url('fonts/IRANYekanXVF.woff') format('woff');
    /* پشتیبانی از تمام وزن‌های فونت از نازک‌ترین (100) تا ضخیم‌ترین (900) */
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   اعمال فونت روی تمامی عناصر سایت (متن‌ها و اعداد)
   ========================================================================== */
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, select, textarea {
    font-family: 'IRANYekanXVF', sans-serif !important;
}

/* ==========================================================================
   تنظیمات حرفه‌ای وزن (ضخامت) فونت برای زیبایی سایت
   ========================================================================== */
/* وزن استاندارد (معمولی) برای متون طولانی، پاراگراف‌ها و لینک‌ها */
body, p, span, a, div, li, td, th {
    font-weight: 400 !important;
}

/* وزن‌های ضخیم و جذاب برای تیترها به ترتیب اهمیت */
h1 { font-weight: 900 !important; } /* بسیار ضخیم برای تیتر اصلی سایت */
h2 { font-weight: 800 !important; }
h3 { font-weight: 700 !important; }
h4 { font-weight: 600 !important; }
h5, h6 { font-weight: 500 !important; }

/* متون بولد شده */
strong, b { font-weight: 700 !important; }

/* متون کوچک و جزئیات با وزن نازک و زیبا */
small { font-weight: 300 !important; }

/* دکمه‌ها و فیلدهای فرم */
button, input[type="submit"], input[type="button"] {
    font-weight: 500 !important; /* دکمه‌ها کمی ضخیم‌تر برای جلب توجه */
}
input, textarea, select {
    font-weight: 400 !important;
}

/* ========================================================= */
/* مخفی کردن هدر اصلی سایت (عنوان گِرم سنج | GramSanj) */
/* ========================================================= */
header#masthead,
header.site-header,
header#header,
.site-branding,
.ast-main-header-wrap, /* اگر از قالب آسترا استفاده می‌کنید */
.elementor-location-header /* اگر هدر با المنتور ساخته شده */ {
    display: none !important;
}

/* ========================================================= */
/* مخفی کردن عنوان برگه‌ها در تمام سایت (مثل کلمه "شروع") */
/* ========================================================= */
header.entry-header,
h1.entry-title,
h1.page-title,
.page-header,
.ast-archive-description /* عناوین قالب آسترا */ {
    display: none !important;
}

/* حذف فاصله‌های خالی احتمالی که بعد از مخفی کردن هدر در بالای سایت باقی می‌ماند */
.site-content, 
.site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: #ffffff !important;
    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.85)), url('images/pattern-n.webp') !important;
    background-size: 1408px 768px !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-position: center top !important;
}

/* --- استایل چیدمان ردیفی فیلد و تایمر --- */
.gs-code-row {
    display: flex;
    align-items: stretch; /* برای هم‌ارتفاع شدن فیلد و باکس تایمر */
    gap: 10px; /* فاصله بین فیلد و باکس تایمر */
    margin-bottom: 10px;
}

/* استایل فیلد ورود کد تایید (عرض منعطف) */
#gs-code {
    flex: 1; /* این ویژگی باعث می‌شود عرض فیلد متغیر باشد و به طور خودکار کوچکتر شود */
    min-width: 0;
    padding: 12px;
    background: #f9f9fc;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 8px;
    font-size: 18px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

#gs-code:focus {
    border-color: #8cc63f; /* تغییر رنگ کادر هنگام کلیک روی فیلد */
}

/* استایل کادر تایمر و دکمه (قرارگیری در سمت چپ/راست فیلد) */
#gs-resend-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4f8; /* یک پس‌زمینه ملایم برای متمایز شدن تایمر */
    border-radius: 8px;
    padding: 0 15px;
    min-width: 100px; /* عرض ثابت برای جلوگیری از پرش تصویر هنگام تغییر اعداد */
    font-size: 13px;
    color: #555;
    white-space: nowrap; /* جلوگیری از شکستن متن به دو خط */
    border: 1px solid #eaeaea;
}

#gs-countdown-timer {
    display: inline;
}

#gs-countdown {
    font-weight: bold;
    color: #333;
    direction: ltr;
    display: inline-block;
    margin-right: 3px;
}

/* استایل دکمه ارسال مجدد (پس از پایان زمان) */
#gs-resend-otp {
    display: none;
    background: none;
    border: none;
    color: #007cba;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    font-family: inherit;
    transition: color 0.3s ease;
}

#gs-resend-otp:hover {
    color: #005a87;
    text-decoration: underline;
}

/* Login Form Switch Animations */
#login-forms-container {
    min-height: 250px; /* جلوگیری از پرش ارتفاع هنگام سوییچ */
}

#form-mode-mobile, #form-mode-username {
    width: 100%;
}

/* استایل دکمه‌های سوییچ */
#login-forms-container button svg {
    vertical-align: middle;
}

/* استایل فیلدهای جدید شبیه به فیلدهای قبلی */
#gs-login-username, #gs-login-password {
    font-family: 'IRANYekanXVF', sans-serif !important;
}