/*
  Global styling for the Investai application.
  This stylesheet unifies the look and feel across all pages and
  introduces responsive layouts suitable for mobile screens.  Using
  CSS variables and modern layout primitives (flexbox and grid),
  the UI now feels more cohesive and polished while retaining
  clarity and accessibility.  Cards, forms, tables and navigation
  share consistent spacing, shadows and border radii.  The design
  defaults to a light theme with subtle shadows and soft corners.
*/

/*
  Colour palette and base variables

  The application previously used a blue/green palette.  To better align
  with the Investai branding and the supplied logo, we adopt a new
  scheme featuring sea‑blue for primary actions, warm brown for
  success/affirmative actions and gold for informational or secondary
  actions.  These colours harmonise with the gold coin logo and give
  the interface a more premium feel.  CSS variables defined here make
  it easy to tweak the palette in one place.
*/
:root {
  --primary-color: #00ff88;      /* neon green for primary trading actions */
  --success-color: #22c55e;      /* green for gains / successful actions */
  --info-color: #38bdf8;         /* cyan for informational highlights */
  --danger-color: #ef4444;       /* red for losses / errors */
  --background-color: #000000;   /* black global background */
  --card-bg: #020617;            /* deep navy card background */
  --text-color: #e5e7eb;         /* light grey text for contrast on dark */
  --border-radius: 10px;         /* slightly softer rounded corners */
  --box-shadow: 0 0 24px rgba(15, 23, 42, 0.6); /* glow-like depth */
}

/* Import a modern sans‑serif font for improved readability.  Poppins
   provides clean headings and comfortable body text.  We pull the
   medium, semi‑bold and bold weights to differentiate headings and
   call‑to‑action buttons. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Base styles */
body {
  margin: 0;
  /* Add horizontal padding to give breathing room on the left and right sides of the page. */
  padding: 0 1rem;
  /* Use Poppins as the primary font with sensible fallbacks. */
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--background-color);
  color: var(--text-color);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75rem 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

h1 {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Logo styling.  The logo appears at the top of every page.  We size
   it reasonably and centre it on small screens. */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.logo-container img.logo {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}


/* Navigation bar */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.nav a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav a:hover {
  /* Darken the primary colour slightly on hover */
  color: #4ade80;
}

/* Card‑like containers and common sections */
.card,
.balances,
.section,
.instructions,
form {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* Product cards specifically */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.products .card {
  text-align: center;
  padding: 1rem;
}

/* Inputs and interactive fields */
input, select {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  font-size: 1rem;
}

/* Buttons */
button {
  padding: 0.6rem 1rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease, opacity 0.2s ease;
  color: #fff;
  background: var(--primary-color);
}

button:hover {
  opacity: 0.9;
}

/* Contextual buttons */
.products .card button {
  background: var(--success-color);
}

.products .card button:hover {
  /* Slightly darker brown on hover */
  background: #6f370f;
}

form button {
  background: var(--info-color);
}

form button:hover {
  /* Darker shade of gold on hover */
  background: #b38e2e;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.75rem;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background: #f0f0f0;
  font-weight: 600;
}

/* Messages and alerts */
.message {
  color: var(--danger-color);
  margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  h1 {
    font-size: 1.5rem;
  }
  .nav {
    gap: 0.5rem;
  }
  .card,
  .balances,
  .section,
  .instructions,
  form {
    width: 100% !important;
    padding: 1rem;
  }
  .products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Container utility for forms on the login/register page */
.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.container > * {
  flex: 1 1 300px;
  margin: 0.5rem;
}

/* App shell centers content and constrains max width for a professional layout */
.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Increase left/right breathing room on wide screens */
@media (min-width: 768px) {
  body { padding-left: 3rem; padding-right: 3rem; }
  .app { padding-left: 1rem; padding-right: 1rem; }
}

/* Footer with WhatsApp share button */
.site-footer {
  margin-top: 3rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-wa {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--border-radius);
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
}
.btn-wa:hover { opacity: 0.9; }
.tnc-note { font-size: 0.9rem; opacity: 0.9; }

@media (min-width: 1200px) {
  body { padding-left: 5rem; padding-right: 5rem; }
  .app { max-width: 1200px; }
}


/* Additional spacing tweaks */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}

.products .card {
  margin: 0; /* grid gap handles spacing */
}

.logo-container {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem; /* more space below the logo */
}

.ref-note {
  display: block;
  margin-top: 0.35rem;
  opacity: 0.9;
  font-size: 0.9rem;
}


/* Navigation above logo layout adjustments */
.nav {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}


.main-footer {
    background-color: #0066cc;
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}
.moving-text {
    display: inline-block;
    white-space: nowrap;
    animation: moveText 10s linear infinite;
}
@keyframes moveText {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* ------------------------------------------------------------------
   Dark trading / financial‑market theme overrides
   ------------------------------------------------------------------ */
body {
  background-color: #000000;
  color: var(--text-color);
}

/* Main app shell now looks like a trading terminal panel */
.app {
  max-width: 1100px;
  margin: 1.5rem auto 4rem auto;
  padding: 1.5rem 1.5rem 3.5rem 1.5rem;
  background: radial-gradient(circle at top, #020617 0, #020617 45%, #000000 100%);
  border-radius: var(--border-radius);
  box-shadow: 0 0 40px rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.45); /* slate border */
}

/* Headings styled like dashboard modules */
h1, h2, h3 {
  color: #f9fafb;
  text-shadow: 0 0 18px rgba(15, 23, 42, 0.9);
}

/* Navigation as horizontal market tabs */
.nav {
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.nav a {
  position: relative;
  font-weight: 500;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, #38bdf8);
  transition: width 0.2s ease;
}

.nav a:hover::after {
  width: 100%;
}

/* Cards now look like trading widgets */
.card,
.balances,
.section,
.instructions,
form {
  background: radial-gradient(circle at top, #020617 0, #020617 60%, #020617 100%);
  border-radius: var(--border-radius);
  box-shadow: 0 0 24px rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.7);
}

/* Balance block styled like live P&L readout */
.balances {
  display: grid;
  gap: 0.5rem;
}

.balances h3 {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  color: #9ca3af;
}

.balances div {
  display: flex;
  justify-content: space-between;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
}

.balances #principal {
  color: var(--info-color);
}

.balances #commission {
  color: var(--success-color);
}

.balances #available {
  color: #f9fafb;
}

/* Buttons: primary trading actions */
button,
.button {
  background: linear-gradient(135deg, #00ff88, #22c55e);
  color: #020617;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.6);
}

button:hover,
.button:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.85);
}

/* Tables like order books / trade history */
table {
  background: #020617;
  border-radius: var(--border-radius);
  overflow: hidden;
}

th, td {
  border: 1px solid rgba(55, 65, 81, 0.9);
  color: var(--text-color);
}

th {
  background: radial-gradient(circle at top, #020617 0, #020617 60%, #020617 100%);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Alternating row stripe for readability */
tr:nth-child(even) td {
  background-color: rgba(15, 23, 42, 0.95);
}

tr:nth-child(odd) td {
  background-color: rgba(15, 23, 42, 0.8);
}

/* Danger / loss highlighting */
.message {
  color: var(--danger-color);
}

/* Inputs: dark terminals with neon caret */
input, select {
  background: #020617;
  border: 1px solid rgba(75, 85, 99, 0.9);
  color: var(--text-color);
}

input:focus,
select:focus {
  outline: 1px solid #22c55e;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.6);
}

/* Footer blends with dark trading theme */
.site-footer {
  border-top: 1px solid rgba(55, 65, 81, 0.9);
}

/* Moving marquee footer stands out on black background */
.main-footer {
  background-color: #020617;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.9);
}

/* Utility states for future market‑style colouring */
.text-profit {
  color: var(--success-color);
}

.text-loss {
  color: var(--danger-color);
}

.text-muted {
  color: #6b7280;
}


/* ------------------------------------------------------------------
   Live market ticker strip
   ------------------------------------------------------------------ */
.ticker-bar {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.35rem 0;
  margin-bottom: 1.5rem;
  background: radial-gradient(circle at top, #022c22 0, #020617 60%, #000000 100%);
  border: 1px solid rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 26px rgba(34, 197, 94, 0.55);
}

.ticker-track {
  display: inline-flex;
  gap: 2.75rem;
  white-space: nowrap;
  animation: tickerScroll 30s linear infinite;
}

.ticker-item {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
}

.ticker-symbol {
  color: #9ca3af;
  margin-right: 0.4rem;
}

.ticker-price {
  color: #f9fafb;
  margin-right: 0.35rem;
}

.ticker-change {
  font-weight: 600;
}

.ticker-change.up {
  color: var(--success-color);
}

.ticker-change.down {
  color: var(--danger-color);
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* ------------------------------------------------------------------
   Ticker header (LIVE badge + clock + markets)
   ------------------------------------------------------------------ */
.ticker-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #9ca3af;
}

.live-pill {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: radial-gradient(circle at top, #dc2626 0, #7f1d1d 70%);
  color: #fee2e2;
  letter-spacing: 0.14em;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.75);
}

.market-clock {
  color: #e5e7eb;
}

.market-status {
  opacity: 0.8;
}

/* Secondary crypto‑only ticker line */
.ticker-bar--crypto {
  margin-top: 0.25rem;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55);
}

.ticker-track--crypto {
  animation-duration: 24s; /* slightly faster */
}


/* -----------------------------------------------------------
   BOTTOM AI TICKER FOOTER
   ----------------------------------------------------------- */
.bottom-ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #020617;
  padding: 0.4rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.8);
  z-index: 9999;
}

.bottom-ticker-track {
  display: inline-flex;
  gap: 4rem;
  white-space: nowrap;
  animation: bottomTickerScroll 18s linear infinite;
}

.bottom-ticker-text {
  color: #38bdf8;
  font-family: "Roboto Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}

@keyframes bottomTickerScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Fake trade chart used in place of the static logo */
.logo-container canvas#logoChart {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
  border-radius: 16px;
}