/* =========================
   FRONTEND
========================= */

/* container */
.ac-tabs{
border:1px solid #e2e2e2;
border-radius:8px;
overflow:hidden;
background:#fff;
}

/* tabs nav */
.ac-tabs-nav{
display:flex;
gap:4px;
background:#f3f4f6;
padding:6px 6px 0 6px;
border-bottom:1px solid #e2e2e2;
}

/* tab buttons */
.ac-tabs-nav button{
background:#e5e7eb;
border:0;
padding:10px 16px;
cursor:pointer;
border-radius:6px 6px 0 0;
font-size:14px;
color:#222 !important;
transition:all .2s;
}

.ac-tabs-nav button:hover{
background:#dfe3e8;
}

.ac-tabs-nav button.active{
background:#fff;
color:#111 !important;
border-bottom:1px solid #fff;
}

/* content area */
.ac-tabs-content{
background:#fff;
padding:24px;
color:#222 !important;
}

/* panels */
.ac-tab{ display:none; }
.ac-tab.active{ display:block; }

.ac-tab-panel{
color:#222 !important;
line-height:1.7;
}



/* =========================
   EDITOR
========================= */

/* ظاهر باکس تب در ادیتور */
.ac-tab-editor{
border:1px solid #ddd;
padding:20px;
margin-bottom:25px;
background:#fafafa;
}

.ac-tab-title{
font-size:16px;
font-weight:600;
margin-bottom:15px;
}

/* فاصله بین بلوک‌ها داخل تب */
.ac-tab-inner .block-editor-block-list__layout > *,
.editor-styles-wrapper .ac-tab-editor .block-editor-block-list__layout > *{
margin-bottom:15px;
}

/* appender عمومی داخل ادیتور */
.ac-tabs-editor .block-list-appender{
margin-top:40px !important;
}

.ac-tab-editor .block-list-appender{
margin-top:30px !important;
}

/* appender پیش‌فرض گوتنبرگ */
.editor-styles-wrapper .ac-tab-editor 
.block-editor-default-block-appender{
margin-top:35px !important;
padding-top:15px !important;
border-top:1px dashed #ddd;
}

/* دکمه افزودن بلوک داخل هر تب */
.ac-add-block{
margin-top:20px;
padding-top:15px;
border-top:1px dashed #ddd;
}

/* دکمه افزودن تب جدید */
.ac-add-tab{
margin-top:40px;
text-align:center;
border-top:2px solid #ddd;
padding-top:20px;
}

.ac-add-tab-btn{
background:#f5f5f5;
border:1px dashed #bbb;
padding:12px 24px;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

.ac-add-tab-btn:hover{
background:#e9e9e9;
}

/* =========================
   زیبایی
========================= */
/* اسکرول برای تب‌های زیاد */
.ac-tabs-nav{
overflow-x:auto;
flex-wrap:nowrap;
scrollbar-width:thin;
}

.ac-tabs-nav::-webkit-scrollbar{
height:6px;
}

.ac-tabs-nav::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:4px;
}

.ac-tabs-nav button{
white-space:nowrap;
flex-shrink:0;
}

/* انیمیشن نرم برای تغییر تب */
.ac-tab{
display:none;
opacity:0;
transform:translateY(5px);
transition:opacity .25s ease, transform .25s ease;
}

.ac-tab.active{
display:block;
opacity:1;
transform:translateY(0);
}

/* hover بهتر برای تب‌ها */
.ac-tabs-nav button:hover{
background:#dfe3e8;
transform:translateY(-1px);
}

/* حالت موبایل */
@media (max-width:768px){

.ac-tabs-nav button{
padding:8px 12px;
font-size:13px;
}

.ac-tabs-content{
padding:18px;
}

}