/* ========= 結帳頁整體 ========= */

.checkout-page{
  padding:16px 0 32px;
}

/* 左右兩欄：左=填資料，右=訂單摘要 */
.checkout-layout{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:16px;
  align-items:flex-start;
}

@media(max-width:900px){
  .checkout-layout{
    grid-template-columns:1fr;
  }
  /* 手機版：先看到資料，再看到摘要 */
  .checkout-summary-panel{
    order:2;
  }
}

/* 左側大卡片、右側大卡片 */

.checkout-panel,
.checkout-summary-panel{
  background:#fff;
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:14px 16px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.checkout-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
}

/* ========= 步驟條 ========= */

.checkout-steps{
  display:flex;
  gap:12px;
  margin:10px 0 18px;
  flex-wrap:wrap;
}

.checkout-steps .step{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#6b7280;
}

.checkout-steps .step-index{
  width:22px;
  height:22px;
  border-radius:999px;
  border:2px solid #d1d5db;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  background:#fff;
}

.checkout-steps .step-label{
  font-weight:500;
}

.checkout-steps .step.done .step-index{
  background:#22c55e10;
  border-color:#22c55e;
  color:#16a34a;
}

.checkout-steps .step.done .step-label{
  color:#16a34a;
}

.checkout-steps .step.active .step-index{
  background:#2563eb10;
  border-color:#2563eb;
  color:#2563eb;
}

.checkout-steps .step.active .step-label{
  color:#2563eb;
}

/* ========= 左側：表單區 ========= */

.checkout-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.checkout-block{
  border-radius:12px;
  border:1px solid #e5e7eb;
  padding:10px 12px 12px;
  margin-bottom:8px;
}

.checkout-block h3{
  font-size:14px;
  font-weight:700;
  margin:0 0 8px;
}

.block-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.inline-checkbox{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#4b5563;
}

.inline-checkbox input{
  width:16px;
  height:16px;
}

/* form 欄位排版 */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}

.form-field.full{
  grid-column:1 / -1;
}

.form-field label{
  font-weight:500;
  color:#374151;
}

.form-field input,
.form-field textarea{
  border-radius:10px;
  border:1px solid #d1d5db;
  padding:8px 10px;
  font-size:13px;
  outline:none;
}

.form-field input:focus,
.form-field textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.15);
}

/* 發票額外欄位 */
.invoice-extra{
  margin-top:4px;
}

/* ========= 運送 / 付款 radio 列表 ========= */

.radio-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.radio-item{
  display:flex;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  font-size:13px;
  cursor:pointer;
}

.radio-item input{
  margin-top:3px;
}

.radio-item .radio-title{
  font-weight:600;
  color:#111827;
}

.radio-item .radio-sub{
  font-size:12px;
  color:#6b7280;
}

/* ========= 右側：訂單摘要 ========= */

.checkout-summary-panel .summary-items{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:8px;
}

/* 單一商品列，覆蓋 cart.css 可能的舊樣式 */
.checkout-summary-panel .cart-row{
  display:flex;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px solid #f3f4f6;
  font-size:13px;
}

.checkout-summary-panel .cart-row:last-child{
  border-bottom:none;
}

.checkout-summary-panel .cart-row-left{
  display:flex;
  gap:8px;
  flex:1;
  min-width:0;
}

.checkout-summary-panel .cart-row-thumb,
.checkout-summary-panel .cart-page-item-img{
  width:64px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  background:#f3f4f6;
  flex-shrink:0;
}

.checkout-summary-panel .cart-row-thumb img,
.checkout-summary-panel .cart-page-item-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.checkout-summary-panel .cart-row-name,
.checkout-summary-panel .cart-page-item-title{
  font-weight:600;
  color:#111827;
  margin-bottom:2px;
}

.checkout-summary-panel .cart-row-spec,
.checkout-summary-panel .cart-page-item-spec{
  font-size:12px;
  color:#6b7280;
}

.checkout-summary-panel .cart-row-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:150px;
}

.checkout-summary-panel .cart-row-price{
  font-size:13px;
  color:#111827;
}

.checkout-summary-panel .cart-row-qty{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  padding:2px 6px;
}

.checkout-summary-panel .cart-row-qty button{
  border:none;
  background:transparent;
  width:22px;
  height:22px;
  cursor:pointer;
  font-size:14px;
}

.checkout-summary-panel .cart-row-qty span{
  min-width:20px;
  text-align:center;
}

.checkout-summary-panel .cart-row-subtotal{
  font-size:13px;
  font-weight:600;
  color:#b91c1c;
}

.checkout-summary-panel .cart-row-remove{
  border:none;
  background:transparent;
  font-size:12px;
  color:#9ca3af;
  cursor:pointer;
}

/* 手機縮排：右側欄位堆疊 */
@media(max-width:600px){
  .checkout-summary-panel .cart-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .checkout-summary-panel .cart-row-right{
    flex-direction:row;
    align-items:center;
    gap:8px;
    justify-content:space-between;
    width:100%;
  }
}

/* ========= 總金額區 ========= */

.summary-total{
  border-top:1px dashed #e5e7eb;
  margin-top:8px;
  padding-top:8px;
  font-size:14px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:2px 0;
}

.summary-row-total{
  margin-top:4px;
  font-size:15px;
}

.summary-row-total strong{
  font-size:18px;
  color:#b91c1c;
}

/* ========= 按鈕與說明 ========= */

.summary-actions{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.btn-secondary-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  font-size:13px;
  color:#4b5563;
  text-decoration:none;
}

.btn-secondary-link:hover{
  text-decoration:underline;
}

.btn-primary-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border:none;
  border-radius:999px;
  padding:9px 12px;
  font-size:14px;
  font-weight:600;
  background:linear-gradient(135deg,#f97316,#fb923c);
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(248,113,113,.25);
}

.btn-primary-main:hover{
  filter:brightness(1.05);
}

.summary-note{
  margin-top:6px;
  font-size:11px;
  color:#9ca3af;
}

/* 購物車空空時 */
.cart-page-empty{
  font-size:14px;
  color:#6b7280;
  padding:8px 0;
}
    .phone-row,
    .sms-code-row{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .phone-row input,
    .sms-code-row input{
      flex:1;
    }
    .btn-sms{
      white-space:nowrap;
      border-radius:999px;
      border:1px solid #d1d5db;
      background:#f3f4f6;
      padding:6px 10px;
      font-size:12px;
      cursor:pointer;
    }
    .btn-sms:disabled{
      opacity:.6;
      cursor:not-allowed;
    }
    .sms-msg{
      font-size:12px;
      margin-top:4px;
      color:#6b7280;
    }
    .no-shipping{
      font-size:14px;
      color:#b91c1c;
      padding:8px 4px;
    }

    .ship-tabs{
      display:flex;
      gap:8px;
      margin-bottom:8px;
    }
    .ship-tab{
      border-radius:999px;
      border:1px solid #d1d5db;
      background:#f9fafb;
      padding:6px 14px;
      font-size:14px;
      cursor:pointer;
      color:#4b5563;
    }
    .ship-tab.active{
      background:#111827;
      color:#f9fafb;
      border-color:#111827;
    }
    .ship-item.ship-hidden{
      display:none;
    }

    /* 讓運送方式 / 付款方式 一排兩個 */
    .radio-list.radio-grid-2{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px 12px;
    }
    .radio-list.radio-grid-2 .radio-item{
      width:100%;
    }
    @media (max-width:640px){
      .radio-list.radio-grid-2{
        grid-template-columns:1fr;
      }
    }

    .radio-title{
      display:flex;
      align-items:center;
      gap:6px;
    }
    .ship-icon,
    .payment-icon{
      font-size:18px;
      flex-shrink:0;
    }

    /* 超商門市滿版卡片樣式 */
    .btn-cvs-store{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 16px;
      border-radius:12px;
      border:1px solid #16a34a;
      background:#22c55e;
      color:#fff;
      font-size:15px;
      font-weight:600;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(34,197,94,.35);
      transition:transform .05s ease, box-shadow .05s ease, opacity .2s;
    }
    .btn-cvs-store i{
      font-size:20px;
    }
    .btn-cvs-store:hover{
      transform:translateY(-1px);
      box-shadow:0 6px 18px rgba(34,197,94,.4);
    }
    .btn-cvs-store:active{
      transform:translateY(0);
      box-shadow:0 3px 8px rgba(22,163,74,.5);
      opacity:.9;
    }

    .cvs-store-display{
      margin-top:10px;
      padding:10px 12px;
      border-radius:10px;
      background:#f3f4f6;
      font-size:13px;
      color:#374151;
      line-height:1.5;
    }
    .cvs-store-name{
      font-weight:600;
      margin-bottom:4px;
    }
    .cvs-store-addr{
      color:#4b5563;
    }
    .cvs-store-empty{
      color:#6b7280;
    }

    .checkout-block .block-header .block-sub{
      font-size:13px;
      color:#6b7280;
      margin-left:8px;
    }

    /* 手機版：簡訊欄位改成上下排，避免超出畫面 */
    @media (max-width: 780px){
      .phone-row,
      .sms-code-row{
        flex-direction: column;
        align-items: stretch;
      }

      .phone-row input,
      .sms-code-row input{
        flex: 1;
        width: 100%;
      }

      .btn-sms{
        width: 100%;
        text-align: center;
        white-space: normal;
      }
    }

    /* 手機板避免點輸入框時被放大（字體 >= 16px） */
    @media (max-width: 768px){
      input[type="text"],
      input[type="tel"],
      input[type="email"],
      input[type="number"],
      input[type="password"],
      textarea,
      select {
        font-size: 16px;
        line-height: 1.4;
      }
    }

    /* ===== 7-11 / 全家切換樣式 ===== */
    .cvs-provider-block + .cvs-provider-block{
      margin-top:10px;
    }

    .family-select-wrap{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:6px;
      margin-bottom:6px;
    }
    .family-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .family-field{
      flex:1 1 0;
      min-width:120px;
      font-size:13px;
    }
    .family-field label{
      display:block;
      margin-bottom:4px;
      color:#6b7280;
    }
    .family-select select{
      width:100%;
      padding:6px 8px;
      border-radius:8px;
      border:1px solid #d1d5db;
      font-size:14px;
      background:#fff;
    }
    .family-select select:focus{
      outline:none;
      border-color:#16a34a;
      box-shadow:0 0 0 1px rgba(22,163,74,.25);
    }
    .family-confirm-btn{
      margin-top:4px;
    }
    @media (max-width: 780px){
      .family-row{
        flex-direction:column;
      }
    }