/* 登入頁面樣式 */
html,
body {
  height: 100%;
}

.bg-login {
  background: url("/Images/Login/bg2.webp") no-repeat center center fixed;
  background-size: cover;
}

/* 讓登入卡片稍微半透明以提高可讀性 */
.bg-login .card {
  background-color: rgba(255, 255, 255, 0.92);
}

/* 登入卡片的樣式：圓角與較明顯的陰影 */
.bg-login .card.login-card {
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 確保卡片維持響應式且不會過寬 */
.bg-login .card.login-card {
  width: 100%;
  max-width: 760px;
  grid-template-columns: 1fr 1fr;
}

/* 使用 flex 置中容器，讓卡片在視窗中置中顯示 */
.bg-login .container.center-viewport,
.bg-login .container.d-flex.center-viewport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
}

/* 確保卡片本身置中且不會被拉伸 */
.bg-login .card.login-card {
  margin: auto;
}

.verify-title {
  font-size: 3.5rem;
  color: #054e96;
}

.verify-button {
  background-color: #054e96;
  color: white;
}

.verify-button:hover {
  border: 1px solid #054e96;
}

.verify-input {
  border-color: #054e96;
}

#refreshCaptchaBtn:hover {
  border: 1px solid #198754;
  background-color: unset;
  color: #198754;
}

#captchaImg {
  border: 1px solid #054e96;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* 卡片右側圖片 */
.bg-login .card.login-card .login-side-image {
  background-image: url("/Images/Login/bg1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 確保會填滿卡片高度 */
  min-height: 320px;
}

/* 在標題前顯示的小方塊（標示用） */
.label-block {
  display: inline-block;
  width: 9px;
  height: 29px;
  background-color: #054e96;
  vertical-align: middle;
  margin-bottom: 1rem;
}

.label-block.me-2 {
  margin-right: 0.5rem !important;
}

/* 將圖示放到輸入框內靠左位置的樣式 */
.input-with-icon {
  position: relative;
}

.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  top: 0.375rem;
  /* transform: translateY(-50%); */
  color: #6c757d;
  /* bootstrap muted 顏色 */
  pointer-events: none;
  font-size: 1.05rem;
}

.input-with-icon input[type="text"],
.input-with-icon input[type="password"],
.input-with-icon input[type="email"],
.input-with-icon input[type="tel"],
.input-with-icon input[type="number"] {
  padding-left: 2.25rem;
  /* 預留圖示空間 */
}

/* 讓 label 與輸入框在同一列顯示 */
.label-and-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.label-and-input .label-text {
  white-space: nowrap;
}

/* 確保 row 可拉伸，讓圖片欄位填滿卡片高度 */
.bg-login .card.login-card .row.align-items-stretch {
  align-items: stretch;
}

/* 小於中等螢幕時隱藏右側圖片（我們使用 Bootstrap 的 d-none d-md-block） */
@media (max-width: 767.98px) {
  .bg-login .card.login-card .login-side-image {
    display: none;
  }

  .bg-login .card.login-card {
    grid-template-columns: 1fr;
  }
}

/* 小調整：確保容器保持滿高度 */
.bg-login .container {
  min-height: 100vh;
}

/* 重新整理按鈕在小螢幕時的間距 */
#refreshCaptchaBtn {
  margin-top: 0.25rem;
}