/* ==========================================================================
   popup.css · 公用弹窗样式
   对应源码：
     ptgame/app/src/components/Popup/default/index.vue <style scoped>（.public-popup-default 分支）
     ptgame/app/src/components/Popup/first/index.vue <style scoped lang="less">（.public-popup-first 分支）
     ptgame/app/src/components/first/Button/index.vue <style scoped lang="less>（first 皮肤按钮，仅弹窗用到的部分）
   翻译规则：Tailwind 工具类转写为扁平 CSS（rem 基值 16px）；ion-button → button；LESS 嵌套展开。
   ========================================================================== */

/* ---- 公共：外层容器（default: h-full w-full flex justify-center items-center；first: .flex-center()） ---- */

.public-popup-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.public-popup-wrap .flex-row-reverse {
  flex-direction: row-reverse;
}

/* ==========================================================================
   default 皮肤（对应源码 Popup/default/index.vue）
   ========================================================================== */

/* w-[21.25rem] min-h-[13.75rem] bg-white rounded-[1.25rem] relative（源码无 flex 容器类，内容的 flex-1 为惰性，照原样保留） */
.public-popup-default .popup-main {
  position: relative;
  width: 21.25rem;
  min-height: 13.75rem;
  background-color: #fff;
  border-radius: 1.25rem;
}

.public-popup-default .bg-img-wrapper {
  border-radius: var(--ep-border-radius-surface-small, 1.125rem) var(--ep-border-radius-surface-small, 1.125rem) 0 0;
  overflow: hidden;
}

.public-popup-default .bg-img {
  display: block;
  width: 100%;
}

/* absolute top-0 -translate-y-[4.375rem] */
.public-popup-default .popup-icon-img {
  position: absolute;
  top: 0;
  transform: translateY(-4.375rem);
}

/* w-full min-h-[3.75rem] flex-1 overflow-y-auto my-5 flex items-center justify-center */
.public-popup-default .popup-content {
  width: 100%;
  min-height: 3.75rem;
  flex: 1 1 0%;
  overflow-y: auto;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* w-[16.25rem] text-sm text-center text-[#595959] */
.public-popup-default .popup-content-text {
  width: 16.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  color: #595959;
}

/* btnList mx-[2.8125rem] flex justify-around mb-5 */
.public-popup-default .btnList {
  margin-left: 2.8125rem;
  margin-right: 2.8125rem;
  display: flex;
  justify-content: space-around;
  margin-bottom: 1.25rem;
}

/* 复刻源码行为：.btnList:nth-child(2) { margin-left: 1.875rem }（源码既有选择器，照原样保留） */
.public-popup-default .btnList:nth-child(2) {
  margin-left: 1.875rem;
}

/* ion-button::part(native) */
.public-popup-default .leftBtn,
.public-popup-default .rightBtn {
  width: 6.875rem;
  height: 2.1875rem;
  min-height: 2.1875rem;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
  box-shadow: none;
  border: none;
  cursor: pointer;
}

.public-popup-default .leftBtn {
  background: var(--color-bg-btn-popup-cancel);
  color: var(--color-text-btn-basic);
}

.public-popup-default .rightBtn {
  background: transparent;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--color-border-popup-confirm);
  color: #595959;
}

.public-popup-default .rightBtn:disabled {
  opacity: 0.5;
}

/* ==========================================================================
   first/second 皮肤（对应源码 Popup/first/index.vue）
   ========================================================================== */

.public-popup-first .main-bg {
  width: 21.25rem;
  min-height: 13.75rem;
  max-height: calc(100vh - 6rem);
  margin-top: 4.375rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--ep-color-background-fill-surface-raised-L1, var(--common-dialog-bg));
  border-radius: var(--ep-border-radius-surface-small, 1.125rem);
}

.public-popup-first .bg-img-wrapper {
  border-radius: var(--ep-border-radius-surface-small, 1.125rem) var(--ep-border-radius-surface-small, 1.125rem) 0 0;
  overflow: hidden;
}

.public-popup-first .bg-img {
  display: block;
  width: 100%;
}

/* .popup-icon + -translate-y-[4.375rem] */
.public-popup-first .popup-icon {
  position: absolute;
  top: 0px;
  transform: translateY(-4.375rem);
}

.public-popup-first .content-wrapper {
  width: 100%;
  min-height: 3.75rem;
  flex: 1;
  overflow-y: auto;
  margin: 1.25rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.public-popup-first .content {
  width: 16.25rem;
  font-size: var(--ep-font-size-m, 0.875rem);
  line-height: 1.5;
  font-weight: var(--ep-font-weight-regular, 400);
  text-align: center;
  color: var(--ep-color-text-weak, var(--common-dialog-text-color));
}

.public-popup-first .btn-wrapper {
  margin: 0 0.5rem 1.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ---- first/Button 组件等价样式（对应源码 components/first/Button/index.vue） ---- */

.public-popup-first .button {
  display: flex;
  align-items: center;
}

.public-popup-first .button button {
  border: none;
  cursor: pointer;
  border-radius: var(--rounded-small, 0.25rem);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  box-shadow: none;
  font-size: var(--button-font-size, 0.875rem);
  font-weight: var(--button-font-weight, bold);
  min-height: 26px;
  min-width: 40px;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* .btn-bus 基线（first-button 默认主题） */
.public-popup-first .button button.first-button,
.public-popup-first .button button.raised {
  background: var(--background, var(--theme-color-800));
}

.public-popup-first .button button p {
  font-size: inherit;
  margin: 0;
}

.public-popup-first .button button p span {
  color: var(--button-text-color, var(--color-primary-btn-text-active));
}

.public-popup-first .button button.disabled p span,
.public-popup-first .button button:disabled p span {
  color: var(--color-primary-btn-text-disable);
}

/* new-skin-symbol 主题覆盖（对应源码 Button .new-skin-symbol 分支；new-skin-symbol 挂在 html 上） */
.new-skin-symbol .public-popup-first .button button {
  border-radius: var(--ep-border-radius-m);
  font-size: var(--ep-font-size-m);
  font-weight: var(--ep-font-weight-bold);
}

.new-skin-symbol .public-popup-first .button button.first-button {
  background: var(--ep-dynamic-primary);
}

.new-skin-symbol .public-popup-first .button button.first-button p span {
  color: var(--ep-color-text-inverse);
}

.new-skin-symbol .public-popup-first .button button.first-button:disabled {
  background: var(--ep-color-background-fill-active-disabled);
}

.new-skin-symbol .public-popup-first .button button.first-button:disabled p span {
  color: var(--ep-color-text-inverse-disabled);
}

.new-skin-symbol .public-popup-first .button button.raised {
  background: var(--ep-color-background-fill-surface-raised-L2);
}

.new-skin-symbol .public-popup-first .button button.raised p span {
  color: var(--ep-color-text-default);
}

/* amber-purple 主题覆盖（对应源码 Button .amber-purple 分支；.default/.second 为 body 皮肤类） */
.amber-purple .default .public-popup-first .button button.first-button,
.amber-purple .second .public-popup-first .button button.first-button {
  background: var(--theme-color-gradient-100);
}