/* ── BOTTOM NAV (mobile only) ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:#0a0a0a;border-top:1px solid rgba(255,255,255,0.1);padding:0}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;padding:6px 0;color:rgba(255,255,255,0.4);font-family:var(--font-display,'Barlow Condensed',sans-serif);font-size:9px;letter-spacing:.14em;text-transform:uppercase;transition:color .15s}
.bottom-nav a.active,.bottom-nav a:hover{color:#F5C800}
.bottom-nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:768px){.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);height:58px;align-items:center}body{padding-bottom:58px}}

/* ── MAIN NAV ── */
nav#main-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;
  padding:18px 48px;
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:transform .35s ease,opacity .35s ease;
}
@media(max-width:768px){
  nav#main-nav{padding:0 16px;height:60px;background:#0a0a0a}
}

/* Hamburger */
.ham-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:none;border:none;cursor:pointer;
  padding:8px;z-index:201;flex-shrink:0;
}
.ham-line{width:22px;height:2px;background:#fff;transition:transform .3s,opacity .3s;border-radius:2px}
.ham-btn.open .ham-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham-btn.open .ham-line:nth-child(2){opacity:0}
.ham-btn.open .ham-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile lang toggle (next to hamburger, hidden on desktop) */
.lang-toggle-mobile{
  display:none;
  background:none;border:none;color:rgba(255,255,255,0.85);cursor:pointer;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;margin-left:4px;
  flex-shrink:0;transition:color .2s;
}
.lang-toggle-mobile:hover{color:#F5C800}

/* Logo */
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo img{height:42px;width:auto;max-width:200px;object-fit:contain}

/* Desktop links — absolutely centered on the full nav width */
.nav-links{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:44px;list-style:none;align-items:center;
}
.nav-links a{
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:14px;
  color:rgba(255,255,255,0.82);text-decoration:none;
  letter-spacing:.12em;text-transform:uppercase;transition:color .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:#F5C800}

/* Right side */
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto}

/* Desktop user (avatar + name) */
.nav-user{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-username{
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.nav-avatar{
  width:36px;height:36px;border-radius:50%;
  background:#F5C800;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:14px;color:#000;
  overflow:hidden;flex-shrink:0;
}
.nav-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-avatar-wrap{position:relative;display:inline-flex}
.nav-avatar-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;pointer-events:none}

/* Login button (logged out state) */
.btn-login-nav{
  display:inline-flex;align-items:center;
  background:#F5C800;color:#0a0a0a;text-decoration:none;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:9px 22px;border:none;cursor:pointer;
  transition:background .2s;white-space:nowrap;flex-shrink:0;
}
.btn-login-nav:hover{background:#d4a900}

/* Desktop lang toggle */
.lang-toggle{
  background:none;border:1px solid rgba(255,255,255,0.5);color:#fff;cursor:pointer;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;
  transition:border-color .2s,color .2s;white-space:nowrap;flex-shrink:0;
}
.lang-toggle:hover{border-color:#F5C800;color:#F5C800}

/* ── DRAWER ── */
.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;width:300px;max-width:88vw;
  background:#0a0a0a;z-index:200;
  transform:translateX(-100%);transition:transform .3s ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.nav-drawer.open{transform:translateX(0)}
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:199;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.nav-overlay.open{opacity:1;pointer-events:all}

/* Drawer: user header */
.drawer-user{
  padding:28px 22px 22px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:flex-start;gap:16px;
}
.drawer-avatar-wrap{position:relative;flex-shrink:0}
.drawer-avatar{
  width:58px;height:58px;border-radius:50%;
  background:#F5C800;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:900;font-size:22px;color:#000;
  overflow:hidden;
}
.drawer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.drawer-avatar-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;pointer-events:none}
.drawer-user-info{flex:1;min-width:0}
.drawer-user-name{
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:18px;
  text-transform:uppercase;letter-spacing:.06em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.drawer-level-name{
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#F5C800;margin-top:3px;
}
.drawer-xp-bar-wrap{
  margin-top:10px;height:3px;
  background:rgba(255,255,255,0.12);border-radius:2px;overflow:hidden;position:relative;
}
.drawer-xp-bar{
  position:absolute;left:0;top:0;bottom:0;
  background:#F5C800;border-radius:2px;transition:width .6s ease;
}
.drawer-xp-text{
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-size:11px;
  letter-spacing:.04em;color:rgba(255,255,255,0.35);margin-top:5px;text-align:right;
}

/* Drawer: guest (not logged in) */
.drawer-guest{
  padding:28px 22px 22px;border-bottom:1px solid rgba(255,255,255,0.1);
}
.drawer-guest-text{font-size:13px;color:rgba(255,255,255,0.4);margin-bottom:14px}
.drawer-login-btn{
  display:block;text-align:center;
  background:#F5C800;color:#000;text-decoration:none;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;padding:12px 20px;
  transition:background .2s;
}
.drawer-login-btn:hover{background:#d4a900}

/* Drawer: nav links */
.drawer-links{flex:1;padding:10px 0}
.drawer-links a{
  display:flex;align-items:center;gap:16px;
  padding:17px 22px;text-decoration:none;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);transition:color .2s;
}
.drawer-links a:hover,.drawer-links a.active{color:#F5C800}
.d-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.d-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Drawer: footer */
.drawer-footer{
  padding:16px 22px;border-top:1px solid rgba(255,255,255,0.1);
  display:flex;flex-direction:column;gap:10px;
  margin-top:auto;flex-shrink:0;background:#0a0a0a;
}
.drawer-lang-btn{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.7);cursor:pointer;width:100%;padding:11px 16px;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;text-align:left;
  display:flex;align-items:center;gap:10px;transition:all .2s;
}
.drawer-lang-btn:hover{border-color:#F5C800;color:#F5C800}
.drawer-logout-btn{
  background:none;border:1px solid rgba(214,40,40,0.3);color:#ff7070;
  cursor:pointer;width:100%;padding:11px 16px;
  font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;text-align:left;
  display:flex;align-items:center;gap:10px;transition:all .2s;
}
.drawer-logout-btn:hover{border-color:#D62828;color:#D62828;background:rgba(214,40,40,0.06)}

/* ── RESPONSIVE ── */
@media(min-width:769px){
  .ham-btn{display:none!important}
  .lang-toggle-mobile{display:none!important}
  .nav-drawer{display:none!important}
  .nav-overlay{display:none!important}
  .nav-logo{margin-left:0}
}
@media(max-width:768px){
  .nav-drawer{bottom:58px}
  .nav-links{display:none!important}
  .nav-right{display:none!important}
  .lang-toggle-mobile{display:flex!important}
  /* Logo pushed to the right */
  .nav-logo{margin-left:auto}
}

/* ── DARK MODE: fix var(--white) used as TEXT on dark backgrounds ──
   --white is remapped to #111111 for card BGs, but all these elements
   sit on dark sections (hero photos, nav, dark-bg panels) so they must
   stay near-white in both modes. */
html[data-theme="dark"] .page-hero-title,
html[data-theme="dark"] .page-hero-label{color:#FAFAFA}
html[data-theme="dark"] .hero-title{color:#FAFAFA}
html[data-theme="dark"] .hero::after{background:#080808}
html[data-theme="dark"] .events-header .section-title{color:#FAFAFA}
html[data-theme="dark"] .day-name{color:#FAFAFA}
html[data-theme="dark"] .day-card:nth-child(3){border-color:rgba(255,255,255,0.25)}
html[data-theme="dark"] .profile-name{color:#FAFAFA}
html[data-theme="dark"] .admin-card-title{color:#FAFAFA}

/* Community / light sections: hardcoded dark text needs to be lightened */
html[data-theme="dark"] .community-text p{color:#aaa}
html[data-theme="dark"] .section-title{color:#EDEDE8}

/* Index: day-tag on red bg + sidebar tab */
html[data-theme="dark"] .day-tag{color:#FAFAFA}
html[data-theme="dark"] .become-member-tab{color:#FAFAFA}

/* Trainings/events filter buttons border */
html[data-theme="dark"] .filter-btn{border-color:#333;color:#888}
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-btn:hover{border-color:var(--yellow);color:var(--yellow)}

/* ── DARK MODE ── */
html[data-theme="dark"]{--bg:#080808;--white:#111111;color-scheme:dark}
html[data-theme="dark"] body{background:#080808;color:#EDEDE8}

/* Cards (trainings + events) */
html[data-theme="dark"] .card{background:#111111;border-color:#2a2a2a}
html[data-theme="dark"] .card.enrolled{border-color:#3d3d3d}
html[data-theme="dark"] .card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.4)}
html[data-theme="dark"] .card-badge{background:#242424}
html[data-theme="dark"] .card-day-num{background:#111111;color:#EDEDE8}
html[data-theme="dark"] .card-date-box,
html[data-theme="dark"] .card-time-box{border-color:#333}
html[data-theme="dark"] .card-date-box::before,
html[data-theme="dark"] .card-date-box::after{background:#F5C800}
html[data-theme="dark"] .card-time-box{color:#EDEDE8}
html[data-theme="dark"] .card-title{color:#EDEDE8}
html[data-theme="dark"] .card-desc{color:#aaa}
html[data-theme="dark"] .card-location-row{color:#888}
html[data-theme="dark"] .card-location-link{color:#888}
html[data-theme="dark"] .card-location-link:hover{color:#EDEDE8}
html[data-theme="dark"] .card-footer{border-color:#242424}
html[data-theme="dark"] .capacity-bar{background:#2a2a2a}
html[data-theme="dark"] .capacity-wrap:hover{background:#161616}
html[data-theme="dark"] .capacity-label{color:#666}

/* Type tabs */
html[data-theme="dark"] .type-tabs{border-color:#2a2a2a}
html[data-theme="dark"] .type-tab{color:#666}
html[data-theme="dark"] .type-tab:hover{color:#EDEDE8;border-bottom-color:#555}
html[data-theme="dark"] .type-tab.active{color:var(--yellow);border-bottom-color:var(--yellow)}

/* Search bar */
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .search-date{background:#111111;border-color:#333;color:#EDEDE8}
html[data-theme="dark"] .search-input:focus,
html[data-theme="dark"] .search-date:focus{border-color:#555}
html[data-theme="dark"] .search-input::placeholder{color:#555}
html[data-theme="dark"] .search-clear{border-color:#333;color:#666}
html[data-theme="dark"] .search-clear:hover{border-color:#888;color:#EDEDE8}

/* Modals */
html[data-theme="dark"] .modal{background:#111111}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{border-color:#2a2a2a}
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-name{color:#EDEDE8}
html[data-theme="dark"] .modal-subtitle,
html[data-theme="dark"] .modal-date{color:#777}
html[data-theme="dark"] .modal-att-row{border-color:#242424}
html[data-theme="dark"] .modal-close{color:#666}
html[data-theme="dark"] .modal-close:hover{color:#EDEDE8}
html[data-theme="dark"] .modal-empty{color:#555}

/* Cancel policy + confirm popups */
html[data-theme="dark"] .cancel-policy-box,
html[data-theme="dark"] .confirm-box{background:#111111}
html[data-theme="dark"] .cancel-policy-title,
html[data-theme="dark"] .confirm-title{color:#EDEDE8}
html[data-theme="dark"] .cancel-policy-list li{color:#bbb}
html[data-theme="dark"] .cancel-policy-close{color:#666}
html[data-theme="dark"] .cancel-policy-close:hover{color:#EDEDE8}
html[data-theme="dark"] .confirm-sub{color:#aaa}
html[data-theme="dark"] .btn-confirm-no{border-color:#333;color:#888}
html[data-theme="dark"] .btn-confirm-no:hover{border-color:#aaa;color:#EDEDE8}
html[data-theme="dark"] .btn-cancel-info{border-color:#444;color:#777}
html[data-theme="dark"] .btn-cancel-info:hover{border-color:var(--yellow);color:var(--yellow)}
html[data-theme="dark"] .btn-unenroll{color:#777}
html[data-theme="dark"] .btn-unenroll:hover{color:var(--red)}
html[data-theme="dark"] .toast{color:#EDEDE8}

/* Profile page */
html[data-theme="dark"] .stat-card{background:#111111}
html[data-theme="dark"] .stat-value{color:#EDEDE8}
html[data-theme="dark"] .stat-label{color:#777}
html[data-theme="dark"] .section-title{color:#EDEDE8}
html[data-theme="dark"] .history-tabs{border-color:#2a2a2a}
html[data-theme="dark"] .htab{color:#666}
html[data-theme="dark"] .htab.active{color:var(--yellow)}
html[data-theme="dark"] .history-item{background:#111111}
html[data-theme="dark"] .history-title{color:#EDEDE8}
html[data-theme="dark"] .history-date{color:#666}
html[data-theme="dark"] .bio-display{color:#aaa}
html[data-theme="dark"] .interest-chip{background:rgba(255,255,255,0.07);color:#aaa}
html[data-theme="dark"] .interest-tag{border-color:#333;color:#777}
html[data-theme="dark"] .interest-tag:hover:not(.active){border-color:#555;color:#bbb}
html[data-theme="dark"] .interest-tag.active{border-color:#EDEDE8;background:#EDEDE8;color:#111}
html[data-theme="dark"] .bio-textarea{background:#090909;border-color:#333;color:#EDEDE8}
html[data-theme="dark"] .bio-textarea:focus{border-color:#555}
html[data-theme="dark"] .edit-form{background:#111111}
html[data-theme="dark"] .field label{color:#777}
html[data-theme="dark"] .field input{background:#090909;border-color:#333;color:#EDEDE8}
html[data-theme="dark"] .field input:focus{border-color:#555}
html[data-theme="dark"] .empty{color:#555}

/* Generic form inputs (catches admin + auth inputs too) */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{background:#111111;border-color:#333;color:#EDEDE8}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{border-color:#555;outline:none}

/* Index / landing page */
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .feat-grid .card{background:#111111;border-color:#2a2a2a}
html[data-theme="dark"] .stats-banner,
html[data-theme="dark"] .home-stats-row .stat-box{background:#111111}

/* Teambuilding page */
html[data-theme="dark"] .member-card,
html[data-theme="dark"] .coach-card{background:#111111;border-color:#2a2a2a}
html[data-theme="dark"] .member-name,
html[data-theme="dark"] .coach-name{color:#EDEDE8}
html[data-theme="dark"] .member-meta,
html[data-theme="dark"] .coach-meta{color:#888}
html[data-theme="dark"] .member-bio-modal .bio-box,
html[data-theme="dark"] .modal-bio-box{background:#111111}

/* Calendar page */
html[data-theme="dark"] .cal-grid,
html[data-theme="dark"] .calendar-grid{border-color:#2a2a2a}
html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .cal-day{background:#111111;border-color:#2a2a2a;color:#EDEDE8}
html[data-theme="dark"] .cal-cell:hover,
html[data-theme="dark"] .cal-day:hover{background:#161616}
html[data-theme="dark"] .cal-cell.other-month,
html[data-theme="dark"] .cal-day.other-month{background:#090909;color:#444}
html[data-theme="dark"] .cal-cell.today,
html[data-theme="dark"] .cal-day.today{border-color:var(--yellow)}
html[data-theme="dark"] .cal-header,
html[data-theme="dark"] .month-header{color:#EDEDE8}
html[data-theme="dark"] .cal-weekday{color:#666}
html[data-theme="dark"] .cal-event-dot,
html[data-theme="dark"] .day-event-pill{background:#333}

/* Teambuilding page */
html[data-theme="dark"] .coach-card{background:#111111}
html[data-theme="dark"] .coach-name{color:#EDEDE8}
html[data-theme="dark"] .coach-bio{color:#aaa}
html[data-theme="dark"] .coach-role-badge{background:#2a2a2a}
html[data-theme="dark"] .member-avatar-name{color:#888}
html[data-theme="dark"] .gallery-item{background:#0d0d0d}
html[data-theme="dark"] .gallery-placeholder{background:linear-gradient(135deg,#0d0d0d,#222);color:#555}

/* Calendar page */
html[data-theme="dark"] .cal-panel{background:#111111}
html[data-theme="dark"] .cal-nav{border-bottom-color:#333}
html[data-theme="dark"] .cal-nav-btn{border-color:#333;color:#EDEDE8}
html[data-theme="dark"] .cal-nav-btn:hover{border-color:#EDEDE8;background:#333;color:#EDEDE8}
html[data-theme="dark"] .cal-today-btn{border-color:#333;color:#EDEDE8}
html[data-theme="dark"] .cal-today-btn:hover{border-color:var(--yellow);color:var(--yellow)}
html[data-theme="dark"] .cal-month-label{color:#EDEDE8}
html[data-theme="dark"] .cal-weekdays{border-bottom-color:#2a2a2a}
html[data-theme="dark"] .cal-cell{border-right-color:#242424;border-bottom-color:#242424}
html[data-theme="dark"] .cal-cell:hover{background:#161616}
html[data-theme="dark"] .cal-cell.other-month{background:#090909}
html[data-theme="dark"] .cal-cell.other-month:hover{background:#090909}
html[data-theme="dark"] .cal-day-num{color:#EDEDE8}
html[data-theme="dark"] .cal-pill.training{background:rgba(245,200,0,0.15);color:var(--yellow)}
html[data-theme="dark"] .cal-pill.event{background:rgba(74,158,255,0.15);color:#4a9eff}
html[data-theme="dark"] .cal-pill.more{background:#2a2a2a;color:#888}
html[data-theme="dark"] .side-date{color:#FAFAFA}
html[data-theme="dark"] .side-empty{background:#111111}
html[data-theme="dark"] .side-empty-title{color:#EDEDE8}
html[data-theme="dark"] .side-card{background:#111111;border-bottom-color:#242424}
html[data-theme="dark"] .side-card-title{color:#EDEDE8}
html[data-theme="dark"] .side-card-meta-row{color:#aaa}
html[data-theme="dark"] .side-cap-bar{background:#2a2a2a}
html[data-theme="dark"] .btn-enroll.full{background:#2a2a2a;color:#666}
html[data-theme="dark"] .legend{border-top-color:#242424;color:#777}

/* Admin page */
html[data-theme="dark"] .admin-section,
html[data-theme="dark"] .admin-table-wrap{background:#111111;border-color:#2a2a2a}
html[data-theme="dark"] .admin-table th{background:#090909;color:#EDEDE8;border-color:#2a2a2a}
html[data-theme="dark"] .admin-table td{border-color:#242424;color:#EDEDE8}
html[data-theme="dark"] .admin-table tr:hover td{background:#161616}
html[data-theme="dark"] .stat-box{background:#111111}
html[data-theme="dark"] .form-section{background:#111111;border-color:#2a2a2a}
html[data-theme="dark"] .form-label{color:#888}