/* TradingView Custom CSS - Binary Options Platform */

/* ============================================ */
/* TRANSPARENT BACKGROUNDS - Remove all backgrounds */
/* ============================================ */

/* Chart container border */
.chart-container-border {
  background: transparent !important;
  background-color: transparent !important;
}

/* Layout area top */
.layout__area--top,
.layout_area__top {
  background: transparent !important;
  background-color: transparent !important;
}

/* Body chart page */
body.chart-page,
body.chart-page.unselectable,
body.chart-page.unselectable.on-widget {
  background: transparent !important;
  background-color: transparent !important;
}

/* Overflow wrap */
.overflowWrap-qqNP9Xcc {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================ */
/* TOP TOOLBAR - header area */
/* ============================================ */

/* Main toolbar area - kept transparent */
.layout__area--top {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* All children of toolbar */
.layout__area--top * {
  background-color: transparent !important;
}

/* Specific toolbar containers */
.layout__area--top > div,
.layout__area--top > div > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================ */
/* TOOLBAR SEPARATORS - vertical lines */
/* ============================================ */

/* Separators between toolbar groups */
.layout__area--top [class*="separator"],
.layout__area--top [class*="divider"] {
  background-color: #2a2a2a !important;
  width: 1px !important;
}

/* ============================================ */
/* CHART TYPE BUTTON - borders */
/* ============================================ */

/* Chart type button group (candles icon with dropdown) */
.layout__area--top [class*="chartType"],
.layout__area--top [class*="seriesStyle"],
.layout__area--top [data-name="series-style"] {
  border-left: 1px solid #2a2a2a !important;
  border-right: 1px solid #2a2a2a !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ============================================ */
/* LEFT TOOLBAR - drawing tools */
/* ============================================ */

.layout__area--left,
div.layout__area--left,
[class*="drawingToolbar"],
[class*="left-toolbar"] {
  background: transparent !important;
  background-color: transparent !important;
  border-right: 1px solid #2a2a2a !important;
  border-color: #2a2a2a !important;
}

/* ============================================ */
/* RIGHT AREA - price scale */
/* ============================================ */

.layout__area--right,
div.layout__area--right {
  border-left: 1px solid #2a2a2a !important;
}

/* ============================================ */
/* BOTTOM AREA - time scale */
/* ============================================ */

.layout__area--bottom,
div.layout__area--bottom {
  border-top: 1px solid #2a2a2a !important;
}

/* ============================================ */
/* Remove default borders that might override */
/* ============================================ */

.chart-container,
.chart-markup-table,
[class*="chart-page"] {
  border: none !important;
}

/* ============================================ */
/* DROPDOWNS / POPUPS - dark background */
/* ============================================ */

/* All dropdown menus and popups - dark background like custom dropdowns */
[class*="menuWrap"],
[class*="dropdown"],
[class*="popup"],
[class*="menu-"],
[class*="contextMenu"],
[class*="picker"],
[data-role="menuitem"],
.tv-dropdown-behavior__body,
.tv-dropdown-behavior__item {
  background: #1c202e !important;
  background-color: #1c202e !important;
  border: 1px solid #252a3e !important;
  border-color: #252a3e !important;
}

/* Chart type dropdown - position below button */
[class*="seriesControlBar"] [class*="dropdown"],
[class*="chartType"] [class*="dropdown"],
[data-name="series-style"] ~ [class*="dropdown"] {
  top: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
}

/* Drawing tools dropdown - position below button */
[data-name="drawing-toolbar"] ~ [class*="dropdown"],
#drawing-tools-btn ~ [class*="dropdown"] {
  top: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
}

/* Timeframe dropdown - position below button */
[class*="timeframe"] [class*="dropdown"],
#timeframe-btn ~ [class*="dropdown"] {
  top: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
}

/* Menu items */
[class*="menuItem"],
[class*="menu-item"],
[class*="item-"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Menu items hover */
[class*="menuItem"]:hover,
[class*="menu-item"]:hover,
[class*="item-"]:hover {
  background: #252a3e !important;
  background-color: #252a3e !important;
}

/* Remove separators/dividers between menu items */
[class*="menuItem"] + [class*="menuItem"],
[class*="menu-item"] + [class*="menu-item"],
[class*="item-"] + [class*="item-"] {
  border-top: none !important;
}

/* Remove any inner borders in dropdown menus */
[class*="menuWrap"] *,
[class*="dropdown"] *,
[class*="popup"] * {
  border-top: none !important;
  border-bottom: none !important;
}

/* Ensure dropdown containers have dark background */
.tv-dropdown-behavior,
[class*="dropdownMenu"],
[class*="popupMenu"] {
  background: #1c202e !important;
  background-color: #1c202e !important;
  border: 1px solid #252a3e !important;
}

/* Menu section headers (MINUTES, HOURS, DAYS) */
/* [class*="title"], - REMOVED */
[class*="group-title"],
[class*="section-title"] {
  color: #787878 !important;
}

/* ============================================ */
/* LEFT TOOLBAR - HIDE COMPLETELY AND REMOVE SPACE */
/* ============================================ */

/* Target all possible left toolbar selectors */
.layout__area--left,
div.layout__area--left,
[class*="layout__area--left"],
[class*="drawingToolbar"],
[class*="drawing-toolbar"],
[class*="left-toolbar"],
[class*="leftToolbar"],
.tv-side-toolbar,
[data-name="drawing-toolbar"],
div[class*="floating"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove the space/gap for left toolbar */
.chart-controls-bar,
[class*="chart-controls"],
[class*="leftSpace"],
[class*="left-space"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure chart takes full width */
.layout__area--center {
  margin-left: 0 !important;
  left: 0 !important;
}

/* Hide floating drawing toolbar that appears on the left */
div[class*="floating-toolbar"],
div[class*="floatingToolbar"],
.floating-toolbar-react-widgets,
[class*="toolbar-"][class*="floating"],
[class*="vertical-toolbar"] {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================ */
/* CUSTOM TOOLBAR BUTTONS */
/* ============================================ */

/* Position relative for dropdown alignment */
#drawing-tools-btn,
#timeframe-btn {
  position: relative !important;
}

#drawing-tools-btn:hover,
#timeframe-btn:hover {
  background-color: #2a2e39 !important;
}

/* Custom dropdowns positioning and styling */
#drawing-tools-dropdown {
  position: fixed !important;
  top: 100px !important;
  left: 226.797px !important;
  background: #1c202e !important;
  border: 1px solid #252a3e !important;
  border-radius: 4px !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

#timeframe-dropdown {
  position: fixed !important;
  top: 100px !important;
  left: 266.797px !important;
  background: #1c202e !important;
  border: 1px solid #252a3e !important;
  border-radius: 4px !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* ============================================ */
/* HIDE TRADINGVIEW LOGO / BRANDING */
/* ============================================ */

/* TradingView logo in bottom right corner */
.tv-main-panel__watermark,
[class*="watermark"],
[class*="Watermark"],
a[href*="tradingview"],
a[target="_blank"][href*="tradingview"],
[class*="logo-"][class*="tradingview"],
.tv-logo,
[class*="tvLogo"],
[class*="tv-logo"],
[data-role="logo"],
[class*="chart-controls-bar__logo"],
.chart-controls-bar__logo,
/* Bottom bar branding */
[class*="bottomWidgetBar"] a,
[class*="bottom-widget-bar"] a,
/* Any element with tradingview link */
a[href*="www.tradingview.com"],
/* Logo container in chart area */
[class*="pane"] > a[target="_blank"],
[class*="chart-widget"] a[target="_blank"],
/* Watermark text */
[class*="apply-overflow-tooltip"][data-tooltip*="TradingView"],
[title*="TradingView"],
/* Main pane logo */
.chart-markup-table a[target="_blank"],
.pane a[target="_blank"],
/* Additional selectors for TV logo */
[class*="chart"] a[target="_blank"],
[class*="Chart"] a[target="_blank"],
.layout__area--center a[target="_blank"],
svg[class*="logo"],
svg[class*="Logo"],
[class*="bottomRight"] a,
[class*="bottom-right"] a,
[class*="mainPane"] a,
[class*="main-pane"] a,
.chart-container a[target="_blank"],
.chart-widget a[target="_blank"],
div[class*="chart"] > a,
a[class*="logo"],
div[class*="logo"] a,
/* TV specific class patterns */
[class*="tv-"][class*="logo"],
[class*="tv_"][class*="logo"],
[class*="icon"][class*="tv"],
/* Chart pane anchors */
.chart-markup-table a,
[class*="markup"] a {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  clip: rect(0,0,0,0) !important;
}

/* ============================================ */
/* LEGEND/INDICATOR - TRANSPARENT BACKGROUNDS */
/* ============================================ */

/* Values wrapper - where indicator values show */
[class*="valuesWrapper"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Titles wrapper - where indicator name shows (BB 20 2) */
[class*="titlesWrapper"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Main series wrapper */
[class*="mainSeriesWrapper"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* All legend-related wrappers */
[class*="legendWrapper"],
[class*="sourcesWrapper"],
[class*="statusWrapper"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Fix title color - was being set to gray */
[class*="titlesWrapper"] [class*="title"],
[class*="legend"] [class*="title"] {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* ============================================ */
/* HIDE BOTTOM BAR SETTINGS GEAR ICON */
/* ============================================ */

/* Hide settings/gear icon in bottom area (timescale area) */
.layout__area--bottom [class*="settings"],
.layout__area--bottom [class*="Settings"],
.layout__area--bottom [data-name="settings"],
.layout__area--bottom button[class*="settings"],
.layout__area--bottom [class*="gear"],
.layout__area--bottom svg[class*="gear"],
/* Target the specific icon button in bottom right */
[class*="chart-controls-bar"] [class*="settings"],
[class*="chartControlsBar"] [class*="settings"],
/* Bottom bar buttons that look like gear/settings */
.layout__area--bottom button:last-child,
[class*="time-axis"] [class*="settings"],
[class*="timeAxis"] [class*="settings"],
/* Alternative selectors for the gear icon */
[class*="bottom"] [class*="apply-common-tooltip"][data-name*="settings"],
[class*="bottom"] [aria-label*="settings" i],
[class*="bottom"] [title*="settings" i],
[class*="bottom"] [title*="Settings" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================ */
/* HIDE BOTTOM RIGHT GEAR/SETTINGS ICON */
/* ============================================ */

/* Target the gear icon next to clock in bottom right corner */
.layout__area--bottom [class*="rightControls"] button,
.layout__area--bottom [class*="right-controls"] button,
[class*="chart-controls-bar__right"] button,
[class*="chartControlsBarRight"] button,
/* The settings button is usually the one with gear icon */
.layout__area--bottom button[class*="button"]:not([class*="scroll"]),
/* Target by position - last elements in bottom bar */
[class*="bottom-controls"] > *:last-child,
[class*="bottomControls"] > *:last-child {
  display: none !important;
}

/* ============================================ */
/* HIDE TRADINGVIEW LOGO IN BOTTOM LEFT */
/* ============================================ */

/* The TV logo/icon in bottom left corner */
.layout__area--bottom [class*="logo"],
.layout__area--bottom [class*="Logo"],
.layout__area--bottom a[href*="tradingview"],
.layout__area--bottom svg[class*="tv"],
.layout__area--bottom [class*="tv-"],
.layout__area--bottom [class*="trademark"],
.layout__area--bottom [class*="brand"],
/* Target the specific TradingView icon element */
[class*="chart-controls-bar__logo"],
[class*="chartControlsBarLogo"],
[class*="bottom"] [class*="trademark"],
[class*="bottom"] a[target="_blank"],
/* Alternative: hide by structure - usually first element */
.layout__area--bottom > div:first-child a,
.layout__area--bottom [class*="leftControls"] a,
.layout__area--bottom [class*="left-controls"] a {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================ */

/* ============================================ */
/* HIDE GEAR ICON ONLY (not the price scale) */
/* ============================================ */
.price-axis-container > .apply-common-tooltip,
.chart-markup-table.price-axis-container > .apply-common-tooltip,
div.chart-markup-table.price-axis-container > div.apply-common-tooltip {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================ */
/* HIDE TRADINGVIEW LOGO (bottom left) */
/* ============================================ */
/* Target the TV logo link in bottom widget bar */
[class*="bottomWidgetBar"] a,
[class*="bottomWidgetBar"] a[href*="tradingview"],
[class*="bottom"] a[target="_blank"],
.chart-markup-table a[target="_blank"],
a[href*="tradingview.com"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* ============================================ */
/* HIDE TV LOGO - by SVG and position */
/* ============================================ */
/* Hide any SVG with TV logo characteristics */
svg[width="36"][height="28"],
svg[width="64"][height="28"],
.chart-markup-table svg[class*="tv"],
/* Hide elements in bottom-left corner area */
.layout__area--bottom > div:first-child,
[class*="sourcesWrapper"] a,
[class*="sources"] a[target="_blank"] {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================ */
/* HIDE GEAR ICON ONLY (not the price scale) */
/* ============================================ */
.price-axis-container > .apply-common-tooltip,
.chart-markup-table.price-axis-container > .apply-common-tooltip,
div.chart-markup-table.price-axis-container > div.apply-common-tooltip {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================ */
/* HIDE TRADINGVIEW LOGO (bottom left) */
/* ============================================ */
[class*="bottomWidgetBar"] a,
a[href*="tradingview.com"],
.chart-markup-table a[target="_blank"],
svg[width="36"][height="28"],
svg[width="64"][height="28"] {
  display: none !important;
  visibility: hidden !important;
}