/* ============================================================
   Customs Tiers — 台灣進口報關 3 種情境
   結構/樣式/行為分離（2026-06-26）。樣式由 _customs-tiers.blade.php
   的 inline style + <style> 區塊原樣抽出，外觀與線上完全一致；
   另補 a11y（:focus-visible / prefers-reduced-motion）與
   連結防幻影 a:hover 白底線（!important，沿用 A/B/C 教訓）。
   ============================================================ */

/* 區塊容器 */
.customs-tiers {
  padding: 56px 20px 48px;
  background: linear-gradient(180deg, #f6f8fc 0%, #eef2f7 100%);
}
.customs-tiers__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* 標題區 */
.customs-tiers__head {
  text-align: center;
  margin-bottom: 36px;
}
.customs-tiers__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(46, 134, 222, 0.08);
  border: 1px solid rgba(46, 134, 222, 0.25);
  border-radius: 999px;
  font-size: 13px;
  color: #2e86de;
  margin-bottom: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.customs-tiers__title {
  font-size: clamp(24px, 3.6vw, 34px);
  margin: 0 0 8px;
  font-weight: 800;
  color: #1a2238;
}
.customs-tiers__subtitle {
  color: #5a6478;
  margin: 0;
  font-size: 15px;
}

/* 卡片網格 */
.customs-tiers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* 情境卡 */
.tier-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.tier-card--personal { border-top: 4px solid #46b884; }
.tier-card--general  { border-top: 4px solid #2e86de; }
.tier-card--bulk     { border-top: 4px solid #ff9f43; }

.customs-tiers .tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* 卡片標題列 */
.tier-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tier-card__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
}
.tier-card__icon--personal { background: rgba(70, 184, 132, 0.12); color: #46b884; }
.tier-card__icon--general  { background: rgba(46, 134, 222, 0.12); color: #2e86de; }
.tier-card__icon--bulk     { background: rgba(255, 159, 67, 0.12); color: #ff9f43; }
.tier-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #1a2238;
}

/* 條件方塊 */
.tier-card__condition {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.tier-card__condition--personal { background: #f0fdf4; border: 1px dashed #86efac; color: #0d8a4a; }
.tier-card__condition--general  { background: #eff6ff; border: 1px dashed #93c5fd; color: #1e40af; }
.tier-card__condition--bulk     { background: #fffbeb; border: 1px dashed #fcd34d; color: #a16207; }

/* 權益清單 */
.tier-card__benefits {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #3d4759;
  line-height: 1.8;
}

/* 卡片底註（情境1 警語 / 情境2 報關須知，共用樣式） */
.tier-card__footer {
  font-size: 12px;
  color: #7a8398;
  border-top: 1px solid #f0f2f5;
  padding-top: 10px;
}
.tier-card__link {
  color: #2e86de;
  font-weight: 600;
}

/* 情境3 LINE CTA（原 onmouseover/onmouseout → :hover） */
.tier-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  background: #06c755;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  box-sizing: border-box;
  transition: background .2s;
}
.tier-card__cta:hover { background: #05b04a; }

/* 區塊底部說明 */
.customs-tiers__footer-note {
  text-align: center;
  margin: 28px 0 0;
  font-size: 13px;
  color: #7a8398;
  line-height: 1.7;
}
.customs-tiers__footer-note i {
  margin-right: 4px;
  color: #46b884;
}
.customs-tiers__footer-note strong { color: #3d4759; }
.customs-tiers__permit {
  text-align: center;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
}
.customs-tiers__permit-link {
  color: #2e86de;
  font-weight: 600;
}

/* 連結防幻影 a:hover 白底線（站台有不在 document.styleSheets 的 a:hover{underline}） */
.tier-card__link,
.tier-card__link:link,
.tier-card__link:visited,
.tier-card__link:hover,
.tier-card__link:focus,
.tier-card__link:active,
.tier-card__cta,
.tier-card__cta:link,
.tier-card__cta:visited,
.tier-card__cta:hover,
.tier-card__cta:focus,
.tier-card__cta:active,
.customs-tiers__permit-link,
.customs-tiers__permit-link:link,
.customs-tiers__permit-link:visited,
.customs-tiers__permit-link:hover,
.customs-tiers__permit-link:focus,
.customs-tiers__permit-link:active {
  text-decoration: none !important;
}

/* a11y：鍵盤焦點環 */
.tier-card__link:focus-visible,
.tier-card__cta:focus-visible,
.customs-tiers__permit-link:focus-visible {
  outline: 2px solid #2e86de;
  outline-offset: 2px;
  border-radius: 4px;
}

/* a11y：尊重減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  .tier-card { transition: none; }
  .customs-tiers .tier-card:hover { transform: none; }
}