/*
 *
 * CSS for your public-facing side
 *
 */

/* ============= 右上角帳號列（user bar） ============= */
/* 隨頁面捲動（非 fixed）：absolute 錨定頁面右上、對齊 header 帶（高 72px），
   右側內縮與左側 logo 約略對稱。 */

.csp-user-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;             /* 高於 header 內 Elementor section 的 z-index:999 */
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;              /* = header 帶高度，內容垂直置中對齊 logo */
  padding: 0 50px;           /* 右內縮與左側 logo 約略對稱 */
  font-size: 15px;
  line-height: 1.4;
}

.csp-user-bar__label {
  color: #888;
  margin-right: 6px;
}

.csp-user-bar__id {
  color: #ff8300;
  font-weight: 700;
}

.csp-user-bar__logout,
.csp-user-bar__login {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border: 1px solid #ff8300;
  border-radius: 4px;
  color: #ff8300;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.csp-user-bar__logout:hover,
.csp-user-bar__logout:focus,
.csp-user-bar__login:hover,
.csp-user-bar__login:focus {
  background-color: #ff8300;
  color: #fff;
}

@media (max-width: 768px) {
  .csp-user-bar {
    height: 60px;
    padding: 0 16px;
    gap: 8px;
    font-size: 13px;
  }
  .csp-user-bar__label {
    display: none;
  }
}

/* ---- proxy 模式：帳號下拉 API 資訊面板（dev 檢視用）---- */
.csp-user-bar__account-wrap {
  position: relative;
}

.csp-user-bar__account--toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 8px;
  margin: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .15s ease;
}

/* active/focus/展開時：極淡橘底，覆蓋主題 button 的強烈 focus 色 */
.csp-user-bar__account--toggle:hover,
.csp-user-bar__account--toggle:focus,
.csp-user-bar__account--toggle:active,
.csp-user-bar__account--toggle[aria-expanded="true"] {
  background: rgba(255, 131, 0, .07) !important;   /* 蓋過主題 button 的強烈 focus/active 色 */
  color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
}

.csp-user-bar__caret {
  font-size: 10px;
  color: #888;
  transition: transform .15s ease;
}

.csp-user-bar__account--toggle[aria-expanded="true"] .csp-user-bar__caret {
  transform: rotate(180deg);
}

.csp-user-bar__panel[hidden] {
  display: none;
}

.csp-user-bar__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 1001;
  text-align: left;
  cursor: default;
}

.csp-account-info__title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  font-weight: 700;
  color: #ff8300;
}

/* 第二個以後的區段標題（PayBackPoint / GameList）與上一區拉開間距 */
.csp-account-info + .csp-account-info__title,
.csp-account-info__group + .csp-account-info__title {
  margin-top: 14px;
}

.csp-account-info__subtitle {
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: #888;
}

.csp-account-info__game {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 3px 0;
  font-size: 12px;
  color: #333;
  border-bottom: 1px dashed #f0f0f0;
}

.csp-account-info__game-name {
  font-weight: 700;
}

.csp-account-info__game-meta {
  color: #aaa;
}

.csp-account-info__servers {
  flex-basis: 100%;
  color: #666;
  font-size: 11px;
}

.csp-account-info__empty {
  margin: 0;
  font-size: 12px;
  color: #aaa;
}

.csp-account-info__error {
  color: #d33;
}

.csp-account-info {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
}

.csp-account-info dt {
  color: #888;
  font-size: 12px;
  white-space: nowrap;
}

.csp-account-info dd {
  margin: 0;
  color: #333;
  font-size: 13px;
  word-break: break-all;
}

/* ============= 品牌 footer bar（置底，隨頁面流排在內容底部） ============= */
/* 依 Figma 1724:51491：頂部細線 + 近白（白底疊 2% 橘）背景，
   版權文字置中、Gama Pass logo 錨定右側。非 fixed，排在內容最後。 */

.csp-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 36px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(rgba(255, 100, 0, 0.02), rgba(255, 100, 0, 0.02)),
    #ffffff;
}

.csp-footer-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  min-height: 54px;
}

.csp-footer-bar__copyright {
  margin: 0;
  font-family: "Noto Sans TC", "Roboto", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}

.csp-footer-bar__logo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 43.2px;
  height: 43.2px;
}

.csp-footer-bar__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 2b 頁已用本品牌列當頁尾，隱藏主題原本空的 #site-footer（避免雙頁尾）。
   涵蓋一般品牌列與 landing 專屬黑底 footer。 */
body:has(.csp-footer-bar) #site-footer,
body:has(.csp-footer-landing) #site-footer {
  display: none;
}

@media (max-width: 768px) {
  .csp-footer-bar {
    padding: 8px 16px;
  }
  .csp-footer-bar__inner {
    min-height: 40px;
  }
  /* 窄螢幕：置中版權文字兩側保留 ≥logo 寬度的內距，避免與右側 logo 重疊 */
  .csp-footer-bar__copyright {
    font-size: 11px;
    padding: 0 46px;
  }
}

/* ============= Landing 下半部黑底服務區塊 ============= */
/* 依 Figma 1724:51993：黑底，三枚圓形圖示 + 白字標籤，橫向置中，各自外連。 */

/* 收掉卡片容器的 68vh 撐高 + 區塊底部 padding，讓灰底區塊間距由 margin 單獨決定
   （Figma：卡片下方 80px）。 */
.elementor-15 .elementor-element.elementor-element-fb2ba7c > .elementor-container {
  min-height: 0 !important;
}
.elementor-15 .elementor-element.elementor-element-fb2ba7c {
  padding-bottom: 0 !important;
}
/* .elementor-15 自帶 margin-bottom:100px，會與灰底區塊 margin-top 折疊（取大者），
   歸零後由灰底區塊 margin-top 單獨決定間距。 */
.elementor.elementor-15 {
  margin-bottom: 0 !important;
}

.csp-landing-services {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* icon 貼齊區塊頂端（配合 padding-top 35px） */
  justify-content: center;
  gap: 24px 72px;
  min-height: 304px;
  margin-top: 70px;          /* +卡片盒到 wrapper 底 10px = 視覺上距三格 80px */
  padding: 35px 24px 24px;   /* icon 距背景頂端 35px */
  background: #696969;
}

.csp-landing-services__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  text-decoration: none;
  color: #ffffff;
}

.csp-landing-services__icon {
  display: block;
  flex-shrink: 0;
  width: 105px;
  height: 105px;
}

.csp-landing-services__label {
  font-family: "Noto Sans TC", "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.csp-landing-services__item:hover .csp-landing-services__label,
.csp-landing-services__item:focus .csp-landing-services__label {
  color: #ff8300;
}

@media (max-width: 768px) {
  .csp-landing-services {
    gap: 20px 40px;
    padding: 32px 16px;
  }
  .csp-landing-services__label {
    font-size: 15px;
  }
}

/* ============= Landing 專屬黑底 footer ============= */
/* 高 56px、黑底白字；中間版權文字置中，左側並排兩枚品牌 logo。 */

.csp-footer-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 36px;
  background: #000000;
  color: #ffffff;
}

.csp-footer-landing__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;                 /* logo 群與版權文字之間的間距 */
  width: 100%;
  max-width: 1200px;
  min-height: 56px;
}

.csp-footer-landing__logos {
  display: flex;
  align-items: center;
  gap: 16px;
}

.csp-footer-landing__logo {
  display: block;
  width: auto;
}

.csp-footer-landing__logo--badge {
  height: 36px;
}

.csp-footer-landing__logo--wordmark {
  height: 25px;
}

.csp-footer-landing__copyright {
  margin: 0;
  font-family: "Noto Sans TC", "Roboto", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 768px) {
  /* 窄螢幕：三者仍置中；空間不足時 logo 群一列、版權另起一列（皆置中） */
  .csp-footer-landing {
    padding: 8px 16px;
  }
  .csp-footer-landing__inner {
    flex-wrap: wrap;
    gap: 6px 16px;
    min-height: 0;
  }
  .csp-footer-landing__logo--badge {
    height: 30px;
  }
  .csp-footer-landing__logo--wordmark {
    height: 22px;
  }
  .csp-footer-landing__copyright {
    flex: 1 1 100%;
    font-size: 11px;
  }
}

/* ============= Gamania 基礎樣式 ============= */

.fc-gamania { color: #ff8300; }
.fs-14 { font-size: 14px; }
.fw-400 { font-weight: 400; }

.gamania-color {
  color: #ff8300;
}

/* ============= Gamania 清單表格樣式 ============= */

.gamania-style-table table {
  border: none !important;
}

.gamania-style-table th,
.gamania-style-table td {
  border: 2px solid #fff !important;
  text-align: center;
  vertical-align: middle;
}

.gamania-style-table th {
  font-size: 16px;
  color: #fff;
}

.gamania-style-table td {
  font-size: 14px;
  color: #5A5A5A;
}

.gamania-style-table thead {
  background-color: #FF8300;
}

.gamania-style-table tr td {
  background-color: #ffffff !important;
}

.gamania-style-table tr:nth-child(2n) td {
  background-color: #EEEEEE !important;
}

/* ============= Gamania 清單表單樣式 ============= */

.gaminia-style-form form .elementor-field-group {
  flex-direction: row;
  margin: 10px 0;
}

.gaminia-style-form form .elementor-field-group label {
  width: 140px;
  align-self: flex-start;
}

.gaminia-style-form form .elementor-field-group label + * {
  flex-basis: 560px !important;
  flex-grow: initial;
}


.gaminia-style-form form .elementor-field-group input[type="checkbox"] + label {
  color: #FF8300 !important;
  position: relative;
  top: -3px;
}

/*
 * ============= 首頁 =============
 */
@media (min-width: 768px) {

  #csp_index_actions > .elementor-container {
    justify-content: center;
  }

  #csp_index_actions .elementor-element.elementor-element-a64512f {
    width: 86%;
  }
}

#csp_index_actions .elementor-element .elementor-widget-container {
  background-color: #fff;
}

#csp_index_actions .elementor-element .elementor-cta__image img {
  width: 150px;
  height: 150px;
}

#csp_index_actions .elementor-element .elementor-cta__description {
  height: 46px;
}

#csp_app_actions .elementor-widget-wrap > div {
  width: 50%;
}

#csp_app_actions .elementor-widget-wrap .elementor-widget-container .elementor-cta__content {
  padding: 45px 0;
}

#csp_app_actions .elementor-widget-wrap .elementor-widget-container img {
  width: initial;
  margin-bottom: 15px;
}

/*
.LL_btnCard .elementor-cta__content {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.LL_btnCard a .elementor-cta__image {
  width: 40px;
  margin-right: 20px;
}

.LL_btnCard a h2 {
  text-align: left;
}
*/