/* 行動裝置專用樣式 */

/* iPhone X 和較新系列的安全區域 */
.has-safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 行動裝置高度修正 */
.mobile-full-height {
  height: 100vh; /* 傳統瀏覽器 */
  height: calc(var(--vh, 1vh) * 100); /* 使用 JS 設定的自訂變數 */
}

/* 避免行動裝置上被下方控制欄遮擋 */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
  margin-bottom: env(safe-area-inset-bottom, 0);
}

/* 行動裝置上文字大小調整 */
@media (max-width: 640px) {
  h1, .h1 {
    font-size: 1.5rem !important;
  }
  h2, .h2 {
    font-size: 1.25rem !important;
  }
  p {
    font-size: 0.91rem !important;
  }
  
  /* 增大點擊區域 */
  button, .button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 調整表單元素 */
  input, select, textarea {
    font-size: 16px !important; /* 避免iOS自動縮放 */
  }
}

/* 方向鎖定提示 */
.orientation-lock {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  text-align: center;
  padding: 20px;
}

@media (max-width: 767px) and (orientation: landscape) {
  .orientation-portrait-only .orientation-lock {
    display: flex;
  }
}