/* Code Tabs Styling */

.code-tabs {
  margin: 25px 0;
  border-radius: var(--border-radius, 6px);
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));
  background-color: var(--bg-secondary, #F9F9FC);
  border: 1px solid var(--border-color, #E6E6F0);
}

.tab-header {
  display: flex;
  background-color: var(--bg-secondary, #F9F9FC);
  border-bottom: 1px solid var(--border-color, #E6E6F0);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.tab-header::-webkit-scrollbar {
  height: 4px;
}

.tab-header::-webkit-scrollbar-track {
  background: transparent;
}

.tab-header::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.tab {
  padding: 12px 24px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #7A7A9D);
  border-bottom: 2px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
}

.tab:hover {
  background-color: rgba(76, 111, 255, 0.05);
  color: var(--primary-color, #4C6FFF);
}

.tab.active {
  background-color: var(--bg-code, #f6f8fa);
  color: var(--primary-color, #4C6FFF);
  border-bottom-color: var(--primary-color, #4C6FFF);
}

.tab-content {
  position: relative;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.tab-pane pre {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: none;
}

/* HTTP methods */
.http-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  margin-right: 12px;
  text-transform: uppercase;
  color: white;
  min-width: 64px;
}

.http-method.get {
  background-color: var(--get-color);
}

.http-method.post {
  background-color: var(--post-color);
}

.http-method.put {
  background-color: var(--put-color);
}

.http-method.delete {
  background-color: var(--delete-color);
}

.http-method.patch {
  background-color: var(--patch-color);
}

/* Endpoint styling */
.endpoint-container {
  margin: 25px 0 32px 0;
  padding: 0;
  background-color: var(--bg-secondary, #F9F9FC);
  border-radius: var(--border-radius, 6px);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.endpoint-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--bg-code);
  border-bottom: 1px solid var(--border-color);
}

.endpoint-path {
  font-family: var(--code-font, monospace);
  font-size: 16px;
  font-weight: 600;
}

.endpoint-description {
  padding: 16px 20px;
  margin-bottom: 0;
  color: var(--text-muted, #7A7A9D);
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
}

.authentication-required,
.authentication-notice {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 10px 20px;
  background-color: var(--bg-code);
}

.authentication-required svg,
.authentication-notice svg {
  margin-right: 8px;
}

.authentication-required {
  color: var(--warning-color);
  font-weight: 500;
}

.authentication-notice {
  color: var(--text-muted);
}

/* Language badges */
.tab .badge {
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #e9ecef;
  color: #495057;
  font-weight: normal;
  line-height: 1.4;
}

/* Language icons */
.tab::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Add special styling for different language tabs */
.tab[data-language="php"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238892BF"><path d="M12 18.08c-6.63 0-12-2.72-12-6.08s5.37-6.08 12-6.08S24 8.64 24 12s-5.37 6.08-12 6.08m-4.48-6.08h-.91l-.28 1.51H5.16l1.12-5.74H8.7c1.09 0 1.84.22 2.28.67.44.45.56 1.08.45 1.84-.11.74-.44 1.35-.95 1.8-.5.45-1.19.67-2 .67M4.53 8.7L3.4 14.38h1.18l.28-1.51h1.2c.8 0 1.47-.16 1.99-.48.52-.32.86-.8 1.02-1.41.16-.62.11-1.11-.16-1.48-.27-.37-.78-.56-1.54-.56zm10.68.01h-1.17l-.25 1.32h1.06c.42 0 .76.1.95.28.19.18.24.46.14.84-.09.46-.31.79-.65.97-.34.18-.77.27-1.3.27h-.85l-.35 1.84H11.6l1.12-5.74h2.5c.76 0 1.3.16 1.6.49.32.33.42.8.3 1.4-.07.36-.21.68-.4.96-.19.28-.44.51-.74.7-.3.18-.66.33-1.09.43-.42.11-.89.16-1.41.16h.73zm-4.36.78h-1.22l-.25 1.32h1.22c.54 0 .95-.1 1.22-.31.28-.2.44-.5.5-.9.06-.3 0-.54-.18-.7-.18-.17-.48-.25-.91-.25-.04.15-.09.45-.13.84"/></svg>');
}

.tab[data-language="js"]::before,
.tab[data-language="javascript"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F7DF1E"><path d="M0 0h24v24H0zM6.67 20.48l2.18-1.32c.42.75.81 1.38 1.74 1.38.87 0 1.47-.33 1.47-1.62v-8.97h2.67v9c0 2.64-1.71 3.84-4.2 3.84-2.25 0-3.6-1.14-4.26-2.52m9.92-.48l2.19-1.26c.57.96 1.35 1.65 2.7 1.65 1.14 0 1.89-.57 1.89-1.35 0-.96-.77-1.29-2.04-1.86l-.69-.3c-2.04-.87-3.39-1.95-3.39-4.23 0-2.13 1.62-3.72 4.14-3.72 1.8 0 3.09.63 4.02 2.28l-2.2 1.41c-.48-.87-1.02-1.2-1.83-1.2-.84 0-1.38.51-1.38 1.2 0 .84.54 1.17 1.77 1.71l.69.3c2.4 1.02 3.75 2.1 3.75 4.44 0 2.55-2.01 3.96-4.71 3.96-2.67 0-4.38-1.26-5.22-2.91"/></svg>');
}

.tab[data-language="python"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23366A96" d="M12 0C5.36 0 5.77.58 5.77 5.75V8.5h6.5V9h-9c-3.62 0-6.8 2.18-6.8 4.75 0 2.58 0 4.25 0 6.75 0 2.5 1.34 4.5 4.36 4.5h2.8v-4c0-2.9 2.5-5.25 5.37-5.25h6c2.32 0 4-1.93 4-4.25V5.88c0-2.32-1.97-4.1-4.3-4.5A46.6 46.6 0 0 0 12 0zM8.82 2.5c.66 0 1.2.53 1.2 1.2s-.53 1.2-1.2 1.2-1.2-.53-1.2-1.2.53-1.2 1.2-1.2z"/><path fill="%23FFC331" d="M17.77 5.75V9c0 2.9-2.46 5.25-5.34 5.25h-6C4.1 14.25 2.75 16.18 2.75 18.5v4c0 2.32 1.97 4.13 4.3 4.5 2.8.44 5.5.5 8.95 0 2.3-.33 4-1.9 4-4.25V20h-6.5v-.5h9c3.62 0 5-2.5 6-6.3 1.05-3.97 1-7.8 0-9.95-.5-1.07-1.58-2.5-4-2.5h-6.73zm-3.6 14.75c.66 0 1.2.53 1.2 1.2s-.53 1.2-1.2 1.2-1.2-.53-1.2-1.2.53-1.2 1.2-1.2z"/></svg>');
}

.tab[data-language="vue"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342b883"><path d="M14.31.18h5.32L12 10.27 4.37.18H.01L12 21.82 23.99.18h-4.37l-5.32 9.2z"/><path d="M4.37.18l7.65 13.18L19.67.18h-5.36l-2.29 3.96L9.73.18H4.37z" fill-opacity=".9"/></svg>');
}

.tab[data-language="react"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2361DAFB"><path d="M12 9.86c-1.18 0-2.14.96-2.14 2.14 0 1.18.96 2.14 2.14 2.14 1.18 0 2.14-.96 2.14-2.14 0-1.18-.96-2.14-2.14-2.14m0-1.52c2.03 0 3.66 1.64 3.66 3.66 0 2.03-1.64 3.66-3.66 3.66-2.03 0-3.66-1.64-3.66-3.66 0-2.03 1.64-3.66 3.66-3.66zm6.02-3.32c1.66 0 3.32 1.33 3.32 2.99 0 .64-.18 1.23-.48 1.76-.32-.15-.65-.26-.98-.33-.26-.07-.53-.1-.8-.1-.14 0-.27 0-.41.03.17-.45.26-.89.26-1.36 0-1.08-1.22-2.07-2.32-2.07-.35 0-.69.09-1.01.26-.32-.96-.78-1.92-1.36-2.8.98-.24 2.01-.39 3.05-.39-.09 0 .63 0 .72 0zm-9.36 6.99c0-.64.04-1.29.12-1.95.84-.02 1.68-.12 2.49-.31.29.64.54 1.31.72 2-.35.26-.85.69-1.36 1.28-.9.05-1.3.1-1.74.18-.15-.38-.23-.79-.23-1.2zm.23 3.05c.44.08.85.14 1.3.18.49.59.98 1.03 1.35 1.29-.19.69-.44 1.35-.73 1.99-.8-.18-1.63-.29-2.48-.31-.08-.65-.12-1.31-.12-1.95-.01-.42.08-.82.23-1.21.44.09.9.14 1.37.19-.45.06-.92.12-1.37.21l1.36-.21c.01 0 .02 0 .04 0l-1.4.21c.01 0 .02 0 .03 0l1.37-.21zm9.36-4.85c.21 0 .42.03.62.07-.42.89-.73 1.84-.87 2.83-.79-.06-1.58-.06-2.37 0-.15-.99-.45-1.94-.87-2.83.63-.12 1.28-.19 1.94-.19.52 0 1.04.04 1.55.12zm.62-1.55c-.98-.24-2.01-.39-3.05-.39-1.54 0-3.04.26-4.45.76-1.39-.5-2.88-.76-4.42-.76-1.04 0-2.06.15-3.05.39-1.03.27-1.97.68-2.8 1.23-.36.24-.92.65-1.37 1.21-.36.64-.41 2.32-.02 3.18.39.85 1.05 1.67 1.96 2.45-.1.6-.15 1.21-.15 1.82 0 .61.06 1.22.15 1.81-.91.78-1.57 1.6-1.96 2.45-.39.86-.34 2.54.02 3.18.36.65.81.97 1.17 1.21.83.55 1.77.97 2.8 1.23 2.09.53 4.14.47 6.16-.01.53-.5 1.06-.14 1.54-.26 1.93.9 4.15.94 6.27.06.63-.26 1.6-.63 2.3-1.24.4-.35.9-.87.98-1.4.07-.53.08-1.58-.24-2.43-.32-.84-.82-1.57-1.47-2.25.1-.6.15-1.21.15-1.81 0-.6-.05-1.21-.14-1.81.65-.68 1.15-1.41 1.47-2.25.32-.85.31-1.9.24-2.43-.08-.52-.58-1.04-.98-1.4-.7-.61-1.67-.98-2.3-1.24zm-10.88 8.15c.35-.26.85-.69 1.36-1.29.44-.04.85-.1 1.3-.18.32.39.52.79.52 1.2 0 .37-.15.75-.4 1.11-.27.36-.69.69-1.22.9-.93.37-1.85.37-2.79 0-.46-.18-.82-.43-1.09-.78-.01-.01-.02-.02-.02-.03.46-.09.92-.15 1.37-.21.35-.24.67-.48.97-.72zm-.97-6.07c.46-.06.92-.12 1.37-.21.01.01.02.01.02.02.27.35.64.6 1.09.78.93.37 1.85.37 2.79 0 .53-.21.96-.54 1.22-.9.25-.36.4-.74.4-1.11 0-.41-.2-.81-.52-1.2-.45.08-.86.14-1.3.18-.51-.59-1.01-1.02-1.36-1.28-.3-.24-.62-.48-.97-.72l-1.37.21c-.45-.07-.93-.12-1.37-.21zm1.25 3.03c.76 0 1.37-.61 1.37-1.37 0-.76-.61-1.37-1.37-1.37-.76 0-1.37.61-1.37 1.37 0 .76.61 1.37 1.37 1.37z"/></svg>');
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .endpoint-container {
    margin: 20px 0 28px 0;
  }
  
  .feature-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .tab {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .tab::before {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
  
  .endpoint-path {
    font-size: 14px;
  }
  
  .endpoint-header {
    padding: 12px 16px;
  }
  
  .endpoint-description {
    padding: 12px 16px;
  }
  
  .code-tabs .tab-header {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .code-tabs .tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  
  .http-method {
    min-width: 56px;
    padding: 4px 8px;
    font-size: 12px;
  }
  
  /* Mobile styles for code tabs only */
  .code-tabs {
    border-radius: 4px;
    margin: 20px 0;
  }
}

@media (max-width: 480px) {
  .endpoint-container {
    margin: 16px 0 24px 0;
  }
  
  .endpoint-header {
    flex-wrap: wrap;
  }
  
  .http-method {
    margin-bottom: 6px;
  }
  
  .endpoint-path {
    width: 100%;
    margin-top: 6px;
    font-size: 13px;
    word-break: break-all;
  }
  
  .feature-cards,
  .next-steps {
    grid-template-columns: 1fr;
  }
}