/**
 * eBay Edit Listing — product description (Quill) theme.
 * Loaded in accounts.blade.php AFTER quill.snow.css so these rules win on production
 * (e.g. https://listings.vintageinterior.co.uk/ebay/edit-ebay-listing).
 */

/* Section frame (matches other listing “card” blocks) */
#description_sec .ebay-description-page-block {
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 1.25rem 1rem 1.5rem;
  margin-bottom: 1rem;
}

#description_sec .ebay-description-title-pill {
  display: inline-block;
  background: #0ea5e9 !important;
  color: #0f172a !important;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #38bdf8;
}

#description_sec .ebay-description-enable-row {
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: rgba(245, 158, 11, 0.12);
}

/* Disabled: dim editor body only; keep toolbar crisp */
#description_sec .disabled-section .ql-container.ql-snow,
#description_sec .disabled-section .ql-editor {
  opacity: 0.55;
}

#description_sec .disabled-section .ql-toolbar.ql-snow,
#description_sec .disabled-section .ql-toolbar.ql-snow button,
#description_sec .disabled-section .ql-toolbar.ql-snow .ql-picker-label,
#description_sec .disabled-section .ql-toolbar.ql-snow .ql-picker {
  opacity: 1 !important;
}

/* Toolbar: support both class orders Quill may emit */
body #description_sec .ql-toolbar.ql-snow,
body #description_sec .ql-snow.ql-toolbar {
  background: #f1f5f9 !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 10px 10px 0 0;
  padding: 8px 6px;
}

body #description_sec .ql-toolbar.ql-snow .ql-formats,
body #description_sec .ql-snow.ql-toolbar .ql-formats {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

body #description_sec .ql-toolbar.ql-snow button,
body #description_sec .ql-snow.ql-toolbar button {
  width: 32px !important;
  height: 30px !important;
  padding: 4px !important;
  border-radius: 6px;
  border: 1px solid transparent;
  opacity: 1 !important;
  filter: none !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-picker,
body #description_sec .ql-toolbar.ql-snow .ql-picker-label,
body #description_sec .ql-toolbar.ql-snow .ql-picker-item,
body #description_sec .ql-snow.ql-toolbar .ql-picker,
body #description_sec .ql-snow.ql-toolbar .ql-picker-label,
body #description_sec .ql-snow.ql-toolbar .ql-picker-item {
  color: #0f172a !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-picker-label,
body #description_sec .ql-snow.ql-toolbar .ql-picker-label {
  height: 30px;
  line-height: 28px;
  border-radius: 6px;
  padding: 0 8px;
}

body #description_sec .ql-toolbar.ql-snow .ql-stroke,
body #description_sec .ql-toolbar.ql-snow svg .ql-stroke,
body #description_sec .ql-toolbar.ql-snow svg line,
body #description_sec .ql-toolbar.ql-snow svg polyline,
body #description_sec .ql-toolbar.ql-snow svg path:not(.ql-fill),
body #description_sec .ql-snow.ql-toolbar .ql-stroke,
body #description_sec .ql-snow.ql-toolbar svg .ql-stroke,
body #description_sec .ql-snow.ql-toolbar svg line,
body #description_sec .ql-snow.ql-toolbar svg polyline,
body #description_sec .ql-snow.ql-toolbar svg path:not(.ql-fill) {
  stroke: #020617 !important;
  stroke-width: 2.35px !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-fill,
body #description_sec .ql-toolbar.ql-snow svg .ql-fill,
body #description_sec .ql-toolbar.ql-snow svg path.ql-fill,
body #description_sec .ql-snow.ql-toolbar .ql-fill,
body #description_sec .ql-snow.ql-toolbar svg .ql-fill,
body #description_sec .ql-snow.ql-toolbar svg path.ql-fill {
  fill: #020617 !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-even,
body #description_sec .ql-snow.ql-toolbar .ql-even {
  stroke: #020617 !important;
  fill: #020617 !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-picker-options,
body #description_sec .ql-snow.ql-toolbar .ql-picker-options {
  background-color: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 8px;
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
}

body #description_sec .ql-toolbar.ql-snow .ql-size .ql-picker-item::before,
body #description_sec .ql-toolbar.ql-snow .ql-size .ql-picker-label::before,
body #description_sec .ql-snow.ql-toolbar .ql-size .ql-picker-item::before,
body #description_sec .ql-snow.ql-toolbar .ql-size .ql-picker-label::before {
  content: attr(data-label);
}

body #description_sec .ql-toolbar.ql-snow .ql-font .ql-picker-item::before,
body #description_sec .ql-toolbar.ql-snow .ql-font .ql-picker-label::before,
body #description_sec .ql-snow.ql-toolbar .ql-font .ql-picker-item::before,
body #description_sec .ql-snow.ql-toolbar .ql-font .ql-picker-label::before {
  content: attr(data-label);
}

body #description_sec .ql-toolbar.ql-snow button:hover,
body #description_sec .ql-toolbar.ql-snow button:focus,
body #description_sec .ql-toolbar.ql-snow .ql-picker-label:hover,
body #description_sec .ql-toolbar.ql-snow .ql-picker-item:hover,
body #description_sec .ql-snow.ql-toolbar button:hover,
body #description_sec .ql-snow.ql-toolbar button:focus,
body #description_sec .ql-snow.ql-toolbar .ql-picker-label:hover,
body #description_sec .ql-snow.ql-toolbar .ql-picker-item:hover {
  background-color: #e2e8f0 !important;
  border-color: #64748b !important;
}

body #description_sec .ql-toolbar.ql-snow button.ql-active,
body #description_sec .ql-toolbar.ql-snow .ql-picker-label.ql-active,
body #description_sec .ql-toolbar.ql-snow .ql-picker-item.ql-selected,
body #description_sec .ql-snow.ql-toolbar button.ql-active,
body #description_sec .ql-snow.ql-toolbar .ql-picker-label.ql-active,
body #description_sec .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
}

body #description_sec .ql-toolbar.ql-snow button.ql-active .ql-stroke,
body #description_sec .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
body #description_sec .ql-toolbar.ql-snow button.ql-active svg line,
body #description_sec .ql-toolbar.ql-snow button.ql-active svg polyline,
body #description_sec .ql-snow.ql-toolbar button.ql-active .ql-stroke,
body #description_sec .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
body #description_sec .ql-snow.ql-toolbar button.ql-active svg line,
body #description_sec .ql-snow.ql-toolbar button.ql-active svg polyline {
  stroke: #ffffff !important;
}

body #description_sec .ql-toolbar.ql-snow button.ql-active .ql-fill,
body #description_sec .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill,
body #description_sec .ql-toolbar.ql-snow button.ql-active svg path.ql-fill,
body #description_sec .ql-snow.ql-toolbar button.ql-active .ql-fill,
body #description_sec .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
body #description_sec .ql-snow.ql-toolbar button.ql-active svg path.ql-fill {
  fill: #ffffff !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-editAnchor,
body #description_sec .ql-toolbar.ql-snow .ql-customFullscreen,
body #description_sec .ql-snow.ql-toolbar .ql-editAnchor,
body #description_sec .ql-snow.ql-toolbar .ql-customFullscreen {
  color: #020617 !important;
}

body #description_sec .ql-toolbar.ql-snow .ql-editAnchor:hover,
body #description_sec .ql-toolbar.ql-snow .ql-customFullscreen:hover,
body #description_sec .ql-snow.ql-toolbar .ql-editAnchor:hover,
body #description_sec .ql-snow.ql-toolbar .ql-customFullscreen:hover {
  background-color: #e2e8f0 !important;
}

body #description_sec .ql-toolbar.ql-snow + .ql-container.ql-snow,
body #description_sec .ql-snow.ql-toolbar + .ql-container.ql-snow,
body #description_sec .ql-container.ql-snow {
  border: 1px solid #94a3b8 !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px;
  min-height: 420px;
  background: #17212f !important;
}

body #description_sec .ql-snow .ql-editor {
  min-height: 380px;
  color: #f8fafc !important;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  background: #17212f !important;
}

body #description_sec .ql-snow .ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*
 * Pasted listings often include inline style="color:#000" (or dark) on random tags.
 * Plain .ql-editor { color } does not beat inline styles — descendant rules with !important do.
 */
body #description_sec .ql-snow .ql-editor,
body #description_sec .ql-snow .ql-editor * {
  color: #f1f5f9 !important;
}

body #description_sec .ql-snow .ql-editor a,
body #description_sec .ql-snow .ql-editor a * {
  color: #7dd3fc !important;
  text-decoration: underline;
}

body #description_sec .ql-snow .ql-editor pre,
body #description_sec .ql-snow .ql-editor code,
body #description_sec .ql-snow .ql-editor .ql-syntax {
  color: #e2e8f0 !important;
  background-color: #0f172a !important;
}

#description_sec.ebay-description--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 16px;
  background: rgba(10, 15, 25, 0.96);
}

#description_sec.ebay-description--fullscreen .ql-container.ql-snow {
  min-height: calc(100vh - 80px);
}