/* Developer Tutorial Series: Payments Integration
   Design: Amber · Indigo dev accents · Outfit/Inter/JetBrains Mono */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; scroll-behavior: smooth; }

:root {
  --bg: #f6f8fa; --bg-card: #fff; --bg-hover: #f0f2f4; --bg-tag: #eaeef2;
  --border: #d0d7de; --border-dark: #b0b8c2;
  --text: #1f2328; --text-2: #424a53; --text-3: #636c76; --text-4: #9198a1;
  --amber: #d97706; --amber-hover: #b45309; --amber-bg: #fffbeb; --amber-border: #fde68a;
  --indigo: #4c6ef5; --indigo-hover: #3b5bdb; --indigo-light: #edf2ff; --indigo-border: #c5d0fd;
  --teal: #0d9488; --teal-bg: #f0fdfa; --teal-border: #99f6e4;
  --green: #1a7f37; --green-bg: #dafbe1; --green-border: #99e6b0;
  --red: #cf222e; --red-bg: #ffebe9; --red-border: #ffcecb;
  --orange: #c2410c; --orange-bg: #fff7ed; --orange-border: #fed7aa;
  --code-bg: #0f172a; --code-text: #e2e8f0;
  --nav-h: 64px; --wide-w: 1120px; --content-w: 860px;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(31,35,40,0.08), 0 4px 12px rgba(31,35,40,0.04);
  --shadow-lg: 0 4px 16px rgba(31,35,40,0.12);
  --font-display: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.7; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 10px; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(246,248,250,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.nav-inner { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-brand { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--text); text-decoration: none; }
.nav-brand span { color: var(--amber); }
.nav-links { display: flex; gap: 0.25rem; }
.nav-link { color: var(--text-3); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius); transition: all 0.15s; }
.nav-link:hover, .nav-link.active { background: var(--bg-hover); color: var(--text); }
.nav-actions { display: flex; gap: 0.5rem; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; padding: 9px 20px; border-radius: var(--radius); text-decoration: none; transition: all 0.15s; cursor: pointer; border: none; white-space: nowrap; }
.btn-amber { background: var(--amber); color: #fff; border: 1px solid var(--amber); }
.btn-amber:hover { background: var(--amber-hover); }
.btn-outline { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg-hover); border-color: var(--border-dark); }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* BADGES */
.badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.badge-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge-indigo { background: var(--indigo-light); color: var(--indigo); border: 1px solid var(--indigo-border); }
.badge-teal { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-border); }
.badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.badge-gray { background: var(--bg-tag); color: var(--text-2); border: 1px solid var(--border); }

/* LAYOUT */
.container { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; }
.tutorial-body { max-width: var(--content-w); margin: 0 auto; padding: 3rem 2rem; }
.section-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.5rem; }

/* TUTORIAL HUB CARD */
.tutorial-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-decoration: none; display: block; transition: all 0.2s; }
.tutorial-card:hover { box-shadow: var(--shadow-lg); border-color: var(--amber); transform: translateY(-2px); }
.tutorial-card-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
.tutorial-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.tutorial-card-desc { font-size: 0.85rem; color: var(--text-3); line-height: 1.7; margin-bottom: 1rem; }
.tutorial-card-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* PROGRESS STEPS */
.progress-steps { display: flex; align-items: center; gap: 0; padding: 1rem 0 1.5rem; overflow-x: auto; }
.progress-step { display: flex; align-items: center; flex-shrink: 0; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; background: var(--bg-tag); color: var(--text-4); border: 2px solid var(--border); transition: all 0.2s; }
.step-dot.active { background: var(--amber); color: #fff; border-color: var(--amber); }
.step-dot.done { background: var(--teal); color: #fff; border-color: var(--teal); }
.step-label { font-size: 0.72rem; color: var(--text-4); margin: 0 0.25rem 0 0.4rem; font-weight: 500; white-space: nowrap; }
.step-label.active { color: var(--amber); font-weight: 600; }
.step-connector { width: 24px; height: 2px; background: var(--border); flex-shrink: 0; }
.step-connector.done { background: var(--teal); }

/* TUTORIAL STEP SECTIONS */
.tutorial-step { margin-bottom: 3.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--border); }
.tutorial-step:last-child { border-bottom: none; }
.step-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--amber); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; flex-shrink: 0; }
.step-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--text); letter-spacing: -0.015em; }
.step-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-4); margin-top: 0.25rem; }
.step-content p { font-size: 0.9rem; color: var(--text-2); line-height: 1.85; margin-bottom: 0.85rem; }
.step-content ul, .step-content ol { font-size: 0.88rem; color: var(--text-2); padding-left: 1.5rem; margin-bottom: 0.85rem; }
.step-content li { line-height: 1.75; margin-bottom: 0.35rem; }
.step-content strong { color: var(--text); font-weight: 600; }
.step-content code { font-family: var(--font-mono); font-size: 0.82em; background: var(--bg-tag); padding: 1px 6px; border-radius: 4px; color: var(--indigo); border: 1px solid var(--border); }

/* CODE TABS */
.code-tabs-wrap { margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.code-tabs-header { display: flex; background: #1e293b; border-bottom: 1px solid #334155; }
.code-tab { padding: 8px 16px; font-family: var(--font-mono); font-size: 0.75rem; color: #64748b; cursor: pointer; border: none; background: transparent; transition: all 0.15s; border-right: 1px solid #334155; }
.code-tab:hover { color: #94a3b8; background: #293548; }
.code-tab.active { color: var(--amber); background: #293548; border-bottom: 2px solid var(--amber); }
.code-tab-content { display: none; }
.code-tab-content.active { display: block; }
.code-block { background: var(--code-bg); color: var(--code-text); padding: 1.25rem 1.5rem; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.8; overflow-x: auto; white-space: pre; margin: 0; border: none; }
.code-block .kw  { color: #c792ea; }
.code-block .str { color: #c3e88d; }
.code-block .num { color: #f78c6c; }
.code-block .cmt { color: #546e7a; font-style: italic; }
.code-block .key { color: #82aaff; }
.code-block .fn  { color: #82aaff; }
.code-block .var { color: #e2e8f0; }
.code-block .punc { color: #89ddff; }

/* CALLOUTS */
.callout { border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0; border-left: 3px solid; }
.callout-title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.callout p { font-size: 0.875rem; line-height: 1.7; color: var(--text-2); margin: 0; }
.callout-warning { background: var(--orange-bg); border-color: var(--orange); } .callout-warning .callout-title { color: var(--orange); }
.callout-tip { background: var(--teal-bg); border-color: var(--teal); } .callout-tip .callout-title { color: var(--teal); }
.callout-note { background: var(--indigo-light); border-color: var(--indigo); } .callout-note .callout-title { color: var(--indigo); }

/* RESPONSE OBJECT */
.response-block { background: #0f172a; border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1rem 0; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.8; overflow-x: auto; }

/* STATUS TABLE */
.status-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 1rem 0; }
.status-table th { background: var(--bg-tag); border-bottom: 2px solid var(--border); padding: 10px 12px; text-align: left; font-weight: 700; color: var(--text); }
.status-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.status-table tr:last-child td { border-bottom: none; }
.status-cell-code { font-family: var(--font-mono); font-size: 0.78rem; }

/* PREREQS */
.prereqs { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.prereqs-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.75rem; }
.prereqs ul { list-style: none; padding: 0; }
.prereqs li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--text-2); padding: 0.35rem 0; }
.prereqs li::before { content: '☐'; color: var(--amber); font-size: 1rem; flex-shrink: 0; }

/* NEXT STEPS */
.next-steps { background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 3rem; }
.next-steps-title { font-family: var(--font-display); font-weight: 700; color: var(--text); margin-bottom: 0.75rem; }
.next-steps-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.75rem; }
.next-steps-link { display: block; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--amber-border); border-radius: var(--radius); text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--amber); transition: all 0.15s; }
.next-steps-link:hover { background: var(--amber); color: #fff; }

/* BREADCRUMB */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-3); padding-bottom: 1rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb-sep { color: var(--text-4); }

/* RETURN CODE TABLE */
.return-code-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 1rem 0; }
.return-code-table th { background: var(--code-bg); color: var(--code-text); padding: 8px 12px; text-align: left; font-family: var(--font-mono); font-size: 0.75rem; }
.return-code-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.return-code-table tr:hover td { background: var(--bg-hover); }
.rc-code { font-family: var(--font-mono); color: var(--red); font-weight: 600; }

/* FOOTER */
.footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; margin-top: 3rem; }
.footer-inner { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-brand { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--text); }
.footer-brand span { color: var(--amber); }
.footer-col-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 0.75rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { font-size: 0.82rem; color: var(--text-3); text-decoration: none; }
.footer-links a:hover { color: var(--amber); }
.footer-bottom { max-width: var(--wide-w); margin: 2rem auto 0; padding: 1rem 2rem 0; border-top: 1px solid var(--border); }
.footer-copy { font-size: 0.78rem; color: var(--text-4); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .next-steps-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0f172a;
  --bg-card:     #1e293b;
  --bg-hover:    #334155;
  --bg-tag:      #1e293b;
  --border:      #334155;
  --border-dark: #475569;
  --text:        #f1f5f9;
  --text-2:      #cbd5e1;
  --text-3:      #94a3b8;
  --text-4:      #64748b;
  --code-bg:     #0f172a;
  --code-text:   #e2e8f0;
}
[data-theme="dark"] .nav { background: rgba(15,23,42,0.95); border-bottom-color: var(--border); }
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Theme toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  line-height: 1;
  margin-left: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text); }