/* =========================================================
 * Usercentrics CMP 補充樣式
 * ---------------------------------------------------------
 * 使用方式：在 index.aspx 的 <template shadowrootmode="open"> 內引用
 *   <link rel="stylesheet" href="usercentrics-cmp.css">
 * （Shadow DOM 內的元素吃不到外部頁面的 CSS，所以必須放在 template 裡）
 *
 * index.aspx 內原本的 <style> 已包含 Usercentrics 全部版面規則，
 * 但缺少「設計變數」區塊（--color-xxx / --spacing-xxx ...），
 * 導致顏色、間距、圓角、字型全部失效。本檔補回這些變數，
 * 並加入「同意前 / 同意後」顯示切換所需的狀態樣式。
 * ========================================================= */

/* ---------- 1. 設計變數（取自 F12 複製的 style.txt） ---------- */
.cmp, .modal-wrapper, .privacyNotice {
    direction: ltr;
    --color-main-primary: #0045A5;
    --color-main-text: #000000;
    --color-links-anchor: #e41920;
    --color-cmp-background: #FFFFFF;
    --color-cmp-background-rgb: 255, 255, 255;
    --color-tabs-container-background: #fff;
    --color-tabs-tab-active: #e41920;
    --color-tabs-tab-inactive: #000000;
    --color-main-border: #DDDDDD;
    --color-cookiebot-logo: #141414;
    --color-cookiebot-powered-by: #666666;
    --color-wix-uc-logo: #141414;
    --color-focus: #141414;
    --color-cmp-scrollbar-thumb: #999999;
    --color-buttons-deny-background: #DDDDDD;
    --color-buttons-deny-text: #000000;
    --color-buttons-accept-background: #e41920;
    --color-buttons-accept-text: #FFFFFF;
    --color-buttons-save-background: #1032CF;
    --color-buttons-save-text: #FFFFFF;
    --color-buttons-more-background: #f5f5f5;
    --color-buttons-more-text: #303030;
    --color-buttons-ok-background: #F5F5F5;
    --color-buttons-ok-text: #303030;
    --color-toggle-background-active: #e41920;
    --color-toggle-handle-active: #FFFFFF;
    --color-toggle-background-inactive: #CCCCCC;
    --color-toggle-handle-inactive: #FFFFFF;
    --color-toggle-background-disabled: #e41920;
    --color-toggle-handle-disabled: #FFFFFF;
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 28px;
    --spacing-xxxl: 32px;
    --spacing-xxxxl: 36px;
    --layout-border-radius: 8px;
    --layout-border-width: 0px;
    --layout-border-color: transparent; /* 原值為空，補 transparent */
    --color-toggle-border: white;
    --element-buttons-border-radius: 4px;
    --typography-font: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    /*--typography-size: 0.875rem;*/
    --typography-size: 14px;
    --typography-size-title: 1.125em;
    --typography-size-text: 1em;
    --typography-size-label: 0.75em;
    /* 以下 3 個為 F12 中「Show all properties (3 more)」未展開的部分，依原樣式表用途推估 */
    --typography-size-link: 1em;
    --element-border-radius: 4px;
    --line-height: 1.25em; /* 說明文字最多 3 行裁切用 */
}

/* ---------- 2. 顯示狀態切換 ----------
 * JS 只要切換 [hidden] 屬性即可：
 *   未同意：.cmp-wrapper 顯示、.privacyButton 隱藏
 *   已同意：.cmp-wrapper 隱藏、.privacyButton 顯示
 */
.cmp-wrapper[hidden],
.privacyButton[hidden] {
  display: none !important;
}

/* ---------- 3. 小動畫（進場由下往上淡入） ---------- */
.cmp-wrapper.cmp.first.widget {
  animation: uc-fade-in-up .25s cubic-bezier(.39,.575,.565,1) both;
}
.privacyButton {
  animation: uc-fade-in .2s ease both;
}
.privacyButton > button {
  position: relative;                  /* 讓 :after 盾牌圖示以按鈕為定位基準 */
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.privacyButton > button:hover { transform: scale(1.08); }
.privacyButton > button:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }

@keyframes uc-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes uc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}