/* =========================
   Bootstrap 5 theme mapped to your CSS variables
   Put this file AFTER bootstrap.css and AFTER your style.css
========================= */

/* 1) Map Bootstrap tokens to your design tokens */
:root{
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);

  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);

  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-light);

  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);

  --bs-tertiary-bg: var(--bg2);
  --bs-secondary-bg: var(--bg2);

  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: var(--radius-lg);

  --bs-focus-ring-color: var(--focus-ring);
}

/* 2) Global look — override Bootstrap's default font completely */
:root {
    --bs-body-font-family: var(--font-sans) !important;
}

body,
*:not(.fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"]) {
    font-family: var(--font-sans) !important;
}
body{
  background: var(--bg-radial-secondary), var(--bg-radial-primary), var(--bg-linear) !important;
}

/* 3) Containers (keep Bootstrap container behavior, but match your width) */
@media (min-width: 1200px){
  .container, .container-lg, .container-xl, .container-xxl{
    max-width: var(--container);
  }
}

/* 4) Buttons (Bootstrap classes, your styling) */
.btn{
  font-weight: 900;
  border-radius: 14px;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 32px rgba(0,0,0,.26);
}

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

/* primary button */
.btn-primary{
  background: var(--gradient-accent);
  border: none;
  color: #fff;
  height: 50px;
  box-shadow: 0 16px 28px var(--shadow-primary);
}
.btn-primary:hover{
  background: var(--gradient-accent);
  box-shadow: 0 22px 40px var(--shadow-primary);
}

/* outline primary button (glass style) */
.btn-outline-primary{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.btn-outline-primary:hover{
  background: var(--hover-bg);
  border-color: var(--hover-border);
  color: rgba(255,255,255,.96);
}

/* 5) Cards (Bootstrap .card, your glass panels) */
.card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--text);
}
.card:hover{
  border-color: var(--hover-border);
}

/* optional: make card header/footer match glass vibe */
.card-header, .card-footer{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
}

/* Navbar (Bootstrap classes, your sticky glass header vibe) */
.navbar{
  backdrop-filter: saturate(160%) blur(14px);
  background: rgba(11, 18, 32, .62) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar.scrolled{
  background: rgba(11, 18, 32, .78) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  border-bottom-color: rgba(255,255,255,.10);
}

/* ===== Hamburger toggler ===== */
.navbar-toggler {
  width: 42px;
  height: 42px;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(33,130,223,.25) !important;
}

.navbar-toggler:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Three lines icon */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28234%2C240%2C255%2C0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 22px !important;
  height: 22px !important;
}

/* Mobile menu - glass style */
.navbar-collapse.show,
.navbar-collapse.collapsing {
  background: rgba(11, 18, 32, .92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  margin-top: 10px;
  padding: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Mobile menu links */
.navbar-collapse .nav-link {
  padding: 10px 14px !important;
  border-radius: 12px;
  margin-bottom: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 800 !important;
  color: rgba(234,240,255,.88) !important;
  transition: var(--transition);
}

.navbar-collapse .nav-link:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: white !important;
}

/* Mobile menu bottom buttons */
.navbar-collapse .d-flex {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px !important;
}



/* Navbar links */
.navbar .nav-link{
  color: var(--text-muted);
  font-weight: 800;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: var(--text-light);
}

/* 7) Forms (match your input style) */
.form-control, .form-select{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(234, 240, 255, .92);
  border-radius: 14px;
}
.form-control::placeholder{
  color: var(--text-disabled);
  font-weight: 700;
}
.form-control:focus, .form-select:focus{
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
  background: rgba(0,0,0,.22);
  color: rgba(234, 240, 255, .92);
}

/* 8) Dropdown / Offcanvas / Modal glass vibe */
.dropdown-menu,
.offcanvas,
.modal-content{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  color: var(--text);
}

/* 9) Text helpers */
.text-muted{ color: var(--text-muted) !important; }
.border{ border-color: rgba(255,255,255,.12) !important; }

/* =============================================
   bs-theme.css — Light Theme Overrides
   ============================================= */
[data-theme="light"] .navbar {
  background: rgba(244, 246, 251, .85) !important;
  border-bottom-color: rgba(0, 0, 0, .08);
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(244, 246, 251, .96) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
}

[data-theme="light"] .navbar .navbar-toggler {
  color: rgba(13, 21, 32, .80) !important;
  border-color: rgba(0, 0, 0, .15) !important;
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .12);
  color: rgba(13, 21, 32, .90);
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: rgba(0, 0, 0, .04);
  color: rgba(13, 21, 32, .92);
}

[data-theme="light"] .form-control::placeholder {
  color: rgba(13, 21, 32, .38);
}

[data-theme="light"] .card {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(0, 0, 0, .10);
}

[data-theme="light"] .card-header,
[data-theme="light"] .card-footer {
  background: rgba(0, 0, 0, .04);
  border-color: rgba(0, 0, 0, .08);
}

[data-theme="light"] .btn-outline-primary {
  background: rgba(0, 0, 0, .04);
  border-color: rgba(0, 0, 0, .16);
  color: rgba(13, 21, 32, .82);
}
[data-theme="light"] .btn-outline-primary:hover {
  background: rgba(0, 0, 0, .07);
  color: rgba(13, 21, 32, .92);
}

[data-theme="light"] .border {
  border-color: rgba(0, 0, 0, .10) !important;
}

[data-theme="light"] .dropdown-menu,
[data-theme="light"] .offcanvas,
[data-theme="light"] .modal-content {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(0, 0, 0, .10);
}