/* ============================
   KETMarket — Saved Search UI
   ============================ */
:root {
  --ketm-bg: #ffffff;
  --ketm-text: #1c1f23;
  --ketm-muted: #5f6b76;
  --ketm-border: #e6edf3;
  --ketm-accent: #005E86;   /* primary blue */
  --ketm-accent-2: #0073aa; /* secondary blue */
  --ketm-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --ketm-radius: 14px;
  --ketm-radius-button: 5px;              /* <- ergänzt */
  --ketm-gap: 14px;
  --ketm-label-w: 240px;    /* desktop label width */
  --ketm-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Wrapper */
.ketm-saved-search {
  font-family: var(--ketm-font);
  color: var(--ketm-text);
  background: var(--ketm-bg);
  border: 1px solid var(--ketm-border);
  border-radius: var(--ketm-radius);
  box-shadow: var(--ketm-shadow);
  padding: 20px;
  margin: 24px 0;
}

/* Title */
.ketm-saved-search__title {
  margin: 0 0 14px 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ketm-accent);
}

/* Meta area (ID + saved at) */
.ketm-saved-search__meta {
  display: grid;
  grid-template-columns: var(--ketm-label-w) 1fr;
  gap: 8px var(--ketm-gap);
  padding: 12px 0 16px 0;
  border-bottom: 1px solid var(--ketm-border);
  margin-bottom: 12px;
}

/* Data rows */
.ketm-saved-search__data {
  display: grid;
  grid-template-columns: var(--ketm-label-w) 1fr;
  gap: 10px var(--ketm-gap);
}

/* Each row */
.ketm-saved-search__row {
  display: contents; /* labels/values align into the grid columns */
}

/* Labels */
.ketm-saved-search__label {
  align-self: start;
  color: var(--ketm-muted);
  font-size: .92rem;
  line-height: 1.4;
  letter-spacing: .2px;
  font-weight: 600;
}

/* Values */
.ketm-saved-search__value {
  align-self: start;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ketm-text);
  background: #fafcfe;
  border: 1px solid var(--ketm-border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Links (email/website) */
.ketm-saved-search__value a {
  color: var(--ketm-accent-2);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.ketm-saved-search__value a:hover {
  text-decoration: none;
  border-bottom-style: solid;
}

/* JSON view */
.ketm-saved-search--json {
  background: #0d1b24;
  color: #f0f6fa;
  border: 1px solid #0b2a3a;
  border-radius: var(--ketm-radius);
  padding: 16px;
  overflow: auto;
  box-shadow: var(--ketm-shadow);
}
.ketm-saved-search--json code,
.ketm-saved-search--json pre {
  color: inherit;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  margin: 0;
}

/* Empty / not logged states */
.ketm-saved-search--empty,
.ketm-saved-search--not-logged {
  background: #fffaf0;
  border: 1px solid #ffe4a3;
  color: #6d5b2e;
  border-radius: var(--ketm-radius);
  padding: 14px 16px;
}

/* Subtle row hover (desktop) */
@media (hover: hover) {
  .ketm-saved-search__value:hover {
    background: #f3f9ff;
    border-color: #d7e7f3;
  }
}

/* Responsive: stack labels/values */
@media (max-width: 880px) {
  :root { --ketm-label-w: 180px; }
}
@media (max-width: 640px) {
  .ketm-saved-search__meta,
  .ketm-saved-search__data {
    grid-template-columns: 1fr;
  }
  .ketm-saved-search__label {
    margin-top: 6px;
    font-size: .88rem;
  }
  .ketm-saved-search__value {
    margin-top: 2px;
  }
}

/* Print: remove shadows/colors, keep structure */
@media print {
  .ketm-saved-search,
  .ketm-saved-search--json {
    box-shadow: none;
    border-color: #bbb;
    background: #fff;
    color: #000;
  }
  .ketm-saved-search__value {
    background: #fff;
  }
}

/* ============================
   KETMarket — Shortcode Controls (Buttons, Edit-Mode, Monthly Mail)
   ============================ */

/* optionale lokale Zusatzfarben – nur im Scope des Shortcodes */
.ketm-saved-search {
  --ketm-success: #16a34a;
  --ketm-success-700: #15803d;
  --ketm-danger:  #dc2626;
  --ketm-danger-700: #b91c1c;
}

/* Aktionsleiste */
.ketm-saved-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0 18px;
  justify-content: flex-end;
}

/* Buttons – wie deine Form-Buttons (accent-2 → hover accent) */
.ketm-saved-search .button {
  display: inline-block;
  padding: 5px 15px;
  background: var(--ketm-accent-2);
  border: 1px solid var(--ketm-accent-2);
  border-radius: var(--ketm-radius-button);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, transform .02s ease-in;
}
.ketm-saved-search .button:hover {
  background: var(--ketm-accent);
  border-color: var(--ketm-accent);
}
.ketm-saved-search .button:active { transform: translateY(1px); }
.ketm-saved-search .button[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* Primärer Button (Save) */
.ketm-saved-search .button.button-primary {
  background: var(--ketm-accent);
  border-color: var(--ketm-accent);
}
.ketm-saved-search .button.button-primary:hover {
  background: var(--ketm-accent-2);
  border-color: var(--ketm-accent-2);
}

/* Emojis/Icons in Buttons (falls vorhanden) */
.ketm-saved-search .button img.emoji {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.1em;
  filter: brightness(0) saturate(100%) invert(1);
  margin-right: .35rem;
}

/* Monthly Mail – Info & Toggle */
.ketm-mm-nextsend {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--ketm-border);
  border-radius: var(--ketm-radius);
  background: #fff;
  box-shadow: var(--ketm-shadow);
}
.ketm-mm-nextsend h4 {
  margin: 0 0 8px;
  color: var(--ketm-accent);
  font-weight: 700;
  letter-spacing: .2px;
}
.ketm-mm-nextsend__row {
  display: flex;
  gap: .6rem;
  margin: .3rem 0;
  align-items: baseline;
}
.ketm-mm-nextsend__label { min-width: 160px; color: var(--ketm-muted); }
/* Button in der Monthly-Mail-Box vollbreit */
.ketm-mm-nextsend__actions {
  display: block;              /* statt flex */
}

.ketm-mm-nextsend__actions .ketm-mm-toggle {
  display: block;              /* statt inline-block */
  width: 100%;
  box-sizing: border-box;      /* inkl. Border/Padding */
}

/* Toggle-Button (Enable/Disable) */
.ketm-saved-search .ketm-mm-toggle {
  padding: 5px 15px;
  border-radius: var(--ketm-radius-button);
  border-width: 1px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.ketm-saved-search .ketm-mm-toggle[data-optout="0"] {
  background: var(--ketm-danger);
  border-color: var(--ketm-danger);
}
.ketm-saved-search .ketm-mm-toggle[data-optout="0"]:hover {
  background: var(--ketm-danger-700);
  border-color: var(--ketm-danger-700);
}
.ketm-saved-search .ketm-mm-toggle[data-optout="1"] {
  background: var(--ketm-success);
  border-color: var(--ketm-success);
}
.ketm-saved-search .ketm-mm-toggle[data-optout="1"]:hover {
  background: var(--ketm-success-700);
  border-color: var(--ketm-success-700);
}

/* Edit-Mode Visuals (inline-edit Felder) */
.ketm-saved-search.is-editing .ketm-saved-search__value[contenteditable="true"] {
  background: #fff;
  border: 1px dashed var(--ketm-accent);
  padding: 10px 12px;
  border-radius: 10px;
}
.ketm-saved-search.is-editing .ketm-saved-search__value[contenteditable="true"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 94, 134, 0.12);
}

/* Standard: nur "Edit" sichtbar */
.ketm-saved-search .ketm-ss-save,
.ketm-saved-search .ketm-ss-cancel { display: none; }

/* Beim Bearbeiten: "Save" & "Cancel" zeigen, "Edit" verstecken */
.ketm-saved-search.is-editing .ketm-ss-save,
.ketm-saved-search.is-editing .ketm-ss-cancel { display: inline-block; }
.ketm-saved-search.is-editing .ketm-ss-edit { display: none; }

/* ===== Zwei-Spalten-Layout + CTA rechts (Sidebar) ===== */
.ketm-ss-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
.ketm-ss-main { min-width: 0; }
.ketm-ss-aside { min-width: 0; }

@media (max-width: 980px) {
  .ketm-ss-layout { grid-template-columns: 1fr; }
}

/* CTA box oberhalb Monthly Mail */
.ketm-ss-cta {
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid var(--ketm-border);
  border-radius: var(--ketm-radius);
  background: #fff;
  box-shadow: var(--ketm-shadow);
}
.ketm-ss-cta h4 {
  margin: 0 0 6px;
  color: var(--ketm-accent);
  font-weight: 700;
  letter-spacing: .2px;
}
.ketm-ss-cta p {
  margin: 0 0 10px;
  color: var(--ketm-muted);
  font-size: .95rem;
}
.ketm-ss-cta .button {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 5px 15px;
  background: var(--ketm-accent-2);
  border: 1px solid var(--ketm-accent-2);
  border-radius: var(--ketm-radius-button);
  color: #fff;
  font-size: 14px !important;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, transform .02s ease-in;
}
.ketm-ss-cta .button:hover {
  background: var(--ketm-accent);
  border-color: var(--ketm-accent);
}
.ketm-ss-cta .button:active { transform: translateY(1px); }