/* Academy Light Mode Theme - aligned with TradersRoomFX brand */
:root{
  --tr-primary: var(--trfx-primary, #02A85A);
  --tr-primary-hover: var(--trfx-primary-hover, #03C06C);
  --tr-accent: var(--trfx-accent, #FFD166);
  --bg-main: var(--trfx-bg, #F6FFF9);
  --bg-panel: var(--trfx-panel, #FFFFFF);
  --bg-secondary: var(--opay-mint, #DFFEEB);
  --text-heading: var(--trfx-text, #052011);
  --text-body: var(--trfx-text-muted, #4B6B59);
  --text-muted: var(--trfx-text-muted, #4B6B59);
  --border-light: var(--trfx-border-light, #C6E6D5);
  --error: #C7364E;
  --soft-shadow: 0 8px 20px rgba(3, 20, 11, 0.08);
}

/* Page background & base typography */
body{
  background: var(--bg-main) !important;
  color: var(--text-body);
}

h1,h2,h3,h4{color:var(--text-heading)}

/* Cards / panels */
.academy-card{
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .academy-card {
    padding: 1rem;
  }
}

.academy-panel{
  background:var(--bg-secondary);
  border-radius:10px;
  padding:12px;
  border:1px solid var(--border-light);
}

/* Buttons */
.btn-primary{
  background:var(--tr-primary);
  color:#fff;
  padding:0.75rem 1.5rem;
  min-height:44px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  transition:all 0.2s ease;
  cursor:pointer;
  text-decoration:none;
  border:none;
  font-size:inherit;
  font-family:inherit;
  line-height:1.2;
  white-space:nowrap;
  user-select:none;
}

.btn-primary:hover{background:var(--tr-primary-hover)}

.btn-accent{
  background:var(--tr-accent);
  color:var(--text-heading);
  padding:0.75rem 1.5rem;
  min-height:44px;
  border-radius:8px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  cursor:pointer;
  text-decoration:none;
  border:none;
  font-size:inherit;
  font-family:inherit;
  line-height:1.2;
  white-space:nowrap;
  user-select:none;
}

.btn-cta{
  background:linear-gradient(135deg,var(--tr-primary),var(--tr-accent));
  color:var(--primary-button-text-color, #052011);
  padding:0.75rem 1.5rem;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 14px 0 rgba(10,126,96,0.2);
  position:relative;
  overflow:hidden;
  font-size:0.95rem;
  text-transform:none;
  letter-spacing:0.025em;
}

.btn-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn-cta:hover::before {
  left: 100%;
}

.btn-cta:hover{
  background:linear-gradient(135deg,var(--tr-accent),var(--tr-primary));
  color:var(--trfx-text, #052011);
  box-shadow:0 8px 25px rgba(3, 192, 108,0.35);
  transform:translateY(-2px);
}

.btn-cta:active{
  transform:translateY(0);
  box-shadow:0 4px 15px rgba(57,255,20,0.3);
}

.btn-cta:disabled{opacity:.65;cursor:not-allowed;}

.btn-secondary{
  border:2px solid var(--border-light);
  color:var(--text-heading);
  padding:0.75rem 1.5rem;
  min-height:44px;
  border-radius:10px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
  cursor:pointer;
  text-decoration:none;
  background:transparent;
  font-size:inherit;
  font-family:inherit;
  line-height:1.2;
  white-space:nowrap;
  user-select:none;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(10,126,96,0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-secondary:hover::after {
  width: 300px;
  height: 300px;
}

.btn-secondary:hover{
  border-color:var(--tr-primary);
  color:var(--tr-primary);
  background:rgba(10,126,96,0.05);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.btn-secondary:focus{outline:3px solid rgba(10,132,255,0.18);outline-offset:2px}

.btn-ghost{
  border:1px solid var(--border-light);
  background:var(--bg-panel);
  color:var(--text-heading);
  padding:0.75rem 1.5rem;
  min-height:44px;
  border-radius:8px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  cursor:pointer;
  text-decoration:none;
  font-size:inherit;
  font-family:inherit;
  line-height:1.2;
  white-space:nowrap;
  user-select:none;
}

.btn-ghost:hover{border-color:var(--tr-primary);color:var(--tr-primary)}
.btn-ghost:focus{outline:3px solid rgba(10,132,255,0.18);outline-offset:2px}

.hero-panel{
  background:linear-gradient(145deg,rgba(2,168,90,0.08),rgba(255,255,255,0.95));
  border:1px solid rgba(2,168,90,0.25);
  box-shadow:0 25px 60px rgba(2,168,90,0.15);
  overflow:hidden;
  position:relative;
}
.hero-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(25,224,161,0.35),transparent 50%);
  opacity:.8;
  pointer-events:none;
  z-index:0;
}
.hero-panel > *{position:relative;z-index:1;}

/* Live desk card styling */
.live-desk-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}

.course-card-unique{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(2,168,90,0.2);
  background:linear-gradient(180deg,rgba(2,168,90,0.06),var(--bg-panel) 70%);
  box-shadow:0 12px 32px rgba(2,168,90,0.08);
  transition:transform .3s ease,box-shadow .3s ease;
}
.course-card-unique::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 5% 20%,rgba(25,224,161,0.25),transparent 45%);
  opacity:0;
  transition:opacity .3s ease;
}
.course-card-unique:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(10,126,96,0.25);
}
.course-card-unique:hover::after{opacity:1;}
.course-card-unique .course-unique-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.course-card-unique .course-unique-header h4{margin:0;font-size:1.1rem;}
.course-card-unique .course-unique-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(2,168,90,0.1);color:var(--tr-primary);border:1px solid rgba(2,168,90,0.25);letter-spacing:0.08em;text-transform:uppercase;}
.course-card-unique .course-unique-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;gap:12px;}
.course-card-unique .course-price{font-size:1.15rem;font-weight:700;color:var(--text-heading);}
.course-card-unique .course-label{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);}
.course-card-unique .course-progress{height:4px;border-radius:999px;background:rgba(10,126,96,0.18);margin-top:12px;}
.course-card-unique .course-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,var(--tr-primary),var(--tr-accent));}

/* Markets & platform capsules */
.markets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
.instrument-card{
  border:1px solid rgba(2,168,90,0.18);
  border-radius:14px;
  padding:16px;
  background:linear-gradient(160deg,rgba(3,192,108,0.08),rgba(255,209,102,0.12));
  box-shadow:0 14px 30px rgba(3,20,11,0.08);
}
.instrument-card h4{
  font-size:1rem;
  font-weight:600;
  color:var(--text-heading);
  margin-bottom:6px;
}
.instrument-card p{
  font-size:0.85rem;
  color:var(--text-muted);
}
.platform-card{
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:18px;
  background:var(--bg-panel);
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:var(--soft-shadow);
}
.platform-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.platform-actions a{
  flex:1 1 120px;
  justify-content:center;
}

/* Account types table */
.account-types-section .account-table-wrapper{
  overflow-x:auto;
}
.account-types-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.account-types-table thead th{
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.08em;
  padding:14px;
  background:var(--bg-secondary);
  color:var(--text-muted);
  border-bottom:1px solid var(--border-light);
}
.account-types-table tbody td{
  padding:16px 14px;
  border-bottom:1px solid var(--border-light);
  text-align:center;
  font-size:0.95rem;
}
.account-types-table tbody td:first-child{
  text-align:left;
  font-weight:600;
  color:var(--text-heading);
}
.account-types-table .badge-tier{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  color:#fff;
}
.badge-standard{background:#1A1D26;}
.badge-ecn{background:#0A84FF;}
.badge-pro{background:#19E0A1;color:#042018;}
.badge-copy{background:#FFD700;color:#042018;}

/* Chips, badges, and soft pills */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-light);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-heading);background:var(--bg-secondary)}
.badge-soft{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:var(--bg-secondary);color:var(--text-heading);font-weight:600;font-size:12px}
.pill-muted{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:var(--bg-panel);border:1px solid var(--border-light);color:var(--text-muted);font-size:12px}

/* Accordions / FAQ */
.accordion{border:1px solid var(--border-light);border-radius:12px;background:var(--bg-panel)}
.accordion-item + .accordion-item{border-top:1px solid var(--border-light)}
.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:transparent;border:none;text-align:left;font-weight:600;color:var(--text-heading);cursor:pointer}
.accordion-body{padding:0 16px 14px 16px;color:var(--text-body);font-size:14px}
.accordion-header:focus{outline:3px solid rgba(10,132,255,0.18);outline-offset:2px}
.accordion-icon{font-size:14px;color:var(--text-muted)}

.badge-success{
  background:var(--tr-accent);color:#042018;padding:6px 8px;border-radius:999px;font-weight:600;font-size:12px;
}

/* Course card specific */
.course-card{padding:18px;display:flex;gap:16px;align-items:flex-start}
.course-thumb{width:140px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--border-light)}

.course-meta{flex:1}
.course-title{font-size:1.05rem;font-weight:700;color:var(--text-heading);margin-bottom:6px}
.course-desc{color:var(--text-muted);font-size:0.95rem;margin-bottom:8px}

/* Utilities */
.muted{color:var(--text-muted)}
.small{font-size:0.85rem}
.shadow-soft{box-shadow:var(--soft-shadow)}
.divider{height:1px;background:var(--border-light);width:100%}

/* Forms */
.form-control{border:2px solid var(--border-light);background:var(--bg-panel);padding:10px;border-radius:8px;transition:border-color 0.2s ease}
.form-control:focus{border-color:var(--tr-primary);outline:2px solid rgba(10,126,96,0.2);outline-offset:2px}
textarea.form-control{resize:vertical;min-height:120px}

/* Hero section styles */
.hero-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  background: rgba(10, 126, 96, 0.1);
  color: var(--tr-primary, #0A7E60);
  border: 1px solid rgba(10, 126, 96, 0.2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-search {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: var(--bg-panel);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  padding: 0.5rem;
  transition: border-color 0.2s ease;
}

.hero-search:focus-within {
  border-color: var(--tr-primary);
}

.hero-search .form-control {
  border: none;
  background: transparent;
  padding: 0.5rem 0;
}

.hero-search .form-control:focus {
  outline: none;
  box-shadow: none;
}

/* Copy Trading Styles */
.copy-step-card {
  background: linear-gradient(145deg, #041810, #0a2f1c);
  border: 1px solid rgba(11, 122, 84, 0.35);
  color: #e9fff3;
  box-shadow: 0 25px 50px -30px rgba(0, 0, 0, 0.7);
}

.copy-step-card h4 {
  color: inherit;
}

.copy-step-card p {
  color: rgba(233, 255, 243, 0.75);
}

.copy-step-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .copy-step-card {
  background: linear-gradient(145deg, #010905, #062015);
  border-color: rgba(11, 122, 84, 0.6);
  color: #f5fff9;
}

/* Video aspect ratio utility */
.aspect-16x9 {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.aspect-16x9 iframe,
.aspect-16x9 video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tr-primary);
}

/* Custom utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .text-shadow-md {
    text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  }
  
  .text-shadow-lg {
    text-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .text-shadow-none {
    text-shadow: none;
  }
  
  .absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Footer link accents */
footer a{color:var(--tr-primary)}

/* Responsive tweaks for course thumbnails */
@media (max-width:640px){
  .course-card{flex-direction:column}
  .course-thumb{width:100%;height:180px}
}

/* Accessibility: focus states */
.btn-primary:focus,.btn-accent:focus{outline:3px solid rgba(10,132,255,0.18);outline-offset:2px}

/* Mobile Navigation Improvements */
@media (max-width: 1023px) {
  .trfx-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }
  
  #mobile-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 40;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  #mobile-nav.hidden {
    display: none;
  }
  
  #mobile-nav.show {
    transform: translateY(0);
    display: block;
  }
  
  /* Position mobile nav on the right */
  #mobile-nav {
    width: 280px;
    max-width: 80vw;
    left: auto;
  }
  
  /* Mobile theme toggle buttons */
  #mobile-nav .theme-toggle button[data-theme-mode].active {
    background: var(--tr-primary);
    color: white !important;
    border-color: var(--tr-primary) !important;
  }
  
  /* Mobile accordion arrow rotation */
  .mobile-nav-group[data-mobile-accordion]:not([data-nav-parent]) .mobile-nav-toggle span:last-child {
    transition: transform 0.2s ease;
  }
  
  .mobile-nav-group[data-mobile-accordion]:not([data-nav-parent]) .mobile-nav-submenu:not(.hidden) ~ .mobile-nav-toggle span:last-child,
  .mobile-nav-group[data-mobile-accordion]:not([data-nav-parent]) .mobile-nav-toggle[aria-expanded="true"] span:last-child {
    transform: rotate(180deg);
  }
}

/* Ensure main content accounts for fixed header */
body {
  padding-top: 80px;
}

@media (min-width: 1024px) {
  body {
    padding-top: 0;
  }
}

/* Additional utilities referenced by views */
.text-1A1D26{color:var(--text-heading)}
.academy-table-row td{padding:10px 8px}
.academy-table-row:hover{background:linear-gradient(90deg, rgba(10,132,255,0.03), transparent)}

/* Fluid Typography */
.text-fluid-sm {
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.text-fluid {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.text-fluid-lg {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.text-fluid-xl {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.text-fluid-2xl {
  font-size: clamp(2rem, 5vw, 3rem);
}

.text-fluid-3xl {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

/* Responsive spacing */
.space-fluid {
  gap: clamp(1rem, 2.5vw, 2rem);
}

.p-fluid {
  padding: clamp(1rem, 2.5vw, 2rem);
}

.px-fluid {
  padding-left: clamp(1rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 2.5vw, 2rem);
}

.py-fluid {
  padding-top: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}

/* Toast notifications */
.cart-toast.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.border-light{border:1px solid var(--border-light)}

/* center utility for anchors rendered as buttons */
.text-center{text-align:center;display:inline-block;width:100%;padding:0.55rem 0}

.academy-small-muted{color:var(--text-muted);font-size:0.92rem}