#design table.mepr-options-pane {
  /* padding-bottom: 10px; */
  border-collapse: separate;
  border-spacing: 0 15px;
}

#design table.mepr-options-pane tr > td {
  padding-right: 10px;
}

table.mepr-modal-options-pane {
  /* table-layout: fixed; */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1.8em;
}

table.mepr-modal-options-pane .wp-editor-tools:after {
  display: none;
}

table.mepr-modal-options-pane tr td:first-child {
  width: 1%;
  white-space: nowrap;
}

.mepr_modal input::-ms-input-placeholder{
  color: #ccc;
}
.mepr_modal input:-ms-input-placeholder{
  color: #ccc;
}
.mepr_modal input::placeholder{
  color: #ccc;
}

table.mepr-modal-options-pane label.mepr-modal-options-pane-label {
  display: block;
  margin-bottom: 0.2rem;
}
table.mepr-modal-options-pane label.mepr-modal-options-pane-label span {
  color: #828282;
}

#mepr-readylaunch table.mepr-options-pane tr td {
  padding-left: 10px;
}

button.link {
  display: flex;
  align-items: centre;
  background: none;
  font-family: inherit; /* For all browsers */
  font-size: 100%; /* For all browsers */
  line-height: 1.15; /* For all browsers */
  margin: 0; /* Firefox and Safari have margin */
  padding: 0; /* Firefox and Safari have margin */
  border: 0;
  overflow: visible; /* Edge hides overflow */
  text-transform: none; /* Firefox inherits text-transform */
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: button; /* Safari otherwise prevents some styles */

  color: var(--wp-admin-theme-color, #2271b1);
  transition-property: border, background, color;
  transition-duration: 0.05s;
  transition-timing-function: ease-in-out;
}
/* style="padding-left: 10px;" */
/* style="padding-left: 10px;" */

.mepr-flex-row {
  display: flex;
  align-items: center;
}

.mepr-flex-row > * + * {
  margin-left: 10px;
}

.mepr-flex-row img {
  object-fit: contain;
  width: 100px;
  height: 100px;
}

#mepr-design-logo-remove-btn {
  text-decoration: none;
  margin-top: 5px;
  width: 100%;
  display: block;
}
/* Modal visibility controls */
.mepr_modal {
  display: none;
}

.mepr_modal.show {
  display: block;
}

/* Body class for modal open state */
body.modal-open {
  overflow: hidden;
}

/* Hide customize buttons by default and style them - they'll be shown via JS when template is enabled */
.mepr-customize-cell {
  display: none;
  text-align: left;
  padding-left: 20px;
}

.mepr-customize-cell.show {
  display: table-cell;
}

/* Modal close button styling */
.mepr_modal__close {
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: 18px;
  position: absolute;
  top: 10px;
  right: 15px;
  color: #666;
}

.mepr_modal__close:hover {
  color: #000;
}

/* FSE Opt-in Notice */
/* Info-notice styling that follows the active admin color scheme via
   --wp-admin-theme-color (the same variable the buttons use). We deliberately do
   NOT use WP's `.notice` classes: WordPress's admin JS relocates any `.notice` to
   the top of the page, away from this section. */
.mepr-fse-optin-notice {
  max-width: 600px;
  border-left: 4px solid var(--wp-admin-theme-color, #72aee6);
  background: #fff;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 2px;
}

.mepr-fse-optin-notice p {
  margin: 0 0 10px;
  font-size: 13px;
  color: #1d2327;
}

/* FSE Revert Link */
.mepr-fse-revert-link {
  font-size: 11px;
  color: #8c8f94;
  text-decoration: none;
}

.mepr-fse-revert-link:hover {
  color: var(--wp-admin-theme-color);
  text-decoration: underline;
}

/* FSE Templates Table */
.mepr-fse-templates-table {
  width: 100%;
  max-width: 600px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  border-collapse: collapse;
  background: #fff;
}

.mepr-fse-templates-table tbody tr {
  border-bottom: 1px solid #f0f0f1;
}

.mepr-fse-templates-table tbody tr:last-child {
  border-bottom: none;
}

.mepr-fse-templates-table td.mepr-fse-col-name {
  padding: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1d2327;
  vertical-align: middle;
}

.mepr-fse-templates-table td.mepr-fse-col-actions {
  padding: 12px 16px;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.mepr-fse-templates-table td.mepr-fse-col-actions .spinner {
  float: none;
  margin: 0;
}

/* Coming Soon text */
.mepr-fse-status-text--coming-soon {
  font-size: 13px;
  color: #8c8f94;
  font-style: italic;
}

/* Unconfigured page text */
.mepr-fse-status-text--unconfigured {
  font-size: 13px;
  color: #dba617;
}

/* Action state wrappers */
.mepr-fse-actions-applied,
.mepr-fse-actions-none {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

/* Remove Template link */
.mepr-fse-remove-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #646970;
  cursor: pointer;
  text-decoration: none;
}

.mepr-fse-remove-link:hover {
  color: #d63638;
}

/* Edit Template link */
.mepr-fse-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  text-decoration: none;
}

.mepr-fse-edit-link .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

/* Apply Template button — white background, outlined */
.mepr-fse-templates-table .mepr-fse-apply-btn {
  background: #fff;
  color: #1d2327;
  border: 1px solid #c3c4c7;
}

.mepr-fse-templates-table .mepr-fse-apply-btn:hover {
  background: #f6f7f7;
  border-color: #8c8f94;
  color: #1d2327;
}

/* Footer note */
.mepr-fse-templates-note {
  padding: 12px 16px;
  font-size: 11px;
  color: #646970;
  border-top: 1px solid #f0f0f1;
}

.mepr-fse-templates-note .dashicons {
  font-size: 12px;
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
  margin-right: 4px;
  color: #8c8f94;
}