/* ==========================================================================
   Fiotech Chain (FTC) Ultra-Premium Gold Theme for Remix IDE
   Brand Accent: #F0B90B / #FCD535 / #D9A507
   ========================================================================== */

:root {
  --primary: #F0B90B !important;
  --primary-hover: #FCD535 !important;
  --primary-active: #D9A507 !important;
  --primary-contrast: #12161c !important;
  --info: #F0B90B !important;
  --ai: #F0B90B !important;
  --blue: #F0B90B !important;
  --cyan: #F7B900 !important;
  --teal: #F0B90B !important;
  --yellow: #F0B90B !important;
  --brand-dark-blue: #D9A507 !important;
  --text-bg-mark: #F0B90B !important;
  --focus-ring: rgba(240, 185, 11, 0.3) !important;
  --hover-bg: rgba(240, 185, 11, 0.12) !important;
  --border-color: rgba(240, 185, 11, 0.2) !important;
}

/* Base page enhancements */
body {
  color: var(--text, #eaecef) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11" !important;
}

/* Hide legacy Ethereum scam alert since this is FTC IDE */
#scamAlert,
[data-id="homeTabScamAlert"],
[class*="scamAlert"],
[class*="homeTabScamAlert"] {
  display: none !important;
}

/* ==========================================================================
   Buttons & Action Controls
   ========================================================================== */
.btn-primary,
.btn-info,
button.btn-primary,
input[type="button"].btn-primary,
input[type="submit"].btn-primary,
.udapp_atAddress,
#runTestsTabRunAction {
  background: linear-gradient(135deg, #F0B90B 0%, #FFD700 100%) !important;
  border-color: #F0B90B !important;
  color: #12161c !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover,
.btn-info:hover,
button.btn-primary:hover,
.btn-primary:focus,
.btn-info:focus,
button.btn-primary:focus,
.udapp_atAddress:hover {
  background: linear-gradient(135deg, #FCD535 0%, #FFE066 100%) !important;
  border-color: #FCD535 !important;
  color: #000000 !important;
  box-shadow: 0 4px 16px rgba(240, 185, 11, 0.45) !important;
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-info:active,
button.btn-primary:active {
  background: #D9A507 !important;
  border-color: #D9A507 !important;
  color: #000000 !important;
  transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-info {
  color: #F0B90B !important;
  border: 1px solid rgba(240, 185, 11, 0.5) !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: #F0B90B !important;
  color: #12161c !important;
  border-color: #F0B90B !important;
  box-shadow: 0 2px 10px rgba(240, 185, 11, 0.3) !important;
}

/* ==========================================================================
   Navigation, Tabs & Sidebar Icons
   ========================================================================== */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.activeTab,
[class*="activeTab"],
[class*="active_tab"],
.nav-link.active {
  color: #F0B90B !important;
  border-bottom: 2px solid #F0B90B !important;
  background: rgba(240, 185, 11, 0.05) !important;
  font-weight: 600 !important;
}

/* Vertical Icon Bar on the left */
.verticalicons li.active,
.verticalicons li:hover,
[class*="iconContainer"]:hover,
[class*="iconContainer"][class*="active"],
.vertical-icons-container .active {
  color: #F0B90B !important;
  fill: #F0B90B !important;
}

.verticalicons li.active i,
.verticalicons li.active svg,
[class*="iconContainer"][class*="active"] svg,
[class*="iconContainer"][class*="active"] i,
[class*="iconContainer"]:hover svg,
[class*="iconContainer"]:hover i {
  color: #F0B90B !important;
  fill: #F0B90B !important;
}

.verticalicons li.active {
  border-left: 3px solid #F0B90B !important;
}

/* Top Navigation Bar active highlights */
.remixui_topbar i:hover,
.remixui_topbar svg:hover {
  color: #F0B90B !important;
  fill: #F0B90B !important;
}

/* ==========================================================================
   Home Tab / Get Started Page
   ========================================================================== */
/* Title typography with gold gradient */
#hTTitleSection span.h-80,
#hTTitleSection span[class*="text-uppercase"] {
  background: linear-gradient(135deg, #F0B90B 0%, #FFE57F 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

/* Template selector buttons (ZK Semaphore, ERC20, Uniswap V4, NFT, MultiSig) */
[class*="homeTab"] button:not(.btn-primary),
[class*="home_tab"] button:not(.btn-primary),
.remixui_home_tab_buttons button {
  border: 1px solid rgba(240, 185, 11, 0.3) !important;
  border-radius: 6px !important;
  background: rgba(24, 26, 32, 0.65) !important;
  color: #eaecef !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="homeTab"] button:not(.btn-primary):hover,
[class*="home_tab"] button:not(.btn-primary):hover,
.remixui_home_tab_buttons button:hover {
  border-color: #F0B90B !important;
  color: #F0B90B !important;
  background-color: rgba(240, 185, 11, 0.12) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(240, 185, 11, 0.25) !important;
}

/* Start Coding CTA */
[data-id="homeTabStartCoding"],
.remixui_startCoding,
button[class*="startCoding"] {
  background: linear-gradient(135deg, #F0B90B 0%, #FFD700 100%) !important;
  color: #12161c !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 14px rgba(240, 185, 11, 0.35) !important;
  transition: all 0.2s ease !important;
}

[data-id="homeTabStartCoding"]:hover,
.remixui_startCoding:hover {
  background: linear-gradient(135deg, #FCD535 0%, #FFE066 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(240, 185, 11, 0.5) !important;
}

/* Featured cards hover */
[class*="featuredCard"],
[class*="featuredPlugin"],
[class*="featured"] {
  border: 1px solid rgba(240, 185, 11, 0.15) !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}

[class*="featuredCard"]:hover,
[class*="featuredPlugin"]:hover,
[class*="featured"]:hover {
  border-color: #F0B90B !important;
  box-shadow: 0 6px 22px rgba(240, 185, 11, 0.2) !important;
  transform: translateY(-2px);
}

/* Search input on Home tab */
#homeTabSearchInput {
  border: 1px solid rgba(240, 185, 11, 0.3) !important;
  border-radius: 6px 0 0 6px !important;
}

#homeTabSearchInput:focus {
  border-color: #F0B90B !important;
  box-shadow: 0 0 0 0.2rem rgba(240, 185, 11, 0.25) !important;
}

/* ==========================================================================
   RemixAI Widget / Assistant
   ========================================================================== */
[class*="remixAi"],
[class*="aiAssistant"],
[class*="chatBox"] {
  --ai-primary: #F0B90B !important;
}

/* AI Prompt suggestion buttons */
[class*="suggestionButton"],
[class*="promptButton"],
[class*="aiCard"] {
  border: 1px solid rgba(240, 185, 11, 0.25) !important;
  border-radius: 8px !important;
  background: rgba(240, 185, 11, 0.04) !important;
  transition: all 0.2s ease !important;
}

[class*="suggestionButton"]:hover,
[class*="promptButton"]:hover {
  border-color: #F0B90B !important;
  background-color: rgba(240, 185, 11, 0.15) !important;
  color: #F0B90B !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(240, 185, 11, 0.2) !important;
}

/* AI submit / arrow button */
[class*="sendButton"],
[class*="submitButton"],
button[class*="send_"],
[class*="fa-arrow-right"] {
  color: #F0B90B !important;
}

/* ==========================================================================
   Links & Text Utilities
   ========================================================================== */
a, a:hover, a:focus {
  color: #F0B90B !important;
}

.text-primary,
.text-info,
.text-blue,
.text-cyan {
  color: #F0B90B !important;
}

.bg-primary,
.bg-info {
  background-color: #F0B90B !important;
  color: #12161c !important;
}

.border-primary,
.border-info {
  border-color: #F0B90B !important;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge-primary,
.badge-info {
  background-color: #F0B90B !important;
  color: #12161c !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

.badge-outline-primary {
  border-color: #F0B90B !important;
  color: #F0B90B !important;
}

/* ==========================================================================
   Form Elements, Focus States, Inputs, Checkboxes
   ========================================================================== */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
[class*="searchBar"]:focus-within {
  border-color: #F0B90B !important;
  box-shadow: 0 0 0 0.2rem rgba(240, 185, 11, 0.25) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #F0B90B !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #F0B90B !important;
  border-color: #F0B90B !important;
}

/* Dropdown styling */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(240, 185, 11, 0.15) !important;
  color: #F0B90B !important;
}

/* ==========================================================================
   File Explorer & Tree View
   ========================================================================== */
[class*="treeview"] [class*="selected"],
[class*="treeview"] [class*="active"],
.selected_2zF8x,
[class*="fileExplorer"] [class*="active"] {
  color: #F0B90B !important;
  background-color: rgba(240, 185, 11, 0.15) !important;
}

/* ==========================================================================
   Terminal & Debugger
   ========================================================================== */
.remix_ui_terminal_debug,
[class*="terminal_debug"] {
  background: linear-gradient(135deg, #F0B90B 0%, #FFD700 100%) !important;
  color: #12161c !important;
  border-color: #F0B90B !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

.remix_ui_terminal_debug:hover {
  background: #FCD535 !important;
  color: #000000 !important;
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */
::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(240, 185, 11, 0.35) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #F0B90B !important;
}

/* ==========================================================================
   Demo Footer Banner
   ========================================================================== */
#demo-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: linear-gradient(90deg, #F0B90B, #FFD700) !important;
  color: #12161c !important;
  text-align: center !important;
  padding: 6px 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 -3px 15px rgba(240, 185, 11, 0.25) !important;
}

#demo-footer a {
  color: #000000 !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
}