/* 
 * ═══════════════════════════════════════════════
 *  OBSIDIAN — Apple Matte Black Glassmorphism
 *  Ultra-premium dark UI with micro-animations
 * ═══════════════════════════════════════════════
 */

/* ─── 0. LOADING SCREEN ─── */
#obsidian-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 28px !important;
  transition: opacity 0.6s ease, visibility 0.6s ease !important;
}

#obsidian-loader.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#obsidian-loader .loader-ring {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 2px solid #fff !important;
  border-radius: 50% !important;
  animation: obsidian-spin 0.8s linear infinite !important;
}

@keyframes obsidian-spin {
  to {
    transform: rotate(360deg);
  }
}

#obsidian-loader .loader-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ─── 1. GLOBAL BODY & BACKGROUND ─── */
body {
  background: #000 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Ambient glow — subtle moving gradient behind everything */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse 800px 600px at 20% 10%, rgba(100, 100, 120, 0.08), transparent),
    radial-gradient(ellipse 600px 500px at 80% 80%, rgba(60, 60, 80, 0.06), transparent) !important;
  animation: ambientShift 15s ease-in-out infinite alternate !important;
}

@keyframes ambientShift {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

/* ─── 2. TYPOGRAPHY ─── */
h1,
h2,
h3,
h4,
.card-title,
.sidebar-title,
.logo-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
  text-shadow: none !important;
}

p,
li,
td,
th,
span,
label,
small {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
}

/* ─── 3. HERO AREA — Remove old background ─── */
.hero-top {
  background: none !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  filter: none !important;
}

.hero-top .render {
  display: none !important;
}

.col-full {
  background: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo — center and make it float with a gentle pulse */
.logo-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 0 20px !important;
  height: auto !important;
}

.logo {
  float: none !important;
  margin: 0 auto !important;
  width: 280px !important;
  filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.06)) !important;
  animation: logoFloat 4s ease-in-out infinite !important;
  transition: filter 0.5s ease !important;
}

.logo:hover {
  filter: drop-shadow(0 8px 30px rgba(255, 255, 255, 0.12)) brightness(1.1) !important;
}

@keyframes logoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* ─── 4. NAVIGATION (Frosted Glass Bar) ─── */
nav {
  background: rgba(18, 18, 18, 0.72) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding-top: 10px !important;
  /* Added more padding top to push items down */
  padding-bottom: 4px !important;
}

nav ul li a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  transition: color 0.25s ease, background 0.25s ease !important;
}

nav ul li a:hover,
nav ul li.active a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

/* Nav language dropdown */
nav ul li.language a {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

.flag-lang {
  filter: none !important;
}

/* More margin between language options */
nav ul li.language .dropdown-content a {
  margin-bottom: 6px !important;
}

nav ul li.language .dropdown-content a:last-child {
  margin-bottom: 0 !important;
}

/* Nav Dropdowns */
.dropdown-content {
  background: rgba(28, 28, 30, 0.88) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  padding: 4px !important;
}

.dropdown-content a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

.dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* ─── 5. MOBILE MENU TRIGGER ─── */
.sidenav-trigger {
  background: rgba(18, 18, 18, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ─── 6. GLASSMORPHISM CARDS ─── */
.card {
  background: rgba(26, 26, 28, 0.55) !important;
  backdrop-filter: blur(30px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
  animation: cardReveal 0.6s ease both !important;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger delays for each column */
.col-left .card:nth-child(1) {
  animation-delay: 0.1s !important;
}

.col-left .card:nth-child(2) {
  animation-delay: 0.2s !important;
}

.col-left .card:nth-child(3) {
  animation-delay: 0.3s !important;
}

.col-middle .card:nth-child(1) {
  animation-delay: 0.15s !important;
}

.col-middle .card:nth-child(2) {
  animation-delay: 0.25s !important;
}

.col-right .card:nth-child(1) {
  animation-delay: 0.2s !important;
}

.col-right .card:nth-child(2) {
  animation-delay: 0.3s !important;
}

.col-right .card:nth-child(3) {
  animation-delay: 0.4s !important;
}

.card-title {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 14px 16px !important;
}

.card-body {
  background: rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ─── 7. QUICK ACTION BUTTONS ─── */
.large-href {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-transform: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.large-href:before {
  background: none !important;
}

.large-href:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.large-href .icon {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Register button accent */
.quick-action-btn-register {
  background: rgba(10, 132, 255, 0.12) !important;
  border-color: rgba(10, 132, 255, 0.25) !important;
  color: rgba(10, 132, 255, 0.95) !important;
}

.quick-action-btn-register:hover {
  background: rgba(10, 132, 255, 0.2) !important;
  border-color: rgba(10, 132, 255, 0.4) !important;
}

.quick-action-btn-register .icon {
  color: rgba(10, 132, 255, 0.7) !important;
}

/* ─── 8. FORMS & INPUTS ─── */
.input-group input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.input-group input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.input-group input:focus {
  border-color: rgba(10, 132, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.input-group .icon {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Buttons */
.btn,
button[type="submit"],
input[type="submit"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.02) !important;
}

/* Signup / Register button (blue accent) */
li.signup .btn {
  background: rgba(10, 132, 255, 0.9) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

li.signup .btn:hover {
  background: rgba(10, 132, 255, 1) !important;
  box-shadow: 0 4px 20px rgba(10, 132, 255, 0.35) !important;
}

/* Forgot password bar */
.forgot-password {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 0 18px 18px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.forgot-password a {
  color: rgba(10, 132, 255, 0.85) !important;
}

/* ─── 9. LINKS ─── */
a {
  color: rgba(10, 132, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: #4da3ff !important;
  text-shadow: none !important;
}

/* ─── 10. SLIDER ─── */
.slider {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  border-radius: 18px !important;
}

.slider .slide .content {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)) !important;
}

.slider .slide .content h2 {
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
}

.slider .slide .content p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
}

.slider .slide .content h2::before,
.slider .slide .content p::before {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.slider button {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.25s ease !important;
}

.slider button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* ─── 11. RANKING TABLES ─── */
.ranking {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ranking thead {
  background: rgba(255, 255, 255, 0.04) !important;
}

.ranking th {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.ranking th,
.ranking td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ranking tbody tr {
  background: transparent !important;
  transition: background 0.2s ease !important;
}

.ranking tbody tr:nth-child(2n) {
  background: rgba(255, 255, 255, 0.02) !important;
}

.ranking tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.ranking tbody td:nth-child(1) {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
}

.ranking,
.ranking tbody td:nth-child(2),
.ranking tbody td:nth-child(3) {
  color: rgba(255, 255, 255, 0.75) !important;
}

.ranking tbody td:nth-child(4) {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Empire colors keep their vibe but softer */
.Jinno {
  color: #7B8AFF !important;
}

.Shinsoo {
  color: #FF6B6B !important;
}

.Chunjo {
  color: #FFD93D !important;
}

/* ─── 12. STATISTICS ─── */
.card.statistics ul li {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  transition: background 0.2s ease !important;
}

.card.statistics ul li:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ─── 13. NEWS ARTICLES ─── */
.author {
  color: rgba(10, 132, 255, 0.85) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
}

.date-posted {
  color: rgba(255, 255, 255, 0.35) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
}

.read-all-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.25s ease !important;
}

.read-all-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ─── 14. PAGINATION ─── */
.wp-pagenavi>a,
.wp-pagenavi>span {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.wp-pagenavi>a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.wp-pagenavi>a.current {
  background: rgba(10, 132, 255, 0.15) !important;
  color: #4da3ff !important;
  border-color: rgba(10, 132, 255, 0.4) !important;
  box-shadow: none !important;
}

/* ─── 15. DOWNLOAD PAGE ELEMENTS ─── */
.download-btn {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s ease !important;
}

.download-btn:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.1) !important;
}

.download-btn .icon {
  color: #000 !important;
}

.download-btn--alt {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.download-btn--alt:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Specs table */
.specs-table tr {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.specs-table .odd {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Account table */
.account-table tr {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.account-table tr:nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.account-table tr td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.account-table .glow {
  text-shadow: none !important;
  color: #4da3ff !important;
}

/* ─── 16. ALERTS ─── */
.alert {
  border-radius: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
}

.alert-success {
  background: rgba(48, 209, 88, 0.1) !important;
  color: #30d158 !important;
  border: 1px solid rgba(48, 209, 88, 0.2) !important;
}

.alert-danger {
  background: rgba(255, 69, 58, 0.1) !important;
  color: #ff453a !important;
  border: 1px solid rgba(255, 69, 58, 0.2) !important;
}

/* ─── 17. FOOTER ─── */
footer {
  background: rgba(12, 12, 12, 0.85) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

footer .left-text,
footer .right-text {
  color: rgba(255, 255, 255, 0.35) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

footer span {
  color: rgba(255, 255, 255, 0.5) !important;
}

footer .center-logo img {
  opacity: 0.25 !important;
  filter: grayscale(1) brightness(1.5) !important;
}

/* ─── 18. DONATION ─── */
li.new-donation {
  background-color: rgba(255, 69, 58, 0.1) !important;
}

li.new-donation a {
  text-shadow: none !important;
  color: #ff6961 !important;
}

/* ─── 19. SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* ─── 20. SELECTION ─── */
::selection {
  background: rgba(10, 132, 255, 0.3) !important;
  color: #fff !important;
}

/* ─── 21. DISCORD SLIDE ─── */
.discord-slide img {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ─── 22. TABLE LINKS/INPUTS ─── */
table a,
table input,
table button {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
}

/* ─── 23. SMOOTH HOVER GLOW on interactive cards ─── */
.card {
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ─── 24. MOBILE RESPONSIVE OVERRIDES ─── */
@media only screen and (max-width: 960px) {
  nav {
    background: rgba(0, 0, 0, 0.95) !important;
  }

  .logo-container {
    padding: 25px 0 10px !important;
  }

  .logo {
    width: 200px !important;
  }
}

/* ─── 25. FOOTER SPACING ─── */
.container {
  padding-bottom: 60px !important;
}

.container.delmenu {
  padding: 10px 0px 20px 0px !important;
}

footer {
  margin-top: 40px !important;
}

/* ─── 26. NEWS CARDS — Full Obsidian Styling ─── */
.card.news {
  background: rgba(26, 26, 28, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.card.news .card-body {
  background: transparent !important;
  padding: 0 !important;
}

.news-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 !important;
  transition: background 0.25s ease !important;
}

.news-card:last-child {
  border-bottom: none !important;
}

.news-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.news-card .news-body {
  padding: 16px 18px 10px !important;
}

.news-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 8px !important;
}

.news-content {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.news-content p {
  color: rgba(255, 255, 255, 0.55) !important;
}

.news-content img {
  border-radius: 10px !important;
  opacity: 0.9 !important;
}

.news-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 10px 18px !important;
}

.news-footer .date-posted {
  color: rgba(255, 255, 255, 0.3) !important;
}

.news-footer .read a {
  color: rgba(10, 132, 255, 0.85) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.news-footer .read a:hover {
  color: #4da3ff !important;
  background: rgba(10, 132, 255, 0.08) !important;
  border-radius: 6px !important;
}

/* News buttons (admin edit/delete, read more) */
.news-card .btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

.news-card .btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ─── 27. DROPDOWN WIDTH FIX ─── */
nav .dropdown {
  position: relative !important;
}

nav .dropdown-content {
  min-width: 140px !important;
  width: max-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 0 !important;
  /* Removed to fix mouseout gap */
}

nav .dropdown-content a {
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── 28. THEME TOGGLE BUTTON ─── */
#theme-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 16px !important;
  padding: 0 !important;
  margin-left: 4px !important;
}

#theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  transform: rotate(30deg) !important;
}

/* ═══════════════════════════════════════════════
 *  LIGHT MODE — When body.light-mode is active
 *  Restores a clean, bright UI without touching new.min.css
 * ═══════════════════════════════════════════════ */

body.light-mode {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}

body.light-mode::before {
  background:
    radial-gradient(ellipse 800px 600px at 30% 0%, rgba(0, 122, 255, 0.04), transparent),
    radial-gradient(ellipse 600px 500px at 80% 90%, rgba(88, 86, 214, 0.03), transparent) !important;
}

/* Nav Light */
body.light-mode nav {
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

body.light-mode nav ul li a {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode nav ul li a:hover,
body.light-mode nav ul li.active a {
  color: #1d1d1f !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode nav ul li.language a {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Dropdowns Light */
body.light-mode .dropdown-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .dropdown-content a {
  color: #1d1d1f !important;
}

body.light-mode .dropdown-content a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Cards Light */
body.light-mode .card {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .card-title {
  color: rgba(0, 0, 0, 0.55) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: transparent !important;
  background-image: none !important;
}

body.light-mode .card-body {
  background: transparent !important;
}

/* Typography Light */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode .card-title,
body.light-mode .sidebar-title {
  color: #1d1d1f !important;
}

/* Inputs Light */
body.light-mode .input-group input {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1d1d1f !important;
}

body.light-mode .input-group input::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
}

body.light-mode .input-group input:focus {
  border-color: #0A84FF !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15) !important;
  background: #fff !important;
}

body.light-mode .input-group .icon {
  color: rgba(0, 0, 0, 0.3) !important;
}

/* Buttons Light */
body.light-mode .btn,
body.light-mode button[type="submit"],
body.light-mode input[type="submit"] {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .btn:hover,
body.light-mode button[type="submit"]:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode li.signup .btn {
  background: #0A84FF !important;
  color: #fff !important;
  border: none !important;
}

/* Large href buttons Light */
body.light-mode .large-href {
  background: rgba(0, 0, 0, 0.03) !important;
  background-image: none !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1d1d1f !important;
  text-shadow: none !important;
}

body.light-mode .large-href:before {
  background: none !important;
}

body.light-mode .large-href:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .large-href .icon {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Tables Light */
body.light-mode .ranking {
  background: transparent !important;
}

body.light-mode .ranking thead {
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .ranking th {
  color: rgba(0, 0, 0, 0.45) !important;
}

body.light-mode .ranking th,
body.light-mode .ranking td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .ranking tbody tr:nth-child(2n) {
  background: rgba(0, 0, 0, 0.015) !important;
}

body.light-mode .ranking tbody tr:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .ranking tbody td:nth-child(1) {
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.35) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .ranking,
body.light-mode .ranking tbody td:nth-child(2),
body.light-mode .ranking tbody td:nth-child(3) {
  color: rgba(0, 0, 0, 0.7) !important;
}

body.light-mode .ranking tbody td:nth-child(4) {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* Statistics Light */
body.light-mode .card.statistics ul li {
  background: rgba(0, 0, 0, 0.025) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* News Light */
body.light-mode .news-card {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .news-card:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

body.light-mode .news-title {
  color: #1d1d1f !important;
}

body.light-mode .news-content,
body.light-mode .news-content p {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode .news-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .date-posted,
body.light-mode .news-footer .date-posted {
  color: rgba(0, 0, 0, 0.35) !important;
}

/* Slider Light */
body.light-mode .slider {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .slider button {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1d1d1f !important;
}

/* Footer Light */
body.light-mode footer {
  background: rgba(255, 255, 255, 0.85) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-mode footer .left-text,
body.light-mode footer .right-text {
  color: rgba(0, 0, 0, 0.4) !important;
}

body.light-mode footer span {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode footer .center-logo img {
  filter: grayscale(1) brightness(0.5) !important;
}

/* Forgot password Light */
body.light-mode .forgot-password {
  background: rgba(0, 0, 0, 0.02) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Alerts Light */
body.light-mode .alert-success {
  background: rgba(48, 209, 88, 0.08) !important;
  color: #248a3d !important;
  border: 1px solid rgba(48, 209, 88, 0.15) !important;
}

body.light-mode .alert-danger {
  background: rgba(255, 59, 48, 0.08) !important;
  color: #d70015 !important;
  border: 1px solid rgba(255, 59, 48, 0.15) !important;
}

/* Toggle button Light mode appearance */
body.light-mode #theme-toggle {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode #theme-toggle:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #1d1d1f !important;
}

/* Scrollbar Light */
body.light-mode::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12) !important;
}

body.light-mode::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Selection Light */
body.light-mode ::selection {
  background: rgba(10, 132, 255, 0.2) !important;
  color: #1d1d1f !important;
}

/* Sidenav Light */
body.light-mode .sidenav-trigger {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Loader light — shows dark spinner */
body.light-mode #obsidian-loader {
  background: #f5f5f7 !important;
}

body.light-mode #obsidian-loader .loader-ring {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-top-color: #1d1d1f !important;
}

body.light-mode #obsidian-loader .loader-text {
  color: rgba(0, 0, 0, 0.3) !important;
}