/* === 預設：紅底白字，閃紅光 === */
.btn-red {
  background-color: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
}
.btn-red:hover,
.btn-red:focus {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}
/* 紅色閃動 */
@keyframes pulseRed {
  0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.9); }
  50%  { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.9); }
}
.pulse-red { animation: pulseRed 1.5s infinite; }

/* === 暗色/護眼主題：白底紅字，閃白光 === */
html[data-theme='dark'] .btn-red,
body.theme-dark .btn-red {
  background-color: #fff !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
}
html[data-theme='dark'] .btn-red:hover,
body.theme-dark .btn-red:hover {
  background-color: #f8f9fa !important;
  color: #bb2d3b !important;
  border-color: #bb2d3b !important;
}
/* 白色閃動 */
html[data-theme='dark'] .pulse-red,
body.theme-dark .pulse-red {
  animation: pulseWhite 1.5s infinite !important;
}
@keyframes pulseWhite {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
  50%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
}
/* 桌機以上：hover 展開 dropdown；同時讓箭頭有轉動效果 */

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;           /* 與 Bootstrap 對齊 */
  }
  .navbar .dropdown .dropdown-toggle::after {
    transition: transform .2s ease;
  }
  .navbar .dropdown:hover .dropdown-toggle::after,
  .navbar .dropdown.show  .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

html[data-theme="light"] .navbar,
body.theme-light .navbar {
  background:
    radial-gradient(1000px 400px at 80% -20%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(800px 400px at -10% 0%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f9fb 80%) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="dark"] .navbar,
body.theme-dark .navbar {
  background:
    radial-gradient(1000px 400px at 80% -20%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 400px at -10% 0%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #0b1220, #0f172a 80%) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar {
  background-clip: padding-box !important;
  backdrop-filter: saturate(140%) blur(8px);
}
/* === 手機版導覽選單間距微調 === */
@media (max-width: 991.98px) {
  /* 展開後上下留白，避免控制項彼此貼太近 */
  .navbar .navbar-collapse {
    padding-top: 8px;
    padding-bottom: 12px;
  }

  /* 主選單項目保持一致節奏 */
  .navbar .navbar-nav {
    gap: 0;
  }

  .navbar .navbar-nav > .nav-item {
    margin-bottom: 6px;
  }

  .navbar .navbar-nav > .nav-item:last-child {
    margin-bottom: 0;
  }

  .navbar .nav-link,
  .navbar .dropdown-toggle {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.35;
  }

  /* 「正在受到攻擊？」與上下控制項拉開 */
  .navbar .btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  /* 主題選擇器：上下保留呼吸空間 */
  .navbar select,
  .navbar .form-select {
    min-height: 44px;
    margin-top: 8px;
    margin-bottom: 18px;
  }

  /* 登入／註冊等一般按鈕 */
  .navbar .btn:not(.btn-red) {
    min-height: 44px;
  }

  /* 若按鈕包在 flex 容器，統一間距 */
  .navbar .d-flex {
    row-gap: 10px;
    column-gap: 10px;
  }

  /* 避免手機版 dropdown 展開項目過度擁擠 */
  .navbar .dropdown-menu {
    margin-top: 4px;
    margin-bottom: 8px;
  }
}

/* 更窄手機再稍微收緊，避免選單拉得過長 */
@media (max-width: 420px) {
  .navbar .navbar-collapse {
    padding-top: 6px;
  }

  .navbar .navbar-nav > .nav-item {
    margin-bottom: 4px;
  }

  .navbar .btn-red {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }

  .navbar select,
  .navbar .form-select {
    margin-top: 6px;
    margin-bottom: 14px;
  }
}