/* ============================================================
   LuckyQR — common.css
   共用基礎樣式、CSS 變數
   ============================================================ */

/* ── CSS 變數 ─────────────────────────────────────────────── */
:root {
  /* Rotary 品牌色 */
  --color-rotary-blue:  #003F87;
  --color-rotary-teal:  #009DC4;
  --color-rotary-blue2: #0066B3;
  --color-rotary-dark:  #001F4F;

  /* 強調色 */
  --color-winner-red:   #CC0000;
  --color-winner-red2:  #FF0000;

  /* 中性色 */
  --color-white:        #FFFFFF;
  --color-bg:           #F5F5F5;
  --color-dark-gray:    #1A1A1A;
  --color-mid-gray:     #666666;
  --color-light-gray:   #E8E8E8;
  --color-deep-black:   #0A0A0A;

  /* 漸層 */
  --gradient-footer:  linear-gradient(90deg, #009DC4, #0066B3);
  --gradient-header:  linear-gradient(180deg, #003F87, #001F4F);

  /* 版面 */
  --screen-w:   1920px;
  --screen-h:   1080px;
  --header-h:   120px;
  --footer-h:   80px;
  --body-h:     880px;
  --side-pad:   60px;

  /* 字體 */
  --font-main: 'Microsoft JhengHei', '微軟正黑體', 'Noto Sans TC', 'Arial', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
  background: #000;
  color: var(--color-dark-gray);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Utility ─────────────────────────────────────────────── */
.hidden   { display: none !important; }
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Toaster / 提示訊息 ──────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--color-rotary-blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  animation: toastIn .3s ease;
}
.toast.error   { background: #c62828; }
.toast.success { background: #2e7d32; }
.toast.warning { background: #e65100; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}