/* ============================================================
   GK COMPUTER BUSINESS - TOP BANNER THEME TOGGLE
   File: 01.6_Top_Banner_Theme_Toggle.css
   Purpose: Styles for the theme label and dark/light toggle buttons
============================================================ */

/* ============================================================
   THEME TOGGLE WRAP
   (Outer pill border around the label and buttons)
============================================================ */
.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 6px;
  border: 1px solid rgba(160, 176, 200, 0.42);
  border-radius: 999px;
  background: rgba(8, 16, 28, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 10px rgba(0, 0, 0, 0.16);
  vertical-align: middle;
}

/* ============================================================
   THEME LABEL (.Theme\:)
   (Static "Theme:" text label beside the buttons)
============================================================ */
.Theme\: {
  color: rgba(160, 176, 200, 0.90);
  font-size: 0.80em;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-decoration: none;
  pointer-events: none;
  user-select: none;
  padding-right: 6px;
  border-right: 1px solid rgba(160, 176, 200, 0.35);
}

/* ============================================================
   THEME BUTTONS (shared base)
   (.Theme--dark, .Theme--light)
============================================================ */
.Theme--dark,
.Theme--light {
  padding: 4px 12px;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.Theme--dark {
  background: linear-gradient(180deg, rgba(56, 66, 82, 0.96), rgba(22, 28, 38, 0.96));
  color: rgb(236, 242, 248);
  border-color: rgba(138, 154, 172, 0.42);
}

.Theme--light {
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(214, 225, 238, 0.94));
  color: rgb(20, 35, 52);
  border-color: rgba(170, 190, 210, 0.52);
}

.Theme--dark:hover {
  background: linear-gradient(180deg, rgba(70, 80, 96, 0.98), rgba(33, 40, 52, 0.98));
  color: rgb(255, 255, 255);
  border-color: rgba(0, 212, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 212, 255, 0.12);
}

.Theme--light:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(228, 238, 248, 0.98));
  color: rgb(0, 56, 120);
  border-color: rgba(110, 150, 220, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(120, 170, 230, 0.18);
}

/* ============================================================
   ACTIVE STATE
   Applied via JS when the theme is currently selected
============================================================ */
.Theme--dark.active {
  background: linear-gradient(180deg, rgba(28, 34, 44, 1), rgba(12, 16, 24, 1));
  color: rgb(255, 255, 255);
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.16),
    0 0 12px rgba(0, 212, 255, 0.16);
}

.Theme--light.active {
  background: linear-gradient(180deg, rgba(223, 236, 255, 0.98), rgba(196, 219, 246, 0.98));
  color: rgb(0, 56, 120);
  border-color: rgba(0, 90, 200, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 90, 200, 0.14);
}