/* ===== THEME VARIABLES ===== */
html[data-theme="light"] {
    --body-bg: #ffffff;
    --body-color: #11001C;
    --link-color: #11001C;
    --nav-bg: #ffffff;
    --nav-color: #11001C;
    --nav-link-color: #11001C;
    --nav-link-hover: #11001C;
}

html[data-theme="dark"] {
    --body-bg: #1A0129;
    --body-color: #C0C0C0;
    --link-color: #9ca3af;
    --nav-bg: #11001C;
    --nav-color: #C0C0C0;
    --nav-link-color: #C0C0C0;
    --nav-link-hover: #FFD700;
}

/* Light mode: navbar and footer — white bg, #ede9f5 accent border */
html[data-theme="light"] .darkerPurpleBkg {
    background-color: #ffffff !important;
    border-color: #ede9f5 !important;
    box-shadow: none !important;
}

/* Light mode: text inside navbar/footer */
html[data-theme="light"] .darkerPurpleBkg .textGrey,
html[data-theme="light"] .sticky-navbar .textGrey {
    color: #11001C;
}

/* Light mode: all other textGrey on page content */
html[data-theme="light"] .textGrey {
    color: #11001C;
}

html[data-theme="light"] .text-dim {
    color: #11001C;
}

html[data-theme="light"] .summary-bar {
    background-color: #ffffff !important;
    border-color: #ede9f5 !important;
}

/* Plan cards */
html[data-theme="light"] .plan-card {
    background-color: #ede9f5 !important;
    border-color: #11001C !important;
}
html[data-theme="light"] .plan-card:hover {
    border-color: #FFD700 !important;
}
html[data-theme="light"] .plan-card.featured {
    border-color: #FFD700 !important;
}
/* Trust / payments bar */
html[data-theme="light"] .trust-bar {
    background-color: #ffffff !important;
    border-color: #ede9f5 !important;
}
html[data-theme="light"] .stripe-powered-text {
    color: #11001C !important;
}
html[data-theme="light"] .trust-vsep {
    background-color: #11001C !important;
}

/* Predictions table (logged-in home) */
html[data-theme="light"] #predictionSection {
    border-color: #11001C !important;
}
html[data-theme="light"] #predictionSection .border-b {
    background-color: #ede9f5 !important;
    border-color: #11001C !important;
}
html[data-theme="light"] #predictionTable thead tr {
    background-color: #C0C0C0 !important;
}
html[data-theme="light"] #predictionTable thead th {
    color: #11001C !important;
}
html[data-theme="light"] #predictionTable tbody tr {
    background-color: #ede9f5;
    border-color: #C0C0C0 !important;
}
html[data-theme="light"] #predictionTable tbody tr.indigoBkg {
    background-color: #C0C0C0 !important;
}
html[data-theme="light"] #predictionTable tbody td:first-child {
    color: #11001C !important;
}
/* Grey text → dark purple */
html[data-theme="light"] #predictionTable .text-gray-400,
html[data-theme="light"] #predictionTable .text-gray-500,
html[data-theme="light"] #predictionTable .text-gray-300,
html[data-theme="light"] #predictionTable .text-gray-600,
html[data-theme="light"] #predictionSection #currentPriceDisplay {
    color: #11001C !important;
}
/* Green → blue */
html[data-theme="light"] #predictionTable .text-green-400 {
    color: #2563eb !important;
}
/* Pair buttons */
html[data-theme="light"] .pred-pair-btn {
    color: #11001C !important;
    border-color: #11001C !important;
}

/* Disclaimer / warning card */
html[data-theme="light"] .disclaimer {
    background-color: #C0C0C0 !important;
    border-color: #ca8a04 !important;
}
html[data-theme="light"] .disclaimer p,
html[data-theme="light"] .disclaimer strong {
    color: #11001C !important;
}

/* Promo offer title — both modes */
.promo-offer-title {
    color: #FFD700 !important;
    font-size: 1rem !important;
}

/* Promo offer box */
html[data-theme="light"] .promo-offer-box {
    background: #ede9f5 !important;
    border-color: #11001C !important;
}
html[data-theme="light"] .promo-offer-text,
html[data-theme="light"] .promo-offer-text strong {
    color: #11001C !important;
}
html[data-theme="light"] .promo-timer-unit {
    background-color: #C0C0C0 !important;
    border-color: #C0C0C0 !important;
}
html[data-theme="light"] .promo-timer-unit span,
html[data-theme="light"] .promo-timer-unit small {
    color: #11001C !important;
}

html[data-theme="light"] .plan-name {
    color: #11001C !important;
}
html[data-theme="light"] .plan-price {
    color: #11001C !important;
}
html[data-theme="light"] .plan-cta-outline,
html[data-theme="light"] #logout {
    color: #11001C !important;
    border-color: #11001C !important;
}
html[data-theme="light"] #logout:hover {
    border-color: transparent !important;
}
html[data-theme="light"] .plan-cta-outline:hover {
    background-color: #11001C !important;
    border-color: #11001C !important;
    color: #ffffff !important;
}
html[data-theme="light"] .plan-features li {
    color: #11001C;
}
html[data-theme="light"] .feat-locked-text,
html[data-theme="light"] .feat-lock,
html[data-theme="light"] .feat-locked-sub {
    color: #9ca3af !important;
}

html[data-theme="light"] .track-section {
    background-color: #ede9f5;
}

html[data-theme="light"] .track-table thead th {
    background-color: #C0C0C0 !important;
    color: #11001C !important;
}

html[data-theme="light"] .track-table tbody tr:hover {
    background-color: #C0C0C0 !important;
}

html[data-theme="light"] .track-table td {
    color: #11001C;
}

/* Override Bootstrap's text-white on the Pair column */
html[data-theme="light"] .track-table .text-white {
    color: #11001C !important;
}

html[data-theme="light"] .pair-btn,
html[data-theme="light"] .pred-pair-btn {
    background-color: #ffffff !important;
    border-color: #ede9f5;
    color: #11001C !important;
}

/* Active prediction pair button — yellow border, white bg */
html[data-theme="light"] .pred-pair-btn.bg-yellow-400 {
    background-color: #ffffff !important;
    border-color: #FFD700 !important;
    color: #11001C !important;
}

/* Light mode: nav-link hover */
html[data-theme="light"] .hoverWhite:hover {
    color: #11001C;
    opacity: 0.65;
}

/* Light mode: hamburger icon dark lines */
html[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(17,0,28,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Light mode: navbar toggler border */
html[data-theme="light"] .navbar-toggler {
    border-color: rgba(17, 0, 28, 0.3);
}

html {
  font-size: 14px;
}

a {
    color: var(--link-color, #9ca3af);
    text-decoration: none;
}

html[data-theme="dark"] a:not(.btn):not(.plan-cta):not(.cta-btn):hover {
    color: #FFD700;
    text-decoration: none;
}

html[data-theme="light"] a:not(.btn):not(.plan-cta):not(.cta-btn):hover {
    color: #C0C0C0;
    text-decoration: none;
}

.plan-cta-gold:hover,
.cta-btn:hover {
    color: #ecdff5 !important;
}

/* Navbar/footer links — always match nav color variable */
.darkerPurpleBkg a,
.sticky-navbar a {
    color: var(--nav-link-color, #C0C0C0);
}
.darkerPurpleBkg a:not(.btn):hover,
.sticky-navbar a:not(.btn):hover {
    color: var(--nav-link-hover, #FFD700);
}

/* Light mode: Register button hover and Login button background */
html[data-theme="light"] #register:hover {
    background-color: #ede9f5 !important;
    border-color: #ede9f5 !important;
}
html[data-theme="light"] #login {
    background-color: #ede9f5 !important;
}

/* Light mode: footer link hover */
html[data-theme="light"] .darkerPurpleBkg a:hover {
    color: #11001C;
    opacity: 0.65;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--body-bg, #1A0129);
  color: var(--body-color, #C0C0C0);
  transition: background-color 0.25s, color 0.25s;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
    background: none;
    border: 1px solid var(--nav-color, #C0C0C0);
    color: var(--nav-color, #C0C0C0);
    border-radius: 20px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    opacity: 0.7;
}
.theme-toggle:hover {
    opacity: 1;
}
.theme-toggle:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(192,192,192,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

#togglePassword,
#toggleNewPassword,
#toggleConfirmPassword {
    border: none;
    background: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}

    #togglePassword:focus,
    #togglePassword:active,
    #toggleNewPassword:focus,
    #toggleNewPassword:active,
    #toggleConfirmPassword:focus,
    #toggleConfirmPassword:active {
        outline: none;
        box-shadow: none;
        border: none;
    }


.narrow-container {
    max-width: 800px;
    margin: 0px auto;
}

.rounded-table {
    border-radius: 10px;
    overflow: hidden;
}

.darkerPurpleBkg {
    background-color: #11001C;
}

.darkPurpleBkg {
    background-color: #1A0129;    
}

.indigoBkg {
    background-color: #32195C;
}

.greyBkg {
    background-color: #C0C0C0;
}

.textLightPurple {
    color: #1A0129;
}

.textGrey,
#manage:hover {
    color: #C0C0C0;
}

.textGolden,
.textGolden:hover {
    color: #FFD700 !important;
}

html[data-theme="light"] #brand,
html[data-theme="light"] #brand:hover,
html[data-theme="light"] #manage,
html[data-theme="light"] #manage:hover {
    color: #11001C !important;
}

.hoverWhite:hover {
    color: azure;
}

.btn-outline-info {
    --bs-btn-color: #ecdff5;
    --bs-btn-border-color: #ecdff5;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ecdff5;
    --bs-btn-hover-border-color: #ecdff5;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ecdff5;
    --bs-btn-active-border-color: #ecdff5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ecdff5;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ecdff5;
    --bs-gradient: none;
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: #ecdff5 !important;
}
    .bg-info:hover {
        box-shadow: 0 0 10px #FFD700;
    }

.btn-outline-dark {
    --bs-btn-color: #ecdff5;
    --bs-btn-border-color: #ecdff5;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ecdff5;
    --bs-btn-hover-border-color: #ecdff5;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ecdff5;
    --bs-btn-active-border-color: #ecdff5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ecdff5;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ecdff5;
    --bs-gradient: none;
}

.sticky-navbar {
    position: sticky;
    top: 0;
    z-index: 1020; /* Higher than most elements */
    overflow: hidden;
}