/* ==========================================================================
   footer-modal.css · PWA 底部安装弹窗样式
   对应源码：ptgame/app/src/pwa/comp/FooterModal.vue <style scoped lang="less">（嵌套展开）
   注：ionic CSS 变量（--padding-start/--background/--color 等）保留原声明，
       同时补原生等价属性（padding/background/color），保证视觉一致。
   ========================================================================== */

/* 对应源码 ion-modal#pwa-footer-modal::part(content) { --height: 100%; }（高度由内容撑开<默认600px>）
   ion-modal → modal.js 遮罩，变量声明照原样保留 */
#pwa-footer-modal {
  --height: 100%;
  height: 100%;
}

/* ---- Tailwind 工具类转写（限定本组件 DOM 范围，对应源码 scoped） ---------- */

.mask.h-full { height: 100%; }
.mask.w-full { width: 100%; }
.mask.flex { display: flex; }
.mask.justify-center { justify-content: center; }
.mask.items-end { align-items: flex-end; }
.mask.fixed { position: fixed; }

/* v-if 显隐切换（hidden 属性）；优先级需高于 .mask.flex */
.mask[hidden] { display: none; }

.mask .flex { display: flex; }
.mask .w-\[24\.375rem\] { width: 24.375rem; }
.mask .rounded-t-\[\.625rem\] { border-top-left-radius: .625rem; border-top-right-radius: .625rem; }
.mask .relative { position: relative; }
.mask .p-5 { padding: 1.25rem; }
.mask .cover { object-fit: cover; }
.mask .w-\[3\.75rem\] { width: 3.75rem; }
.mask .h-\[3\.75rem\] { height: 3.75rem; }
.mask .mr-2 { margin-right: .5rem; }
.mask .flex-1 { flex: 1 1 0%; }
.mask .p-\[\.3125rem\] { padding: .3125rem; }
.mask .text-sm { font-size: .875rem; line-height: 1.25rem; }
.mask .text-xs { font-size: .75rem; line-height: 1rem; }
.mask .w-full { width: 100%; }
.mask .h-full { height: 100%; }

/* Tailwind preflight 等价：p 标签去默认 margin */
.mask p { margin: 0; }

/* ---- 组件样式（源码 less 嵌套展开） --------------------------------------- */

.mask {
  background: var(--color-bg-mask-black);
}

.content_footer_pwa {
  background-color: var(--color-bg-modal-footer-pwa);
  color: var(--color-text-modal-footer-pwa);
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 源码 .buttons ion-button */
.buttons .ion-button {
  --padding-start: 0.75rem;
  --padding-end: 0.75rem;
  --border-radius: 0.375rem;
  padding-inline-start: var(--padding-start);
  padding-inline-end: var(--padding-end);
  border-radius: var(--border-radius);
  text-transform: none;
  letter-spacing: normal;
  min-width: 4.5rem;
}

/* 源码 ion-button.solid */
.ion-button.solid {
  --background: var(--color-button-bg-update, #3E9B2F);
  --color: var(--color-text-btn-basic);
  --box-shadow: none;
  background: var(--background);
  color: var(--color);
  box-shadow: none;
  margin-inline-start: .9375rem;
  margin-inline-end: .9375rem;
}

/* 源码 ion-button.line */
.ion-button.line {
  --box-shadow: none;
  --padding-start: .5rem;
  --padding-end: .5rem;
  --color: var(--color-text-button-update1);
  box-shadow: none;
  padding-inline-start: var(--padding-start);
  padding-inline-end: var(--padding-end);
  color: var(--color);
  border-width: 2px;
  border-style: solid;
  width: 150px;
  border-radius: var(--border-radius);
  border-color: var(--color-bd-button-update1, #FBA531);
  --background: var(--color-button-bg-update1, transparent);
  background: var(--background);
}

/* 源码 .default.amber-purple ion-button.line::part(native) */
.default.amber-purple .ion-button.line {
  border-radius: 0.75rem;
}

/* 源码 .default.amber-purple ion-button.cancel */
.default.amber-purple .ion-button.cancel {
  --color: var(--color-text-modal-footer-pwa);
  color: var(--color-text-modal-footer-pwa);
}

.blue-default .cancel {
  color: var(--color-text-gray-800);
}

.green-default .cancel {
  color: var(--color-text-gray-300);
}

.auroral-yellow .cancel {
  color: var(--color-text-black-100);
}

/* 源码 .new-skin-symbol 分支（毛玻璃） */
.new-skin-symbol .content_footer_pwa {
  backdrop-filter: blur(4px);
  background: var(--ep-color-background-fill-surface-raised-L1);
  background-size: cover;
  color: var(--ep-color-text-default);
}

.new-skin-symbol .content_footer_pwa .install {
  --button-font-size: .875rem;
  --button-font-weight: 500;
}

.new-skin-symbol .content_footer_pwa .cancel {
  --color: var(--ep-color-text-default);
  color: var(--ep-color-text-default);
}

/* 源码 .new-skin-symbol.malt-green .content_footer_pwa .buttons :deep(.install) .primary::part(native) */
.new-skin-symbol.malt-green .content_footer_pwa .buttons .install .primary {
  background: var(--ep-color-background-fill-active-primary);
}