/**
 * Elementor Panel Visual Polish
 * Overrides to match the real Elementor editor appearance exactly.
 * Loaded after editor.css and theme-light.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ─── Panel Width ─────────────────────────────────────────────────────────── */
:root {
  --e-editor-panel-width: 300px;
}

/* ─── Panel Container ─────────────────────────────────────────────────────── */
.elementor-panel {
  width: 300px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 13px;
  background-color: #ffffff;
  border-inline-end: 1px solid #E6E8EA;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
.elementor-panel #elementor-panel-header {
  height: 40px;
  min-height: 40px;
  background-color: #0C0D0E;
  color: #9DA5AE;
  border: none;
}

.elementor-panel #elementor-panel-header-title {
  color: #9DA5AE;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.elementor-panel .elementor-header-button {
  color: #9DA5AE;
}

.elementor-panel .elementor-header-button:hover,
.elementor-panel .elementor-header-button:focus {
  color: #D5D8DC;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.elementor-panel #elementor-panel-footer {
  height: 40px;
  min-height: 40px;
  background-color: #0C0D0E !important;
  color: #B7BBC0 !important;
  border: none;
  margin-top: auto;
}

/* Footer tools row
   editor.css ships these as percentage widths (15% per icon, 30% publish, 10%
   chevron) and gets re-loaded by the real-editor boot AFTER panel-polish.css,
   so we use !important on the layout props that conflict to win regardless of
   source order. Cosmetic props (color/bg) don't need it because editor.css
   leaves them on `currentColor`. */
.elementor-panel #elementor-panel-footer-tools {
  display: flex;
  align-items: stretch;
  height: 40px;
  width: 100%;
}

.elementor-panel .elementor-panel-footer-tool {
  width: 40px !important;
  min-width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #B7BBC0;
  border: none;
  flex: 0 0 40px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-panel .elementor-panel-footer-tool > i,
.elementor-panel .elementor-panel-footer-tool > span > i {
  font-size: 15px;
  line-height: 1;
  color: inherit;
}

.elementor-panel .elementor-panel-footer-tool:not(.e-open):hover,
.elementor-panel .elementor-panel-footer-tool:not(.e-open):focus {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
}

.elementor-panel .elementor-panel-footer-tool.e-open,
.elementor-panel .elementor-panel-footer-tool.elementor-open {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.08);
}

/* Publish container takes remaining space; save options stays compact. */
.elementor-panel #elementor-panel-footer-saver-publish {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  margin-inline-start: 0;
}

.elementor-panel #elementor-panel-footer-saver-options {
  width: 40px !important;
  min-width: 40px;
  flex: 0 0 40px !important;
  padding: 0;
}

/* ─── Content Wrapper ─────────────────────────────────────────────────────── */
#elementor-panel-content-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;
}

/* ─── Navigation Tabs ─────────────────────────────────────────────────────── */
.elementor-panel .elementor-panel-navigation {
  background-color: #ffffff;
  border-bottom: 1px solid #E6E8EA;
}

.elementor-panel .elementor-panel-navigation .elementor-panel-navigation-tab {
  border-bottom: 3px solid transparent;
  background: none;
}

.elementor-panel .elementor-panel-navigation .elementor-panel-navigation-tab span {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  color: #818A96;
  letter-spacing: 0.5px;
}

.elementor-panel .elementor-panel-navigation .elementor-panel-navigation-tab:hover {
  background-color: #F1F2F3;
}

.elementor-panel .elementor-panel-navigation .elementor-panel-navigation-tab.elementor-active {
  border-bottom-color: #D004D4 !important;
  border-color: #D004D4 !important;
  background: none;
}

.elementor-panel .elementor-panel-navigation .elementor-panel-navigation-tab.elementor-active span {
  color: #0C0D0E;
  font-weight: 500;
}

/* ─── Section Headings ────────────────────────────────────────────────────── */
.elementor-panel-heading {
  height: 48px;
  padding: 0 20px;
  border-top: 2px solid #E6E8EA;
  background-color: transparent;
  font-size: 13px;
}

.elementor-panel-heading-title {
  font-weight: bold;
  font-size: 12px;
  color: #0C0D0E;
}

#elementor-controls .elementor-control-type-section:first-child .elementor-panel-heading,
#elementor-panel-page-settings-controls .elementor-control-type-section:first-child .elementor-panel-heading {
  border-top: none;
}

/* ─── Controls ────────────────────────────────────────────────────────────── */
.elementor-control {
  padding: 0 20px 15px;
}

.elementor-control .elementor-control-title {
  font-size: 12px;
  font-weight: normal;
  color: #515962;
}

/* Inline label layout — mirrors the real Elementor pattern (editor.css:1889).
   The field is `display: flex; align-items: center`. Title shrinks to its
   own content (capped at 60% so it never starves the input), and the
   input-wrapper gets `margin-inline-start: auto` so it's pushed all the way
   to the right edge. The auto margin also leaves room for any siblings
   that sit between title and input-wrapper (responsive-switchers and the
   e-units-wrapper that show up on slider / dimensions / etc.), which keeps
   their alignment consistent across every control type. */
.elementor-label-inline > .elementor-control-content > .elementor-control-field > .elementor-control-title {
  flex-shrink: 0;
  max-width: 60%;
  margin-inline-end: 5px;
}

.elementor-label-inline > .elementor-control-content > .elementor-control-field > .elementor-control-input-wrapper {
  margin-inline-start: auto;
  min-width: 0;
}

/* Choose control (alignment / orientation toggles): give each icon-label
   horizontal padding so the 12px eicons aren't crammed against each other,
   and let the row align to the right edge of the input-wrapper with the
   icons sized to their padding. Mirrors the real Elementor compact-toggle
   look — see editor.css `.elementor-choices`. */
.elementor-control-type-choose .elementor-choices {
  justify-content: flex-end;
  gap: 0;
}
.elementor-control-type-choose .elementor-choices .elementor-choices-label {
  min-width: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.elementor-control-type-choose .elementor-choices .elementor-choices-label i {
  font-size: 13px;
}

/* The slider track + number-input pair inside .elementor-control-input-wrapper
   needs to fill the wrapper. Give the slider room to breathe and the number
   input a fixed compact width. */
.elementor-control-type-slider .elementor-control-input-wrapper .elementor-slider {
  flex: 1 1 auto;
  min-width: 0;
  /* Clip the noUiSlider handle so a 0-width track from a long title doesn't
     leave a stray purple circle floating between the label and the number
     input (Background Hover > Transition Duration was the worst case). */
  overflow: hidden;
}
.elementor-control-type-slider .elementor-control-input-wrapper .elementor-slider-input {
  flex: 0 0 54px;
  margin-inline-start: 8px;
}
.elementor-control-type-slider .elementor-control-input-wrapper .elementor-slider-input input {
  width: 100%;
  text-align: center;
}

/* ─── Inputs ──────────────────────────────────────────────────────────────── */
.elementor-panel input,
.elementor-panel select,
.elementor-panel textarea,
.elementor-panel .e-input-style {
  height: 27px;
  padding: 5px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #D5D8DC;
  background-color: #ffffff;
  color: #515962;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

.elementor-panel textarea,
.elementor-panel .e-input-style {
  height: auto;
  min-height: 27px;
}

.elementor-panel select {
  height: 27px;
  padding: 0 5px;
}

.elementor-panel input:focus,
.elementor-panel select:focus,
.elementor-panel textarea:focus,
.elementor-panel .e-input-style:focus {
  border-color: #BABFC5;
  box-shadow: none;
  outline: none;
}

/* ─── Choices / Icon Buttons ──────────────────────────────────────────────── */
.elementor-choices {
  border: 1px solid #D5D8DC;
  border-radius: 3px;
  overflow: hidden;
  /* Shrink the bordered button-group to fit its visible labels. Without
     this, label-inline controls' input-wrapper is wider than the labels
     (which align flex-end), so the border leaves an empty bordered "ghost
     cell" to the LEFT of the first icon. */
  width: -moz-fit-content;
  width: fit-content;
  margin-inline-start: auto;
}

.elementor-choices label {
  border-radius: 0;
  border: none;
  border-inline-end: 1px solid #E6E8EA;
  height: 27px;
}

.elementor-choices label:last-child {
  border-inline-end: none;
}

.elementor-choices input:checked + label {
  background-color: #E6E8EA;
  color: #0C0D0E;
}

/* ─── Color Picker Global Indicator ───────────────────────────────────────── */
.elementor-control-type-color.e-control-global .elementor-control-input-wrapper::before {
  background-color: #1DDDBF;
}

/* ─── Slider / Number Controls ────────────────────────────────────────────── */
.elementor-slider .noUi-connect {
  background-color: #D004D4;
}

.elementor-slider .noUi-handle {
  border-radius: 50%;
  border: 2px solid #D004D4;
  background: #ffffff;
}

/* ─── Switcher ────────────────────────────────────────────────────────────── */
.elementor-control-type-switcher .elementor-switch-input:checked ~ .elementor-switch-label {
  background-color: #D004D4;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.elementor-panel .elementor-button {
  border-radius: 3px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.elementor-panel .elementor-button.elementor-button-success {
  background-color: #D004D4;
  color: #ffffff;
}

.elementor-panel .elementor-button.elementor-button-success:hover {
  background-color: #b003b0;
}

/* ─── Publish Button ──────────────────────────────────────────────────────── */
.elementor-panel #elementor-panel-saver-button-publish {
  width: 100% !important;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: #D004D4;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.elementor-panel #elementor-panel-saver-button-publish:hover {
  background-color: #B003B0;
}

.elementor-panel #elementor-panel-saver-button-publish.elementor-disabled {
  background-color: #1F2124;
  color: #818A96;
  cursor: not-allowed;
}

.elementor-panel #elementor-panel-saver-button-publish.elementor-disabled:hover {
  background-color: #1F2124;
}

.elementor-panel #elementor-panel-saver-button-publish #elementor-panel-saver-button-publish-label {
  color: inherit;
}

/* Save options chevron button matches footer tool size */
.elementor-panel #elementor-panel-saver-button-save-options {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: #B7BBC0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.elementor-panel #elementor-panel-saver-button-save-options:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
}

.elementor-panel #elementor-panel-saver-button-save-options.elementor-disabled {
  color: #818A96;
  cursor: not-allowed;
}

/* ─── Search Input ──────────────────────────────────────────────────────────
   editor.css ships height/font-size/border-radius/border on the same ID
   selector and is loaded twice (index.html + real-editor-boot), so we
   selectively !important the props that conflict to win regardless of order. */
#elementor-panel-elements-search-area {
  padding: 10px 20px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E6E8EA;
}

#elementor-panel-elements-search-wrapper {
  position: relative;
  display: block;
}

#elementor-panel-elements-search-input {
  width: 100%;
  height: 30px;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-style: normal !important;
  padding: 5px 10px 5px 30px !important;
  background-color: #F1F3F5 !important;
  border: 1px solid #E6E8EA !important;
  color: #515962;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

#elementor-panel-elements-search-input::placeholder {
  color: #818A96;
  font-style: normal;
}

#elementor-panel-elements-search-input:focus {
  border-color: #D004D4 !important;
  background-color: #FFFFFF !important;
  box-shadow: none;
  outline: none;
}

#elementor-panel-elements-search-wrapper i.eicon-search-bold,
#elementor-panel-elements-search-wrapper > i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #818A96;
  font-size: 13px;
  pointer-events: none;
}

#elementor-panel-elements-search-input:focus ~ i.eicon-search-bold,
#elementor-panel-elements-search-wrapper:focus-within > i {
  color: #D004D4;
}

/* ─── Widget Categories ───────────────────────────────────────────────────── */
.elementor-panel .elementor-panel-category {
  border-bottom: 1px solid #E6E8EA;
}

.elementor-panel .elementor-panel-category .elementor-panel-heading {
  height: 48px;
  font-size: 12px;
  font-weight: bold;
  color: #0C0D0E;
}

/* ─── Widget Elements Grid ────────────────────────────────────────────────── */
.elementor-panel .elementor-element-wrapper .elementor-element {
  border-radius: 3px;
  font-size: 11px;
  color: #515962;
}

.elementor-panel .elementor-element-wrapper .elementor-element:hover {
  background-color: #F1F2F3;
  color: #0C0D0E;
}

.elementor-panel .elementor-element-wrapper .elementor-element i {
  color: #515962;
}

.elementor-panel .elementor-element-wrapper .elementor-element:hover i {
  color: #D004D4;
}

/* ─── Scrollbar Styling ───────────────────────────────────────────────────── */
#elementor-panel-content-wrapper::-webkit-scrollbar {
  width: 6px;
}

#elementor-panel-content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

#elementor-panel-content-wrapper::-webkit-scrollbar-thumb {
  background-color: #D5D8DC;
  border-radius: 3px;
}

#elementor-panel-content-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #BABFC5;
}

/* ─── Panel Menu Items ────────────────────────────────────────────────────── */
.elementor-panel .elementor-panel-menu-item:hover,
.elementor-panel .elementor-panel-menu-item:focus {
  background-color: #F1F2F3;
}

.elementor-panel .elementor-panel-menu-item:active {
  background-color: #E6E8EA;
}

/* ─── Descriptors / Help Text ─────────────────────────────────────────────── */
.elementor-panel .elementor-descriptor,
.elementor-panel .elementor-control-field-description {
  color: #818A96;
  font-size: 11px;
  line-height: 1.4;
}

/* ─── Popover Controls ────────────────────────────────────────────────────── */
.elementor-panel .elementor-controls-popover {
  border-radius: 3px;
  border: 1px solid #E6E8EA;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* ─── Responsive Switchers ────────────────────────────────────────────────── */
.elementor-control-responsive-switchers .elementor-responsive-switcher {
  color: #818A96;
}

.elementor-control-responsive-switchers .elementor-responsive-switcher:hover {
  color: #D004D4;
}

/* ─── Dynamic Tag Indicator ───────────────────────────────────────────────── */
.elementor-control-dynamic-switcher {
  color: #D004D4;
}

.elementor-control-dynamic-switcher:hover {
  color: #b003b0;
}

/* ─── Navigator Drag-and-Drop ────────────────────────────────────────────── */

/* Drop indicator line between siblings */
.elementor-navigator__drop-indicator {
  height: 2px;
  background-color: #D004D4;
  border-radius: 1px;
  margin: 0 8px;
  pointer-events: none;
  position: relative;
  z-index: 10;
}

/* Highlight when dropping inside a container */
.elementor-navigator__item.elementor-navigator__drop-target {
  outline: 2px solid #D004D4;
  outline-offset: -2px;
  border-radius: 3px;
  background-color: rgba(208, 4, 212, 0.06);
}

/* Dim the element being dragged */
.elementor-navigator__element.elementor-navigator__dragging {
  opacity: 0.4;
}

/* Dragged item cursor */
.elementor-navigator__item[draggable="true"] {
  cursor: grab;
}

.elementor-navigator__item[draggable="true"]:active {
  cursor: grabbing;
}

/* ─── Navigator Search & Filter Toolbar ───────────────────────────────────── */
/* The full toolbar styles are injected via JS (navigator-search.mjs) under
 * #elementic-nav-search. The rules below are layout-stable supplements:
 *  - Reserve flex height for the toolbar so the tree below shrinks instead
 *    of overflowing the panel.
 *  - Restate hide / force-open / highlight classes so they apply even if the
 *    inline stylesheet is stripped (e.g. by an ad-blocker rewriting <style>).
 */
#elementor-navigator__inner {
  display: flex;
  flex-direction: column;
}
#elementic-nav-search {
  flex: 0 0 auto;
}
.elementor-navigator__element.elementic-nav-search-hidden {
  display: none !important;
}
.elementor-navigator__element.elementic-nav-search-force-open
  > .elementor-navigator__elements {
  display: block !important;
}
mark.elementic-nav-search-hit {
  background: #facc15;
  color: #111;
  padding: 0 2px;
  border-radius: 2px;
}

/* ─── Display Conditions Panel UI ─────────────────────────────────────────── */
.elementic-display-conditions {
  border-bottom: 1px solid #E6E8EA;
  padding: 12px 15px;
  margin-bottom: 0;
}

.elementic-dc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.elementic-dc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6D7882;
  letter-spacing: 0.5px;
}

/* Toggle switch */
.elementic-dc-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
  cursor: pointer;
}

.elementic-dc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.elementic-dc-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: #C2CBD2;
  border-radius: 18px;
  transition: background-color 0.2s;
}

.elementic-dc-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.elementic-dc-toggle input:checked + .elementic-dc-toggle-slider {
  background-color: #93003F;
}

.elementic-dc-toggle input:checked + .elementic-dc-toggle-slider::before {
  transform: translateX(18px);
}

/* Body */
.elementic-dc-body {
  margin-top: 8px;
}

.elementic-dc-relation {
  margin-bottom: 10px;
}

.elementic-dc-relation label {
  display: block;
  font-size: 11px;
  color: #6D7882;
  margin-bottom: 4px;
}

.elementic-dc-relation-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #D5D8DC;
  border-radius: 3px;
  font-size: 12px;
  background: #fff;
}

/* Condition rows */
.elementic-dc-conditions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.elementic-condition-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px;
  background: #F7F8F9;
  border: 1px solid #E6E8EA;
  border-radius: 4px;
}

.elementic-condition-row__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.elementic-condition-row__fields select,
.elementic-condition-row__fields input {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #D5D8DC;
  border-radius: 3px;
  font-size: 11px;
  background: #fff;
}

.elementic-condition-row__value {
  display: flex;
  gap: 4px;
}

.elementic-condition-row__value input {
  flex: 1;
  min-width: 0;
}

.elementic-condition-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #C2CBD2;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.elementic-condition-remove:hover {
  color: #93003F;
  background: rgba(147, 0, 63, 0.08);
}

/* Add condition button */
.elementic-dc-add-condition {
  width: 100%;
  padding: 7px 10px;
  border: 1px dashed #C2CBD2;
  border-radius: 3px;
  background: transparent;
  color: #6D7882;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.elementic-dc-add-condition:hover {
  border-color: #93003F;
  color: #93003F;
}

/* ─── Canvas Conditions Badge ─────────────────────────────────────────────── */
.elementic-conditions-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(147, 0, 63, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  z-index: 100;
  pointer-events: auto;
  cursor: help;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.elementor-has-conditions {
  outline: 1px dashed rgba(147, 0, 63, 0.4);
  outline-offset: -1px;
}

/* ─── Revisions Panel ────────────────────────────────────────────────────── */
#elementic-revisions-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.elementic-revisions-header {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  color: #0C0D0E;
  border-bottom: 1px solid #E6E8EA;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.elementic-revisions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.elementic-revisions-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #818A96;
}

.elementic-revisions-empty p {
  margin: 8px 0 0;
  font-size: 13px;
}

.elementic-revisions-empty-sub {
  font-size: 11px !important;
  opacity: 0.7;
  max-width: 200px;
}

.elementic-revision-item {
  padding: 10px 20px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.elementic-revision-item:hover {
  background-color: #F7F8F9;
}

.elementic-revision-item.is-previewing {
  background-color: #FDF0FD;
  border-left-color: #D004D4;
}

.elementic-revision-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.elementic-revision-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
}

.elementic-revision-badge.badge-publish {
  background-color: #E8F8F0;
  color: #1B8553;
}

.elementic-revision-badge.badge-draft {
  background-color: #F1F2F3;
  color: #515962;
}

.elementic-revision-badge.badge-autosave {
  background-color: #EBF4FF;
  color: #2563EB;
}

.elementic-revision-badge.badge-restore {
  background-color: #FFF7ED;
  color: #C2410C;
}

.elementic-revision-time {
  font-size: 11px;
  color: #818A96;
}

.elementic-revision-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9DA5AE;
}

.elementic-revision-timestamp {
  color: #9DA5AE;
}

.elementic-revision-author {
  color: #9DA5AE;
}

/* ─── Revision Preview Bar ───────────────────────────────────────────────── */
#elementic-revision-preview-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #1F1225;
  color: #FFFFFF;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 12px;
  z-index: 10000;
  position: relative;
}

.elementic-preview-bar-text {
  color: #E0D0E8;
}

.elementic-preview-bar-text strong {
  color: #FFFFFF;
}

.elementic-preview-bar-actions {
  display: flex;
  gap: 8px;
}

.elementic-preview-bar-apply {
  background-color: #D004D4;
  color: #FFFFFF;
  border: none;
  border-radius: 3px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.elementic-preview-bar-apply:hover {
  background-color: #B003B0;
}

.elementic-preview-bar-discard {
  background-color: transparent;
  color: #E0D0E8;
  border: 1px solid #5A4065;
  border-radius: 3px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.elementic-preview-bar-discard:hover {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ─── History Panel (Actions tab) ────────────────────────────────────────── */

.elementic-history-actions-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.elementic-history-actions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.elementic-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #6D7882;
}

.elementic-history-empty p {
  margin: 8px 0 0;
  font-size: 13px;
}

.elementic-history-empty-sub {
  font-size: 11px !important;
  opacity: 0.7;
}

.elementic-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-left: 3px solid transparent;
}

.elementic-history-item:hover {
  background-color: #F1F3F5;
}

.elementic-history-item.is-current {
  background-color: #EDF2FF;
  border-left-color: #3b82f6;
}

.elementic-history-item.is-future {
  opacity: 0.45;
}

.elementic-history-item.is-future:hover {
  opacity: 0.7;
}

.elementic-history-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.elementic-history-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.elementic-history-title {
  font-size: 12px;
  font-weight: 500;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elementic-history-subtitle {
  font-size: 10px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elementic-history-time {
  font-size: 10px;
  color: #9CA3AF;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Onboarding tour menu entry ──────────────────────────────────────────── */
/* The tour itself injects its own scoped stylesheet via onboarding-tour.mjs.
   This rule just keeps the "Restart Tour" hamburger row visually aligned with
   the surrounding Theme Builder / Keyboard Shortcuts entries (the bundled
   editor.css doesn't size injected menu items consistently). */
.elementor-panel-menu-item.elementic-tour-menu-item {
  cursor: pointer;
}
.elementor-panel-menu-item.elementic-tour-menu-item:hover {
  background-color: #F5F7FA;
}
.elementor-panel-menu-item.elementic-tour-menu-item .elementor-panel-menu-item-icon i {
  color: #529CFF;
}

/* ─── Notifications (toast/center) ────────────────────────────────────────────
 * The runtime styles for the notification system are injected dynamically by
 * src/notifications.mjs (installNotifications). The rules below are the
 * cascade hooks that survive a hard refresh before the module bootstraps and
 * provide a graceful style fallback if JS is disabled in the panel chrome.
 */
#elementic-notification-toasts {
  position: fixed;
  bottom: 16px;
  inset-inline-end: 16px;
  z-index: 2147483600;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.elementic-toast {
  pointer-events: auto;
  background: #ffffff;
  color: #1F2937;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 10px -3px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #6B7280;
}
.elementic-toast--success { border-left-color: #10B981; }
.elementic-toast--error   { border-left-color: #EF4444; }
.elementic-toast--warning { border-left-color: #F59E0B; }
.elementic-toast--info    { border-left-color: #3B82F6; }
.elementic-toast--loading { border-left-color: #6B7280; }

#elementic-notification-bell {
  color: #9DA5AE;
}
#elementic-notification-bell:hover {
  color: #D5D8DC;
}