/* Centralized Color Palette */
:root {
  --font-family: 'Quicksand', sans-serif;
  --bg-color: #f5f5f5;
  --bg-gradient-center: #f4f4f4;
  --bg-gradient-edge: #e0e0e0;
  --card-bg: #fbfbfb;
  --accent-bg: #f9f9f9;
  --text-color: #333;
  --button-bg: #523489;
  --button-hover: #422a6e;
  --button-text: #fff;
  --border-color: #ddd;
  --underline: #bdbdbd;
  --tab-underline: #523489;
  --note-bg: #524965;
  --note-text: #fff;
  --important-note-bg: #ff4900cf;
  --important-note-border: #ff000082;
  --important-note-text: #000;
  --shadow: 0 5px 10px #52348942;
  --card-padding: 15px 20px;
  --card-margin: 30px;
  --card-radius: 10px;
  --card-border: 0px solid var(--underline);
  --h1-font-size: 1.5em;
  --h1-font-weight: normal;
  --h1-margin: 0;
  --h1-color: #000000;
  --h2-font-size: 1.7em;
  --h2-font-weight: normal;
  --h2-margin: 0.5em 0;
  --h2-color: #4d3684;
  --h3-font-size: 1.4em;
  --h3-font-weight: normal;
  --h3-margin: 0.5em 0;
  --h3-color: #4d3684;
  --h4-font-size: 1.1em;
  --h4-font-weight: normal;
  --h4-margin: 0.5em 0;
  --h4-color: var(--text-color);
  --p-font-size: 100%;
  --p-font-weight: normal;
  --p-margin: 0 0 1em 0;
  --p-color: var(--text-color);
  --p-line-height: 1.6;
}

/* Transition effect for theme switch */
.theme-transition {
  transition: all 0.5s ease; /* 0.5-second fade for all animatable properties */
}

/* Global Reset and Base Styles */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  background: radial-gradient(circle at center, var(--bg-gradient-center) 70%, var(--bg-gradient-edge) 100%);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: var(--text-color);
  font-family: var(--font-family);
  line-height: 1.6;
  font-size: 100%;
  transition: background 0.5s ease, color 0.5s ease; /* Smooth transition for body */
}

/* Heading and Paragraph Styles */
h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  margin: var(--h1-margin);
  color: var(--h1-color);
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin: var(--h2-margin);
  color: var(--h2-color);
}

h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  margin: var(--h3-margin);
  color: var(--h3-color);
}

h4 {
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  margin: var(--h4-margin);
  color: var(--h4-color);
}

p {
  font-size: var(--p-font-size);
  font-weight: var(--p-font-weight);
  margin: var(--p-margin);
  color: var(--p-color);
  line-height: var(--p-line-height);
}

/* Override for <p> inside .note-card */
.note-card p {
  color: var(--note-text); /* #fff, white text for regular note cards */
}

/* Override for <p> inside .note-card.important */
.note-card.important p {
  color: var(--important-note-text); /* #000, black text for important note cards */
}

/* Container */
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

/* Card-Like Elements with Original Selectors */
.header, .card, .tabs, .sub-card, .step-card, .note-card {
  background: var(--card-bg);
  padding: var(--card-padding);
  margin-bottom: var(--card-margin);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  border-bottom: var(--card-border);
  transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; /* Smooth transition for cards */
}

/* Specific Overrides */
.header { display: flex; justify-content: space-between; align-items: center; }
.header img.header-icon { width: 100px; height: auto; margin-right: 15px; }
.note-card { background: var(--note-bg); color: var(--note-text); }
.note-card.important { 
  background: var(--important-note-bg); 
  border: 2px solid var(--important-note-border);
  color: var(--important-note-text); 
}
.header .header-container {
  display: flex;
  align-items: center; /* Vertically center the icon and text */
}

.header img.header-icon { 
  width: 100px; 
  height: auto; 
  margin-right: 20px; 
}

.header .header-text {
  --vertical-adjust: 15%; /* Default: 0% (centered) */
  transform: translateY(var(--vertical-adjust)); /* Adjust position by percentage */
}

/* Buttons and Links */
.btn, .nav a.btn, .auth-links a.btn {
  display: inline-block;
  background: var(--button-bg);
  color: var(--button-text);
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.5s ease, color 0.5s ease, transform 0.3s ease; /* Added transform transition */
}
.btn:hover, .nav a.btn:hover, .auth-links a.btn:hover {
  background: var(--button-hover);
  transform: scale(1.05); /* Increase size by 5% on hover */
}
.btn-delete {
  background: #8B0000;
}
.btn-delete:hover {
  background: #640000;
  transform: scale(1.05); /* Increase size by 5% on hover */
}
.btn-secondary {
  background: #6a64b8;
}
.btn-secondary:hover {
  background: #5a54a8; /* Slightly darker shade for hover */
  transform: scale(1.05); /* Increase size by 5% on hover */
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.purchase-btn {
  background-color: #523489;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.purchase-btn:hover {
  background-color: #422a6e; /* Match --button-hover */
  transform: scale(1.05); /* Increase size by 5% on hover */
}

/* Tab Buttons (All Types) */
.tab-button, .code-tab-button, .account-tab-button, .my-bot-tab-button, .fee-tab-button {
  background: none;
  border: none;
  color: var(--text-color); /* #333 */
  padding: 15px 30px;
  cursor: pointer;
  font-size: 1.1em;
  transition: color 0.3s, transform 0.3s ease; /* Add transform to transition */
}
.tab-button.active, .code-tab-button.active, .account-tab-button.active, 
.my-bot-tab-button.active, .fee-tab-button.active {
  border-bottom: 3px solid var(--tab-underline); /* #523489, already set */
  color: var(--button-bg); /* #523489, already set */
  font-weight: bold;
  transform: scale(1.1); /* Stay slightly bigger */
}
.tab-button:hover, .code-tab-button:hover, .account-tab-button:hover, 
.my-bot-tab-button:hover, .fee-tab-button:hover {
  color: var(--button-bg); /* #523489 */
  transform: scale(1.1); /* Slightly bigger */
}

.tab-button i, .code-tab-button i, .account-tab-button i, .my-bot-tab-button i, .fee-tab-button i {
  margin-right: 8px; /* Space between icon and text */
  color: var(--text-color); /* #333, default state */
  vertical-align: middle; /* Align with text */
  transition: color 0.3s ease; /* Smooth color change */
}

/* Hover: Icons turn purple with button */
.tab-button:hover i, .code-tab-button:hover i, .account-tab-button:hover i, 
.my-bot-tab-button:hover i, .fee-tab-button:hover i {
  color: var(--button-bg); /* #523489 */
}

/* Active: Icons stay purple with button */
.tab-button.active i, .code-tab-button.active i, .account-tab-button.active i, 
.my-bot-tab-button.active i, .fee-tab-button.active i {
  color: var(--button-bg); /* #523489 */
}

/* Tabs Container */
.tabs, .code-tabs, .account-sub-tabs, .my-bot-sub-tabs, .fee-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 2px solid var(--border-color);
  transition: border-bottom 0.5s ease; /* Smooth transition for border */
}

/* Forms and Inputs */
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: 600; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], 
select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  color: var(--text-color);
  box-sizing: border-box;
  transition: background 0.5s ease, color 0.5s ease, border 0.5s ease; /* Smooth transition for inputs */
}

/* Tables */
.credentials-table, .position-table, .grand-totals-table, .output-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}
th, td { padding: 8px; border: 1px solid var(--border-color); text-align: left; }
th { background: #f2f2f2; font-weight: bold; }
.total-row td, .grand-totals-table td { font-weight: bold; text-align: right; }

/* Disclaimers */
.disclaimer { 
  border: 2px solid #ff4444; 
  padding: 15px; 
  background: #fff3f3; 
  border-radius: 5px; 
}
.top-disclaimer { border-color: #4444ff; background: #f3f3ff; }
.disclaimer .big-checkbox input[type="checkbox"] { width: 24px; height: 24px; margin-right: 12px; }
.disclaimer .big-checkbox label { font-size: 20px; }

/* Code Blocks */
.code-block { 
  background: #2d2d2d; 
  color: #f8f8f2; 
  padding: 15px; 
  border-radius: var(--card-radius);
  overflow-x: auto; 
  font-family: 'Courier New', monospace; 
}

/* Flowchart */
.flowchart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 25px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  margin-top: var(--card-margin);
  box-shadow: var(--shadow);
  border-bottom: var(--card-border);
}
.flow-group { border: 2px dashed var(--button-bg); padding: 10px; border-radius: 4px; display: flex; gap: 10px; }
.flow-item { text-align: center; }
.flow-item img { width: 100px; height: 100px; display: block; margin: 0 auto 5px; }
.flow-plus, .flow-arrow { font-size: 2em; color: var(--button-bg); line-height: 1; }

.timeline-image {
  width: 100%; /* Makes the image take the full width of its container */
  height: auto; /* Maintains aspect ratio */
  object-fit: contain; /* Ensures the image fits within the container without cropping */
  display: block; /* Removes any extra spacing below the image */
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .position-table, .grand-totals-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (min-width: 600px) {
  .generator-container { display: flex; gap: 20px; }
  .generator-form, .generator-output { flex: 1; }
}

/* Misc Utilities */
.spinner { 
  border: 4px solid #f3f3f3; 
  border-top: 4px solid var(--button-bg); 
  border-radius: 50%; 
  width: 24px; 
  height: 24px; 
  animation: spin 2s linear infinite; 
  display: inline-block; 
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Powered by Layout */
.powered-by-container {
  display: flex;
  gap: 20px;
}
.powered-by-card {
  width: 200px;
  flex-shrink: 0;
}
.welcome-text {
  flex: 1;
}
.powered-by-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.powered-by-card {
  order: 1;
}
.welcome-text {
  order: 0;
}

.flow-arrow {
  font-size: 35px;
  color: #523489;
  margin: 0 10px;
  transition: all 0.3s ease;
  vertical-align: middle; /* Ensure it aligns with text/images */
  display: inline-block; /* Helps with consistent spacing */
}

.flow-arrow:hover {
  color: #7b52c1;
  transform: scale(1.2);
}

/* Ensure flow-group aligns items properly */
.flow-group {
  display: flex;
  align-items: center; /* Vertically centers TradingView, +, Indicator */
  gap: 10px; /* Matches the margin spacing */
}

/* Mini BotFace Icon */
.tab-icon {
  width: 28px; /* Mini size */
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between icons */
  cursor: pointer;
  padding: 10px;
  background: var(--button-bg); /* #523489 */
  color: var(--button-text); /* #fff */
  border-radius: 6px;
  transition: background 0.5s ease, color 0.5s ease; /* Updated to 0.5s */
}

.theme-toggle:hover {
  background: var(--button-hover); /* #422a6e */
}

.theme-toggle i {
  font-size: 1.2em; /* Slightly larger icons */
  vertical-align: middle;
}

/* New invisible container */
.timeline-wrapper {
  width: 100%;
  max-width: 100%; /* Matches card width */
  margin: 0 auto; /* Centers within card */
  background: transparent; /* Invisible */
  overflow: visible; /* Allows vertical expansion */
}

/* Timeline Container */
.timeline-container {
  width: 90%;
  background: transparent;
  padding: 145px 55px; /* Space for above/below events */
  overflow-x: visible;
}

/* Timeline Styling */
.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
}

/* Timeline Line */
.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--button-bg, #523489);
  transform: translateY(-50%);
}

/* Day Styling */
.day {
  position: relative;
  text-align: center;
  flex: 1;
  min-width: 100px;
}

/* Day Label */
.day-label {
  display: block;
  color: var(--text-color, #333);
  font-weight: bold;
  transform: translate(45px, -20px);
}

/* Day Dot */
.day-dot {
  width: 12px;
  height: 12px;
  background: var(--button-bg, #523489);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Event Styling */
.event {
  position: absolute;
  width: 200px;
  padding: 10px;
  background: var(--button-bg, #523489);
  color: #fff;
  border-radius: 5px;
  font-size: 0.9em;
  left: 50%;
  transform: translateX(-50%);
}

.event.above {
  bottom: 60px; /* Your specified value */
}

.event.below {
  top: 60px; /* Your specified value */
}

.event-time {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.event-connector {
  width: 2px;
  height: 40px; /* Matches 60px gap */
  background: var(--button-bg, #523489);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.event.above .event-connector {
  bottom: -40px; /* Aligns with bottom: 60px */
}

.event.below .event-connector {
  top: -40px; /* Aligns with top: 60px */
}

/* Lock first event to left edge */
.day:first-child .event.above {
  left: 0;
  transform: translateX(0);
}

.purchase-card {
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 10px;
  position: relative;
  min-height: 280px;
  width: 250px;
  box-shadow: 0 2px 10px #523489;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.access-card {
  border-radius: 5px;
  border-color: #523489;
  color: #4d3684;
  padding: 20px;
  text-align: center;
  width: 150px;
  box-shadow: 0 5px 10px #523489(0, 0, 0, 0.5);
}

/* Button Container Styling */
.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    width: 100%;
}

/* Left Buttons Styling */
.left-buttons {
    display: flex;
    gap: 10px;
}

/* Ensure Buttons Don’t Wrap and Fit Properly */
.btn, .btn-secondary {
    padding: 10px 20px;
    font-size: 1em;
    line-height: 1.5;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    white-space: nowrap;
}

#timelineContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.timeline {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px; /* Adjust as needed to fit the card */
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: transparent;
  transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

.timeline-step.completed .timeline-circle {
  background-color: var(--button-bg);
  border-color: var(--button-bg);
}

.timeline-line {
  width: 100px; /* Adjust length as needed */
  height: 4px;
  background-color: #ccc;
  transition: background-color 1s ease-in-out;
}

.timeline-line.completed {
  background-color: var(--button-bg);
}

.timeline-step i {
  font-size: 24px;
  margin-bottom: 10px;
}

.timeline-step p {
  margin-top: 10px;
  font-size: 14px;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        align-items: stretch;
    }
    .left-buttons {
        flex-direction: column;
        gap: 5px;
    }
    .button-container .btn {
        width: 100%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
  .timeline-container {
      padding: 80px 0;
  }
  .event {
      width: 150px;
      font-size: 0.8em;
  }
  .day {
      min-width: 80px;
  }
}