/* ==========================================================================
   kiosk.css — 觸控螢幕首頁（1920×1080 Kiosk 最佳化）
   設計參考：Figma node 886:20256（Frame 3905）
   ========================================================================== */

/* ---------- 整頁容器 ---------- */
.kiosk-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 60px;
}

/* ---------- Header ---------- */
.kiosk-header {
  text-align: center;
  margin-bottom: 48px;
}

.kiosk-logo {
  width: 200px;
  height: auto;
  margin-bottom: 16px;
}

.kiosk-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--color-gray-800);
  letter-spacing: 4px;
  margin: 0 0 8px;
}

.kiosk-subtitle {
  font-size: 20px;
  color: var(--color-gray-500);
  margin: 0;
  letter-spacing: 1px;
}

/* ---------- 主體 ---------- */
.kiosk-body {
  width: 100%;
  max-width: 1200px;
}

/* ---------- 分類區塊 ---------- */
.kiosk-section {
  margin-bottom: 36px;
}

.kiosk-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-gray-700);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}

.kiosk-section-title i {
  font-size: 26px;
}

/* ---------- 卡片 Grid ---------- */
.kiosk-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ---------- 表單入口卡片（Figma: 365×138, r10, #7576BE 2px 60%） ---------- */
.kiosk-card {
  --card-accent: #7576be;
  display: flex;
  align-items: center;
  padding: 0 30px 30px 30px;
  background: #ffffff;
  border-radius: 10px;
  border: 2px solid rgba(117, 118, 190, 0.6);
  text-decoration: none;
  color: var(--color-gray-800);
  min-height: 138px;
  max-width: 500px;
  width: 100%;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.kiosk-card:hover {
  box-shadow: 0 4px 20px rgba(117, 118, 190, 0.25);
  transform: translateY(-2px);
  border-color: rgba(117, 118, 190, 0.9);
  color: var(--color-gray-800);
  text-decoration: none;
}

.kiosk-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(117, 118, 190, 0.15);
}

/* 卡片文字（左側） */
.kiosk-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 30px;
}

.kiosk-card-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  color: var(--color-gray-800);
}

.kiosk-card-hint {
  font-size: 15px;
  color: var(--color-gray-400);
  letter-spacing: 0.5px;
}

/* 圖示（右側，大圖示） */
.kiosk-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  padding-top: 30px;
}

.kiosk-card-icon-wrap i {
  font-size: 48px;
  color: var(--color-gray-800);
}

/* 箭頭隱藏（Figma 設計無箭頭） */
.kiosk-card-arrow {
  display: none;
}

/* ---------- 空狀態 ---------- */
.kiosk-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--color-gray-500);
}

.kiosk-empty-icon {
  font-size: 5rem;
  color: var(--color-gray-300);
  display: block;
  margin-bottom: 20px;
}

.kiosk-empty p {
  font-size: 20px;
  margin: 8px 0;
}

/* ---------- 觸控友善：所有互動元素最小尺寸 ---------- */
.kiosk-page button,
.kiosk-page a,
.kiosk-page input,
.kiosk-page select {
  min-height: 48px;
  min-width: 48px;
}

/* ---------- Logo（form.html 也會用到） ---------- */
.public-logo {
  width: 160px;
  height: auto;
}