/* Text EDITOR */ 

 :root {
    --bg: transparent;
    --text: #f5f5f5;
	--text-second: #7a91a6;
    --toolbar-bg: #1b2028;
    --button-bg: transparent;
    --button-border: #334052;
    --button-hover: #ffffff1c;
	--format-dropdown-bg: #38393b;
  }
  .editor-container {
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	display: flex;
    flex-direction: column;
    margin: auto;
    border: 1px solid var(--button-border);
    background: var(--bg);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }
  

 .toolbar svg {
    width: auto;
    height: 16px;
	fill: var(--text);
}
  
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--button-border);
    padding: 2px;
    position: relative;
  }
  .toolbar button {
	display: flex;
    width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
    background: var(--button-bg);
    border: 0;
    color: var(--text);
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .toolbar button:hover {
    background: var(--button-hover);
  }
  .format-dropdown-wrapper {
    position: relative;
  }
  .format-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--format-dropdown-bg);
    border: 1px solid var(--button-border);
    z-index: 10;
    min-width: 140px;
  }
  .format-dropdown div {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text);
    user-select: none;
  }
  .format-dropdown div:hover {
    background: var(--button-hover);
  }
  #editor {
    min-height: 300px !important;
    padding: 12px;
    background: var(--bg);
    color: var(--text);
    outline: none;
  }
  #content {
    display: none;
    width: 100%;
    height: 300px;
    padding: 12px;
    background: var(--bg);
    color: var(--text);
    font-family: monospace;
    font-size: 14px;
    border: none;
    outline: none;
  }
  
  
.customPopup {
	
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255, 255, 255);
  padding: 22px 26px 16px;
  border-radius: 9px;
  box-shadow: rgba(0, 0, 0, 0.133) 0px 2px 24px;
  z-index: 10000;
  width: 90vw;      /* Responsive width on mobile */
  max-width: 400px; /* Prevents it from being too wide on desktop */
  box-sizing: border-box; /* Includes padding in width */
}


button#blockFormatBtn {
  display: flex;
  width: fit-content;
  min-width: fit-content;
  text-align: left;
}

.format-label {
    flex: 1;
}


.editor-counter {
  text-align: right;
  color: var(--text-second);
  font-size: 0.95em;
  margin: 0.2em 0.8em 0.6em 0.8em;
}


/* Add this to your CSS */
.editor-fullscreen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999999;
  background: #1b1c1e;
  max-width: 100%;
}

.editor-fullscreen iframe, .editor-fullscreen #content {
    height: 100vh !important;
}


.editor-iframe {
    height: 100%;
}