/* معرفی فونت وزیر از پوشه قالب */
@font-face {
    font-family: 'Vazir';
    src: url('/wp-content/themes/iPhloxPro/fonts/Vazir-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* اعمال فونت به کل افزونه */
.sc-container,
.sc-container * {
    font-family: 'Vazir', Tahoma, Arial, sans-serif !important;
}



/* =========================================
   استایل‌های اصلی کانتینر افزونه
   ========================================= */
.sc-container {
    max-width: 450px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 20px;
    /* سایه نرم و مدرن */
    box-shadow: 0 15px 35px rgba(0, 131, 143, 0.1), 0 5px 15px rgba(0,0,0,0.05);
    font-family: inherit;
    direction: rtl;
    overflow: hidden; /* برای گرد ماندن گوشه‌های هدر */
}

/* =========================================
   هدر جذاب
   ========================================= */
.sc-header {
    background: linear-gradient(135deg, #00838f 0%, #4dd0e1 100%);
    padding: 30px 20px;
    text-align: center;
    color: white;
}

.sc-header h2 {
    margin: 0 0 10px 0;
    font-size: 1.6rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
    color: #ffffff !important;
}

.sc-header p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
    color: #ffffff;
}

/* =========================================
   جایگاه تقویم و بازنویسی تقویم شمسی
   ========================================= */
#sc-calendar-wrap {
    padding: 25px;
    display: flex;
    justify-content: center;
}

/* حذف پس‌زمینه و کادر پیش‌فرض تقویم */
.sc-container .datepicker-plot-area {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: inherit !important;
}

/* بخش هدر تقویم (انتخاب ماه و سال) */
.sc-container .datepicker-navigator {
    background: #f4f9f9 !important;
    border-radius: 12px;
    padding: 8px 0 !important;
    margin-bottom: 15px;
}

.sc-container .datepicker-navigator .pwt-btn-switch,
.sc-container .datepicker-navigator .pwt-btn-next,
.sc-container .datepicker-navigator .pwt-btn-prev {
    color: #00838f !important;
    font-weight: bold;
    transition: 0.3s;
}

.sc-container .datepicker-navigator .pwt-btn-switch:hover,
.sc-container .datepicker-navigator .pwt-btn-next:hover,
.sc-container .datepicker-navigator .pwt-btn-prev:hover {
    background-color: #e0f7fa !important;
    border-radius: 8px;
}

/* بهبود دکمه انتخاب سریع سال و ماه در هدر تقویم */
.datepicker-plot-area .datepicker-navigator .pwt-btn-switch {
    background-color: #f0fdfa !important; 
    border-radius: 8px !important; 
    cursor: pointer !important; 
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    margin: 0 5px !important; 
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-switch:hover {
    background-color: #ccfbf1 !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* سلول‌های روزهای تقویم */
.sc-container .datepicker-day-view .table-days td span {
    border-radius: 50% !important; /* دایره‌ای کردن روزها */
    transition: all 0.3s ease;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    color: #455a64 !important;
}

/* هاور (موس روی روزها) */
.sc-container .datepicker-day-view .table-days td span:hover {
    background: #e0f7fa !important;
    color: #00838f !important;
}

/* استایل تاریخ امروز */
.sc-container .datepicker-day-view .table-days td.today span {
    border: 2px solid #4dd0e1 !important;
    background: #ffffff !important;
    color: #00838f !important;
    font-weight: bold;
}

/* استایل روز انتخاب شده (روز شروع پاکی) */
.sc-container .datepicker-day-view .table-days td.selected span {
    background: linear-gradient(135deg, #00838f 0%, #00acc1 100%) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(0, 131, 143, 0.4) !important;
    transform: scale(1.1); /* کمی بزرگتر شدن */
    border: none !important;
}

/* روزهای غیرفعال (تاریخ‌های آینده) */
.sc-container .datepicker-day-view .table-days td.disabled span {
    color: #cfd8dc !important;
    background: transparent !important;
    cursor: not-allowed;
    opacity: 0.5;
}
.sc-container .datepicker-day-view .table-days td.disabled span:hover {
    background: transparent !important;
    transform: none;
}

/* =========================================
   باکس نمایش نتیجه
   ========================================= */
#sc-result-box {
    margin: 0 25px 30px 25px;
    background: #f2fcfd;
    border: 2px dashed #b2ebf2;
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    animation: fadeIn 0.6s ease-out;
}

.sc-result-label {
    margin: 0 0 15px 0;
    font-size: 1.05rem;
    color: #006064;
    font-weight: bold;
}

#sc-result-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #263238;
}

/* اعداد نتیجه (سال، ماه، روز) */
.sc-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #00838f;
    margin: 0 8px;
    vertical-align: middle;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.05);
}

/* انیمیشن نرم برای نمایش نتیجه */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   استایل‌های ریسپانسیو (مخصوص موبایل)
   ** حتما باید در انتهای فایل باشد **
   ========================================= */
/* =========================================
   استایل‌های ریسپانسیو (مخصوص موبایل و تبلت)
   ========================================= */
@media screen and (max-width: 500px) {
    .sc-container {
        margin: 15px auto;
        border-radius: 15px;
        width: 95%; /* به جای 100 درصد، کمی فاصله از کناره‌های گوشی می‌گیرد */
        box-sizing: border-box;
    }

    .sc-header {
        padding: 20px 15px;
    }

    /* اصلاح سایز فونت‌ها و اجازه شکستن خطوط در صورت نیاز */
    .sc-header h2 {
        font-size: 1.3rem; 
        margin-bottom: 8px;
        white-space: normal; /* اجازه می‌دهد متن در صورت طولانی بودن به خط بعد برود */
        line-height: 1.4;
    }

    .sc-header p {
        font-size: 0.85rem;
        white-space: normal;
        line-height: 1.5;
    }

    #sc-calendar-wrap {
        padding: 15px 5px;
    }

    /* کوچک‌تر کردن دایره‌های روزها تا تقویم در موبایل به طور کامل جا شود */
    .sc-container .datepicker-day-view .table-days td span {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 0.85rem !important;
        margin: 0 auto !important; /* وسط‌چین کردن دایره‌ها */
    }

    /* اصلاح فاصله دکمه‌های هدر تقویم در موبایل */
    .sc-container .datepicker-navigator .pwt-btn-switch {
        font-size: 0.85rem !important;
        padding: 3px 5px !important;
    }

    #sc-result-box {
        margin: 0 15px 20px 15px;
        padding: 15px 10px;
    }

    .sc-result-label {
        font-size: 0.95rem;
        white-space: normal;
        margin-bottom: 10px;
    }

    /* استفاده از سایز ثابت به جای vw برای جلوگیری از به هم ریختگی اعداد */
    .sc-number {
        font-size: 1.8rem; 
        margin: 0 4px;
    }
    
    #sc-result-text {
        font-size: 0.95rem;
        white-space: normal;
        line-height: 1.8;
    }
}