:root {
  --mid-black: #4c4c4c;
  --soft-black: #7f7f7f;
  --soft-gray: #f1f1f1;
  --wp-components-color-accent: var(--mid-black);
  --wp-admin-theme-color: var(--mid-black);
  --mobile-max-height: min(750px, calc(100vh - 200px));
}

/* Popover width */
.components-base-control__field label {
  text-transform: none;
  font-size: 13px;
}
.components-base-control__field {
  margin-bottom: 0 !important;
}
.components-simple-tooltip.components-range-control__tooltip {
  display: none !important;
}

.block-editor-block-toolbar {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

.components-popover.block-editor-block-list__block-popover
  .block-editor-block-contextual-toolbar,
.components-toolbar-button {
  border-radius: 4px;
  border-color: var(--soft-black) !important;
}

.editor-visual-editor .components-button.has-icon,
.editor-visual-editor .components-button.is-tertiary {
  padding-top: 0;
  padding-bottom: 0;
}

.components-dropdown,
.components-button {
  color: var(--mid-black);
}

.components-dropdown-menu__menu
  .components-dropdown-menu__menu-item.is-active
  .dashicon,
.components-dropdown-menu__menu
  .components-dropdown-menu__menu-item.is-active
  svg,
.components-dropdown-menu__menu .components-menu-item.is-active .dashicon,
.components-dropdown-menu__menu .components-menu-item.is-active svg {
  background: var(--mid-black);
}

.components-popover.block-editor-block-list__block-popover
  .block-editor-block-toolbar
  .components-toolbar,
.components-popover.block-editor-block-list__block-popover
  .block-editor-block-toolbar
  .components-toolbar-group {
  border-right-color: var(--soft-black);
}

.block-editor-block-toolbar__block-controls
  .block-editor-block-switcher
  .components-dropdown-menu__toggle
  .block-editor-block-icon,
.block-editor-block-toolbar__block-controls
  .block-editor-block-switcher__no-switcher-icon
  .block-editor-block-icon,
.block-editor-block-parent-selector
  .block-editor-block-parent-selector__button
  .block-editor-block-icon {
  width: 36px !important;
}

.components-dropdown.components-dropdown-menu.block-editor-block-switcher {
  padding-right: 5px;
  border-right: 1px solid;
  margin-right: 9px;
}

.components-toolbar-group .components-button.components-button svg,
.components-toolbar-group .components-button.has-icon.has-icon svg,
.components-toolbar .components-button.components-button svg,
.components-toolbar .components-button.has-icon.has-icon svg {
  height: 30px;
  min-width: 30px;
}

.components-button.components-dropdown-menu__toggle.has-icon[aria-label='Font Size']
  .dashicon:before,
.block-editor-block-toolbar__block-controls
  .block-editor-block-switcher
  .components-dropdown-menu__toggle
  .dashicon:before {
  font-size: 30px;
}

.components-button.components-dropdown-menu__toggle[aria-label='Tag'] {
  font-size: 21px;
}

/*per altezza block controls */
.components-accessible-toolbar .components-button,
.components-toolbar .components-button {
  height: 39px;
}

.components-toolbar-group {
  min-height: 33px;
}

.block-editor-block-parent-selector button {
  height: 100% !important;
  padding: 10px !important;
  color: var(--mid-black) !important;
  border-radius: 4px;
  border-color: var(--soft-black);
}

.block-editor-block-icon img {
  opacity: 70%;
}

.block-editor-block-parent-selector {
  height: 100% !important;
}

.components-toggle-group-control,
.block-editor-block-inspector__tabs div[role='tablist'] {
  border-radius: 4px !important;
  background-color: var(--soft-gray) !important;
  border: none !important;
  padding: 4px !important;
  --selected-width: 0 !important;
}

.block-editor-block-inspector__tabs div[role='tablist'] button {
  height: 40px;
}

.block-editor-block-inspector__tabs {
  padding: 0 4px;
}

div[role='tabpanel'] > div > div[style*='padding: 10px;'] {
  padding: 10px 0 !important;
}

.components-card-body {
  padding: 10px 5px !important;
}

.components-range-control {
  padding: 0 10px !important;
}

.components-toggle-group-control button[aria-checked='true'],
.block-editor-block-inspector__tabs
  div[role='tablist']
  button[data-active-item='true'] {
  background-color: white !important;
  border: none !important;
  color: var(--mid-black);
  border-radius: 4px;
}

div[role='radiogroup'] {
  --selected-width: 0 !important;
  border: none !important;
}

div[role='radiogroup'] {
  border: none !important;
  box-shadow: none !important;
}

div[role='radiogroup']:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.component-alignment-matrix-control {
  background-color: var(--soft-gray);
  border-radius: 6.4px;
  height: 80px;
  width: 80px;
  padding: 5px;
}

.component-alignment-matrix-control,
.components-alignment-matrix-control {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 80px !important;
  height: 80px !important;
}

.components-alignment-matrix-control__root {
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* TARGET ALL DOTS */

.component-alignment-matrix-control span[role='presentation'] {
  border-radius: 1px !important;
}

.component-alignment-matrix-control span[role='presentation']:hover {
  background-color: black;
}

.components-range-control__wrapper > span:nth-child(2),
.components-range-control__track {
  height: 2px !important;
}

.components-range-control__thumb-wrapper {
  top: -1px !important;
}

.components-range-control__thumb-wrapper span::before {
  content: none !important;
}

/* REMOVE ARROWS COMPLETELY — Chrome, Edge, Safari */
.components-range-control__root
  .components-input-control__input[type='number']::-webkit-inner-spin-button,
.components-range-control__root
  .components-input-control__input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* REMOVE ARROWS COMPLETELY — Firefox */
.components-range-control__root
  .components-input-control__input[type='number'] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

/* RESET BROWSER DEFAULTS TO REMOVE SPINNER SPACE */
.components-range-control__root
  .components-input-control__input[type='number'] {
  appearance: textfield !important;
  -webkit-appearance: textfield !important;
}

.components-range-control__root .components-input-control__input {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  border: 2px solid #7f7f7f !important;
  border-radius: 6px !important;

  color: #444444 !important;
  text-align: center;
  font-size: 14px;
  background: white !important;
}

.components-text-control__input {
  border-radius: 2px !important;
  background-color: var(--soft-gray) !important;
  border: none !important;
}

.components-panel__body-toggle.components-button {
  height: 30px;
}

.components-input-base {
  border-radius: 6px !important;
}

.components-range-control__root .components-input-control__container {
  height: 40px !important;
  width: 40px !important;
  display: flex;
  align-items: center;
}

.components-range-control__root .components-input-control__backdrop {
  border: none !important;
  box-shadow: none !important;
}

.components-toolbar-button.is-pressed,
.components-toolbar-button[aria-pressed='true'],
.components-button.is-pressed,
.components-button[aria-pressed='true'],
.components-button[data-active-item='true'] {
  background: var(--soft-gray) !important;
  color: var(--mid-black) !important;
}

.components-button::before,
.components-toolbar-button::before {
  background: none !important;
  box-shadow: none !important;
}

/* MOBILE VIEW - Complete Solution */

/* Ensure body gives proper space */
html.view-as-mobile .interface-interface-skeleton__body {
  display: flex !important;
  overflow: visible !important;
}

/* Content area centered with proper spacing */
html.view-as-mobile .interface-interface-skeleton__content {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px 40px 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1;
}

/* Mobile frame container */
html.view-as-mobile .editor-visual-editor.edit-post-visual-editor {
  max-width: 375px;
  width: 375px;
  margin: 0 auto;
  border: 10px solid black;
  border-radius: 15px;
  height: var(--mobile-max-height);
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Inner scrollable content */
html.view-as-mobile .editor-visual-editor .components-resizable-box__container {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex;
  flex-direction: column;
}

/* The actual editor wrapper */
html.view-as-mobile .editor-styles-wrapper.block-editor-writing-flow {
  padding: 15px !important;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Position notices at top of mobile frame */
html.view-as-mobile .components-editor-notices__dismissible,
html.view-as-mobile .components-editor-notices__pinned {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  z-index: 1000;
  max-height: 30px;
  overflow: visible;
}

/* Hide empty notice containers */
html.view-as-mobile .components-notice-list:not(:has(*)) {
  display: none !important;
}

/* Ensure block popovers escape container with high z-index */
html.view-as-mobile .components-popover.block-editor-block-popover,
html.view-as-mobile .components-popover.block-editor-block-list__block-popover {
  position: fixed !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

/* Popover content visible */
html.view-as-mobile .components-popover__content {
  z-index: 100000 !important;
  overflow: visible !important;
}

/* Block toolbar styling - ensure it appears above sidebar */
html.view-as-mobile .block-editor-block-contextual-toolbar {
  z-index: 100001 !important;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

/* Ensure dropdowns also escape properly */
html.view-as-mobile .components-dropdown-menu__popover,
html.view-as-mobile .components-popover.components-dropdown__content {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Ensure sidebar doesn't overlap - give it lower z-index */
html.view-as-mobile .interface-interface-skeleton__sidebar {
  z-index: 1 !important;
  position: relative;
}