/* ===== WAP TEXT LINK STYLE - ALL BUTTONS ===== */
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  color: #0000cc !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  padding: 0 3px !important;
  margin: 0 !important;
  display: inline !important;
  outline: none !important;
  line-height: normal !important;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  color: #cc0000 !important;
}
/* ===== END WAP STYLE ===== */


input[type="submit"],
input[type="button"],
input[type="reset"],
button:not(.keep-style) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: #0000cc !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  padding: 0 3px !important;
  font-size: 12px !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════
   TheWanaChat.com — Pure WAP Style CSS
   Grey background, blue links, no fancy UI
═══════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#cccccc !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  color: #000 !important;
}

.page-wrap {
  max-width: 480px;
  margin: 0 auto;
  background: #ebebeb !important;
  min-height: 100vh;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}

/* ── TOP BAR ── */
.top-bar {
  background: #2a2a2a !important;
  color: #aaa !important;
  padding: 2px 8px;
  font-size: 10px;
  text-align: right;
  font-style: italic;
}

/* ── TEAL DIVIDER ── */
.teal-bar       { background: #009999 !important; height: 3px; }
.teal-bar-thick { background: #009999 !important; height: 5px; }

/* ── LOGO ── */
.logo-wrap {
  background: #2a2a2a !important;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  gap: 4px;
}
.logo-the  { height:36px; width:auto; max-width:20%; object-fit:contain; filter:invert(1) brightness(10); flex-shrink:0; }
.logo-wana { height:48px; width:auto; max-width:78%; object-fit:contain; filter:invert(1) brightness(10); flex-shrink:1; min-width:0; }
.logo-fallback { color:#009999 !important; font-size:20px; font-weight:bold; font-style:italic; padding:8px 0; }

/* ── STATUS BAR ── */
.status-bar {
  background: #2a2a2a;
  color: #ccc;
  font-size: 10px;
  padding: 2px 8px;
  display: flex;
  justify-content: space-between;
}
.status-bar a { color: #ffdd00 !important; text-decoration: none; }

/* ── MAIN CONTENT WRAP ── */
.wrap { padding: 4px 8px; }

/* ── WAP SECTION HEADER (grey bar with teal border) ── */
.teal-section {
  background: #cccccc !important;
  border-top: 2px solid #009999;
  border-bottom: 2px solid #009999;
  padding: 3px 8px;
  font-weight: bold;
  font-size: 12px;
  color: #000 !important;
  margin: 6px 0 2px;
}

/* ── ALL LINKS = WAP BLUE (default; custom nick colors/animations override naturally) ── */
a { color: #0000cc; text-decoration: underline; }
a:visited { color: #551a8b !important; }
a:active  { color: #cc0000 !important; }

/* ── LINK ROW = centered plain link ── */
.link-row {
  text-align: center;
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.8;
}
.link-row a { color: #0000cc !important; text-decoration: underline; }





/* ── WELCOME ── */
.wap-welcome {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 0 2px;
  color: #000 !important;
}

/* ── SMALL STATS ── */
.wap-stats {
  text-align: center;
  font-size: 11px;
  color: #444 !important;
  padding: 2px 0;
}
.wap-stats a { color: #0000cc !important; }

/* ── BADGES ── */
.badge        { font-size:10px; font-weight:bold; padding:1px 3px; color:#fff !important; margin:0 1px; }
.badge-admin  { background:#c62828 !important; }
.badge-mod    { background:#2e7d32 !important; }
.badge-super  { background:#6a1b9a !important; }
.badge-vip    { background:#e65100 !important; }
.badge-reunion{ background:#009999 !important; }

/* ── NOTIFICATION BADGE ── */
.notif-badge {
  background: #cc0000;
  color: #fff !important;
  border-radius: 8px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: bold;
  margin-left: 2px;
}

/* ── FORM ELEMENTS ── */
input, select, textarea {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #888;
}
.inp {
  border: 1px solid #888;
  padding: 3px 5px;
  font-size: 12px;
  background: #fff !important;
  color: #000 !important;
  width: 100%;
}

/* ── SUBMIT = plain WAP link-style button ── */
.btn, input[type="submit"], input[type="button"], button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: #0000cc !important;
  font-size: 12px;
  padding: 0 4px;
  text-decoration: underline;
  cursor: pointer;
  font-family: Arial, sans-serif;
  cursor: pointer;
  font-family: Arial, sans-serif;
  text-decoration: none;
}

/* ── TABLE ── */
.tbl { width:100%; border-collapse:collapse; font-size:12px; background:#fff !important; }
.tbl td, .tbl th { border:1px solid #aaa; padding:3px 5px; color:#000 !important; }
.tbl th { background:#cccccc !important; font-weight:bold; }

/* ── MESSAGE BOXES ── */
.ok   { color:#006600 !important; font-size:12px; text-align:center; padding:2px 0; }
.err  { color:#cc0000 !important; font-size:12px; text-align:center; padding:2px 0; }
.info { color:#555    !important; font-size:11px; text-align:center; padding:2px 0; }
.sub  { font-weight:bold; font-size:13px; padding:3px 0; text-align:center; color:#000 !important; }

/* ── CARD = plain white box with thin border ── */
.card {
  background: #ffffff !important;
  border: 1px solid #cccccc;
  border-left: 3px solid #009999;
  padding: 4px 6px;
  margin: 3px 0;
  font-size: 12px;
}

/* ── ONLINE DOT ── */
.online-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: #00aa00;
  border-radius: 50%;
  margin: 0 2px;
  vertical-align: middle;
}

/* ── HORIZONTAL RULE ── */
hr { border: none; border-top: 1px solid #aaa; margin: 5px 0; }

/* ── NAV BAR ── */
.nav-bar {
  background: #009999 !important;
  padding: 4px;
  text-align: center;
}
.nav-bar a {
  color: #000 !important;
  font-weight: bold;
  font-size: 12px;
  background: #ebebeb !important;
  padding: 2px 8px;
  margin: 0 2px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #888;
}

/* ── FOOTER ── */
.site-footer {
  background: #2a2a2a !important;
  color: #888 !important;
  text-align: center;
  font-size: 10px;
  padding: 4px;
}

/* ── GIF/ANIMATED NICK STYLES ── */
@keyframes gif-rainbow { 0%{color:#f00}14%{color:#ff7700}28%{color:#ff0}42%{color:#0f0}57%{color:#00f}71%{color:#8b00ff}100%{color:#f00} }
@keyframes gif-fire    { 0%{color:#ff4500}50%{color:#ff8c00}100%{color:#ff4500} }
@keyframes gif-neon    { 0%{color:#00ffff}50%{color:#ff00ff}100%{color:#00ffff} }
@keyframes gif-glow    { 0%{color:#ffd700}50%{color:#fff}100%{color:#ffd700} }
@keyframes gif-ice     { 0%{color:#aff}50%{color:#7df}100%{color:#aff} }
@keyframes gif-wave    { 0%{color:#009}50%{color:#00f}100%{color:#009} }
@keyframes gif-pulse   { 0%{color:#f0f}50%{color:#909}100%{color:#f0f} }
@keyframes gif-glitter { 0%{color:#ffd700}25%{color:#fff}50%{color:#ffd700}75%{color:#ffa500}100%{color:#ffd700} }
@keyframes gif-sparkle { 0%{color:#fff}20%{color:#ffd700}40%{color:#fff}60%{color:#c0c0c0}80%{color:#fff}100%{color:#ffd700} }
@keyframes gif-diamond { 0%{color:#e0ffff}33%{color:#fff}66%{color:#b0e0e6}100%{color:#e0ffff} }
@keyframes gif-galaxy  { 0%{color:#8a2be2}25%{color:#ff69b4}50%{color:#4169e1}75%{color:#9400d3}100%{color:#8a2be2} }
@keyframes gif-sunset  { 0%{color:#ff4500}33%{color:#ff69b4}66%{color:#ffa500}100%{color:#ff4500} }

.gif-rainbow { animation: gif-rainbow 1.5s linear infinite; font-weight:bold; }
.gif-fire    { animation: gif-fire    1s ease-in-out infinite; font-weight:bold; }
.gif-neon    { animation: gif-neon    1.2s ease-in-out infinite; font-weight:bold; }
.gif-glow    { animation: gif-glow    1s ease-in-out infinite; font-weight:bold; }
.gif-ice     { animation: gif-ice     1.5s ease-in-out infinite; font-weight:bold; }
.gif-wave    { animation: gif-wave    2s ease-in-out infinite; font-weight:bold; }
.gif-pulse   { animation: gif-pulse   1s ease-in-out infinite; font-weight:bold; }
.gif-glitter { animation: gif-glitter 0.8s ease-in-out infinite; font-weight:bold; }
.gif-sparkle { animation: gif-sparkle 0.6s ease-in-out infinite; font-weight:bold; }
.gif-diamond { animation: gif-diamond 1.3s ease-in-out infinite; font-weight:bold; }
.gif-galaxy  { animation: gif-galaxy  2s ease-in-out infinite; font-weight:bold; }
.gif-sunset  { animation: gif-sunset  1.5s ease-in-out infinite; font-weight:bold; }
.vip-gold    { color:#ffd700 !important; font-weight:bold; text-shadow:0 0 4px #ffa500; }
.vip-diamond { color:#b9f2ff !important; font-weight:bold; text-shadow:0 0 4px #00bfff; }

/* ── DARK MODE OVERRIDE — force WAP light always ── */
@media (prefers-color-scheme: dark) {
  body, html, .page-wrap, .wrap, input, select, textarea, .card, .tbl, .tbl td {
    background: #ebebeb !important;
    color: #000 !important;
  }
  a { color: #0000cc !important; }
}

/* ═══════════════════════════════════════════
   🌙 DARK MODE
   Activated by class="dark-mode" on <body>
   (set server-side from a cookie — no flash)
   ═══════════════════════════════════════════ */
body.dark-mode { background:#000 !important; color:#e0e0e0 !important; }
body.dark-mode .page-wrap { background:#121212 !important; border-color:#2a2a2a; }
body.dark-mode .top-bar { background:#000 !important; color:#777 !important; }
body.dark-mode .teal-bar, body.dark-mode .teal-bar-thick { background:#00bcbc !important; }
body.dark-mode .logo-wrap { background:#000 !important; }
body.dark-mode .status-bar { background:#000 !important; color:#999 !important; }
body.dark-mode .status-bar a { color:#ffdd00 !important; }
body.dark-mode .teal-section { background:#1c1c1c !important; color:#e0e0e0 !important; border-color:#00bcbc !important; }
body.dark-mode a { color:#5b9bd5 !important; }
body.dark-mode a:visited { color:#9d7bc7 !important; }
body.dark-mode a:active { color:#ff6b6b !important; }
body.dark-mode .link-row a { color:#5b9bd5 !important; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
  background:#1e1e1e !important; color:#e0e0e0 !important; border-color:#3a3a3a !important;
}
body.dark-mode .inp { background:#1e1e1e !important; color:#e0e0e0 !important; }
body.dark-mode .btn, body.dark-mode input[type="submit"],
body.dark-mode input[type="button"], body.dark-mode button { color:#5b9bd5 !important; }
body.dark-mode .tbl { background:#1a1a1a !important; }
body.dark-mode .tbl td, body.dark-mode .tbl th { border-color:#333 !important; color:#e0e0e0 !important; }
body.dark-mode .tbl th { background:#1c1c1c !important; }
body.dark-mode .ok   { color:#4ade80 !important; }
body.dark-mode .err  { color:#ff6b6b !important; }
body.dark-mode .info { color:#999 !important; }
body.dark-mode .sub  { color:#e0e0e0 !important; }
body.dark-mode .card {
  background:#181818 !important; border-color:#2a2a2a !important; border-left-color:#00bcbc !important;
}
body.dark-mode .site-footer { background:#000 !important; color:#666 !important; }
body.dark-mode .hint { color:#888 !important; }