/* ══════════════════════════════════════════════════════════════
   아토비아 자체 결제 화면 (/pay/)
   WooCommerce 기본 마크업을 아토비아 디자인으로 감싼다.
   토큰은 app.css 를 그대로 쓴다 — 다크 모드가 자동으로 따라온다.
   ══════════════════════════════════════════════════════════════ */

.atovia-pay { background: var(--paper); }

.pay-main { padding: clamp(40px, 6vw, 76px) 0 clamp(64px, 8vw, 104px); }

.pay-head { text-align: center; margin: 0 0 clamp(32px, 4vw, 52px); }
.pay-head .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .2em;
  color: var(--mint-dark); margin: 0 0 10px;
}
.pay-head h1 {
  font-size:clamp(26px,4.0vw,48px); font-weight: 700;
  letter-spacing: -.035em; margin: 0; color: var(--ink);
}

/* ── 공통 판 ───────────────────────────────────────────────── */
.pay-body { max-width: 980px; margin: 0 auto; }

.pay-body .woocommerce-notices-wrapper:empty { display: none; }
.pay-body .woocommerce-info,
.pay-body .woocommerce-message,
.pay-body .woocommerce-error {
  background: var(--surface, var(--white));
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint);
  border-radius: 0 14px 14px 0;
  padding: 16px 20px; margin: 0 0 20px;
  color: var(--ink-soft); font-size: 13px; list-style: none;
}
.pay-body .woocommerce-error { border-left-color: #c25b5b; }
.pay-body a { color: var(--mint-dark); }

/* ── 장바구니 표 ───────────────────────────────────────────── */
.pay-body .shop_table {
  width: 100%; border-collapse: collapse;
  background: var(--surface, var(--white));
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--elev-1, 0 1px 2px rgba(12,32,42,.09));
}
.pay-body .shop_table th,
.pay-body .shop_table td {
  padding: 16px 18px; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft);
}
.pay-body .shop_table th { background: var(--paper); font-weight: 700; color: var(--ink); }
.pay-body .shop_table tr:last-child td { border-bottom: 0; }
.pay-body .product-thumbnail img { width: 64px; border-radius: 14px; }
.pay-body .product-name a { font-weight: 700; color: var(--ink); }
.pay-body .amount { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.pay-body .cart_totals { margin-top: 28px; }
.pay-body .cart_totals h2 {
  font-size: 19px; font-weight: 700; margin: 0 0 14px; color: var(--ink);
}

/* ── 결제 폼 ──────────────────────────────────────────────── */
.pay-body form.checkout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
.pay-body #customer_details,
.pay-body #order_review_heading,
.pay-body #order_review { min-width: 0; }
.pay-body #order_review_heading { grid-column: 2; margin: 0 0 12px; font-size: 19px; font-weight: 700; }
.pay-body #order_review { grid-column: 2; }
.pay-body #customer_details { grid-column: 1; grid-row: 1 / span 2; }

.pay-body h3 { font-size: 19px; font-weight: 700; margin: 0 0 16px; color: var(--ink); }

.pay-body .woocommerce-billing-fields,
.pay-body .woocommerce-additional-fields,
.pay-body #order_review {
  background: var(--surface, var(--white));
  border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 24px; margin: 0 0 20px;
  box-shadow: var(--elev-1, 0 1px 2px rgba(12,32,42,.09));
}

.pay-body .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; }
.pay-body .form-row label {
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.pay-body .form-row .required { color: #c25b5b; text-decoration: none; }
.pay-body .input-text,
.pay-body select,
.pay-body textarea,
.pay-body .select2-selection {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 16px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.pay-body .input-text:focus,
.pay-body select:focus,
.pay-body textarea:focus {
  outline: none; border-color: var(--mint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 22%, transparent);
}
.pay-body ::placeholder { color: var(--muted); }

/* ── 결제 수단 ─────────────────────────────────────────────── */
.pay-body .wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.pay-body .wc_payment_method > label {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink);
  transition: border-color .18s, background .18s;
}
.pay-body .wc_payment_method input:checked + label {
  border-color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, transparent);
}
.pay-body .payment_box {
  margin: 8px 0 0; padding: 14px 16px; font-size: 13px; line-height: 1.7;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px;
}

/* ── 버튼 ─────────────────────────────────────────────────── */
.pay-body .button,
.pay-body #place_order,
.pay-body .checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--mint), var(--mint-dark));
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 58%),
                    linear-gradient(180deg, var(--mint), var(--mint-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 6px rgba(0,0,0,.16),
              0 14px 32px -12px color-mix(in srgb, var(--mint) 62%, transparent);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.pay-body #place_order,
.pay-body .checkout-button { width: 100%; }
.pay-body .button:hover,
.pay-body #place_order:hover,
.pay-body .checkout-button:hover { transform: translateY(-2px); }
.pay-body .button:active,
.pay-body #place_order:active { transform: translateY(0); }

/* ── 약관 ─────────────────────────────────────────────────── */
.pay-body .woocommerce-terms-and-conditions-wrapper { margin: 0 0 18px; }
.pay-body .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.pay-body .woocommerce-form__label-for-checkbox {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-soft);
}

/* ── 로그인 안내 ───────────────────────────────────────────── */
.pay-body .woocommerce-form-login {
  background: var(--surface, var(--white)); border: 1px solid var(--line);
  border-radius: 20px; padding: 22px 24px; margin: 0 0 20px;
}

/* ── 빈 장바구니 ───────────────────────────────────────────── */
.pay-body .cart-empty {
  text-align: center; font-size: 16px; font-weight: 700; color: var(--ink);
  padding: 52px 20px 12px;
}
.pay-body .return-to-shop { text-align: center; padding: 0 0 52px; }

@media (max-width: 900px) {
  .pay-body form.checkout { grid-template-columns: 1fr; }
  .pay-body #customer_details,
  .pay-body #order_review_heading,
  .pay-body #order_review { grid-column: 1; grid-row: auto; }
  .pay-body .shop_table { display: block; overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════
   WooCommerce 기본 스타일 덮어쓰기
   woocommerce.css 가 라벨·알림·입력창 색을 직접 지정해 다크에서 묻힌다.
   구체성을 맞춰 확실히 이기게 한다.
   ══════════════════════════════════════════════════════════════ */
.atovia-pay .pay-head h1,
.atovia-pay .pay-body h2,
.atovia-pay .pay-body h3,
.atovia-pay .pay-body label,
.atovia-pay .pay-body .form-row label,
.atovia-pay .pay-body th,
.atovia-pay .pay-body legend { color: var(--ink) !important; }

.atovia-pay .pay-body,
.atovia-pay .pay-body p,
.atovia-pay .pay-body td,
.atovia-pay .pay-body li,
.atovia-pay .pay-body small { color: var(--ink-soft) !important; }

/* 기본 알림(파란 띠)을 아토비아 톤으로 */
.atovia-pay .woocommerce-info,
.atovia-pay .woocommerce-message,
.atovia-pay .woocommerce-error,
.atovia-pay .woocommerce form.login,
.atovia-pay .woocommerce form.checkout_coupon {
  background: var(--surface, var(--white)) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--mint) !important;
  border-radius: 0 14px 14px 0 !important;
  color: var(--ink-soft) !important;
}
.atovia-pay .woocommerce-info::before,
.atovia-pay .woocommerce-message::before,
.atovia-pay .woocommerce-error::before { display: none !important; }
.atovia-pay .woocommerce-error { border-left-color: #c25b5b !important; }

/* 입력창 — 다크에서 흰 상자로 남지 않게 */
.atovia-pay .pay-body input[type="text"],
.atovia-pay .pay-body input[type="email"],
.atovia-pay .pay-body input[type="tel"],
.atovia-pay .pay-body input[type="password"],
.atovia-pay .pay-body input[type="number"],
.atovia-pay .pay-body textarea,
.atovia-pay .pay-body select,
.atovia-pay .pay-body .select2-container .select2-selection--single {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  height: auto !important;
  min-height: 46px;
}
.atovia-pay .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important; line-height: 44px !important;
}
.atovia-pay .select2-dropdown {
  background: var(--surface, var(--white)) !important;
  border-color: var(--line) !important; color: var(--ink) !important;
}

/* 표 */
.atovia-pay .pay-body table.shop_table,
.atovia-pay .pay-body table.shop_table td,
.atovia-pay .pay-body table.shop_table th {
  background: transparent !important; border-color: var(--line) !important;
}
.atovia-pay .pay-body table.shop_table { background: var(--surface, var(--white)) !important; }
.atovia-pay .pay-body table.shop_table thead th { background: var(--paper) !important; }

/* 링크 대비 */
.atovia-pay .pay-body a { color: var(--mint-dark) !important; }
.atovia-pay .woocommerce-info a { color: var(--mint-dark) !important; font-weight: 700; }

/* 주문요약 강조 */
.atovia-pay #order_review { position: sticky; top: 96px; }
@media (max-width: 900px) { .atovia-pay #order_review { position: static; } }