/* ==========================================================================
   ios-pwa-guide-modal.css · iOS PWA 安装引导弹窗
   对应源码：ptgame/app/src/pwa/comp/IosPwaGuideModal.vue <style lang="less" scoped>
   注：组件由 modal.js 挂载，overlay 带 data-modal-id="ios-pwa-guide"（对应源码 modal id），
       根元素工具类以此为作用域；.pwa-tip 内部工具类以 .pwa-tip 为作用域。
       p 标签 margin 清零对应源码 Tailwind preflight。
   ========================================================================== */

/* ---- 根元素工具类（源码 <div class="h-full w-full flex justify-center items-end">） ---- */

[data-modal-id="ios-pwa-guide"] .h-full { height: 100%; }
[data-modal-id="ios-pwa-guide"] .w-full { width: 100%; }
[data-modal-id="ios-pwa-guide"] .flex { display: flex; }
[data-modal-id="ios-pwa-guide"] .justify-center { justify-content: center; }
[data-modal-id="ios-pwa-guide"] .items-end { align-items: flex-end; }

/* 对应源码 Tailwind preflight（p 默认 margin 清零） */
.pwa-tip p { margin: 0; }

/* ---- .pwa-tip 内部工具类 ---- */

.pwa-tip.bg-white { background-color: #fff; }
.pwa-tip.text-black { color: #000; }
.pwa-tip.w-\[24\.375rem\] { width: 24.375rem; }
.pwa-tip.rounded-t-\[1\.25rem\] { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.pwa-tip.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.pwa-tip.pt-7 { padding-top: 1.75rem; }
.pwa-tip.pb-8 { padding-bottom: 2rem; }

.pwa-tip .items-center { align-items: center; }
.pwa-tip .flex-wrap { flex-wrap: wrap; }
.pwa-tip .flex-1 { flex: 1 1 0%; }
.pwa-tip .font-semibold { font-weight: 600; }
.pwa-tip .font-bold { font-weight: 700; }
.pwa-tip .my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.pwa-tip .p-5 { padding: 1.25rem; }
.pwa-tip .rounded-lg { border-radius: .5rem; }
.pwa-tip .border { border-width: 1px; border-style: solid; }
.pwa-tip .border-gray-200 { border-color: #e5e7eb; }
.pwa-tip .w-\[2\.75rem\] { width: 2.75rem; }
.pwa-tip .h-\[2\.75rem\] { height: 2.75rem; }
.pwa-tip .mr-2 { margin-right: .5rem; }
.pwa-tip .rounded-\[\.625rem\] { border-radius: .625rem; }
.pwa-tip .overflow-hidden { overflow: hidden; }
.pwa-tip .ml-2\.5 { margin-left: .625rem; }
.pwa-tip .text-sm { font-size: .875rem; line-height: 1.25rem; }
.pwa-tip .mb-1\.5 { margin-bottom: .375rem; }
.pwa-tip .text-xs { font-size: .75rem; line-height: 1rem; }
.pwa-tip .mr-3\.5 { margin-right: .875rem; }
.pwa-tip .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.pwa-tip .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.pwa-tip .mx-1 { margin-left: .25rem; margin-right: .25rem; }
.pwa-tip .ml-1 { margin-left: .25rem; }
.pwa-tip .mr-1 { margin-right: .25rem; }
.pwa-tip .rounded { border-radius: .25rem; }
.pwa-tip .px-1 { padding-left: .25rem; padding-right: .25rem; }
.pwa-tip .ml-2 { margin-left: .5rem; }
.pwa-tip .w-\[1\.5rem\] { width: 1.5rem; }
.pwa-tip .h-\[1\.5rem\] { height: 1.5rem; }
.pwa-tip .mx-2 { margin-left: .5rem; margin-right: .5rem; }
.pwa-tip .rounded-\[\.375rem\] { border-radius: .375rem; }

/* ion-icon/ion-img → img：font-size 类同步宽高（Ionic 图标按 font-size 渲染） */
.pwa-tip img.text-2xl { width: 1.5rem; height: 1.5rem; cursor: pointer; }
.pwa-tip img.text-xl { width: 1.25rem; height: 1.25rem; }

/* ---- 源码 scoped 样式 ---- */

/* 复刻源码行为：.-rotate-90.text-xl 规则（模板无对应元素，照原样保留） */
.pwa-tip .-rotate-90.text-xl {
  color: #007AFF;
}

/* amber-purple 主题分支（源码 scoped：主题类在祖先 html/body，组件类在本组件内） */
.amber-purple .pwa-tip .title {
  color: var(--text-color-light-purple-1-100);
}

.amber-purple .pwa-tip {
  background-color: var(--color-bg-300);
  color: var(--text-color-light-purple-2-100);
}

.amber-purple .pwa-tip .accent-box {
  border: none;
  background-color: var(--color-bg-100);
  color: var(--text-color-light-purple-1-100);
}