/* Path: lottery-orders/assets/css/specific/doublecolor.css */
/* Version: v1.0.8 (2025-10-04)
 * 本版要点：
 * - 外层容器改为与 H 套件一致的 Grid（1/2/3 列），确保“加减卡”与选号卡等宽；
 * - 说明卡跨整行；其余加减卡视觉、双色球网格与选中态保持不变。
 */

/* 说明卡片：占满一行（Grid 下再补跨列） */
.lottery-orders--doublecolor .lottery-card--instructions{
  flex: 0 0 100%;
  width: 100%;
  grid-column: 1 / -1; /* grid 环境下跨整行 */
}

/* 外层容器：与 H 套件一致的 Grid 布局（等宽列） */
.lottery-orders--doublecolor .modules-wrapper{
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 16px;
  grid-template-columns: 1fr;               /* mobile: 1 列 */
}
@media (min-width: 768px){
  .lottery-orders--doublecolor .modules-wrapper{ grid-template-columns: repeat(2, 1fr); } /* tablet: 2 列 */
}
@media (min-width: 1024px){
  .lottery-orders--doublecolor .modules-wrapper{ grid-template-columns: repeat(3, 1fr); } /* desktop: 3 列 */
}

/* ====== “+/-” 加减卡片：完全对齐 H 套件 ====== */
.lottery-orders--doublecolor .lottery-card--adder {
  cursor: pointer;
  display: flex;
  flex-direction: column;          /* 纵向堆叠：+、Add one more、Close the card */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  text-align: center;
  user-select: none;
  min-height: 160px;
  box-sizing: border-box;          /* 防止边框影响等宽表现 */
  transition: border-color .2s ease, background .2s ease;
}
.lottery-orders--doublecolor .lottery-card--adder:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.lottery-orders--doublecolor .lottery-card--adder.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 绿色圆形 “+” 本体（注意：此元素只包含一个加号字符） */
.lottery-orders--doublecolor .lottery-card--adder .add-card__inner {
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  background-color: #009944; /* 绿色圆形徽记 */
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__inner:focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* “Add one more” 文案（必须是 .add-card__inner 的兄弟元素） */
.lottery-orders--doublecolor .lottery-card--adder .add-card__label {
  margin-top: 2px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__label:focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* —— “- Close the card” 行（默认隐藏，JS 控制 display） */
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-row[aria-hidden="true"] {
  display: none !important;
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-row {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  color: #334155;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn:hover {
  background: #ffffff;
  border-color: #94a3b8;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn:active {
  transform: translateY(0.5px);
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__close-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.lottery-orders--doublecolor .lottery-card--adder .add-card__minus {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}

/* 可访问性：禁用态完全不可点击（连同子元素） */
.lottery-orders--doublecolor .lottery-card--adder[aria-disabled="true"] {
  pointer-events: none;
}
.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{
  pointer-events: none;
}

/* ========== 双色球内部网格与选中态（沿用已对齐规则） ========== */
.lottery-orders--doublecolor .red-balls {
  grid-template-columns: repeat(6, 1fr) !important; /* 红球：每行6个 */
}
.lottery-orders--doublecolor .blue-balls {
  grid-template-columns: repeat(3, 1fr) !important; /* 蓝球：每行3个 */
}

/* 选中态颜色 */
.lottery-orders--doublecolor .digit-row[data-digit="red"] .number.selected {
  background: #FF2752 !important;
  color: #fff !important;
  border-color: #FF2752 !important;
}
.lottery-orders--doublecolor .digit-row[data-digit="blue"] .number.selected {
  background: #267aff !important;
  color: #fff !important;
  border-color: #267aff !important;
}

/* 预览/购物车小球颜色 */
.lottery-orders--doublecolor .lottery-ball.red-ball,
.lottery-orders--cart[data-lottery-type="DoubleColor"] .lottery-ball.red-ball {
  background-color: #FF2752 !important;
}
.lottery-orders--doublecolor .lottery-ball.blue-ball,
.lottery-orders--cart[data-lottery-type="DoubleColor"] .lottery-ball.blue-ball {
  background-color: #267aff !important;
}

/* 小屏保持同样列数（避免通用断点覆盖） */
@media (max-width: 768px) {
  .lottery-orders--doublecolor .red-balls {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .lottery-orders--doublecolor .blue-balls {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}