/* ==========================================================================
   safari-guide-modal.css · Safari 引导弹窗内容
   对应源码：ptgame/app/src/pwa/comp/SafariGuideModal.vue <style scoped lang="less">（mixin 全参数分支展开）

   复刻源码行为说明：源码全部样式命名空间挂在 `#pwa-safari-guide-modal-index` 祖先选择器下，
   而该 id 在源码 DOM 中并不存在（grep 全仓仅出现在本文件），加上 scoped 属性限制，
   这些规则在源码中同样不命中 —— 此处按 mixin 参数逐分支原样展开（含「不命中」特性），
   组件实际视觉由 popup.css 的弹窗默认样式承载，与源码一致。
   ========================================================================== */

/* ---- 基础分支（源码 html { #pwa-safari-guide-modal-index.style(); }，默认参数） ---- */

html #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

html #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-40);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

html #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--color-bg-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-bg-100);
}

html #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-40);
}

html #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- new-skin-symbol（@color: --ep-color-text-default, @rectangleColor: --ep-color-text-weak） ---- */

.new-skin-symbol #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.new-skin-symbol #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--ep-color-text-default);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.new-skin-symbol #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--color-bg-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-bg-100);
}

.new-skin-symbol #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--ep-color-text-weak);
}

.new-skin-symbol #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- purple-light（@bg: --color-bg-300） ---- */

.purple-light #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.purple-light #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-40);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.purple-light #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--color-bg-300);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-bg-100);
}

.purple-light #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-40);
}

.purple-light #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- green-default（@bg: --text-color-white-100, @color/@rectangleColor: --color-text-gray-300, @borderColor: --theme-color-800） ---- */

.green-default #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.green-default #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-gray-300);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.green-default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--theme-color-800);
}

.green-default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-gray-300);
}

.green-default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- blue-default（@bg: --text-color-white-100, @color/@rectangleColor: --color-text-gray-800, @borderColor: --accent-color-yellow） ---- */

.blue-default #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.blue-default #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-gray-800);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.blue-default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--accent-color-yellow);
}

.blue-default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-gray-800);
}

.blue-default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- forest-green（同 green-default 参数） ---- */

.forest-green #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.forest-green #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-gray-300);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.forest-green #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--theme-color-800);
}

.forest-green #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-gray-300);
}

.forest-green #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- auroral-yellow（@bg: --text-color-white-100, @color/@rectangleColor: --color-text-black-100, @borderColor: --accent-color-yellow） ---- */

.auroral-yellow #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.auroral-yellow #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-black-100);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.auroral-yellow #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--accent-color-yellow);
}

.auroral-yellow #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-black-100);
}

.auroral-yellow #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- amber-purple .default（@bg: --text-color-white-100, @color/@rectangleColor: --text-color-black-100, @borderColor: --theme-color-800） ---- */

.amber-purple .default #pwa-safari-guide-modal-index .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.amber-purple .default #pwa-safari-guide-modal-index .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--text-color-black-100);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.amber-purple .default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--theme-color-800);
}

.amber-purple .default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--text-color-black-100);
}

.amber-purple .default #pwa-safari-guide-modal-index .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- Tailwind 工具类等价规则（源码由全局 Tailwind 提供） ---- */

.guide-safari-wrap .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}