/* ============================================================================
 * themes/kgtwbeef/pages/shoppingCart.css — kgtwbeef 主題購物車「顏色 + 視覺修飾」精簡版
 * ============================================================================
 *
 * 策略（task 9.8 修訂 v2）：
 *   原 task 9.8 完整抽取 kgtwbeef.css line 8073-10011 共 2197 行，user 實測差異仍大 → user 決策
 *   購物車流程以 common（default）的 layout / 結構為主，kgtwbeef 主題僅覆寫品牌色與視覺修飾。
 *
 * 本檔生成方式（/tmp/extract_v4.php）：
 *   讀原 kgtwbeef.css line 8073-10011（dev-checkout + dev-confirm 全段），逐 selector 對比
 *   common/pages/shoppingCart.css，依下列規則過濾：
 *     1. 顏色屬性差異 → 保留（background / color / border-color / box-shadow / opacity）
 *     2. 視覺修飾屬性差異 → 保留（border-radius / transition / filter / border 含色 shorthand）
 *     3. kgtwbeef 專屬 selector（common 沒有的）→ 整條保留
 *     4. 視覺強識別元素（submit-btn / coupon-btn / progress-index / btnNormal.red 等）→ 全屬性保留
 *
 * 已過濾：padding / margin / width / height / display / flex / grid / border-width /
 *         border-style / font-* / line-height / text-* / position / transform 等純結構類
 * 已保留：上述顏色 + border-radius + transition + box-shadow + opacity
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 9.8 修訂 v2）
 * ============================================================================
 */


.dev-checkout-page {
  background: transparent;
  color: #553500;
}

.dev-checkout-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(209, 173, 75, 0.3);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(90, 74, 50, 0.08);
}

.dev-checkout-progress-card {
  background: rgba(255, 255, 255, 0.98);
}

.dev-checkout-progress li {
  color: #b7a07b;
}

.dev-checkout-progress li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(210, 173, 75, 0.42);
  z-index: 0;
}

.dev-checkout-progress-index {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(195, 153, 107, 0.65);
  border-radius: 999px;
  background: #fffdfa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  color: #a06400;
  box-shadow: 0 0 0 6px rgba(255, 251, 246, 0.92);
}

.dev-checkout-progress-text {
  background: transparent;
  color: #553500;
}

.dev-checkout-progress li.is-completed {
  color: #553500;
}

.dev-checkout-progress li.is-current {
  color: #553500;
}

.dev-checkout-progress li.is-completed .dev-checkout-progress-index {
  background: #d1ad4b;
  border-color: #d1ad4b;
  color: #ffffff;
}

.dev-checkout-progress li.is-current .dev-checkout-progress-index {
  border-color: #d2ad4b;
  color: #a06400;
}

.dev-checkout-progress li.is-completed::before {
  background: linear-gradient(90deg, #d1ad4b 0%, #b8892e 100%);
}

.dev-checkout-progress li.is-current::before {
  background: linear-gradient(90deg, #d1ad4b 0%, #b8892e 100%);
}

.dev-checkout-temperature-alert {
  border: 1px solid rgba(210, 173, 75, 0.45);
  background: rgba(255, 251, 244, 0.98);
  border-left: 4px solid #d1ad4b;
}

.dev-checkout-alert-icon {
  border-radius: 999px;
  background: rgba(210, 173, 75, 0.24);
  color: #a06400;
}

.dev-checkout-alert-content h3 {
  color: #553500;
}

.dev-checkout-alert-content p {
  color: #8a6c3d;
}

.dev-checkout-mixed-badge {
  border-radius: 999px;
  background: #b8892e;
  box-shadow: 0 8px 18px rgba(184, 137, 46, 0.16);
}

.dev-checkout-block-head h2 {
  color: #553500;
}

.dev-checkout-item-count {
  color: #8a6c3d;
}

.dev-checkout-temperature-group {
  border: 1px solid rgba(209, 173, 75, 0.26);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dev-checkout-temperature-head {
  border-bottom: 1px solid rgba(209, 173, 75, 0.18);
  background: linear-gradient(180deg, rgba(251, 244, 232, 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.dev-checkout-temperature-head:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(196, 152, 73, 0.62);
}

.dev-checkout-temperature-head h3 {
  color: #553500;
}

.dev-checkout-temperature-tag {
  border-radius: 999px;
}

.dev-checkout-temperature-group.is-room .dev-checkout-temperature-head {
  background: #f8f8f8;
}

.dev-checkout-temperature-group.is-chilled .dev-checkout-temperature-head {
  background: #eef8ff;
}

.dev-checkout-temperature-group.is-frozen .dev-checkout-temperature-head {
  background: #edf2ff;
}

.dev-checkout-item {
  border-bottom: 1px solid rgba(209, 173, 75, 0.16);
}

.dev-checkout-item-thumb {
  border-radius: 12px;
  border: 1px solid rgba(209, 173, 75, 0.22);
}

.dev-checkout-item-main h4 {
  color: #553500;
}

.dev-checkout-item-main p {
  color: #8a6c3d;
}

.dev-checkout-item-price {
  color: #5a4a32;
}

.dev-checkout-item-subtotal {
  color: #5a4a32;
}

.dev-checkout-shipping-group {
  border: 1px solid rgba(209, 173, 75, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
}

.dev-checkout-shipping-group-head strong {
  color: #553500;
}

.dev-checkout-shipping-select-desc {
  color: #8a6c3d;
}

.dev-checkout-subtitle {
  color: #553500;
}

.dev-checkout-option-note {
  color: #8a6c3d;
}

.dev-checkout-form-section + .dev-checkout-form-section {
  border-top: 1px solid rgba(186, 155, 109, 0.2);
}

.dev-checkout-form-section-head h3 {
  color: #553500;
}

.dev-checkout-copy-toggle {
  border: 1px solid rgba(209, 173, 75, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.dev-checkout-copy-toggle span {
  color: #553500;
}

.dev-checkout-copy-toggle small {
  color: #8a6c3d;
}

.dev-checkout-form-group label {
  color: #553500;
}

.dev-checkout-input {
  border: 1px solid rgba(209, 173, 75, 0.24);
  border-radius: 10px;
  color: #553500;
}

.dev-checkout-select {
  border: 1px solid rgba(209, 173, 75, 0.24);
  border-radius: 10px;
  color: #553500;
}

.dev-checkout-textarea {
  border: 1px solid rgba(209, 173, 75, 0.24);
  border-radius: 10px;
  color: #553500;
}

.dev-checkout-input:focus {
  border-color: #d1ad4b;
  box-shadow: 0 0 0 3px rgba(209, 173, 75, 0.14);
}

.dev-checkout-select:focus {
  border-color: #d1ad4b;
  box-shadow: 0 0 0 3px rgba(209, 173, 75, 0.14);
}

.dev-checkout-textarea:focus {
  border-color: #d1ad4b;
  box-shadow: 0 0 0 3px rgba(209, 173, 75, 0.14);
}

.dev-checkout-form-group.is-error .dev-checkout-input {
  border-color: #b42318;
}

.dev-checkout-form-group.is-error .dev-checkout-select {
  border-color: #b42318;
}

.dev-checkout-form-group.is-error .dev-checkout-textarea {
  border-color: #b42318;
}

.dev-checkout-error-text {
  color: #b42318;
}

.dev-checkout-char-count {
  color: #7c6a52;
}

.dev-checkout-receiver-sync-field.is-locked {
  background: rgba(248, 240, 227, 0.8);
  color: #7c6a52;
}

.dev-checkout-receiver-sync-field[readonly] {
  background: rgba(248, 240, 227, 0.8);
  color: #7c6a52;
}

.dev-checkout-receiver-sync-field:disabled {
  background: rgba(248, 240, 227, 0.8);
  color: #7c6a52;
}

.dev-checkout-store-box {
  border: 1px dashed rgba(209, 173, 75, 0.56);
  border-radius: 12px;
  background: rgba(251, 244, 232, 0.42);
}

.dev-checkout-summary h2 {
  color: #553500;
}

.dev-checkout-summary-list {
  border-bottom: 1px solid rgba(209, 173, 75, 0.18);
}

.dev-checkout-summary-row {
  color: #8a6c3d;
}

.dev-checkout-summary-row span:last-child {
  color: #5a4a32;
}

.dev-checkout-summary-row.is-discount span:last-child {
  color: #8f5f18;
}

.dev-checkout-summary-method {
  border-bottom: 1px solid rgba(209, 173, 75, 0.18);
}

.dev-checkout-summary-method-row {
  color: #553500;
}

.dev-checkout-summary-method-row strong {
  color: #5a4a32;
}

.dev-checkout-summary-shipping-item {
  color: #8a6c3d;
}

.dev-checkout-summary-shipping-status {
  color: #8a6c3d;
}

.dev-checkout-summary-payment-hint {
  color: #8a6c3d;
}

.dev-checkout-summary-total span {
  color: #5a4a32;
}

.dev-checkout-summary-total strong {
  color: #5a4a32;
}

.dev-checkout-summary-warning {
  border-radius: 12px;
  border: 1px solid rgba(232, 56, 12, 0.22);
  background: rgba(255, 244, 241, 0.96);
  border-left: 4px solid #e8380c;
}

.dev-checkout-summary-warning i {
  color: #b42318;
}

.dev-checkout-summary-warning p {
  color: #b42318;
}

.dev-checkout-submit-btn {
  max-width: 100%;
  width: 100%;
  margin: 0;
  font-size: 15px;
  padding: 12px 20px;
}

#page-content .dev-checkout-qty-editor {
  border: 1px solid rgba(209, 173, 75, 0.42);
  border-radius: 999px;
}

#page-content .dev-checkout-qty-btn {
  background: rgba(251, 244, 232, 0.92);
  color: #8a6c3d;
}

#page-content .dev-checkout-qty-input {
  color: #553500;
  background: transparent;
}

#page-content .dev-checkout-item-remove-btn {
  border: 1px solid rgba(209, 173, 75, 0.56);
  border-radius: 999px;
  color: #8a6c3d;
}

.breadcrumbs-section.dev-checkout-breadcrumbs {
  background: transparent;
}

.dev-checkout-summary {
  background: rgba(255, 255, 255, 0.98);
  border-top: 4px solid #d2ad4b;
}

.dev-checkout-collapse-btn {
  border: 1px solid #c3996b;
  border-radius: 999px;
  background: #fffdfa;
  color: #8a6c3d;
}

.dev-checkout-collapse-btn:hover {
  background: #b8892e;
  border-color: #b8892e;
}

.dev-checkout-temperature-group.is-room .dev-checkout-temperature-tag {
  background: #8a6c3d;
}

.dev-checkout-temperature-group.is-chilled .dev-checkout-temperature-tag {
  background: #5182a3;
}

.dev-checkout-temperature-group.is-frozen .dev-checkout-temperature-tag {
  background: #3e5978;
}

.dev-checkout-summary-coupon-head small {
  color: #8a6c3d;
}

.dev-checkout-summary-coupon-status {
  color: #8a6c3d;
}

.dev-checkout-summary-coupon-head span {
  color: #553500;
}

.dev-checkout-input::placeholder {
  color: #b89f7d;
}

.dev-checkout-textarea::placeholder {
  color: #b89f7d;
}

.dev-checkout-shipping-select-wrap.is-error .dev-checkout-select {
  border-color: #b42318;
}

.dev-checkout-summary-payment-hint.is-error {
  color: #b42318;
}

.dev-checkout-summary-select-wrap.is-error .dev-checkout-select {
  border-color: #b42318;
}

.dev-checkout-summary-coupon {
  border-bottom: 1px solid rgba(209, 173, 75, 0.18);
}

#page-content .dev-checkout-summary-coupon-input {
  min-width: 0;
}

#page-content .dev-checkout-summary-coupon-btn {
  border-radius: 999px;
  border-color: #d1ad4b;
  background: #d1ad4b;
  color: #ffffff;
  min-width: 86px;
  width: auto;
  max-width: none;
  min-height: 44px;
  padding: 0 18px !important;
  margin: 0 !important;
  justify-self: end;
}

#page-content .dev-checkout-submit-btn {
  border-radius: 999px;
  border-color: #d1ad4b;
  background: #d1ad4b;
  color: #ffffff;
  margin-right: 0 !important;
}

#page-content .dev-checkout-summary-coupon-btn:hover {
  background: #b8892e;
  border-color: #b8892e;
  color: #ffffff;
}

#page-content .dev-checkout-submit-btn:hover {
  background: #b8892e;
  border-color: #b8892e;
  color: #ffffff;
}

.dev-checkout-summary-coupon-status.is-success {
  color: #4f6f3d;
}

.dev-checkout-summary-shipping-status.is-merged {
  color: #4f6f3d;
}

.dev-checkout-summary-coupon-status.is-error {
  color: #b42318;
}

.dev-checkout-summary-shipping-status.is-split {
  color: #b42318;
}

#page-content .dev-checkout-qty-btn:hover {
  background: #d1ad4b;
  color: #ffffff;
}

#page-content .dev-checkout-item-remove-btn:hover {
  background: #d1ad4b;
  border-color: #d1ad4b;
  color: #ffffff;
}

.dev-checkout-item.is-out-of-stock {
  opacity: 1;
  background: repeating-linear-gradient(
    -45deg,
    rgba(107, 114, 128, 0.05),
    rgba(107, 114, 128, 0.05) 6px,
    transparent 6px,
    transparent 14px
  );
  border-bottom-color: rgba(107, 114, 128, 0.08);
}

.dev-checkout-item.is-out-of-stock .dev-checkout-item-thumb {
  opacity: 0.35;
}

.dev-checkout-item.is-out-of-stock .dev-checkout-item-main h4 {
  opacity: 0.35;
}

.dev-checkout-item.is-out-of-stock .dev-checkout-item-main p {
  opacity: 0.35;
}

.dev-checkout-item.is-out-of-stock .dev-checkout-item-price {
  opacity: 0.35;
}

.dev-checkout-item.is-out-of-stock .dev-checkout-item-subtotal {
  opacity: 0.35;
}

.dev-checkout-item.is-out-of-stock .dev-checkout-stock-hint.is-out {
  font-weight: 600;
  color: #6b7280;
}

.dev-checkout-action-wrap {
  display: flex;
  width: 100%;
  margin-top: 1rem;
  gap: 15px;
}

.dev-checkout-action-wrap .btn {
  flex: 1 !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 15px !important;
  height: auto !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.dev-checkout-action-wrap .btn-submit {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
}

.dev-checkout-action-wrap .btn-secondary {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}

.dev-checkout-submit-btn.is-processing {
  pointer-events: none;
  opacity: 0.8;
}

@media (max-width: 991px) {
.dev-checkout-block-head {
  align-items: stretch;
}

#page-content .dev-checkout-item-subtotal-wrap {
  justify-content: flex-start;
}

#page-content .dev-checkout-summary-coupon-btn {
  width: 100%;
  justify-self: stretch;
}

}

@media (max-width: 767px) {
.dev-checkout-progress li::before {
  left: -42%;
  width: 84%;
}

#page-content .dev-checkout-item-subtotal-wrap {
  grid-area: subtotal;
  justify-content: space-between !important;
  align-items: center;
  width: 100%;
  min-width: 0;
}

}

@media (max-width: 480px) {
.dev-checkout-progress-index {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

#page-content .dev-checkout-qty-editor {
  width: 126px;
  min-width: 126px;
}

}