/* --- QUILL EDITOR PRO CUSTOM STYLES --- */

/* Editor Wrapper */
.editor-wrapper {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toolbar Container */
.ql-toolbar.ql-snow {
  position: sticky;
  top: 0;
  z-index: 40;
  border: 2px solid #f1f5f9;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  background-color: #ffffff;
  padding: 16px 20px;
  border-bottom: 2px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Content Container */
.ql-container.ql-snow {
  border: 2px solid #f1f5f9;
  border-top: none;
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  background-color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  min-height: 500px;
}

/* Editor Padding */
.ql-editor {
  padding: 32px;
  color: #334155;
  line-height: 1.8;
  font-size: 1.05rem;
}

/* Placeholder Style */
.ql-editor.ql-blank::before {
  color: #94a3b8;
  font-style: normal;
  font-weight: 400;
  left: 32px;
}

/* --- Toolbar Buttons Styling --- */

/* Default Button State */
.ql-snow .ql-toolbar button {
  width: 36px;
  height: 36px;
  border-radius: 0.75rem;
  margin-right: 0;
  transition: all 0.2s ease;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dropdowns (Pickers) */
.ql-snow .ql-toolbar .ql-picker-label {
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  border-radius: 0.75rem;
  color: #64748b;
  transition: all 0.2s ease;
}

/* Icon SVG default color */
.ql-snow .ql-toolbar button .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label .ql-stroke {
  stroke: #64748b;
  stroke-width: 1.5;
}

.ql-snow .ql-toolbar button .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label .ql-fill {
  fill: #64748b;
}

/* Hover State - Theme Blue Colors */
.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover {
  background-color: #eff6ff;
  color: #3b82f6;
}

.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke {
  stroke: #3b82f6;
}

.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill {
  fill: #3b82f6;
}

/* Active/Selected State */
.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  background-color: #eff6ff !important;
  color: #2563eb !important;
}

.ql-snow .ql-toolbar button.ql-active .ql-stroke {
  stroke: #2563eb !important;
}

.ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: #2563eb !important;
}

/* Separator Grouping */
.ql-formats {
  margin-right: 0 !important;
  padding-right: 12px;
  border-right: 2px solid #f1f5f9;
  display: flex;
  gap: 4px;
}

.ql-formats:last-child {
  border-right: none;
}

/* Focus Ring Wrapper */
.editor-wrapper:focus-within .ql-toolbar {
  border-color: #3b82f6;
  background-color: #fff;
}

.editor-wrapper:focus-within .ql-container {
  border-color: #3b82f6;
}