/* ─────────────────────────────────────────────
   Markify API Sandbox – Styles
   Include once in documentation.php
───────────────────────────────────────────── */

/* ── Trigger button ── */
.swg-try-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: #fff;
  border: 1.5px solid #2a7a4b;
  color: #2a7a4b;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.swg-try-btn:hover { background: #2a7a4b; color: #fff; }
.swg-try-btn svg { flex-shrink: 0; }

/* ── Overlay ── */
.sb-overlay {
  position: fixed; inset: 0;
  background: rgba(10,15,30,.45);
  backdrop-filter: blur(3px);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.sb-overlay.is-open { opacity: 1; pointer-events: all; }

/* ── Panel ── */
.sb-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: #fff;
  box-shadow: -8px 0 40px rgba(0,0,0,.12);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sb-panel.is-open { transform: translateX(0); }

/* ── Panel header ── */
.sb-head {
  padding: 20px 24px 18px;
  border-bottom: 1px solid #eaecf0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}
.sb-head__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sb-method {
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 4px;
}
.sb-method--PUT  { background: #fff3cd; color: #7a5000; }
.sb-method--GET  { background: #d1fae5; color: #065f46; }
.sb-method--POST { background: #dbeafe; color: #1e40af; }
.sb-method--DELETE { background: #fee2e2; color: #991b1b; }
.sb-path {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #4b5563;
}
.sb-head__title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.sb-close {
  width: 32px; height: 32px;
  border: none; background: none;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sb-close:hover { background: #f3f4f6; color: #111; }

/* ── Panel body ── */
.sb-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Section label ── */
.sb-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
}

/* ── Field ── */
.sb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.sb-field:last-child { margin-bottom: 0; }
.sb-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-label .req {
  font-size: 10px; font-weight: 700;
  color: #dc2626; background: #fef2f2;
  padding: 1px 5px; border-radius: 3px;
}
.sb-label .opt {
  font-size: 10px; font-weight: 600;
  color: #9ca3af;
}
.sb-hint {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}
.sb-input, .sb-select {
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.sb-input:focus, .sb-select:focus {
  outline: none;
  border-color: #2a7a4b;
  box-shadow: 0 0 0 3px rgba(42,122,75,.1);
}
.sb-input.is-required-empty {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}

/* ── Optional toggle ── */
.sb-optional-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px dashed #e5e7eb;
  border-radius: 7px;
  background: #fafafa;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  user-select: none;
  transition: border-color .15s, color .15s;
}
.sb-optional-toggle:hover { border-color: #2a7a4b; color: #2a7a4b; }
.sb-optional-toggle .sb-opt-chev { transition: transform .2s; margin-left: auto; }
.sb-optional-toggle.is-open .sb-opt-chev { transform: rotate(180deg); }
.sb-optional-body { display: none; padding: 14px 0 4px; }
.sb-optional-body.is-open { display: block; }

/* ── Sub-group ── */
.sb-group {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sb-group:last-child { margin-bottom: 0; }
.sb-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f9fafb;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  user-select: none;
  border: none;
  width: 100%;
  text-align: left;
}
.sb-group__head svg { transition: transform .2s; color: #9ca3af; }
.sb-group__head.is-open svg { transform: rotate(180deg); }
.sb-group__body { display: none; padding: 14px; border-top: 1px solid #e5e7eb; }
.sb-group__body.is-open { display: block; }

/* ── URL preview ── */
.sb-url-preview {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  padding: 10px 14px;
}
.sb-url-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sb-url-preview__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #16a34a;
}
.sb-url-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid #86efac;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: #16a34a;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sb-url-copy:hover { background: #16a34a; color: #fff; }
.sb-url-preview__value {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: #166534;
  word-break: break-all; line-height: 1.5;
}

/* ── Footer ── */
.sb-foot {
  padding: 16px 24px;
  border-top: 1px solid #eaecf0;
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.sb-send {
  flex: 1; height: 40px;
  background: #2a7a4b; color: #fff;
  border: none; border-radius: 7px;
  font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, transform .1s;
}
.sb-send:hover { background: #1f5e38; }
.sb-send:active { transform: scale(.98); }
.sb-send:disabled { background: #9ca3af; cursor: not-allowed; }
.sb-clear {
  height: 40px; padding: 0 16px;
  background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 7px; font-size: 13px; font-weight: 600;
  font-family: inherit; color: #6b7280; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sb-clear:hover { border-color: #9ca3af; color: #374151; }

/* ── Response ── */
.sb-response {
  display: none;
  margin: 0 24px 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.sb-response.is-visible { display: block; }
.sb-response__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.sb-response__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #6b7280;
}
.sb-status {
  font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
}
.sb-status--2xx { background: #d1fae5; color: #065f46; }
.sb-status--4xx { background: #fee2e2; color: #991b1b; }
.sb-status--err { background: #fef3c7; color: #92400e; }
.sb-response__body {
  padding: 14px; background: #111827;
  max-height: 280px; overflow-y: auto;
}
.sb-response__body pre {
  font-family: 'DM Mono', monospace;
  font-size: 12px; color: #d1fae5;
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}

/* ── Spinner ── */
.sb-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sb-spin .6s linear infinite;
  display: none;
}
.sb-send.is-loading .sb-spinner { display: block; }
.sb-send.is-loading .sb-send-label { display: none; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ── API key validator widget ── */
.sb-apikey {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sb-apikey__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'DM Mono', monospace;
  color: #111;
  background: #fff;
  transition: border-color .15s;
  outline: none;
}
.sb-apikey__input:focus {
  border-color: #2a7a4b;
}
.sb-apikey__btn {
  padding: 6px 14px;
  background: #fff;
  border: 1.5px solid #2a7a4b;
  color: #2a7a4b;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sb-apikey__btn:hover {
  background: #2a7a4b;
  color: #fff;
}
.sb-apikey__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.sb-apikey__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.sb-apikey__status--ok    { color: #2a7a4b; }
.sb-apikey__status--error { color: #dc2626; }
.sb-apikey__status--loading { color: #6b7280; font-weight: 400; }

/* Inline spinner for loading state */
.sb-apikey__spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid #d1d5db;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: sb-spin .6s linear infinite;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────
   ADD TO BOTTOM OF _sandbox.css
───────────────────────────────────────────── */

  /* ── URL preview — pinned below header, outside scroll area ── */
  .sb-url-preview {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #bbf7d0;
    padding: 10px 24px;
  }
.sb-exclusive-note {
  font-size: 11px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

/* ── Exclusive field — active (has value) ── */
.sb-field--exclusive {
  border-left: 2px solid #e5e7eb;
  padding-left: 10px;
  margin-left: 2px;
}

/* ── Exclusive field — disabled because another is filled ── */
.sb-field--exclusive-off {
  opacity: 0.38;
  pointer-events: none;
}
.sb-field--exclusive-off .sb-input,
.sb-field--exclusive-off .sb-select {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* ── Response mode: panel layout ── */

/* In response mode, the panel switches to a column layout where the
   response fills available space and the request is compressed to a
   collapsible strip at the top. */
.sb-panel--response-mode {
  /* nothing extra needed — flex-column already set */
}

/* The response block fills remaining space in response mode */
.sb-panel--response-mode .sb-response {
  flex: 1;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sb-panel--response-mode .sb-response__body {
  flex: 1;
  max-height: none;
}

/* ── Request summary strip ── */
.sb-req-summary {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 1px solid #eaecf0;
}
.sb-req-summary.is-active {
  display: flex;
}

.sb-req-summary__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #f9fafb;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  min-width: 0;
}
.sb-req-summary__toggle:hover {
  background: #f3f4f6;
}

.sb-req-summary__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
  flex-shrink: 0;
}

.sb-req-summary__url {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #166534;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sb-req-summary__chev {
  flex-shrink: 0;
  color: #9ca3af;
  display: flex;
  align-items: center;
  transition: transform .2s;
}
.sb-req-summary__chev.is-open {
  transform: rotate(180deg);
}

/* Collapsible form inside summary */
.sb-req-summary__body {
  display: none;
  overflow-y: auto;
  max-height: 45vh;
  padding: 16px 24px 8px;
  border-top: 1px solid #eaecf0;
}
.sb-req-summary__body.is-open {
  display: block;
}

/* Inline send/clear footer inside summary */
.sb-req-summary__foot {
  display: none;
  padding: 10px 24px;
  gap: 10px;
  border-top: 1px solid #eaecf0;
}
.sb-req-summary__foot.is-open {
  display: flex;
}

.sb-send--inline {
  flex: 1;
  height: 36px;
  font-size: 13px;
}
.sb-clear--inline {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* Hide main footer in response mode */
.sb-foot.is-hidden {
  display: none;
}