/* --- 1. Design Tokens & Global Reset --- */
:root {
  --bg: #eef2f7;
  --card: #ffffff;
  --border: #dde3ec;
  --text: #1a2035;
  --text-muted: #667082;
  --pp-blue: #0070e0;
  --pp-dark: #003087;
  --success: #16a34a;
  --error: #dc2626;
  --warning: #d97706;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 12px rgba(0,0,0,.08);
  --font: 'Inter', system-ui, sans-serif;
  --font-head: 'Orbitron', sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', monospace;
  --sidebar-width: 240px; /* Increased for professional spacing */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  margin: 0 !important;
  display: block;
}

/* --- 2. The Sidebar (Ripped out of flow to stay left) --- */
#sidebar {
  background-color: #b3e5fc !important; /* Professional light blue */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  padding: 20px 15px !important;
  box-shadow: 2px 0 10px rgba(0,0,0,.1);
  z-index: 9999 !important; /* Ensures it stays above the header */
  overflow-y: auto;
}

/* --- 3. Content Wrapper (The 'Container' for the right side) --- */
#content-wrapper {
  margin-left: var(--sidebar-width) !important;
  width: calc(100% - var(--sidebar-width)) !important;
  min-height: 100vh;
  display: block;
}

/* --- 4. Header Styling --- */
.page-header, header {
  background: var(--pp-dark) !important;
  padding: 20px 40px !important;
  color: white;
  display: flex !important;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100% !important;
}

.page-header h1, header h1, header h2 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  margin: 0;
}

/* --- 5. Professional Grid/Flex Layout --- */
.page-body, main.columns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  padding: 40px !important;
}

/* Standardizing columns for both /v6 and /paypal */
.checkout-col, section.left-column, section.left {
  flex: 1 1 600px !important;
  max-width: 900px !important;
}

.debug-col, section.right-column, section.right {
  flex: 0 1 480px !important;
  min-width: 320px;
}

/* --- 6. Sidebar Headings & Resource Links --- */
#sidebar h2 {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-dark);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 48, 135, 0.2);
}

#sidebar ul:not(.dropdown-menu) {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

#sidebar ul:not(.dropdown-menu) li a {
  display: block;
  text-decoration: none;
  color: #333;
  font-size: 0.875rem;
  font-family: var(--font);
  padding: 5px 0;
  transition: color 0.2s;
}

#sidebar ul:not(.dropdown-menu) li a:hover {
  color: var(--pp-blue);
}

/* --- 6b. Sidebar Dropdowns --- */
.sidebar-section { margin-bottom: 12px; }

.dropdown-toggle {
  width: 100%;
  text-align: left;
  background: var(--pp-blue);
  color: white;
  padding: 12px 15px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-toggle::after { content: '\203A'; font-size: 1.4rem; transition: transform 0.3s; }
.dropdown-toggle.active::after { transform: rotate(90deg); }

.dropdown-menu {
  display: none;
  list-style: none;
  padding: 8px 0 12px 15px;
  border-left: 2px solid var(--pp-blue);
  margin: 5px 0 10px 5px;
}

.dropdown-menu.open { display: block; }

.dropdown-menu li a { 
  text-decoration: none; 
  color: #333; 
  font-size: 0.9rem; 
  display: block; 
  padding: 6px 0; 
  transition: color 0.2s;
}

.dropdown-menu li a:hover { color: var(--pp-blue); }

/* Coming Soon badge + disabled link */
.badge-soon {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.28);
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.link-soon {
  opacity: 0.6;
  cursor: default !important;
  pointer-events: none;
}

/* Informational note inside a dropdown-menu */
.sidebar-note {
  font-size: 0.75rem;
  color: #555;
  font-style: italic;
  line-height: 1.45;
  padding: 2px 0 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 4px;
}

.sidebar-note a {
  color: var(--pp-blue);
  text-decoration: underline;
  font-style: normal;
  pointer-events: auto;
}

/* --- 7. UI Components --- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: var(--shadow);
}

/* Exclude checkboxes/radios from field reset */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfd;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
}

button:not(.dropdown-toggle) {
  padding: 12px 24px;
  background: var(--pp-blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

button:not(.dropdown-toggle):hover { background: var(--pp-dark); }

/* --- 8. Card Body & Form Rows (/paypal) --- */
.card .body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.row > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

header .small {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 6px;
  line-height: 1.5;
}

/* --- 9. Accordion / Debug Panel (/paypal) --- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

summary {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
  background: #f4f7fc;
  border-bottom: 1px solid var(--border);
}

summary::-webkit-details-marker { display: none; }

details[open] summary {
  background: var(--pp-dark);
  color: white;
}

.pane {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pane > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

textarea.mono, .mono {
  font-family: var(--mono);
  font-size: 12px;
  min-height: 120px;
  resize: vertical;
}

/* --- 10. v6 Header Components --- */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sdk-badge {
  background: var(--pp-blue);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  color: white;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.status-pill.ready .status-dot { background: var(--success); }
.status-pill.error .status-dot { background: var(--error); }

/* --- 11. v6 Card Title & Order Layout --- */
.card-title {
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.order-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.order-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfd;
  overflow: hidden;
}

.input-prefix {
  padding: 0 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f0f3f8;
  border-right: 1.5px solid var(--border);
  display: flex;
  align-items: center;
}

.input-wrap input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 12px;
  font-size: 15px;
}

/* --- 11b. Order Configuration — Simple / JSON tabs --- */
.order-tabs {
  display: flex;
  gap: 3px;
  background: #f0f3f8;
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 14px;
}

.order-tab {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.order-tab:hover { background: rgba(255,255,255,0.7); color: var(--text); }

.order-tab.active {
  background: white;
  color: var(--pp-blue);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* JSON editor */
.json-editor {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  background: #1a2035;
  color: #a8d8a8;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-height: 150px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.json-editor:focus { border-color: var(--pp-blue); }
.json-editor.invalid { border-color: var(--error) !important; }

.json-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}

.json-status {
  font-size: 0.75rem;
  font-weight: 600;
}

.json-status.valid   { color: var(--success); }
.json-status.invalid { color: var(--error); }

.json-editor-actions { display: flex; gap: 6px; }

.json-action-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.15s, border-color 0.15s;
}

.json-action-btn:hover { color: var(--pp-blue); border-color: var(--pp-blue); }

/* --- 11c. Pay Later toggle in Order Config --- */
.order-toggle-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--pp-blue);
  cursor: pointer;
}

.order-toggle-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

/* --- 11d. Pay Later card header + config panel --- */
.paylater-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.paylater-hd .card-title { margin-bottom: 0; }

.paylater-cfg-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.paylater-cfg-btn:hover,
.paylater-cfg-btn.active {
  color: var(--pp-blue);
  border-color: var(--pp-blue);
  background: rgba(0,112,224,0.05);
}

#paylater-cfg-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pl-cfg-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.pl-cfg-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pl-layout-tabs {
  display: flex;
  gap: 4px;
}

.pl-layout-tab {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
}

.pl-layout-tab.active {
  background: var(--pp-blue);
  color: white;
  border-color: var(--pp-blue);
}

/* --- 12. v6 Payment Method List --- */
.method-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.method-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  user-select: none;
}

.method-row:hover {
  border-color: var(--pp-blue);
  background: #f5f9ff;
  box-shadow: 0 2px 8px rgba(0,112,224,0.08);
}

/* Checked state — blue border + subtle tint */
.method-row:has(input:checked) {
  border-color: var(--pp-blue);
  background: linear-gradient(135deg, #eef6ff 0%, #f5f9ff 100%);
  box-shadow: 0 0 0 3px rgba(0,112,224,0.1);
}

/* Native checkbox reset and re-style */
.method-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: white;
  flex-shrink: 0;
  accent-color: var(--pp-blue);
  cursor: pointer;
}

.method-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: box-shadow 0.2s;
}

.method-row:has(input:checked) .method-icon {
  box-shadow: 0 0 0 2px var(--pp-blue);
}

.icon-paypal      { background: rgba(0,112,224,0.12);  color: var(--pp-blue); }
.icon-venmo       { background: rgba(61,149,206,0.12);  color: #3d95ce; }
.icon-paylater    { background: rgba(0,112,224,0.08);   color: var(--pp-dark); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; }
.icon-card        { background: rgba(102,112,130,0.12); color: var(--text-muted); font-size: 1rem; }
.icon-fields      { background: rgba(22,163,74,0.12);   color: var(--success); font-size: 1rem; }
.icon-apple       { background: rgba(0,0,0,0.08);       color: #1d1d1f; font-size: 1rem; }
.icon-google      { background: rgba(66,133,244,0.12);  color: #4285f4; font-weight: 700; }
/* APM icons */
.icon-bancontact  { background: rgba(0,88,163,0.12);    color: #0058a3; font-size: 0.62rem; font-weight: 700; }
.icon-bank-ach    { background: rgba(22,163,74,0.12);   color: var(--success); font-size: 0.58rem; font-weight: 700; }
.icon-blik        { background: rgba(229,57,53,0.12);   color: #e53935; font-size: 0.68rem; font-weight: 700; }
.icon-eps         { background: rgba(180,34,34,0.12);   color: #b42222; font-size: 0.62rem; font-weight: 700; }
.icon-ideal       { background: rgba(0,163,224,0.12);   color: #00a3e0; font-size: 0.65rem; font-weight: 700; }
.icon-p24         { background: rgba(209,52,56,0.12);   color: #d13438; font-size: 0.58rem; font-weight: 700; }
.icon-sepa        { background: rgba(0,48,135,0.12);    color: var(--pp-dark); font-size: 0.65rem; font-weight: 700; }

.method-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

/* Small monospace tag for the component name */
.method-name code {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
  margin-left: 4px;
}

.eligibility-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.3s;
}

/* Payment method group labels */
.method-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 14px 0 5px;
  margin: 0;
  border-top: 1px solid var(--border);
}

.method-group-label:first-child {
  padding-top: 0;
  border-top: none;
}

/* Buttons render area */
.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.btn-slot { min-height: 44px; }

#googlepay-button-container,
#googlepay-button-container > * { display: block; width: 100%; }

/* SDK custom elements — must be block to take container width */
paypal-button,
venmo-button,
paypal-basic-card-container,
paypal-basic-card-button,
apple-pay-button {
  display: block;
  width: 100%;
}

/* Select wrapper with custom chevron */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
}

.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

/* --- 13. v6 Card Fields --- */
.card-fields-area {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 10px;
}

.area-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.card-fields-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cf-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-host {
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfd;
  padding: 2px;
}

.pay-btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--pp-blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.pay-btn:hover:not(:disabled) { background: var(--pp-dark); }
.pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- 14. v6 Debug Panel --- */
.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.debug-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.debug-type-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--pp-blue);
  color: white;
}

.debug-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f4f7fc;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.debug-id-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.debug-id-value {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
}

.copy-btn {
  padding: 4px 12px !important;
  font-size: 0.75rem !important;
  flex-shrink: 0;
}

.json-pane {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: #1a2035;
  color: #a8d8a8;
  border-radius: var(--radius-sm);
  padding: 15px;
  min-height: 80px;
  max-height: 380px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  transition: max-height 0.3s ease;
}

.json-pane.empty {
  max-height: 80px;
  color: var(--text-muted);
  background: #f4f7fc;
  font-family: var(--font);
  font-style: italic;
}

/* --- 15. v6 Visibility Toggles (JS-controlled) --- */

/* Elements hidden by default, shown when JS adds .visible */
.btn-slot,
.buttons-container,
#area-card-fields,
.debug-id-row {
  display: none;
}

.btn-slot.visible {
  display: block;
  width: 100%;
}

.buttons-container.visible {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 4px;
  padding: 16px;
  background: #f8fafd;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* Constrain to a sensible button width — SDK buttons look best 200px–500px */
  max-width: 480px;
}

#area-card-fields.visible { display: block; }
.debug-id-row.visible     { display: flex; }

/* Eligibility dot states */
.eligibility-dot.eligible   { background: var(--success); }
.eligibility-dot.ineligible { background: var(--error); }

.method-row.ineligible { opacity: 0.5; }

/* Flash animation for debug panes on update */
@keyframes flash-in {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

.json-pane.flash { animation: flash-in 0.35s ease-out; }

/* --- 16. v6 Debug Column — Header Actions, Reset, Client Log, Server Sections --- */

/* Header actions group (reset btn + status pill) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Config button */
.config-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.config-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* Reset All button */
.reset-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.reset-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* Section tag (small pill next to card title) */
.section-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(0,112,224,0.1);
  color: var(--pp-blue);
  letter-spacing: 0.03em;
}

/* Clear log button */
.clear-log-btn {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.2s, border-color 0.2s;
}
.clear-log-btn:hover { color: var(--error); border-color: var(--error); }

/* Client log container */
.client-log {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: #1a2035;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 100px;
  max-height: 230px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.log-empty {
  color: #4a5568;
  font-style: italic;
  font-family: var(--font);
  font-size: 0.8rem;
}

.log-entry {
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1.45;
}

.log-time {
  color: #4a5568;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.log-level {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.log-level-info    { background: rgba(0,112,224,0.25);  color: #60a5fa; }
.log-level-success { background: rgba(22,163,74,0.25);  color: #4ade80; }
.log-level-warn    { background: rgba(217,119,6,0.25);  color: #fbbf24; }
.log-level-error   { background: rgba(220,38,38,0.25);  color: #f87171; }

.log-msg {
  color: #c9d1d9;
  word-break: break-word;
}

/* Server card — Request / Response tab bar */
.server-tabs {
  display: flex;
  gap: 3px;
  background: #f0f3f8;
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-top: 14px;
  margin-bottom: 10px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  background: transparent;
}

.server-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: #f0f3f8;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.server-tab:hover {
  background: #e5eaf3;
  color: var(--text);
}

.server-tab.active {
  background: white;
  color: var(--pp-blue);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.tab-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--pp-blue);
  color: white;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-badge:empty { display: none; }

.server-tab-panel { display: none; }
.server-tab-panel.active { display: block; }

/* --- 17. Credentials Config Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-dialog {
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--pp-dark);
  color: white;
}

.modal-title {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.modal-close {
  background: transparent !important;
  border: none !important;
  color: white !important;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 2px !important;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.modal-close:hover { opacity: 1; background: transparent !important; }

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-hint {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-family: var(--mono);
}

.modal-note {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.55;
  background: #f4f7fc;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  border-left: 3px solid var(--pp-blue);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: #fafbfd;
}

.modal-footer-actions { display: flex; gap: 8px; }

.modal-cancel-btn {
  padding: 8px 18px;
  font-size: 0.875rem;
  background: white;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s;
}
.modal-cancel-btn:hover { background: #f0f3f8; }

.modal-save-btn {
  padding: 8px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--pp-blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s;
}
.modal-save-btn:hover:not(:disabled) { background: var(--pp-dark); }
.modal-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font);
}
.modal-link-btn:hover { color: var(--error); }

/* --- 18. JSON Syntax Highlighting --- */
.json-pane .jk { color: #79b8ff; }   /* key   */
.json-pane .js { color: #9ecbff; }   /* string value */
.json-pane .jn { color: #f8c555; }   /* number */
.json-pane .jb { color: #56d364; }   /* boolean */
.json-pane .jz { color: #8b949e; }   /* null */
.json-pane .jp { color: #e1e4e8; }   /* punctuation */

/* --- 17. Before-Payment Page --- */

/* Main JSON editor textarea */
#referralJson {
  min-height: 320px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

/* Small italic helper text used across pages */
.hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* --- 19. Mobile / Hamburger --- */

/* Hamburger button — hidden on desktop, shown via media query */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.15) !important; }
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Semi-transparent overlay behind the open sidebar on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9997;
}
.sidebar-overlay.active { display: block; }

@media (max-width: 768px) {
  /* Sidebar off-screen by default; slides in when .open */
  #sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9999 !important;
  }
  #sidebar.open { transform: translateX(0) !important; }

  /* Content fills full width */
  #content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Show hamburger */
  .hamburger-btn { display: flex !important; }

  /* Tighter page padding */
  .page-body, main.columns {
    padding: 16px !important;
    gap: 16px !important;
  }

  /* Stack columns vertically */
  .checkout-col, section.left-column, section.left {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .debug-col, section.right-column, section.right {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Compact header */
  .page-header, header {
    padding: 12px 16px !important;
  }
  .page-header h1, header h1, header h2 {
    font-size: 0.95rem !important;
  }

  /* Hide status pill to save space; it is still accessible via client log */
  #sdk-status { display: none !important; }

  /* Prevent body scroll when sidebar is open */
  body.sidebar-open { overflow: hidden; }
}