/* Codeu Plugin Styles */
/* VS Code Font */
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap'); */

/* Main wrapper for block shortcode */
.codeu-wrapper {
    margin: 20px 0;
    border: 1px solid #333;
    border-radius: 5px;
    background: #1e1e1e;
    overflow: hidden;
}

/* Tabs */
/* Tabs Wrapper: فقط اصلاح justify-content */
.codeu-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* برای چینش عمودی */
    /* border-bottom: 1px solid #333; */
    background: #2a2a2a;
 /* 🛑 مهم: space-between فضای خالی را فعال می‌کند تا margin-left: auto کار کند. */
    justify-content: space-between !important; 
    padding: 0 10px; /* تنظیم padding افقی برای ظاهر بهتر */
    /* padding-bottom: 1em !important; */
}

/* Tab Buttons: بدون تغییر */
.codeu-tab {
  flex-direction: row-reverse !important;
    border: none;
 background: none;
  color: #ccc;
 cursor: pointer;
 font-size: 14px;
 transition: background 0.2s;
 display: inline-flex;
 align-items: center;
 gap: 6px; /* فاصله بین آیکن و متن */
 margin-top: 1px;

}
.codeu-tab svg {
    width: 20px;
    height: 20px;
}
/* 🛑 Copy Button: تضمین می‌کنیم که به راست هل داده شود */
.codeu-tabs .codeu-copy-btn {
    margin-left: auto !important; /* 👈 این دکمه را به سمت راست هل می‌دهد */
    margin: 12px 0px 10px 0px;
    /* حذف هرگونه position که آن را خارج از نوار تب قرار می‌دهد */
    position: static !important; 
    
    /* استایل‌های ظاهری دکمه کپی */
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px 15px;
    font-weight: bold;
}

.codeu-tab:hover {
    background: #333;
}

.codeu-tab.active {
    background: #1e1e1e;
    color: #fff;
    /* border-top: 1px solid #007bff; */
}

/* Content sections */
.codeu-container {
    position: relative;
}

.codeu-content-section {
    display: none;
}

.codeu-content-section.active {
    display: block;
}

.codeu-content-section pre {
    margin: 0;
    padding: 15px;
    background: #1e1e1e;
    border-radius: 0 0 5px 5px;
    font-size: 13px;
}

.codeu-content-section .line-numbers {
    padding-left: 40px;
}

/* Copy button */
.codeu-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.codeu-copy-btn:hover {
    background: #0056b3 !important;
}

/* Preview section */
.codeu-preview-content {
    padding: 15px;
    background: #fff;
    color: #000;
    border: 1px solid #333;
    border-radius: 5px;
    min-height: 100px;
}

/* Simple shortcode wrapper */
.codeu-simple-wrapper {
    margin: 20px 0;
    border: 1px solid #333;
    border-radius: 5px;
    background: #1e1e1e;
    overflow: hidden;
}

.codeu-simple-tab {
    background: #2a2a2a;
    color: #fff;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #333;
}

.codeu-simple-wrapper pre {
    margin: 0;
    padding: 15px;
    background: #1e1e1e;
    border-radius: 0 0 5px 5px;
    font-size: 13px;
}

.codeu-simple-wrapper .line-numbers {
    padding-left: 40px;
}

/* Ensure Prism styles don't conflict */
pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
    white-space: inherit;
}
.codeu-tabs{display:flex;align-items:center;gap:8px;}
.codeu-copy-header{margin-left:auto;background:#0e639c;color:#fff;border:0;border-radius:4px;padding:6px 10px;cursor:pointer}
.codeu-content-section pre,.codeu-simple-wrapper pre{color: #9cdcfe !important;max-height:500px;overflow:auto;text-shadow: none !important;}
.codeu-wrapper pre, .codeu-wrapper code, .codeu-simple-wrapper pre, .codeu-simple-wrapper code{color: #9cdcfe !important;direction:ltr!important;text-align:left!important;unicode-bidi:isolate;    text-shadow: none !important; 
} 


.codeu-simple-header {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    background-color: #333;
    padding: 0.5em;
    margin: 0;
    border-radius: 5px 5px 0 0;
    font-family: sans-serif;
    min-height: 40px; 
    position: relative;
}

.codeu-simple-header .codeu-simple-tab {
    background: #1e1e1e;
    color: #fff;
    /* border-bottom: 2px solid #007bff; */
    border-radius: 10px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    border-radius: 6px;
}

.codeu-simple-header .codeu-copy-btn {
    order: -1; /* قرار دادن در سمت راست (سمت شروع در RTL) */
    color: #fff;
    background-color: #2b2b2b; /* کمی تیره‌تر از هدر */
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin: 0;
    border-radius: 0;
    transition: background-color 0.2s;
    margin-left: auto !important;
    position: static !important;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px 15px;
    font-weight: bold;
}

.codeu-simple-header .codeu-copy-btn:hover {
    background-color: #444;
}

.codeu-simple-wrapper pre {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.codeu-is-preview .codeu-copy-header {
    visibility: hidden;      /* جا حفظ می‌شود */
    pointer-events: none;    /* قابل کلیک نیست */
    opacity: 0.0;  
}
.codeu-is-preview .codeu-copy-header:hover{
    background-color: #0056b3;
}


/* code color */
/* ===============================
   VS Code Dark+ Syntax Theme
   =============================== */

   pre[class*="language-"],
   code[class*="language-"] {
     background: #1e1e1e !important;
     color: #d4d4d4 !important;
     text-shadow: none !important;
     font-family: 'Fira Code', monospace;
     font-size: 13px;
     line-height: 1.5;
   }
   
   /* Comments */
   .token.comment,
   .token.prolog,
   .token.doctype,
   .token.cdata {
     color: #6a9955;
     font-style: italic;
   }
   
   /* Punctuation */
   .token.punctuation {
     color: #d4d4d4;
   }
   
   /* Properties, tags, constants, symbols */
   .token.property,
   .token.tag,
   .token.constant,
   .token.symbol,
   .token.deleted {
     color: #569cd6;
   }
   
   /* Booleans, numbers */
   .token.boolean,
   .token.number {
     color: #b5cea8;
   }
   
   /* Strings, selectors, inserted text */
   .token.selector,
   .token.attr-name,
   .token.string,
   .token.char,
   .token.builtin,
   .token.inserted {
     color: #ce9178;
   }
   
   /* Operators, entities, URLs */
   .token.operator,
   .token.entity,
   .token.url {
     color: #d4d4d4;
   }
   
   /* Keywords, at-rules */
   .token.keyword,
   .token.atrule {
     color: #c586c0;
   }
   
   /* Functions, class names */
   .token.function,
   .token.class-name {
     color: #dcdcaa;
   }
   
   /* Regex, variables, important */
   .token.regex,
   .token.variable,
   .token.important {
     color: #9cdcfe;
   }
   
   /* Line numbers */
   .line-numbers .line-numbers-rows {
     border-right: 1px solid #333;
     background: #252526;
   }
   
   .line-numbers-rows > span:before {
     color: #858585;
   }
   
   /* Selection color */
   pre[class*="language-"]::selection,
   code[class*="language-"]::selection {
     background: #264f78;
   }
   
   /* Scrollbar */
   pre::-webkit-scrollbar {
     height: 8px;
   }
   pre::-webkit-scrollbar-thumb {
     background: #444;
     border-radius: 4px;
   }
   pre::-webkit-scrollbar-thumb:hover {
     background: #666;
   }
   /* ===== VS Code Font Styling ===== */

pre[class*="language-"],
code[class*="language-"],
.line-numbers-rows,
.codeu-content-section pre,
.codeu-simple-wrapper pre {
    font-family: 'Fira Code', monospace !important;
    font-feature-settings: "liga" 1, "calt" 1; /* فعال کردن Ligature مثل VS Code */
    font-variant-ligatures: contextual;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.2px;
    text-rendering: optimizeLegibility;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate;
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

/* show title */
/* ===============================
   Codeu Frontend: Block Title (VS Code Style)
   =============================== */
   .codeu-block-title-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    font-weight: 600;
    color: #dcdcdc;
    background: #1b1d23;
    border: 1px solid #2b2e38;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 10px 14px;
    margin-bottom: -1px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  }
  
  /* آیکون کوچک کنار عنوان */
  .codeu-block-title-display::before {
    content: "🧩";
    font-size: 15px;
    color: #2ac3de;
    display: inline-block;
    transform: translateY(-1px);
  }
    
  /* ===== آیکن‌ها قبل از نام زبان ===== */
.codeu-tab {
  display: inline-flex !important;       /* آیکن و متن در یک خط افقی */
  align-items: center !important;        /* وسط‌چین عمودی */
  flex-direction: row-reverse !important;        /* آیکن سمت چپ، متن سمت راست */
  gap: 6px !important;                   /* فاصله بین آیکن و نام زبان */
  padding: 6px 12px !important;
}
/* new <script>
/* Make "=" look neutral (inherit theme color) only in Codeu blocks */
.codeu-wrapper .token.operator.op-equals-neutral {
  color: inherit !important;
  background: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}