/*
 * استخراج‌شده از استایلِ رفرنسِ DiviFlash (GPLv2) برای ماژولِ CircleInfoItem.
 * منبع: difl/circleinfoitem (ریشه .difl_circleinfoitem، 9 کلاسِ DOM)
 *
 * تنها تغییر نسبت به اصل، همان بازنویسیِ پیشوندِ کلاس‌هاست که در
 * PHP و module.json هم انجام شده — تا هر سه لایه یک DOM را بشناسند.
 * دست‌کاریِ دستی نکن؛ با tools/dfme/extract-module-css.js بازتولید کن.
 */
.dfme_ci_center_content{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;z-index:1;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}

.dfme_ci_center_content.active{opacity:1;visibility:visible;z-index:2;transition:opacity .5s ease .2s,visibility 0s}

.dfme_ci_content_inner{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%;height:100%}

.dfme_ci_title{margin-bottom:8px;font-size:20px;font-weight:600;line-height:1.4em}

.dfme_ci_description{margin-bottom:12px;font-size:14px;line-height:1.6em}

.dfme_circle_info_item{position:absolute !important;margin:0 !important;padding:0 !important;z-index:3;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .3s ease}

.dfme_circle_info_item[style*=left]{opacity:1}

.dfme_circle_info_item_wrapper{position:absolute;top:0;left:0}

.dfme_circle_info_icon{width:60px;height:60px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background-color:#fff;border:2px solid #e0e0e0;transition:background-color .3s ease,border-color .3s ease;transform:translate(-50%, -50%)}

.dfme_circle_info_icon .et-pb-icon{font-family:ETmodules;font-size:24px;color:#333;transition:color .3s ease;speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.dfme_circle_info_icon .et-pb-icon.fa-icon{font-family:FontAwesome !important;font-weight:900}

.dfme_circle_info_icon img{width:70%;height:70%;object-fit:contain;border-radius:inherit}

.dfme_circle_info_icon .dfme_ci_icon_text{line-height:1;transition:color .3s ease}

.animation_slide_up .dfme_ci_center_content.active .dfme_ci_content_inner{will-change:transform,opacity;animation:dfme-ci-slide-up .5s ease-out .5s both}

.animation_slide_down .dfme_ci_center_content.active .dfme_ci_content_inner{will-change:transform,opacity;animation:dfme-ci-slide-down .5s ease-out .5s both}

.animation_zoom .dfme_ci_center_content:not(.active) .dfme_ci_content_inner{will-change:transform,opacity;animation:dfme-ci-zoom-out .3s ease-out both}

.animation_zoom .dfme_ci_center_content.active .dfme_ci_content_inner{will-change:transform,opacity;animation:dfme-ci-zoom-in .5s ease-out .5s both}

.dfme_circle_info_item .dfme_circle_info_item_wrapper{display:flex;align-items:center;justify-content:center}

@keyframes dfme-ci-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@keyframes dfme-ci-slide-down{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

@keyframes dfme-ci-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}

@keyframes dfme-ci-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}