/* ================================
   BASE LAYOUT STYLES
   ================================ */

/* Reset + Box model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  overflow-y: auto;       /* allow normal page scroll */
  overflow-x: hidden;
  font-family: assistant;
  color: #222;
  background: #f8f9fb;
  display: flex;
  flex-direction: column;
}

.page-top {
  margin-top: 40px;   /* adjust this value until perfect */
}

/* ---- MAIN WRAPPER ---- */
main.page-content {
  height: calc(100vh - 70px - 60px);  /* header(70) + footer(60) */
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding-bottom: 40px; 
}

/* ---- HEADER ---- */
header{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  width: 100%;
  height: 70px;
  background-color: #e2dfe8;
  z-index: 400;

  /* Vertically center the nav inside the 70px header */
  display: flex;
  align-items: center;

  /* No vertical padding (keeps true centering) */
  padding: 0;
}

/* NAV fills the header area */
header nav{
  width: 100%;
  height: 100%;

  /* Centered page width constraint (keep) */
  max-width: 1200px;
  margin: 0 auto;

  /* Equal edge padding left/right */
  padding: 0 20px;
}

/* IMPORTANT:
   Your header.php currently has an extra <div class="main-wrapper">...</div>
   inside <nav>. That extra element becomes a 4th flex/grid child and can
   push the hamburger icon inward. We hide it in the header only. */
header nav > .main-wrapper{
  display: none !important;
}

/* Sections (3 columns) */
.header_left,
.header_middle,
.header_right{
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Ensure the logo stays inside the header (size rules ONLY) */
.header_middle img{
  display: block;
  height: 55px;
  width: auto;
  max-height: 100%;
}

/* Menus should be hidden by default (shown by your JS/hover logic when needed) */
/* Enable hover-based dropdown (classic pattern):
   HTML structure expected:
   <div class="main-drop">
      <img ...>   (hamburger trigger)
      <div class="main-drop-content"> ...links... </div>
   </div>
   Same idea for .dropdown / .dropdown-content
*/
header .dropdown,
header .main-drop{
  position: relative;     /* anchor the absolute dropdown panel */
  display: flex;
  align-items: center;    /* keep the hamburger vertically centered */
}



/* =========================
   MAIN MENU (hamburger) - LOCATION & BEHAVIOR (NO visual styling changes)
   Fixes hover flicker by eliminating the "dead zone" between icon and dropdown.
========================= */

/* Wrapper around the hamburger icon (anchors the dropdown panel) */
header .dropdown,
header .main-drop{
  position: relative;     /* anchors the absolute dropdown panel */
  display: flex;
  align-items: center;    /* vertically centers the icon */
}

/* Dropdown panels: hidden by default + positioned directly under the trigger */
header .dropdown-content,
header .main-drop-content{
  display: none;          /* hidden until hover */
  position: absolute;
  top: 100%;              /* attach to bottom edge of trigger (no calc gap) */
  right: 0;
  left: auto;
  z-index: 9999;
 pointer-events: auto;
}

/* Show while hovering trigger OR panel (so it doesn't disappear when moving the cursor) */
header .dropdown:hover .dropdown-content,
header .dropdown-content:hover,
header .main-drop:hover .main-drop-content,
header .main-drop-content:hover{
  display: block;
}

/* Invisible "hover bridge" above the panel to prevent any tiny gap flicker */
header .dropdown-content::before,
header .main-drop-content::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* Dropdown panel positioning (appearance like colors/borders should be defined elsewhere) */
/* Dropdown panel visual styling (from older working version) */
header .dropdown-content,
header .main-drop-content{
  background-color: #e1d7d6;
  min-width: 150px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  overflow: hidden; /* keep rounded corners on links */
}

/* Links inside the dropdown */
header .dropdown-content a,
header .main-drop-content a{
  padding: 8px 12px;
  color: #000;
  text-align: center;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

header .dropdown-content a:last-child,
header .main-drop-content a:last-child{
  border-bottom: none;
}

/* Hover/focus styles for dropdown items */
header .dropdown-content a:hover,
header .dropdown-content a:focus,
header .main-drop-content a:hover,
header .main-drop-content a:focus{
  background-color: #dfeaf1;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  color: #081a3e;
}

/* optional: tap feedback on mobile */
header .dropdown-content a:active,
header .main-drop-content a:active{
  background-color: #dcd5ef;
  border-bottom: 1px solid black;
}



/* =========================
   MAIN MENU - DROPDOWN STYLE
   ========================= */

/* The dropdown panel */
header .main-drop-content{
  background: #E5E4E2;                 /* light gray like your old look */
  border: 1px solid #ccc;
  border-radius: 10px;
  min-width: 150px;
  overflow: hidden;                    /* keeps rounded corners clean */
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* Kill any global UL styling inside the menu (your site has global UL flex rules) */
header .main-drop-content ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;                      /* override global flex column rules */
}
header .main-drop-content li{
  margin: 0;
  padding: 0;
}

/* Links inside menu */
header .main-drop-content a{
  display: block;
  padding: 10px 16px;
  text-decoration: none;               /* remove underline */
  color: #081a3e;                      /* your theme navy */
  font-family: assistant;
  font-size: 0.95rem;
  text-align: center;
  border-bottom: 1px solid #d0d0d0;
}

/* Last item: no border */
header .main-drop-content a:last-child{
  border-bottom: none;
}

/* Hover state */
header .main-drop-content a:hover{
  background: #d9d7de;                 /* subtle highlight */
  font-weight: 600;
}

header .main-drop.is-open .main-drop-content { display: block !important; }

/* Also hide common "main menu" containers if present (prevents the link row from showing) */
header .header_right #main_menu,
header .header_right #main-menu,
header .header_right .main_menu,
header .header_right .main-menu{
  display: none;
}

/* Ensure the button stays clickable and doesn't disappear */
.menu-btn {
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    z-index: 100001;
}

/* =========================
   DESKTOP (3 equal columns)
========================= */
@media (min-width: 601px){

  /* Use CSS Grid so only the 3 sections participate in layout */
  header nav{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* equal thirds */
    align-items: center;
  }

  /* Place each section explicitly */
  .header_left{ justify-content: flex-start; }
  .header_middle{ justify-content: center; }
  .header_right{ justify-content: flex-end; }
}

/* =========================
   MOBILE (one row, equal gaps)
========================= */
@media (max-width: 600px){

  header nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;   /* equal gap on both edges */
  }

  .header_left{ justify-content: flex-start; }
  .header_middle{ justify-content: center; }
  .header_right{ justify-content: flex-end; }
}

.button_1, .button_2, .f_button {
  background-color: #081a3e;
  color: #fff;
  border-radius: 3px 20px 3px 20px;
  font-family: assistant;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;                /* removes native border */
  appearance: none;            /* removes system style (modern) */
  -webkit-appearance: none;    /* Safari fix */
}

.button_1 {
  width: 90px;
  height: 27px;
  margin: 10px;
}



.button_2 {
  width: 140px;
  height: 32px;
  margin: 20px;
}

.button_1:hover, .button_2:hover {
  background-color: #333a66;
}

/* ---- FOOTER ---- */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #bcb;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 0.9rem;
  z-index: 50;
}

body.legal-page .footer {
  position: relative;
}

.f_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  border-radius: 40px;
  height: 35px;
  margin: 5px auto;
  font-size: 1.5rem;
  font-weight: bold;
}

/******************/
/*    HOME PAGE   */
/******************/

.index_content {
  display: grid;
  height: 100%;
  font-size: 1.1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1.5fr 3fr 2fr 2fr 3fr;
  grid-template-areas:
    "hero hero hero hero hero hero"
    "hero_left hero_left hero_left hero_right hero_right hero_right"
    "features features features features features features"
    "ts_left ts_left ts_right ts_right ts_right ts_right"
    "per_left per_left per_left per_left per_right per_right";
  text-align: center;
  row-gap: 20px;
  padding: 0 30px;
  padding-bottom: 80px !important;
 }

#hero { 
  grid-area: hero;
  margin:30px;
}
#hero_left { grid-area: hero_left; }
#hero_right {grid-area: hero_right;
  padding-right: 90px;
  }
#features { grid-area: features; }
#ts_left { grid-area: ts_left; }
#ts_right{ grid-area: ts_right; }
#per_left{
           grid-area: per_left;
		   padding-bottom: 20px;
	}
#per_right{
           grid-area: per_right; 
    }

#per_left h3, #ts_right h3{
  padding-top:25px;
}

/* Section Styling */
#features {
  border-radius: 1rem;
  background: #eee;
  width: 60%;
  padding: 25px;
  margin: auto;
  margin-top: -20px;
}

#ts_left, #ts_right, #per_left, #per_right {
  background: #eee;
}

[id*="right"] {
  border-radius: 0 1rem 1rem 0;
}

[id*="left"] {
  border-radius: 1rem 0 0 1rem;
}

#ts_right p, #per_left p {
  padding: 5px 50px;
}

/* Lists */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul li {
  position: relative;
  padding-left: 28px;
  line-height: 1.6;
  text-align: left;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: url('../../images/v_icon.png') no-repeat center center;
  background-size: 22px 22px;
  background-color: var(--bg, #e2dfe8);
  border-radius: 50%;
}

/* --- Ensure icon bullets appear also inside #per_left --- */
#per_left ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

#per_left li {
  position: relative;
  padding-left: 28px;
  line-height: 1.6;
  text-align: left;
}

#per_left li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: url('../../images/v_icon.png') no-repeat center center;
  background-size: 22px 22px;
  background-color: var(--bg, #e2dfe8);
  border-radius: 50%;
}

/* Specific List Alignment */
#per_left ul {
  display: inline-block;
  text-align: left;
}

.image-caption {
  margin-top: -10px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

#per_right .image-caption {
  margin-top: -70px; /* different spacing ONLY in per_right */
} 


#hero_right img { width: 70%; height: auto; display: block; margin: 0 auto; }
#ts_left img { width: 85%; height: auto; display: block; margin: 0 auto; }
#per_right img { width: 100%; height: auto; display: block; margin: 0 auto; }

/*=== LOGIN FORM  ===*/
/* === FORM CONTAINER === */
.form-section {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.form-card {
  background: #ffffff;
  padding: 35px 30px;
  border-radius: 16px;
 /* box-shadow: 0 10px 30px rgba(0,0,0,0.08);*/
  max-width: 420px;
  width: 100%;
  text-align: center;
  background: #eee;
}

/* === TITLES === */
.form-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #081a3e;
}

.contact_content label {
  display: block;
  margin-bottom: 0px;   /* was probably 10–16px before */
  font-weight: 600;
  color: #081a3e;
}

/* === INPUTS === */
.ta-form input[type=text],
.ta-form input[type=password],
.ta-form input[type=email] {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 15px;
  border: 1px solid #d6dae3;
  border-radius: 10px;
  font-size: 1rem;
  background: #f8f9fb;
  box-sizing: border-box;
}

/* ========================
   UNIFIED INPUT SYSTEM
  ======================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 15px;
  border: 1px solid #d6dae3;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #f8f9fb;
  box-sizing: border-box;
  color: #081a3e;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #16b34a;
  box-shadow: 0 0 0 3px rgba(15, 166, 70, 0.25);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* ========================
   END UNIFIED INPUT SYSTEM
  ======================== */
/*     ABOUT      */

  .about_content{
  display: grid;
  height: 100vh;
  grid-gap: 0.5rem;
  padding: 10px 20px;
  justify-items: center;          /* center each content block horizontally */
  align-items: start;
  align-items: stretch;             /* <— ensures all cells in a row match height *//* keep natural top alignment */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 2fr 1.8fr 1.8fr 2fr;
  grid-template-areas: "headers headers headers"
                       "mission why values"
					   "how how how"
					   "custom custom custom"
					   "clear clear clear"
					   "logo_section logo_section logo_section";

}


.content{
  background: #eee;
  border-radius: 1rem;
  width: 350px;
  padding: 10px 25px;
}

.content h3{
   text-align: center;
}

#headers{
  grid-area:headers;
  margin: 0.8rem auto;
  width:40%;
  padding: 10px 0;
  margin-bottom: 15px;
  text-align: center;
}

#headers h1 {
  font-size: clamp(1.5rem, 2.5vw, 2.0rem); /* min, preferred, max */
}

#headers h2 {
  font-size: clamp(1rem, 1.8vw, 1.8rem);
}

#mission{
  grid-area:mission;
}

#why{
  grid-area:why;
}

#values{
  grid-area:values;
}

#how{
  grid-area: how;
  }

#custom{
  grid-area:custom;
  }

#clear{
  grid-area:clear;
 }

#logo_section{
  grid-area:logo_section;
  text-align: center;
  background: #fff;
 }

#logo_section img{
  width:80%;
  height: auto;
  margin: 20px auto;
}

.content{
  background: #eee;
  border-radius: 1rem;
  width: 350px;
  padding: 10px 25px;
}

.content h3{
   text-align: center
}


@media only screen and (max-width: 550px) {

  .about_content{
  display: grid;
  height: 100vh;
  grid-gap: 0.5rem;
  padding: 10px 20px;
  margin: 0 auto;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 2fr 2fr 2fr 1.8fr 1.8fr 2fr;
  grid-template-areas: "headers"
                       "mission"
					   "why"
					   "values"
					   "how"
					   "custom"
					   "clear"
					   "logo_section";

}

}


.ta-form input:focus {
  border-color: #16b34a;
  box-shadow: 0 0 0 3px rgba(15, 166, 70, 0.25);
  outline: none;
}


/* === LINK === */
.form-link {
  display: block;
  margin-bottom: 10px;
  color: #0a4fa3;
  font-size: 0.95rem;
  text-decoration: underline;
}

/*=== END LOGIN FORM  ===*/

/* === SIGNUP PAGE — MATCH LOGIN STYLE === */

.form-hint-box {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 18px;
  text-align: left;
  display: none; /* JS shows/hides these */
  font-size: 0.95rem;
}

.form-hint-box h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #081a3e;
}

.form-hint-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.form-hint-box li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 6px;
  font-size: 0.95rem;
  list-style-type: square;
  text-align: left;
}

.form-hint-box li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #16b34a;
  font-size: 1.2rem;
}
/*===  End sigh-up page   ===*/

/*=== RESET PASSWORD  ==*/
.form-subtitle {
  margin-top: -10px;
  margin-bottom: 25px;
  font-size: 1.2rem;
  color: #444;
}
/*=== END RESET PASSWORD  ==*/

/*=== CREATE NEW PASSWORD  ==*/
.error-bold {
  color: #b30000;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
}
/*=== END CREATE NEW PASSWORD  ==*/

/* Shared account pages wrapper:
   subscription, upload, future legal/docs/trading pages */
.account-content {
  width: 90%;
  max-width: 1100px;
  margin: 15px auto 40px;   /* centered inside main.page-content */
}



/* ==========================
   ACCOUNT MENU AS TABS
   ========================== */
/* Tabs: same for account pages + legal pages, since you reuse .account-tabs */
.account-tabs,
.account-tabs ul {
  background: #ffffff !important;
  top: 70px; 
  position: sticky;
  top: 0;
  z-index: 200;
}

.account-tabs > ul {
  width: 1100px;
  max-width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  list-style: none;
}

.account-tabs li {
  background: #e7e7e7;
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 8px 18px;
  border-radius: 8px 8px 0 0;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
  margin-top: 10px;
}

.account-tabs li::before {
  content: "";
  position: absolute;
  left: 6px;               /* icon position */
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 18px;
  background: url('../../images/TraderAnalyticsProLogo.png') no-repeat center center;
  background-size: 16px 16px;
  opacity: 1;
  /*z-index: 1;*/
}

.account-tabs li:hover {
  background: #f4f4f4;
}

.account-tabs li a{
  text-decoration: none;
  color: #081a3e;
  font-weight: 600;
  padding-left: 5px; 
}



/* Active tab looks like continuation of the page */
.account-tabs li.active {
  background: #ffffff;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ffffff;
  position: relative;
  top: 2px;
}

.account-tabs li.active a {
  color: #081a3e;
}

/* ==========================
   END ACCOUNT MENU AS TABS
   ========================== */

/* ===============================
   SUBSCRIPTION / PRICING LAYOUT
   =============================== */
.pricing-header {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-header h1 {
  font-size: 1.8rem;
  margin-bottom: 6px;
  color: #081a3e;
}

.pricing-header h2 {
  font-size: 1.1rem;
  color: #555;
}

/* 4 cards in a row on wide screens */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

/* CARD STYLE */
.plan-card {
 /* background: #eee;*/
  border-radius: 14px;
  padding: 18px 16px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content:space-between; /* distribute top content & button */
  text-align: left;
}

/* ==========================================
   COLORFUL SUBSCRIPTION CARD THEMES
   ========================================== */

/* Free plan – soft navy */
.plan-free {
  background: linear-gradient(180deg, #e8ecf5 0%, #d5dcec 100%);
  border: 1px solid #c5cee0;
}

/* 1 Week – green highlight */
.plan-week {
  background: linear-gradient(180deg, #dff7e8 0%, #b9edcd 100%);
  border: 1px solid #9fddb8;
}

/* 1 Month – teal / aqua */
.plan-month {
  background: linear-gradient(180deg, #e0f4f6 0%, #c6e9ec 100%);
  border: 1px solid #abd7da;
}

/* 1 Year – premium dark blue-green */
.plan-year {
  background: linear-gradient(180deg, #d9e8ef 0%, #c1d7e2 100%);
  border: 1px solid #9ebac7;
}

/* All plan titles look stronger on color backgrounds */
.plan-name {
  color: #081a3e;
}

/* Price stronger */
.plan-price {
  color: #081a3e;
  text-shadow: 0px 1px 0px rgba(255,255,255,0.6);
}

.plan-featured {
  background: #fff;
  border: 2px solid #16b34a;
}

.plan-name {
  font-size: 1.2rem;
  color: #081a3e;
  margin-bottom: 6px;
}

.plan-price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #081a3e;
  margin-bottom: 4px;
}

.plan-tagline {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 12px;
}

/* FEATURES (override global UL styles) */
.plan-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: block;            /* cancel global flex */
}

.plan-features li {
  margin-bottom: 6px;
  padding-left: 26px;
  position: relative;
  text-align: left;
}

/* v_icon bullet like index */
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: url('images/v_icon.png') no-repeat center center;
  background-size: contain;
}

/* BUTTONS */
.plan-button {
  background: #081a3e;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: background 0.2s ease;
}

.plan-button:hover {
  background: #0b265e;
}

.plan-button-primary {
  background: #16b34a;
}

.plan-button-primary:hover {
  background: #12953d;
}


/* ===============================
   END SUBSCRIPTION / PRICING LAYOUT
   =============================== */


/* =========================
   Upload Statement page
   ========================= */

/* Card */
.upload-card {
  background: #eee;
  border-radius: 14px;
  padding: 30px 30px 40px;
  width: min(520px, 100%);
  margin: 0 auto 30px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* Form layout */
.upload-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-card label {
  font-weight: 600;
  color: #081a3e;
}

/* ===== Custom file picker row ===== */
.file-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "btn name";
  gap: 10px;
  align-items: center;
}

/* Hide the native input but keep it accessible via label[for] */
.file-native {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* "Choose file" button */
.file-btn {
  grid-area: btn;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #d6dae3;
  background: #fff;
  color: #081a3e;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.file-btn:hover {
  background: #f7f7f7;
  border-color: #c9ced9;
}

/* Filename "input-like" box */
.file-name {
  grid-area: name;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d6dae3;
  color: #081a3e;
  font-size: 0.95rem;

  /* Critical: keeps layout stable on mobile */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Submit button */
.upload-card button {
  background: #081a3e;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 8px;
  transition: background 0.2s ease;
}

.upload-card button:hover {
  background: #0b265e;
}

/* Notes */
.upload-notes {
  list-style: none;
  padding: 0;
  margin: 10px auto 0;
  width: min(900px, 100%);
}

.upload-notes li {
  background-image: url('images/v_icon.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 0 3px;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 0.95rem;
  text-align: left;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .upload-card {
    padding: 18px 16px 22px;
    width: 94%;
  }

  .file-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "btn";
    gap: 10px;
  }

  .file-btn {
    width: 100%;
  }
}


/* ===============================
    ENd UPLOAD STATEMENT PAGE
   =============================== */


 /* ===============================
   LEGAL CONTENT LAYOUT
   =============================== */

.legal_content {
  width: 90%;
  max-width: 900px;   /* comfortable reading width */
  margin: 0 auto 40px;
  padding: 20px 45px;
  background: #fff;
  border-radius: 12px;
  line-height: 1.65;
  font-size: 1rem;
  overflow: visible;
}

body.legal-page main.page-content {
  height: auto;
  overflow: visible;
}


.legal_content h2 { the same

  margin:0 auto;
  margin-bottom: 10px;
  color: #081a3e;
}

.legal_content p,
.legal_content li {
  margin-bottom: 12px;
}

.legal_content ol {
  padding-left: 20px;
  margin-bottom: 18px;
}

.legal_content ul {
  padding-left: 18px;
  margin-top: 6px;
}


/* Accept Terms Box */


.legal-accept-form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  padding: 16px 24px;
  background-color: #f6f6f6;
  border-top: 2px solid #ccc;
  font-size: 14px;
  padding: 16px 24px;
 }

 /*.legal-accept-left{
  flex: 1 1 auto;
  min-width: 240px;
}*/

.legal-accept-actions{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

.btn-accept:disabled,
.btn-decline:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-accept:not(:disabled),
.btn-decline:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.legal-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-checkbox input {
  transform: scale(1.2);
}

/* Buttons container */
.legal-accept-actions {
  display: flex;
  gap: 10px;
}

/* Shared button style */
.legal-accept-actions button {
   min-width: 96px;
  height: 36px;
  font-size: 14px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  border-radius: 6px;
}

/* Accept */

.accept-form-wrapper {
  margin-top: 60px;
  padding: 20px 30px;
  border-top: 2px solid #ddd;
  background-color: #f9f9f9;
}

.btn-accept {
  background-color: #2ecc71; /* bright green */
  color: #fff;
}

.btn-accept:hover {
  background-color: #27ae60;
}

/* Decline */
.btn-decline {
  background-color: #e74c3c; /* bright red */
  color: #fff;
}

.btn-decline:hover {
  background-color: #c0392b;
}

@media (max-width: 520px){
  .legal-accept-form{
    align-items: stretch;
  }
  .legal-accept-actions{
    width: 100%;
  }
  .legal-accept-actions button{
    flex: 1 1 0;
    min-width: 0;
  }
}

/****************************/
/*     Error <essage        */
/****************************/

/* Overlay */
.error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Modal box */
.error-modal {
  background: #fdecea;                 /* light red */
  border: 1px solid #f5c2c0;
  color: #7a1c1c;
  border-radius: 14px;
  padding: 22px 24px;
  width: min(90%, 420px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  text-align: center;
}

/* Message text */
.error-text {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 18px;
  font-weight: 500;
}

/* OK button */
.error-ok-btn {
  background: #d9534f;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.error-ok-btn:hover {
  background: #c9302c;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .error-modal {
    padding: 18px;
  }

  .error-text {
    font-size: 0.95rem;
  }

  .error-ok-btn {
    width: 100%;
  }
}



/* ==========================
   REGISTRATION SUCCESS PAGE
   ========================== */

.success-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.success-card {
  background: #ffffff;
  width: 90%;
  max-width: 600px;
  padding: 35px 40px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.success-card h2 {
  font-size: 1.9rem;
  color: #081a3e;
  margin-bottom: 10px;
}

.success-card h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 16px;
}

.success-card p {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #444;
  margin-bottom: 18px;
}

.success-img {
  width: 160px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

/* CTA button */
.success-btn {
  background: #16b34a;
  color: #fff;
  padding: 14px 22px;
  font-size: 1.05rem;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: background .2s ease;
  margin-top: 10px;
  width: 100%;
}

.success-btn:hover {
  background: #12953d;
}

/* 1. THE RESET: Kill ALL possible default icons */
    .custom-step-list, 
    .custom-step-list li, 
    .custom-step-list li::before, 
    .custom-step-list li::after {
        list-style: none !important;
        list-style-type: none !important;
        background-image: none !important; /* Kills background icons */
        content: none !important;          /* Kills pseudo-element icons */
        margin: 0;
        padding: 0;
    }

    /* 2. THE LAYOUT: Re-enable what we actually want */
    .custom-step-list {
        display: inline-block;
        text-align: left;
        margin: 20px auto;
    }

    .step-item {
        display: flex !important;           /* Re-establishes flex layout */
        align-items: center !important;
        margin-bottom: 12px !important;
        font-family: sans-serif;
    }

    /* 3. THE COLUMN: Fixed width icon zone */
    .icon-box {
        width: 35px; 
        display: flex;
        justify-content: center;
        flex-shrink: 0;
    }

    /* 4. OUR ICON: Only shows when we say so */
    .v-icon {
        display: none; 
        color: #1BA630;
        font-weight: bold;
        font-size: 1.2rem;
        /* We use content here specifically because we blocked it above */
        content: "✓" !important; 
    }

    .is-completed .v-icon {
        display: block !important;
    }

    /* 5. TEXT STYLING */
    .text-box {
        color: #000;
        font-weight: normal;
    }

    .is-active-text {
        color: #1BA630 !important;
    }
    .is-active-text strong {
        font-weight: bold;
    }

/***********************************************/
/*           Instrument_c page                 */
/***********************************************/

/* Instrument charts page: make the charts area scroll inside the middle column */
.instrument-main {
  min-height: 0;      /* critical for scrolling inside a fixed-height grid */
  overflow: hidden;   /* prevent the middle column itself from scrolling */
}

.instrument-main .charts-container {
  height: 100%;
  min-height: 0;                 /* critical */
  overflow-y: auto;              /* scroll vertically */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;            /* avoids scrollbar overlaying charts */
  padding-bottom: 60px;
}


/* Short trades accumulated line graph: 3px short-color border */
#line_div_s {
  border: 4px solid #f9e79f;
  box-sizing: border-box;
}

#line_div_l {
  border: 4px solid #d7bde2;
  box-sizing: border-box;
}


/***********************************************/
/*               All Trades_c Page             */
/***********************************************/

 /* ===== Charts pages: 3-column desktop grid, 1-column mobile ===== */

.charts-layout {
  display: grid;
  grid-template-columns: 260px 1fr 360px;
  gap: 16px;

  /* Critical: columns scroll individually, not the whole page */
  height: calc(100vh - 160px); /* OPTION: adjust if your header/footer differ */
  min-height: 520px;
}

.charts-sidebar,
.charts-main,
.charts-summary {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make charts use full available width */
.charts-main .data_unit,
.charts-main .chart-box,
.charts-main .chart-pair,
.charts-main .chart-single {
  width: 100%;
}

/* Mobile */
@media (max-width: 980px) {
  .charts-layout {
    grid-template-columns: 1fr;
    height: auto; /* mobile can scroll naturally */
  }

  .charts-sidebar {
    display: none; /* replaced by drawer */
  }

  .instrument-drawer-toggle {
    display: inline-block;
    position: sticky;
    top: 0;
    z-index: 50;
  }
}



.instrument-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #ddd;
}

.instrument-drawer-body {
  padding: 12px 14px;
  overflow: auto;
}

body.drawer-open {
  overflow: hidden;
}

/* ===== Drawer default hidden ===== */
.instrument-drawer-toggle { display: none; }
.instrument-drawer-overlay { display: none; }
.instrument-drawer { display: none; }

/* When opened */
.instrument-drawer-overlay.open { 
  display: block; 
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.35);
}
.instrument-drawer-overlay.open .instrument-drawer {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(85vw, 320px);
  background: #fff;
  overflow-y: auto;
  padding: 12px;
}

/* ===== Mobile rules ===== */
@media (max-width: 980px) {
  .instrument-drawer-toggle { 
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 1500;
    margin: 8px 10px;
    padding: 10px 12px;
  }

  /* hide desktop sidebar menu */
  .instrument-sidebar { display: none; }
}


/* ===========================================
   INSTRUMENT TRADES PAGE LAYOUT
   =========================================== */

 .instrument-page,
  #trades_mode{
  overflow: hidden;
  height: 100%;
}

.instrument-page {
  width: 95vw;                  /* 95% of viewport */
  max-width: 1600px;            /* safety cap for ultra-wide screens */
  height: calc(100vh - 70px - 60px);
  margin: 15px auto 40px;
}

main.page-content:has(.instrument-page) {
  overflow: hidden;
  max-width: 95vw;
  margin: 0 auto;
}

/* Tabs are already styled by .account-tabs */

/* Desktop layout: sidebar + main + summary */
.instrument-layout {
  display: grid;
  height: calc(100vh - 70px - 60px - 60px);
  grid-template-columns: 110px minmax(0, 1fr) 280px;
  gap: 16px;
  padding: 16px 20px 20px;
}

/* all_trades_t: remove empty left column so table starts more left */
.all-trades-t-layout {
  grid-template-columns: minmax(0, 1fr) 280px; /* main + summary */
}

.all-trades-t-layout .instrument-sidebar {
  display: none;
}

/* Sidebar: instruments + order (desktop only) */
.instrument-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Remove default link styling in instrument sidebar */
.instrument-sidebar a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.instrument-sidebar a:visited {
  color: inherit;
}

.instrument-sidebar a:hover {
  text-decoration: none;
}


.sidebar-order {
  position: relative;
  margin-bottom: 8px;
}

.instrument-order-dropdown {
  position: absolute;
  top: 100%;              /* directly under button */
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  display: none;
  z-index: 300;
}

.sidebar-order:hover .instrument-order-dropdown {
  display: block;
}



/* Instrument button list */
.instrument-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* Firefox scrollbar support */
.instrument-list,
.trades-table-wrapper,
.instrument-summary {
  scrollbar-width: thin;                /* auto | thin | none */
  scrollbar-color: #c1c1c1 #f1f1f1;     /* thumb track */
}

/* Display Order button */
.sidebar-order .dropbtn {
  width: 100%;
  padding: 6px 8px;
  display: flex;
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
  height: 34px;              /* explicit height = visual stability */
  line-height: 1;
  background: #f5f7fb;          /* light surface */
  color: #081a3e;
  border: 1px solid #bfc6d1;    /* visible but soft */
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* Actual clickable button */
.instrument-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid #cfd5e3;

  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  background: #f4f6fb;
  color: #081a3e;

  cursor: pointer;
  transition: 
  background 0.18s ease,
  color 0.18s ease,
  border-color 0.18s ease,
  transform 0.1s ease;
}

/* Dropdown container */
.sidebar-order {
  position: relative;
}

.sidebar-order:hover .dropbtn {
  background: #eef2f8;
  border-color: #081a3e;
}

/* Hidden by default */
.sidebar-order .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;

  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);

  z-index: 100;
}

/* OPEN dropdown on hover */
.sidebar-order:hover .dropdown-content {
  display: block;
}

/* Dropdown items styling  */
.instrument-order-dropdown a {
  display: block;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #081a3e;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.instrument-order-dropdown a:hover {
  background: #eef2f8;
}

.instrument-order-dropdown a:last-child {
  border-bottom: none;
}

.instrument-order-dropdown a:hover {
  background: #e2dfe8;
  font-weight: 600;
}

.instrument-order-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 6px;
}


.sidebar-order .dropbtn::after {
  content: "▾";
  float: right;
  font-size: 0.75rem;
  opacity: 0.6;
}

.dropdown-content a.active, 
.drawer-order-list li a.active {
    background-color: #e2dfe8 !important; /* Your theme light purple/gray */
    font-weight: bold;
    color: #0b2f73 !important; /* Your theme dark blue */
}

/* Ensure the arrows display correctly */
.order-list-vertical a, .dropdown-content a, .drawer-order-list a {
    font-family: 'Assistant', sans-serif;
}

/* Remove any icons (like the green V) from the order menu */
.order-list-vertical li::before,
.order-list-vertical li a::before {
    content: none !important;
    display: none !important;
}

/* Ensure no background checkmark images are used */
.order-list-vertical li, 
.order-list-vertical li a {
    background-image: none !important;
    list-style-type: none !important;
    list-style: none !important;
	display: flex;
    align-items: center;       /* vertical centering */
    justify-content: center;   /* horizontal centering */
    white-space: nowrap;       /* PREVENT line breaks */
    text-align: center;
}

/* Apply the highlight style when 'active' class is present */
.order-list-vertical li.active {
    background-color: #E0E09F !important; /* The purple/gray highlight */
    border-left: 4px solid #0b2f73;      /* Dark blue accent line */
}

.order-list-vertical li.active a {
    color: #0b2f73 !important;
    font-weight: bold;
}

.menu-header{
font-weight: 700;
text-align: center;
border: 1px solid #899499;
border-radius: 10px;
background: #E5E4E2;
}

.order-list-vertical{
 margin-top:5px;
 background-color: #ffffff;
 }

.order-list-vertical li{
 border-bottom:2px solid #ccc;
 text-align: center;
}

/* --- Universal Order Menu Active State --- */

/* Targets the LI in All Trades and the Anchor in Instrument pages */
.order-list-vertical li.active, 
.instrument-order-dropdown a.active,
.drawer-order-list a.active {
    background-color: #E0E09F !important; /* Unified Background */
    color: #0b2f73 !important;           /* Unified Text Color */
    font-weight: bold !important;
}

/* Apply the 4px border-left to everything for a professional look */
.order-list-vertical li.active, 
.instrument-order-dropdown a.active {
    border-left: 4px solid #0b2f73 !important;
}

/* Adjust padding for the Instrument dropdown links to make room for the border */
.instrument-order-dropdown a {
    border-left: 4px solid transparent; /* Prevents text shifting when active */
    transition: all 0.2s ease;
}

/* Ensure no other global styles force a different background */
.order-list-vertical li:not(.active),
.instrument-order-dropdown a:not(.active) {
    background-color: #ffffff !important;
    *border-left: 4px solid transparent;
}



/* Hover */
.instrument-button:hover {
  background: #e6ebf6;
  border-color: #081a3e;
}

/* Active (current instrument) */
.instrument-button.active {
  background: #0b2f73;          /* slightly brighter navy */
  color: #ffffff;
  border-color: #0b2f73;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* CENTER: trades area */
.instrument-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Top bar: hidden trades + view toggle */
.trades-top-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Hidden trades banner */
.hidden-trades-banner {
  background: #fff7d9;
  border-left: 4px solid #f0b429;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hidden-trades-banner.is-hidden{
  display:none !important;
}

.btn-show-hidden {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #081a3e;
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
}

.btn-show-hidden:hover {
  background: #0b265e;
}

/* Compact/Full toggle (mobile primary, but safe on desktop) */
.trades-view-toggle {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  display: none;
}

.view-toggle-btn {
  flex: 1;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 0.85rem;
  padding: 6px 8px;
  cursor: pointer;
}

.view-toggle-btn.active {
  background: #081a3e;
  color: #fff;
  border-color: #081a3e;
}

/* Scrollable table wrapper – scrollbar starts under header */
.trades-table-wrapper {
  position: relative;
  max-height: calc(100vh - 260px); /* under header+tabs+meta */
  overflow-y: auto;
  /*overflow-x: auto; /* for full mode on mobile */
}

/* Thin scrollbar */
.trades-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.trades-table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.trades-table-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.trades-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a5a5a5;
}

/* Table itself (desktop base) */
.instrument-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  table-layout: fixed; /* CRITICAL */
}

.instrument-table thead {
  position: sticky;
  top: 0;
  background: #4f81bd;
  color: #000;
  z-index: 5;
}

.instrument-table th,
.instrument-table td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid #95b3d7;
  white-space: nowrap;
}

/* Allow wrapping only in time columns */
/* Date-time cell layout */
.dt-cell {
  line-height: 1.3;
  white-space: normal;     /* allow wrapping */
  min-width: 90px;        /* keeps column narrow */
}

/* Date (top line) */
.dt-date{
  display: block;
  font-weight: 900;
  font-size: 1rem;
}

/* Time (bottom line) */
.dt-time {
  display: block;
  font-size: 1rem;
  opacity: 0.75;
}

.instrument-table td,
.instrument-table th {
  padding: 4px 4px;      /* was ~4px */
  line-height: 1.2;
}



.instrument-table td,
.instrument-table th {
  padding: 4px 4px;   /* was 4–6px */
  line-height: 1.1;
}




.instrument-table thead th {
  padding: 8px 8px;
  line-height: 1.5;
  font-weight: 800;
}

.t1 {
  border-collapse: collapse;
}

.t1 th,
.t1 td {
  border: 1px solid #95b3d7;
}

/* Disable horizontal scroll for ALL TRADES page */
body.all-trades-page .trades-table-wrapper {
  overflow-x: hidden;
}

/* Narrow time columns */
.instrument-table th:nth-child(5),
.instrument-table td:nth-child(5),
.instrument-table th:nth-child(7),
.instrument-table td:nth-child(7) {
  width: 110px;
}

/* Prices narrower */
.instrument-table th:nth-child(6),
.instrument-table td:nth-child(6),
.instrument-table th:nth-child(8),
.instrument-table td:nth-child(8) {
  width: 90px;
}

/* Hide/Show fixed */
.instrument-table th:nth-child(10),
.instrument-table td:nth-child(10) {
  width: 90px;
}

/* Base data cells */
.instrument-table td:not(.hide-show-cell) {
  font-size: 0.95rem;
  font-weight: 600;
  color: #081a3e;
  text-align: center;
}


/* ===============================
            SUMMARY TABLE
   =============================== */

  /* Universal Sidebar Container */
.universal-summary-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between tables */
    padding: 10px;
}

/* Base Table Styling */
.summary-card {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    font-family: 'Assistant', sans-serif;
    font-size: 14px;
    border-left: 3px solid #ccc; /* 3px Left Outer Border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 5px;
}

.summary-card td {
    padding: 8px 12px;
    width: 50%;
    border-bottom: 1px solid #f0f0f0;
	border-right: 1px solid #C2CCCB;
}

/* Zebra Striping: 1st row white, 2nd row light gray */
/* nth-of-type(odd) here targets the 1st, 3rd, 5th rows AFTER the header */
.summary-card tr:nth-of-type(even) td {
    background-color: #f9f9f9; /* Light Gray */
}
.summary-card tr:nth-of-type(odd) td {
    background-color: #ffffff; /* White */
}

/* Header Styling */
.summary-card .header-row td {
    font-weight: bold;
    text-align: center;
    padding: 12px;
    border-bottom: 3px solid; /* Same line in header bottom border */
    background-color: inherit !important; /* Overrides striping for header */
}

/* Profit Factor Row (Single Column - Last Row) */
.summary-card td.pf-row {
    width: 100%;
    text-align: center;
    font-weight: bold;
}

/* --- COLOR THEMES --- */

/* 1. Filter Criteria: #D1E3E1 */
.theme-filter { border-left-color: #A8C7C3; }
.theme-filter .header-row td { background-color: #D1E3E1 !important; border-bottom-color: #A8C7C3; }

/* 2. All Trades: Light Gray */
.theme-all { border-left-color: #ADB5BD; }
.theme-all .header-row td { background-color: #E2E6EA !important; border-bottom-color: #ADB5BD; }

/* 3. Long Trades: Purple */
.theme-long { border-left-color: #AF7AC5; }
.theme-long .header-row td { background-color: #D7BDE2 !important; border-bottom-color: #AF7AC5; }

/* 4. Short Trades: Yellow */
.theme-short { border-left-color: #F4D03F; }
.theme-short .header-row td { background-color: #F9E79F !important; border-bottom-color: #F4D03F; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .universal-summary-sidebar {
        padding: 5px;
        gap: 15px;
    }
}



/* ===============================
   ALL TRADES — TABLE SPACING
   =============================== */

#closed_positions .t1 td,
#closed_positions .t1 th {
  padding: 8px 10px;       /* taller rows */
  line-height: 1.6;        /* match instrument_t */
  vertical-align: middle;
}

/* Force datetime wrapping into two lines */
#closed_positions .t1 td:nth-child(5),
#closed_positions .t1 td:nth-child(7) {
  white-space: normal;
  max-width: 120px;
  line-height: 1.4;
}

/* Hide/Show column narrower */
.instrument-table{
  font-size: 0.75rem;
  white-space: nowrap;
  font-weight: 500;
  text-transform: uppercase;
}

.hide-show-cell a{
  font-size: 0.8rem;
  white-space: nowrap;
  text-decoration: none;
  color: #081a3e;
  font-weight: 600;
  padding-left: 5px;
  text-transform: uppercase;
}

/* Long / Short rows */
. trade-row-long {
  background: #efe8fa; /* soft purple */
}

.trade-row-short {
  background: #fff7d9; /* soft amber */
}

/* RIGHT: summary panel (desktop only) */
/* Summary column: the ASIDE is just a container */
.instrument-summary{
  border-left: 1px solid #e0e0e0;
  padding-left: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;        /* IMPORTANT: scroll happens inside the inner div */
  padding-bottom: 0;       /* REMOVE bottom padding from the aside */
}

/* Summary content: THIS is the scroll container */
.instrument-summary-inner{
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  /* This is your “clear bottom” spacing */
  padding-bottom: 40px;    /* pick the value you want, same on both pages */
}


.instrument-summary-title {
  text-align: center;
  font-size: 1.5rem;
  color: #081a3e;
  margin-bottom: 8px;
}


/* Add breathing room at bottom of all scrollable columns */
.instrument-list{
  padding-bottom: 60px; /* visual end-of-content gap */
}

.trades-table-wrapper{
  padding-bottom: 10px; /* visual end-of-content gap */
}



/* Long & short summary (if you style them in instrument_long_short_summary_table.php)
   you can add classes .summary-table--long and .summary-table--short and color borders there. */
/* =============================== */
/*  FILTER OVERLAY — instrument_t  */
/* =============================== */

#filter_wrapper {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 70px - 60px);
    height: auto;
    background: #EEF2F8; /* platinum */
    padding: 24px 28px;
    overflow-y: auto;
}

/* FILTER PANEL (the actual form box) */
.filter-panel {
    width: 92%;
    max-width: 900px;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 20px auto;
    background: #F5F6F8;
    border-radius: 18px;
    padding: 25px 30px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

body.filter-open main.page-content {
  overflow: hidden;
}

.filter-panel p {
  margin-top: 0;
}

.filter-panel > p:last-of-type {
  margin-bottom: 0;
}

.filter-panel, .filter-help {
  margin-top: 28px;              /* distance from Apply Filter */
  padding-top: 20px;
  border-top: 1px solid #D6DAE3; /* subtle separation */
  font-size: 0.9rem;
  color: #444;
}

.time-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

.time-grid label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  gap: 4px;
}


/* "Close" button */
#close {
    float: right;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background: #BB8FCE;
    border: 3px solid #7D3C98;
    padding: 4px 10px;
    border-radius: 8px;
}




/* Section headings */
.filter-panel h2 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
}

/* Buttons */


.clear {
  align-self: flex-start;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F5F6F8;
  border: 1px dashed #D6DAE3;
  color: #666;
}

.clear:hover {
  background: #EDEFF3;
  color: #081A3E;
}


.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #081A3E;
    color: #fff;
    padding: 18px 24px;
    border-radius: 14px;
    margin-bottom: 22px;
}

.filter-header h2 {
    font-size: 1.4rem;
    margin: 0;
}

.filter-header button {
    background: #16B34A;
    border: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

.filter-header button:hover {
    background: #12953d;
}

.filter-reset-row {
    display: flex;
    justify-content: flex-end;
    margin:4px 10px 0 0;
}

.clear-filter-btn {
    background: #F5F6F8;            /* platinum surface */
    border: 1px solid #D6DAE3;
    color: #444;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.clear-filter-btn:hover {
    background: #EDEFF3;
    color: #081A3E;
    border-color: #BFC6D1;
}

.clear-filter-btn:active {
    transform: translateY(1px);
}

.filter-card {
  background: #FFFFFF;
  border: 1px solid #D6DAE3;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 10px 24px rgba(8,26,62,0.08);
}

.filter-card .datepicker {
  font-size: 0.85rem;        /* slightly smaller text */
  padding: 10px;        /* less horizontal padding */
  min-width: 0;              /* IMPORTANT for grid items */
}


.filter-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* ===============================
   FILTER ACTIONS
   =============================== */

.filter-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  padding: 0 6px;
}

/* CLEAR ALL — secondary action */
#clear_form {
  background: #F5F6F8;              /* light platinum */
  border: 1px solid #D6DAE3;
  color: #081A3E;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#clear_form:hover {
  background: #E1D7D6;
  border-color: #A88BEB;
  color: #081A3E;
}

/* APPLY FILTER — primary action */
#filter_button {
  background: #081A3E;                /* header navy */
  color: #fff;
  border-radius: 14px;
  padding: 14px 38px;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid #081A3E;
  box-shadow:
    0 6px 16px rgba(8,26,62,0.35),
    0 0 0 3px rgba(22,179,74,0.25);  /* subtle green confidence ring */
  transition: all 0.2s ease;
}

#filter_button:hover {
  background: #0B265E;
  box-shadow:
    0 8px 22px rgba(8,26,62,0.45),
    0 0 0 4px rgba(22,179,74,0.35);
}


/* ===============================
   FILTER GRID
   =============================== */

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 14px;
}

.filter-card {
  background: #FFFFFF;
  border: 1px solid #D6DAE3;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 10px 24px rgba(8,26,62,0.08);
}


.filter-card label {
  margin-bottom: 10px;
  display: block;
}

.filter-card p {
  margin-bottom: 14px;
}

.filter-card > *:not(:last-child) {
  margin-bottom: 10px;
}

.filter-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #081A3E;
  margin-bottom: 12px;
}

.filter-icon {
  width: 20px;
  height: 20px;
  stroke: #081A3E;
  stroke-width: 1.8;
  fill: none;
  opacity: 0.75;
  flex-shrink: 0;
}

.filter-grid {
  align-items: stretch;
}

.filter-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filter-card input[type="time"] {
  font-weight: 600;
  background: #fff;
}

.filter-card label {
  font-size: 0.9rem;
}

.filter-card label small {
  opacity: 0.6;
}

/* ===== No Results Page ===== */
.nores-wrap{
  min-height: calc(100vh - 160px); /* adjust if header/footer height differs */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px;
}

.nores-card{
  width: min(980px, 100%);
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 24px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
}

.nores-media{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
}

.nores-img{
  width: 100%;
  max-width: 430px;
  height: auto;
  display:block;
}

.nores-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.nores-title{
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.nores-text{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0,0,0,.72);
}

.nores-list{
  margin: 0 0 18px;
  padding-left: 18px;
  color: rgba(0,0,0,.70);
  line-height: 1.7;
}

.nores-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.nores-btn{
  appearance:none;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  color: #111;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, opacity .12s ease, background .12s ease;
}

.nores-btn:active{
  transform: translateY(1px);
}

.nores-primary{
  background: #111;
  color: #fff;
  border-color: #111;
}

.nores-primary:hover{ opacity: .92; }

.nores-ghost:hover{
  background: rgba(0,0,0,.04);
}

.nores-footnote{
  margin: 0;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

/* Responsive */
@media (max-width: 820px){
  .nores-card{
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .nores-title{
    font-size: 24px;
  }
}
/* ===============================
   LEGAL TERMS CHECKPOINT PAGE
   =============================== */

.terms-wrapper {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.terms-card {
  width: 100%;
  max-width: 780px;
  background: #ffffff;
  border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 10px 30px rgba(8,26,62,0.08);
}

/* Header */
.terms-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.terms-icon {
  font-size: 32px;
}

.terms-title {
  font-size: 1.9rem;
  color: #081a3e;
  margin: 0;
}

/* Text */
.terms-intro {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Alert box */
.terms-alert {
  background: #fff7d9;
  border-left: 4px solid #f0b429;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 24px;
}

/* List */
.terms-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #d6dae3;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #f8f9fb;
}

.terms-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.terms-status {
  width: 10px;
  height: 10px;
  background: #e74c3c; /* unsigned = red */
  border-radius: 50%;
}

.terms-doc-name {
  font-weight: 600;
  color: #081a3e;
}

/* Link */
.terms-doc-link {
  text-decoration: none;
  font-weight: 600;
  color: #081a3e;
  background: #e2dfe8;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.terms-doc-link:hover {
  background: #cfd6e4;
}

/* Footer note */
.terms-footer-note {
  margin-top: 26px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}

/* Container & Wrapper */
.terms-wrapper {
    padding: 20px;
    background-color: #f4f7f9; /* Subtle contrast from your white header */
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.terms-hub {
    width: 100%;
    max-width: 800px;
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Header Section */
.terms-header {
    text-align: center;
    margin-bottom: 40px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: #fdf2f2;
    color: #e74c3c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
}

/* Responsive Grid */
.terms-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 20px;
}

/* Card Styling */
.term-card {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    padding: 24px;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.term-card:hover {
    border-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.1);
}

.status-badge {
    background: #fff5f5;
    color: #c0392b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-body h3 {
    margin: 15px 0 5px;
    font-size: 18px;
    color: #1a1a1a;
}

.card-body p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* Button Styling */
.btn-primary-outline {
    display: block;
    text-align: center;
    padding: 12px;
    border: 2px solid #0056b3;
    color: #0056b3;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary-outline:hover {
    background: #0056b3;
    color: #fff;
}











/* ===========================================
   MOBILE & TABLET
   =========================================== */

.instrument-drawer-toggle {
  display: none; /* shown on small screens only */
  margin: 8px 20px 0;
  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #f4f4f4;
  cursor: pointer;
}

/* Hide the drawer toggle button while drawer is open */
body.drawer-open .instrument-drawer-toggle{
  display: none !important;
}

/* Drawer overlay (mobile only) */
.instrument-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 500;
}

.instrument-drawer-overlay.open {
  display: block;
}

.instrument-drawer {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #f9f9fb;
  padding: 16px 14px;
  box-shadow: 3px 0 12px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}

.drawer-title {
  font-size: 1rem;
  margin-bottom: 6px;
  color: #081a3e;
}

.drawer-section h4 {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.drawer-order-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}

.drawer-order-list li a {
  display: block;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  color: #081a3e;
  background: #e9edf4;
  margin-bottom: 4px;
}

.drawer-order-list li a:hover {
  background: #dfe6f3;
}

.drawer-instruments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.instrument-pill {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  color: #081a3e;
}

.instrument-pill.active {
  background: #081a3e;
  color: #fff;
  border-color: #081a3e;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 900px) {
  .instrument-layout {
    grid-template-columns: minmax(0, 1fr); /* no sidebar, summary below or hidden */
  }

  .instrument-sidebar {
    display: none; /* use drawer instead */
  }

  .instrument-summary {
    display: none; /* hidden on mobile as requested */
  }

  .instrument-drawer-toggle {
    display: inline-block;
  }
}




@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==== Tablet Tweaks ==== */
@media (max-width: 900px) {
/* Index page  */
  #features { width: 80%; }
  #per_right img { width: min(110%, 650px);
 }
 /*  Legal docs */

   .legal_content {
    width: 95%;
    padding: 20px 25px;
    max-width: 600px;   /* still readable */
	padding-bottom: 40px;
  }

  .legal_content h2 {
    font-size: 1.4rem;
  }

  .legal_content p,
  .legal_content li {
    font-size: 1rem;
    line-height: 1.55;
  }

  .legal_content ol,
  .legal_content ul {
    padding-left: 18px;
  }
}




@media (max-width: 550px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .plan-featured {
    transform: none;
  }
}

/* ==== Mobile (<=550px) ==== */
@media only screen and (max-width: 550px) {
  body {
    font-size: 17px;
    line-height: 1.55;
  }

  header nav {
    flex-direction: row;
    justify-content: space-between;
    height: 65px;
    padding: 0 10px;
  }

  .header_middle {
    position: static;
    transform: none;
    justify-content: center;
  }

  .header_middle img {
    width: 45px;
    height: 45px;
  }



  .header_left span { font-size: 0.8rem; }
  .button_1 { padding: 6px 10px; font-size: 0.85rem; }
  .button_2 { margin-left: 0; width: 100px; height: 32px; }


   .header_right .dropdown-content,
  .header_right .main-drop-content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;        /* IMPORTANT: no gap */
    margin-top: 6px;  /* visual gap without breaking hover */
    z-index: 9999;
    width: auto;          /* shrink to content */
    min-width: 130px;
    max-width: 80vw;      /* never exceed 80% of screen width */
  }

  /* Show when hovering icon wrapper OR the menu itself */
.main-drop:hover .main-drop-content,
/* If your HTML has the menu as a SIBLING (not inside .main-drop), this keeps it open too */
/* Hover “bridge” (prevents flicker) */
.main-drop-content::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:6px;
}

  .index_content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "hero"
      "hero_left"
      "hero_right"
      "features"
      "ts_left"
      "ts_right"
      "per_right"
      "per_left";
    row-gap: 0.5rem;
    padding: 0 10px;
  }

  [id*="right"], [id*="left"] {
    border-radius: 1rem;
  }

  #hero_right{
  margin:0;
  padding:0;
  }

  #features {
    width: 90%;
    margin-top: -8px;
    padding: 15px;
  }

  #hero h1 {
    font-size: 7vw;
    line-height: 1.2;
  }

  #hero h2 {
    font-size: 4.8vw;
    line-height: 1.3;
  }

  #ts_right h3, #per_left h3 {
    font-size: 5.5vw;
    line-height: 1.3;
  }

  #features p, #ts_right p, #per_left p, ul li {
  font-size: 3.4vw;      /* smaller, same for all */
  line-height: 1.5;
}

  .footer {
    font-size: 0.85rem;
    height: 65px;
  }

 .form-card {
    padding: 28px 20px;
  }

  .form-title {
    font-size: 1.4rem;
  }

  .ta-form input {
    font-size: 1.05rem;
  }

 .form-hint-box {
    font-size: 1.05rem;
    padding: 12px 15px;
  }

/*====  account menu ====*/

   .account-tabs ul {
    flex-direction: column;
  }
/*=== subscription page  ===*/

    .pricing-grid {
    grid-template-columns: 1fr;
  }

    /* Tabs become stacked */
  .account-tabs ul {
    flex-direction: column !important;
	margin:0 auto;
    width: 60%;
    padding: 0;
  }

  .account-tabs li {
    width: 100%;
    border-radius: 10px;
    margin-top: 6px;
    text-align: center;
  }

  .account-tabs li a {
    display: inline-block;
    padding-left: 10px;   /* extra space for logo */
  }

  /* Legal content */
  .legal_content {
    width: 100%;
    padding: 18px 15px;
    max-width: none;
  }

  .legal_content h2 {
    font-size: 1.25rem;
    margin-bottom: 10px;
  }

  .legal_content p,
  .legal_content li {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .legal_content ol,
  .legal_content ul {
    padding-left: 16px;
  }
/* End mobile media query*/

/*  Successful registration */
 /* 1. RESET & WRAPPER */
    .step-container {
        width: 100%;
        display: flex;
        justify-content: center; /* Centers the whole list block */
        padding: 10px;
        box-sizing: border-box;
    }

    .custom-step-list, 
    .custom-step-list li, 
    .custom-step-list li::before, 
    .custom-step-list li::after {
        list-style: none !important;
        background-image: none !important;
        content: none !important;
        margin: 0;
        padding: 0;
    }

    .custom-step-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Keeps text column aligned left */
        max-width: 400px;        /* Prevents list from getting too wide on desktop */
        width: 100%;
    }

    /* 2. ITEM LAYOUT */
    .step-item {
        display: flex !important;
        align-items: center !important;
        width: 100%;
        margin-bottom: 15px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.1rem; /* Base desktop size */
    }

    .icon-box {
        width: 40px; 
        display: flex;
        justify-content: center;
        flex-shrink: 0;
    }

    .v-icon {
        color: #62C740;
        font-weight: bold;
        font-size: 1.4rem;
        display: none;
    }

    .is-completed .v-icon {
        display: block !important;
    }

    .text-box {
        color: #333;
        line-height: 1.4;
    }

    .is-active-text { color: #62C740 !important; }
    .is-active-text strong { font-weight: bold; }

    /* 3. THE BUTTON */
    .btn-container {
        text-align: center;
        margin-top: 30px;
        width: 100%;
    }

    .success-btn {
        padding: 15px 40px;
        font-size: 1.1rem;
        cursor: pointer;
        /* Add your specific button styles here */
    }

    /* 4. RESPONSIVE MEDIA QUERIES */
    @media screen and (max-width: 480px) {
        .step-item {
            font-size: 0.95rem; /* Smaller text for mobile */
            margin-bottom: 12px;
        }
        
        .icon-box {
            width: 30px; /* Tighter column for small screens */
        }

        .v-icon {
            font-size: 1.1rem;
        }

        .success-btn {
            width: 90%; /* Button goes full-width on mobile */
            padding: 12px;
        }
    }
}

  /* Mobile compact vs full modes */
@media (max-width: 768px) {

   .trades-view-toggle{
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0 12px;
  }

  .instrument-table {
    font-size: 0.70rem;
  }

 

  /* ---------- COMPACT MODE (cards) ---------- */
  .trades-table-wrapper.compact-mode .instrument-table thead { display: none; }

  .trades-table-wrapper.compact-mode .instrument-table,
  .trades-table-wrapper.compact-mode .instrument-table tbody,
  .trades-table-wrapper.compact-mode .instrument-table tr,
  .trades-table-wrapper.compact-mode .instrument-table td {
    display: block;
    width: 100%;
  }

  .trades-table-wrapper.compact-mode .instrument-table tr {
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 6px 8px;
    background: #fff;
    overflow: hidden;
  }

  .trades-table-wrapper.compact-mode .instrument-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }

  /* ---------- FULL MODE (real table) ---------- */
  .trades-table-wrapper.full-mode {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .trades-table-wrapper.full-mode .instrument-table { 
    display: table;
    width: max-content;   /* allows horizontal scroll */
    min-width: 100%;      /* still fills the screen */
    table-layout: auto;   /* IMPORTANT: prevents weird “zoom / squeeze” */
  }

  .trades-table-wrapper.full-mode .instrument-table thead { display: table-header-group; }
  .trades-table-wrapper.full-mode .instrument-table tbody { display: table-row-group; }
  .trades-table-wrapper.full-mode .instrument-table tr { display: table-row; }
  .trades-table-wrapper.full-mode .instrument-table th,
  .trades-table-wrapper.full-mode .instrument-table td { display: table-cell; }

  /* In full mode only: remove the card labels */
  .trades-table-wrapper.full-mode .instrument-table td::before {
    content: none !important;
    display: none !important;
  }
}

/* MOBILE — full height panel */
@media(max-width: 768px) {
    #filter_wrapper {
        top: 60px;
        height: calc(100vh - 60px - 60px);
    }

    .filter-panel {
        width: 96%;
        margin-top: 10px;
        height: calc(100% - 20px);
    }
}

#filter_mode {
  display: none;
}

@media (max-width: 1024px) {
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .date-row {
    grid-template-columns: 1fr;
  }
}

/* terms  */

@media (max-width: 640px) {
  .terms-card {
    padding: 28px 22px;
  }

  .terms-title {
    font-size: 1.5rem;
  }

  .terms-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .terms-doc-link {
    align-self: flex-end;
  }
}

/* =========================================================
   DRAWER: HARD GUARANTEE hidden-by-default
   Put this at the VERY BOTTOM of layout.css
   ========================================================= */

/* Default: drawer does not exist visually */
.instrument-drawer-toggle { display: none !important; }

/* Hide overlay unless explicitly opened */
.instrument-drawer-overlay[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.instrument-drawer-overlay[aria-hidden="false"] {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Drawer panel only visible when overlay is open */
.instrument-drawer-overlay[aria-hidden="true"] .instrument-drawer {
  display: none !important;
}

.instrument-drawer-overlay[aria-hidden="false"] .instrument-drawer {
  display: block !important;
}

/* Desktop: ensure drawer is never shown */
@media (min-width: 981px) {
  .instrument-drawer-overlay,
  .instrument-drawer-toggle {
    display: none !important;
  }
}

/* Mobile: show hamburger button only */
@media (max-width: 980px) {
  .instrument-drawer-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 3000;
    margin: 8px 10px;
    padding: 10px 12px;
  }

  /* hide the desktop sidebar menu on mobile */
  .instrument-sidebar { display: none !important; }
}

/* =========================================================
   CHARTS CONTAINER + BOXES
   ========================================================= */
.charts-container{
  padding: 16px;
  display: grid;
  gap: 16px;
}

/* Single chart full width */
.chart-single{
  width: 100%;
  min-height: 340px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
}

/* Pair container: 2 charts in a row on desktop */
.chart-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* your “distinguish instantly” gap */
}

.chart-box{
  width: 100%;
  min-height: 340px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 980px){
  .chart-pair{
    grid-template-columns: 1fr; /* stacked on mobile */
  }
}

/* ===== Drawer: single source of truth ===== */
[hidden] { display: none !important; }

.instrument-drawer-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2000;
}

.instrument-drawer:not([hidden]) {
  position: fixed;
  top: 0;
  left: 0;
  width: min(85vw, 340px);
  height: 100vh;
  background: #fff;
  z-index: 2001;
  overflow-y: auto;
  box-shadow: 2px 0 18px rgba(0,0,0,0.25);
}

/* Desktop: drawer never exists */
.instrument-drawer-toggle { display: none; }

@media (max-width: 980px) {
  .instrument-drawer-toggle { display: inline-flex; }
  .instrument-sidebar { display: none; }
}

@media screen and (max-width: 550px) {
  .header_right .main-drop-content {
    left: auto !important;
    right: 0;
    top: 27px !important;
    height: auto !important;
  }
}