/**
 * BrokerCheck Trading Tools - Frontend Styles
 */

/* Base Styles */
.bctt-forex-calculator,
.bctt-pip-calculator,
.bctt-risk-calculator,
.bctt-currency-calculator {
  background-color: #ffffff;
  color: #333333;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  max-width: 900px;
  margin: 0 auto 2rem;
  box-sizing: border-box;
  /* Critical fix - ensure dropdown can escape */
  overflow: visible !important;
}

/* Header Section */
.bctt-header-section {
  margin-bottom: 25px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}

.bctt-header-section h2 {
  margin: 0 0 10px;
  font-size: 24px;
  color: #2c3e50;
  font-weight: 600;
}

.bctt-header-section p {
  font-size: 15px;
  color: #7f8c8d;
  margin: 0 0 5px;
}

/* Input Groups */
.bctt-input-group {
  margin-bottom: 20px;
  /* Ensure proper positioning context for dropdown */
  position: relative;
}

.bctt-input-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 14px;
}

.bctt-full-width {
  width: 100%;
}

/* Form Inputs */
.bctt-calculator-input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 1.5;
}

.bctt-calculator-dropdown,
.bctt-movement-type-dropdown {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 1.5;
  appearance: auto; /* Ensure native dropdown arrow is shown */
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

.bctt-calculator-input:focus,
.bctt-calculator-dropdown:focus,
.bctt-movement-type-dropdown:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.bctt-exchange-rate-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bctt-exchange-rate {
  flex: 1;
}

.bctt-refresh-rate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  min-height: 42px;
  background-color: #f5f5f5;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.bctt-refresh-rate-button:hover {
  background-color: #e9e9e9;
}

.bctt-refresh-icon {
  margin-right: 5px;
  display: inline-block;
  font-size: 14px;
}

/* Loading State */
.bctt-loading {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"%3E%3Cpath stroke="none" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="%23e5e5e5" transform="rotate(157.008 50 51)"%3E%3CanimateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

/* Movement Wrapper */
.bctt-movement-wrapper {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.bctt-movement-wrapper .bctt-calculator-input {
  flex: 1;
}

.bctt-movement-type-dropdown {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}

/* Grid Layout */
.bctt-calculator-inputs-grid,
.bctt-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Results Section */
.bctt-results-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  margin-top: 20px;
}

.bctt-result-item {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.bctt-result-label {
  display: block;
  font-size: 14px;
  color: #6c7a89;
  margin-bottom: 5px;
}

.bctt-result-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.bctt-positive {
  color: #27ae60;
}

.bctt-negative {
  color: #e74c3c;
}

/* Help Text */
.bctt-help-text {
  display: block;
  font-size: 12px;
  color: #95a5a6;
  margin-top: 4px;
}

/* Calculator Notes */
.bctt-calculator-notes {
  margin-top: 20px;
  font-size: 12px;
  color: #7f8c8d;
}

.bctt-disclaimer {
  margin: 0;
  font-style: italic;
}

/* Choices.js Fixes */
.choices {
  margin-bottom: 0 !important;
  position: relative !important;
  /* FIX: Remove container scrollbar */
  overflow: visible !important;
}

.choices__inner {
  min-height: 42px !important;
  padding: 7px 10px !important;
  background-color: #ffffff !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.choices__input {
  background-color: transparent !important;
}

/* CRITICAL FIX: Ensure dropdown list is positioned correctly */
.choices__list--dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important; /* Very high z-index to ensure it appears above all elements */
  margin-top: 1px !important;
  border-radius: 0 0 4px 4px !important;
  border: 1px solid #dcdcdc !important;
  background-color: white !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Fix double scrollbars */
.choices__list--dropdown .choices__list {
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.choices__list--dropdown {
  overflow: hidden !important;
}

/* Ensure dropdown items are styled properly */
.choices__list--dropdown .choices__item {
  padding: 8px 12px !important;
  color: #333 !important;
  position: relative !important;
}

/* Set proper padding for items with images */
.choices__list--dropdown .choices__item.has-image {
  padding-left: 36px !important;
}

/* Style the item images */
.choices__item-image {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  object-fit: contain !important;
}

.choices__list--dropdown .choices__item--selectable {
  padding-right: 12px !important; /* Override the default right padding */
}

.choices__list--dropdown .choices__item--selectable::after {
  display: none !important; /* Remove the 'Press to select' text */
}

/* Style favorites */
.choices__list--dropdown .choices__item[data-custom-properties*="favorite"] {
  background-color: #fffde7 !important;
}

.choices__list--dropdown .choices__item[data-custom-properties*="favorite"]::before {
  content: "★ ";
  color: #f1c40f;
}

/* FIX: Style group headers */
.choices__list--dropdown .choices__group {
  padding: 5px 12px !important; /* Reduced padding */
  font-size: 12px !important;
  font-weight: 600 !important;
  background-color: #f0f2f5 !important;
  color: #000000 !important; /* Darker color */
  border-bottom: 1px solid #e0e0e0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Fix UI when dropdown is open */
.is-open .choices__inner {
  border-radius: 4px 4px 0 0 !important;
  border-color: #3498db !important;
}

/* Ensure choices container has overflow visible */
.bctt-choices-container {
  overflow: visible !important;
}

/* Loading spinner for currency conversion */
.bctt-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  vertical-align: middle;
  animation: bctt-spin 1s linear infinite;
}

@keyframes bctt-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Result value container to align spinner */
.bctt-result-value-container {
  display: flex;
  align-items: center;
}

/* Prevent UI jumping when spinner appears */
.bctt-result-value {
  min-height: 24px;
}

/* Risk Calculator Specific Styles */

/* Risk assessment color codes */
.bctt-risk-low {
  color: #27ae60 !important;
  font-weight: 600;
}

.bctt-risk-medium {
  color: #f39c12 !important;
  font-weight: 600;
}

.bctt-risk-high {
  color: #e67e22 !important;
  font-weight: 600;
}

.bctt-risk-extreme {
  color: #e74c3c !important;
  font-weight: 600;
}

/* Advanced stats styling */
.bctt-advanced-stats {
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid #eaedf0;
}

.bctt-advanced-stats h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #2c3e50;
  text-align: center;
}

.bctt-advanced-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.bctt-stat-item {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.bctt-stat-label {
  display: block;
  font-size: 13px;
  color: #6c7a89;
  margin-bottom: 4px;
}

.bctt-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

/* Stats explainer section */
.bctt-stats-explainer {
  margin-top: 25px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #3498db;
  font-size: 14px;
}

.bctt-stats-explainer h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #2c3e50;
  font-size: 16px;
}

.bctt-stats-explainer ul {
  margin: 0;
  padding-left: 20px;
}

.bctt-stats-explainer li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.bctt-stats-explainer li:last-child {
  margin-bottom: 0;
}

/* Tooltip styles for better explanations */
.bctt-help-tooltip {
  display: inline-block;
  margin-left: 5px;
  font-size: 14px;
  color: #3498db;
  cursor: help;
  position: relative;
}

/* Tooltip hover effect */
.bctt-help-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 8px 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  line-height: 1.4;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.bctt-help-tooltip:hover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  z-index: 999;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .bctt-forex-calculator,
  .bctt-pip-calculator,
  .bctt-risk-calculator,
  .bctt-currency-calculator {
    padding: 1.5rem;
  }
  
  .bctt-calculator-inputs-grid,
  .bctt-results-grid,
  .bctt-advanced-stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .bctt-refresh-text {
    display: none;
  }
  
  .bctt-refresh-icon {
    margin-right: 0;
  }
  
  .bctt-refresh-rate-button {
    padding: 8px;
  }
  
  /* Ensure dropdown is fully visible on mobile */
  .choices__list--dropdown .choices__list {
    max-height: 250px !important;
  }
}

@media screen and (max-width: 480px) {
  .bctt-forex-calculator,
  .bctt-pip-calculator,
  .bctt-risk-calculator,
  .bctt-currency-calculator {
    padding: 1rem;
  }
  
  .bctt-results-section {
    padding: 15px;
  }
  
  .bctt-result-item {
    padding: 10px;
  }
  
  .bctt-result-value {
    font-size: 18px;
  }
}

/**
 * Additional styles for the enhanced Forex Calculator
 * Add these to your bctt-styles.css file
 */

/* Risk-to-Reward Section */
.bctt-section-header {
  margin: 20px 0 15px;
  border-top: 1px solid #e5e5e5;
  padding-top: 15px;
}

.bctt-section-header h3 {
  font-size: 18px;
  color: #2c3e50;
  margin: 0 0 10px;
}

.bctt-risk-reward-results {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.bctt-large-result {
  grid-column: 1 / -1;
  background-color: #f8f9fb;
  border: 1px solid #e9ecef;
}

.bctt-large-result .bctt-result-value {
  font-size: 24px;
  font-weight: 700;
}

/* Color coding for risk-reward ratio */
.bctt-risk-reward-ratio.bctt-positive {
  color: #27ae60; /* Good ratio (2 or higher) */
}

.bctt-risk-reward-ratio.bctt-neutral {
  color: #f39c12; /* Acceptable ratio (1-2) */
}

.bctt-risk-reward-ratio.bctt-negative {
  color: #e74c3c; /* Poor ratio (less than 1) */
}

/* Helper text enhancements */
.bctt-help-text-highlight {
  color: #3498db;
  font-weight: 500;
}

/* Responsive grid adjustments */
@media screen and (max-width: 768px) {
  .bctt-large-result {
    grid-column: auto; /* Reset on mobile */
  }
  
  .bctt-risk-reward-results .bctt-results-grid {
    gap: 10px; /* Tighter spacing on mobile */
  }
}