/* Main container */
.ttm-container {
  font-family: 'Raleway', sans-serif;
  color: #2B2B29;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  max-width: 800px;
  margin: 0 auto;
  overflow-x: hidden;
  font-size: 18px;
  box-sizing: border-box;
}
/* Title */
.ttm-title {
  font-family: 'Raleway', sans-serif;
  color: #2B2B29;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: left;
  font-weight: 600;
  line-height: 1.2;
}
/* Chart */
.ttm-chart {
  height: 400px;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: #fafbfc;
  border: 1px solid #e8eaed;
  width: 100%;
  min-height: 300px;
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
}
/* Chart annotations styling */
.ttm-chart .google-visualization-annotation {
  font-weight: 800; 
  font-size: 11px;
  color: #000;
  text-shadow: 
    -2px -2px 0 #fff,  
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    2px 2px 0 #fff; 
}

/* Action Button (Base) */
.ttm-button {
  background-color: #FFBC00;
  color: #2B2B29;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  min-height: 56px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-sizing: border-box;
 /* Critical for mobile fitting */
  max-width: 100%;
 /* Prevent overflow */
}
/* Center button wrapper */
.ttm-button-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.ttm-button:active {
  transform: scale(0.96);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Touch-friendly button states */
.ttm-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 188, 0, 0.3);
}
.ttm-button:hover {
  box-shadow: 0 4px 12px rgba(255, 188, 0, 0.4);
}
/* Buy button (when holding cash) */
.ttm-button-buy {
  background-color: #10b981 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.ttm-button-buy:hover {
  background-color: #059669 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
}
/* Sell button (when holding shares) */
.ttm-button-sell {
  background-color: #ef4444 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.ttm-button-sell:hover {
  background-color: #dc2626 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}
/* Win state button */
.ttm-button-win {
  background-color: #10b981 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}
.ttm-button-win:hover {
  background-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
}
/* Lose state button */
.ttm-button-lose {
  background-color: #ef4444 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}
.ttm-button-lose:hover {
  background-color: #dc2626 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}
/* Tie state button */
.ttm-button-tie {
  background-color: #6c757d !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3) !important;
}
.ttm-button-tie:hover {
  background-color: #5a6268 !important;
  box-shadow: 0 4px 12px rgba(90, 98, 104, 0.4) !important;
}
/* Secondary Button Style */
.ttm-button-secondary {
  background-color: #ffffff !important;
  color: #6c757d !important;
  border: 2px solid #e9ecef !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  min-height: 56px;
  line-height: normal !important;
  box-shadow: none !important;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ttm-button-secondary:hover {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}
.ttm-button-secondary:active {
  background-color: #e2e6ea !important;
  transform: scale(0.96);
}
/* Stats display */
.ttm-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding: 0 8px;
}
.ttm-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.ttm-stats-row-single {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.ttm-stat-box {
  flex: 1;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.15s ease;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Different colors for each stat box using website colors */
.ttm-stat-box-investment {
  background-color: #FFBC00;
  border: 1px solid #FFBC00;
}
.ttm-stat-box-buyhold {
  background-color: #2B2B29;
  border: 1px solid #2B2B29;
  color: #FFBC00;
}
.ttm-stat-box-trades {
  background-color: #FFBC00;
  border: 1px solid #FFBC00;
  max-width: 200px;
}
.ttm-stat-label {
  font-size: 18px;
  color: #2B2B29;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  line-height: 1.2;
}
.ttm-stat-box-buyhold .ttm-stat-label {
  color: #FFBC00;
}
.ttm-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2B2B29;
  margin-bottom: 4px;
  line-height: 1.1;
  word-break: break-word;
  transition: all 0.1s ease-out;
}
.ttm-stat-value-investment, .ttm-stat-value-buyhold {
  font-size: 1.8rem;
}
.ttm-stat-box-investment .ttm-stat-value {
  font-size: 2.2rem;
}
.ttm-stat-box-investment .ttm-stat-label {
  font-size: 1rem;
}
.ttm-stat-box-buyhold .ttm-stat-value {
  color: #FFBC00;
}
.ttm-stat-trades {
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 500;
}
/* Result box */
.ttm-result {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid #d1e7ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-left: 8px;
  margin-right: 8px;
}
/* Loading state */
.ttm-loading {
  text-align: center;
  padding: 40px;
  color: #6c757d;
  font-style: italic;
}
/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
  .ttm-container {
      padding: 1rem 0.5rem;
 }
  .ttm-chart {
      height: 320px;
      margin-bottom: 1rem;
 }
  .ttm-button-wrapper {
     /* Change from column to row/wrap to allow side-by-side secondary buttons */
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 12px;
      margin: 16px 0;
      padding: 0 8px;
 }
  .ttm-button {
     /* Main Action buttons (Buy/Sell) take full width */
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
     /* Force full width in flex-wrap container */
      margin: 0;
      height: 60px;
      font-size: 20px;
 }
 /* Fix for Secondary Buttons (Slower/Faster) to sit side-by-side */
  .ttm-button-secondary {
      width: auto;
     /* Reset width from 100% */
      flex: 1;
     /* Share available space equally */
      min-width: 0;
     /* Allow text to determine min width, preventing overflow */
      margin-top: 4px;
      background-color: #f8f9fa !important;
      padding: 10px 16px !important;
     /* Slightly tighter padding */
      font-size: 16px !important;
     /* Slightly smaller text for fit */
 }
  .ttm-stats {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 1rem;
 }
  .ttm-stats-row {
      display: contents;
     /* Allows children to participate in parent flex grid */
 }
  .ttm-stat-box {
      flex: 1 1 calc(50% - 10px);
      min-width: 130px;
      padding: 12px 8px;
      min-height: 80px;
 }
  .ttm-stat-box-trades {
      flex: 1 1 100%;
      max-width: 100%;
      margin-top: 4px;
 }
  .ttm-stat-label {
      font-size: 11px;
      margin-bottom: 4px;
 }
  .ttm-stat-value {
      font-size: 1.25rem;
 }
  .ttm-stat-value-investment {
      font-size: 1.5rem;
 }
}
@media (max-width: 380px) {
  .ttm-stat-box {
      flex: 1 1 100%;
 }
  .ttm-title {
      font-size: 1.3rem;
 }
}
/* Small mobile devices */
@media (max-width: 480px) {
  .ttm-container {
      padding: 0.75rem;
 }
  .ttm-title {
      font-size: 1.3rem;
 }
  .ttm-chart {
      height: 250px;
 }
  .ttm-button {
      font-size: 18px;
      padding: 16px 16px;
      height: 56px;
 }
  .ttm-stat-box {
      padding: 10px 6px;
      min-height: 60px;
 }
  .ttm-stat-value {
      font-size: 1.1rem;
 }
  .ttm-stat-value-investment, .ttm-stat-value-buyhold {
      font-size: 1.4rem;
 }
  .ttm-stat-box-investment .ttm-stat-value {
      font-size: 1.6rem;
 }
  .ttm-stat-label {
      font-size: 0.7rem;
 }
  .ttm-stat-box-investment .ttm-stat-label {
      font-size: 0.8rem;
 }
  .ttm-button-wrapper {
    padding: 0 4px;      /* menos padding horizontal */
    gap: 8px;            /* menos espacio entre botones */
  }

  .ttm-button-secondary {
    white-space: normal;   
    text-align: center;
    font-size: 14px !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .ttm-chart {
      height: 200px;
 }
  .ttm-stats-row {
      flex-direction: row;
      gap: 8px;
 }
  .ttm-stat-box {
      padding: 12px 8px;
      min-height: 50px;
 }
  .ttm-stat-value {
      font-size: 1.1rem;
 }
  .ttm-stat-value-investment, .ttm-stat-value-buyhold {
      font-size: 1.3rem;
 }
  .ttm-stat-box-investment .ttm-stat-value {
      font-size: 1.5rem;
 }
}