/*
 * Path: assets/css/common/lottery-specific-common.css
 * Version: v1.0.6
 * Updated: 2026-03-18
 * - 2026-03-18：按历史有效版恢复背景数字显示层级，回到截图2那种可见底纹效果。
 * - 2026-03-18：恢复选号区背景序号可见度，保持可见但不遮挡网格数字。
 * - 2026-03-18：弱化选号区背景大号序号，避免遮挡网格数字可读性。
 * - 2026-03-11：将 Keno8 / DoubleColor / DLT 的 Add card 由顶部对齐改为上下左右居中。
 * Description:
 * - Keno8 / DoubleColor / DLT 共用的选号页面栅格、加减卡与说明卡公共层
 * - 收拢目标：保留布局逻辑与行为状态，删掉旧 adder 皮肤，避免与主 CSS 打架
 * - 不改业务逻辑，不改主 CSS 已确认可用的 SVG 加号方案
 */


/* ========= 选号区通用结构层（从旧 lottery-orders.css 拆回） ========= */
.lottery-orders--keno8 .number-selection,
.lottery-orders--doublecolor .number-selection,
.lottery-orders--dlt .number-selection {
  position: relative;
  min-height: 150px;
  text-align: center;
  margin-bottom: 15px;
}

.lottery-orders--keno8 .card-number,
.lottery-orders--doublecolor .card-number,
.lottery-orders--dlt .card-number {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  color: #555555;
  opacity: 0.3;
  z-index: 10;
  pointer-events: none;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  letter-spacing: -.02em;
}

.lottery-orders--keno8 .digit-rows,
.lottery-orders--doublecolor .digit-rows,
.lottery-orders--dlt .digit-rows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.lottery-orders--keno8 .digit-row,
.lottery-orders--doublecolor .digit-row,
.lottery-orders--dlt .digit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin: 0 10px;
}

.lottery-orders--keno8 .digit-label,
.lottery-orders--doublecolor .digit-label,
.lottery-orders--dlt .digit-label {
  text-align: center;
  font-size: 10px;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.lottery-orders--keno8 .number-buttons,
.lottery-orders--doublecolor .number-buttons,
.lottery-orders--dlt .number-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.lottery-orders--keno8 .number,
.lottery-orders--doublecolor .number,
.lottery-orders--dlt .number {
  width: var(--number-size);
  height: var(--number-size);
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  line-height: var(--number-size);
  margin: 0 0 2px;
  aspect-ratio: 1 / 1;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.lottery-orders--keno8 .number:hover,
.lottery-orders--doublecolor .number:hover,
.lottery-orders--dlt .number:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.lottery-orders--keno8 .number:disabled,
.lottery-orders--doublecolor .number:disabled,
.lottery-orders--dlt .number:disabled {
  background: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
}

/* ========= 基础卡片宽度兼容 ========= */
.lottery-orders--keno8 .lottery-card,
.lottery-orders--doublecolor .lottery-card,
.lottery-orders--dlt .lottery-card {
  box-sizing: border-box;
  width: 100%;
}

/* ========= Instructions 卡片全宽 ========= */
.lottery-orders--keno8 .lottery-card--instructions,
.lottery-orders--doublecolor .lottery-card--instructions,
.lottery-orders--dlt .lottery-card--instructions {
  flex: 0 0 100%;
  width: 100%;
  grid-column: 1 / -1;
}

/* ========= 共用栅格 ========= */
.lottery-orders--keno8 .modules-wrapper,
.lottery-orders--doublecolor .modules-wrapper,
.lottery-orders--dlt .modules-wrapper {
  display: grid;
  grid-auto-flow: row dense;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .lottery-orders--keno8 .modules-wrapper,
  .lottery-orders--doublecolor .modules-wrapper,
  .lottery-orders--dlt .modules-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lottery-orders--keno8 .modules-wrapper,
  .lottery-orders--doublecolor .modules-wrapper,
  .lottery-orders--dlt .modules-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 兼容部分内联输出：遇到 width:100% / flex-basis:100% 时强制整行 */
.lottery-orders--keno8 .modules-wrapper > .lottery-card[style*="flex-basis: 100%"],
.lottery-orders--keno8 .modules-wrapper > .lottery-card[style*="width: 100%"],
.lottery-orders--doublecolor .modules-wrapper > .lottery-card[style*="flex-basis: 100%"],
.lottery-orders--doublecolor .modules-wrapper > .lottery-card[style*="width: 100%"],
.lottery-orders--dlt .modules-wrapper > .lottery-card[style*="flex-basis: 100%"],
.lottery-orders--dlt .modules-wrapper > .lottery-card[style*="width: 100%"] {
  grid-column: 1 / -1;
}

/* ========= Add card：公共结构层（外观交给主 CSS） ========= */
.lottery-orders--keno8 .lottery-card--adder,
.lottery-orders--doublecolor .lottery-card--adder,
.lottery-orders--dlt .lottery-card--adder {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 160px;
  padding: 18px;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lottery-orders--keno8 .lottery-card--adder:hover,
.lottery-orders--doublecolor .lottery-card--adder:hover,
.lottery-orders--dlt .lottery-card--adder:hover {
  transform: translateY(-1px);
}

.lottery-orders--keno8 .lottery-card--adder[aria-disabled="true"],
.lottery-orders--doublecolor .lottery-card--adder[aria-disabled="true"],
.lottery-orders--dlt .lottery-card--adder[aria-disabled="true"] {
  pointer-events: none;
}

.lottery-orders--keno8 .lottery-card--adder.is-disabled,
.lottery-orders--doublecolor .lottery-card--adder.is-disabled,
.lottery-orders--dlt .lottery-card--adder.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* ========= Add card：SVG 按钮本体外观由主 CSS 接管，这里只保留结构性安全规则 ========= */
.lottery-orders--keno8 .lottery-card--adder .add-card__inner,
.lottery-orders--doublecolor .lottery-card--adder .add-card__inner,
.lottery-orders--dlt .lottery-card--adder .add-card__inner {
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.lottery-orders--keno8 .lottery-card--adder .add-card__label,
.lottery-orders--doublecolor .lottery-card--adder .add-card__label,
.lottery-orders--dlt .lottery-card--adder .add-card__label {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #52637a;
  font-weight: 500;
  text-align: center;
}

.lottery-orders--keno8 .lottery-card--adder.is-disabled .add-card__inner,
.lottery-orders--keno8 .lottery-card--adder.is-disabled .add-card__label,
.lottery-orders--keno8 .lottery-card--adder.is-disabled .add-card__close-btn,
.lottery-orders--doublecolor .lottery-card--adder.is-disabled .add-card__inner,
.lottery-orders--doublecolor .lottery-card--adder.is-disabled .add-card__label,
.lottery-orders--doublecolor .lottery-card--adder.is-disabled .add-card__close-btn,
.lottery-orders--dlt .lottery-card--adder.is-disabled .add-card__inner,
.lottery-orders--dlt .lottery-card--adder.is-disabled .add-card__label,
.lottery-orders--dlt .lottery-card--adder.is-disabled .add-card__close-btn {
  pointer-events: none;
}


/* ========= Add card：视觉补回（原 lottery-orders.css 的选号页交互样式） ========= */
.lottery-orders--keno8 .lottery-card--adder,
.lottery-orders--doublecolor .lottery-card--adder,
.lottery-orders--dlt .lottery-card--adder {
  border: 1px solid #dbe4ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.lottery-orders--keno8 .lottery-card--adder .add-card__inner,
.lottery-orders--doublecolor .lottery-card--adder .add-card__inner,
.lottery-orders--dlt .lottery-card--adder .add-card__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #2d2d2d;
  box-shadow: 0 14px 30px rgba(45, 45, 45, .20);
}

.lottery-orders--keno8 .lottery-card--adder .add-card__inner svg,
.lottery-orders--doublecolor .lottery-card--adder .add-card__inner svg,
.lottery-orders--dlt .lottery-card--adder .add-card__inner svg {
  width: 26px;
  height: 26px;
}

.lottery-orders--keno8 .lottery-card--adder.is-disabled,
.lottery-orders--doublecolor .lottery-card--adder.is-disabled,
.lottery-orders--dlt .lottery-card--adder.is-disabled {
  background: #f8fafc;
  box-shadow: none;
}

.lottery-orders--keno8 .lottery-card--adder.is-disabled .add-card__inner,
.lottery-orders--doublecolor .lottery-card--adder.is-disabled .add-card__inner,
.lottery-orders--dlt .lottery-card--adder.is-disabled .add-card__inner {
  background: #94a3b8;
  box-shadow: none;
}

/* ========= Add card：焦点态 ========= */
.lottery-orders--keno8 .lottery-card--adder .add-card__inner:focus-visible,
.lottery-orders--doublecolor .lottery-card--adder .add-card__inner:focus-visible,
.lottery-orders--dlt .lottery-card--adder .add-card__inner:focus-visible,
.lottery-orders--keno8 .lottery-card--adder .add-card__label:focus-visible,
.lottery-orders--doublecolor .lottery-card--adder .add-card__label:focus-visible,
.lottery-orders--dlt .lottery-card--adder .add-card__label:focus-visible,
.lottery-orders--keno8 .lottery-card--adder .add-card__close-btn:focus-visible,
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn:focus-visible,
.lottery-orders--dlt .lottery-card--adder .add-card__close-btn:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 2px;
}

/* ========= Add card：关闭一行 ========= */
.lottery-orders--keno8 .lottery-card--adder .add-card__close-row[aria-hidden="true"],
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-row[aria-hidden="true"],
.lottery-orders--dlt .lottery-card--adder .add-card__close-row[aria-hidden="true"] {
  display: none !important;
}

.lottery-orders--keno8 .lottery-card--adder .add-card__close-row,
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-row,
.lottery-orders--dlt .lottery-card--adder .add-card__close-row {
  margin-top: 6px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.lottery-orders--keno8 .lottery-card--adder .add-card__close-btn,
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn,
.lottery-orders--dlt .lottery-card--adder .add-card__close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  color: #52637a;
  background: #ffffff;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  font-weight: 500;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lottery-orders--keno8 .lottery-card--adder .add-card__close-btn:hover,
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn:hover,
.lottery-orders--dlt .lottery-card--adder .add-card__close-btn:hover {
  background: #f6f9fd;
  border-color: #bfd3ea;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.lottery-orders--keno8 .lottery-card--adder .add-card__close-btn:active,
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn:active,
.lottery-orders--dlt .lottery-card--adder .add-card__close-btn:active {
  transform: translateY(0);
}

.lottery-orders--keno8 .lottery-card--adder .add-card__minus,
.lottery-orders--doublecolor .lottery-card--adder .add-card__minus,
.lottery-orders--dlt .lottery-card--adder .add-card__minus {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 600;
  line-height: 1;
}

/* ========= 移动端 ========= */
@media (max-width: 767px) {
  .lottery-orders--keno8 .lottery-card--adder,
  .lottery-orders--doublecolor .lottery-card--adder,
  .lottery-orders--dlt .lottery-card--adder {
    min-height: 148px;
    padding: 16px;
    gap: 8px;
  }

  .lottery-orders--keno8 .lottery-card--adder .add-card__label,
  .lottery-orders--doublecolor .lottery-card--adder .add-card__label,
  .lottery-orders--dlt .lottery-card--adder .add-card__label {
    font-size: 12px;
  }

  .lottery-orders--keno8 .lottery-card--adder .add-card__close-btn,
  .lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn,
  .lottery-orders--dlt .lottery-card--adder .add-card__close-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
}