/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Variables are now defined in custom.css to avoid conflicts */

/* Code Tabs Styles - Only for Example Request sections */
.code-tabs { 
  border: 1px solid #e4e8f1 !important;
  border-radius: 12px !important; 
  margin: 12px 0 24px !important; 
  overflow: hidden !important; 
}

.code-tabs-nav { 
  display: flex; 
  gap: 6px; 
  padding: 8px 8px 0 8px; 
  flex-wrap: wrap; 
  border-bottom: 1px solid #e4e8f1; 
}

.code-tabs-nav button,
.code-tabs-nav label { 
  appearance: none; 
  border: 0; 
  background: transparent; 
  padding: 10px 12px; 
  cursor: pointer; 
  border-radius: 8px 8px 0 0; 
  font-weight: 600; 
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity: .8; 
  position: relative;
  z-index: 10;
  display: inline-block;
}

.code-tabs-nav button[aria-selected="true"],
#tab-curl:checked ~ .code-tabs-nav label[for="tab-curl"],
#tab-node:checked ~ .code-tabs-nav label[for="tab-node"],
#tab-go:checked ~ .code-tabs-nav label[for="tab-go"],
#tab-java:checked ~ .code-tabs-nav label[for="tab-java"] { 
  color: var(--accent); 
  opacity: 1; 
  box-shadow: inset 0 -2px 0 var(--accent); 
}

.code-tab { 
  display: none; 
  padding: 12px; 
}

.code-tab[data-active="true"],
#tab-curl:checked ~ .code-tab[data-tab="curl"],
#tab-node:checked ~ .code-tab[data-tab="node"], 
#tab-go:checked ~ .code-tab[data-tab="go"],
#tab-java:checked ~ .code-tab[data-tab="java"] { 
  display: block; 
}

.code-tab pre { 
  margin: 0; 
  background-color: #0f172a;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #334155;
}

/* --- Light mode color polish for Example Request tabs --- */
@media (prefers-color-scheme: light) {
    .code-tabs { 
        border-color: var(--line) !important; 
        background: #fff !important; 
    }

    .code-tabs-nav { 
        background: #fff !important; 
        border-bottom: 1px solid var(--line) !important; 
    }

    .code-tabs-nav button {
        color: #334155 !important;           /* slate-700-ish for better legibility */
        opacity: 1 !important;               /* avoid washed-out labels */
    }

    .code-tabs-nav button:hover { 
        background: #f8fafc !important; 
    } /* subtle hover */

    /* Active tab: keep text dark, use accent for underline + soft chip bg */
    .code-tabs-nav button[aria-selected="true"] {
        color: #0f172a !important;                                    /* near-black text */
        background: color-mix(in srgb, var(--accent) 10%, #ffffff) !important;
        box-shadow: inset 0 -2px 0 var(--accent) !important;
    }

    /* Code block stays dark navy; slightly crisper border in light mode */
    .code-tab pre {
        background-color: #0f172a !important;  /* your current navy */
        border-color: #1e293b !important;      /* slate-800 for a cleaner edge on white */
    }
}