/* ===================================================
   L2U Tools Theme — Dark + Soft Pastel Light
   =================================================== */
@import url("input.css");

:root {
  --primary-color: #4e73df;
  --secondary-color: #7289da;
  --bt-color: #44454d; /* in dark theme */
  --btl-color: #adadad; /* in light theme */
  --transition-speed: 0.3s;
}

/* Search style */
/* For light theme */
#suggestions {
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0;
    margin-top: 2px;
    list-style: none;
}

#suggestions li {
    padding: 8px 12px;
    cursor: pointer;
}

#suggestions li:hover {
    background-color: #f0f0f0;
}

/* Dark theme for search */
body.dark-theme #suggestions {
    background: #1c1c1c;
    border: 1px solid #555;
    color: #eee;
}
body.dark-theme #suggestions li:hover {
    background-color: #333;
}


/* -------------------------------
   Dark Theme (Default)
--------------------------------*/
body.dark-theme {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
}

body.dark-theme a.link {
  color: rgb(0, 176, 216);
  font-weight: bold;
}

body.dark-theme a.link:hover {
  color: rgb(20, 251, 255);
  font-weight: bold;
}

body.dark-theme header,
body.dark-theme footer,
body.dark-theme section {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-speed) ease;
}

body.dark-theme .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

body.dark-theme .btn-primary {
  background: var(--primary-color);
  border: none;
}
body.dark-theme .btn-primary:hover {
  background: #3b5bd7;
}

body.dark-theme .bt {
  background: none;
  color: var(--btl-color);
  border: 1px solid var(--btl-color);
}
body.dark-theme .bt:hover,
body.dark-theme .bt.active {
  background: var(--bt-color);
  color: var(--btn-primary);
}

body.dark-theme .nav-link-custom {
  color: #ffffffcc;
}
body.dark-theme .nav-link-custom:hover {
  color: #fff;
}

/* ✅ Card Text & Icon Colors with Strong Override */

/* Base transition */
.card {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* 🌤️ Light Theme */
body.light-theme .card {
  color: #2c2c2c !important; /* dark gray text */
}

body.light-theme i {
  color: #4e73df !important; /* blue accent icons */
}

/* 🌑 Dark Theme */
body.dark-theme .card {
  color: #f1f1f1 !important; /* white text */
}

body.dark-theme i {
  color: #f1f1f1 !important; /* white icons */
}


/* -------------------------------
   Light Theme (Soft Pastel)
--------------------------------*/
body.light-theme {
  background: linear-gradient(135deg, #d6dde8, #bfc8da);
  color: #1e1e1e;
}

body.light-theme a.link {
  color: rgb(0, 84, 103);
  font-weight: bold;
}

body.light-theme a.link:hover {
  color: rgb(19, 0, 103);
  font-weight: bold;
}

body.light-theme header,
body.light-theme section {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme footer {
  background: rgba(255, 255, 255, 0.7);
}

body.light-theme .card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-speed) ease;
}

body.light-theme .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

body.light-theme .btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none;
}
body.light-theme .btn-primary:hover {
  filter: brightness(1.1);
}

body.light-theme .bt {
  background: none;
  border: 1px solid var(--btl-color);
  color: var(--btl-color);
  border-radius: 10px;
}
body.light-theme .bt:hover {
  background: var(--btl-color);
  color: #fff;
}
body.light-theme .bt.active {
      background: rgba(102, 179, 225, 0.3);
      border-color: #66b3ff;
      color: #66b3ff;
}

body.light-theme .nav-link-custom {
  color: #333;
}
body.light-theme .nav-link-custom:hover {
  color: #000;
}

/* -------------------------------
   Theme Toggle Button
--------------------------------*/
#themeToggle {
  border-radius: 50px;
  transition: background var(--transition-speed);
}

/*---------------------------------
    Sections background width
---------------------------------*/
body.light-theme .tool,
body.light-theme .color-card,
body.light-theme .preview-card {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.05);
  color: #212529;
}

body.dark-theme .tool,
body.dark-theme .color-card,
body.dark-theme .preview-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #f1f1f1;
}

body.dark-theme .page-desc {
  background: rgba(255, 255, 255, 0.01);
}

.tool, .wheel-card {
  border-radius: 1rem;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.w-950 {
  max-width: 950px;
}

.w-700 {
  max-width: 700px;
}

.w-600 {
  max-width: 600px;
}

/* To show short not or features unde page width p-w class */
.small-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  padding: 15px;
}

.result-box {
  position: relative;
  margin-top: 1rem;
  padding: 15px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  word-break: break-all;
}

/* Page description for SEO */
.page-desc {
  max-width: 750px;
  margin: 2rem auto 0;
  background: rgba(255, 255, 255, 0.4);
  padding: 2rem;
  border-radius: 1rem;
}

/* To set the page width for limited area show */
.p-w {
  max-width: 750px;
  margin: 2rem auto;
}

.p-w8 {
  max-width: 850px;
  margin: 2rem auto;
}

.title-column {
  border-radius: 0.8rem;
  padding: 15px 20px;
  text-align: center;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.08);
}

/*---------------------------------
    Dark Theme
---------------------------------*/
body.dark-theme .title-column {
  background: rgba(225, 225, 225, 0.08);
}

/*---------------------------------
    Text Desc & Muted text
---------------------------------*/

/* Light Theme */
body.light-theme .small-muted {
  font-size: .88rem;
  color: rgb(57, 57, 57);
}

body.light-theme .text-muted {
  color: rgb(57, 57, 57);
}

body.light-theme .footer-title {
  color: #565656;
}

body.light-theme footer a {
  color: #565656;
  text-decoration: none;
}

/* Dark theme */
body.dark-theme .small-muted {
  font-size: .88rem;
  color: rgba(255,255,255,0.65);
}

body.dark-theme .text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

.d-none-important {
  display: none !important;
}

body.dark-theme footer a {
  color: rgba(119, 146, 255, 0.9);
  text-decoration: none;
}

/*-------------------------
  Tab buttons
-------------------------*/
body.light-theme .tab-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}
body.light-theme .tab-btns button {
  border: none;
  background: rgba(125, 125, 125, 0.723);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
body.light-theme .tab-btns button.active {
  background: #0d6efd;
  color: #fff;
}

/* Dark theme  tab buttons */
body.dark-theme .tab-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}
body.dark-theme .tab-btns button {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
body.dark-theme .tab-btns button.active {
  background: #0d6efd;
  color: #fff;
}

body.dark-theme .accordion .accordion-item {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid #000000;
}

body.dark-theme .accordion .accordion-header .accordion-button {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/*---------------------
    Nav for tabs
---------------------*/
/* Light Theme */
body .nav-tabs .nav-link {
  color: rgba(80, 80, 80, 0.5);
  background-color: transparent;
}

/* Dark Theme */
body.dark-theme .nav-tabs .nav-link {
  color: rgba(255,255,255,0.5);
  background-color: transparent;
}

/* active tab */
body.dark-theme .nav-tabs .nav-link.active,
body.dark-theme .nav-tabs .nav-item.show .nav-link {
  color: #fff;
  background-color: #222;
  border-color: #666 #666 #222;
}

/* hover/focus for better affordance */
body.dark-theme .nav-tabs .nav-link:hover,
body.dark-theme .nav-tabs .nav-link:focus {
  color: #fff;
  background-color: rgba(255,255,255,0.04);
}

/* make sure borders transition smoothly if you want */
body.dark-theme .nav-tabs .nav-link,
body.dark-theme .nav-tabs .nav-link.active {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* Badge */
.grad-badge {
    padding: 8px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: rgba(225, 225, 225, 0.9);
}

.grad-badge.red { background: #e74c3ccc; }
.grad-badge.blue { background: #3498dbcc; }
.grad-badge.green { background: #2ecc71cc; }
.grad-badge.orange { background: #f39c12cc; }