/*
Theme Name: ErgoCraft Child
Theme URI: https://ergocraft.vamtam.com
Description: Child theme of ErgoCraft, dibuat khusus untuk menampung customisasi lokal (termasuk override template WooCommerce checkout) tanpa risiko tertimpa saat parent theme di-update.
Author: Latif Payment Gateway Project
Template: ergocraft
Version: 1.0.0
Text Domain: ergocraft-child
*/

/* ==========================================================================
   Checkout — polish tambahan di atas layout native Elementor Pro
   ("Checkout" widget). JANGAN ubah `display`/grid pada `form.checkout`
   atau `.e-checkout__container` — widget ini SUDAH punya CSS grid 2 kolom
   (lihat: wp-content/plugins/elementor-pro/assets/css/
   widget-woocommerce-checkout-page.min.css) beserta sticky sidebar
   (.e-sticky-right-column) dan card putih bawaan untuk elemen:
   .shipping_address, .woocommerce-additional-fields, #payment,
   .e-checkout__order_review, .e-coupon-box. Aturan di file ini hanya
   menambah polish (heading, spacing halus, highlight metode bayar) tanpa
   membuat wrapper/kartu baru yang menumpuk di atas kartu native tersebut.
   ========================================================================== */

.woocommerce-checkout {
  --ergo-checkout-border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Kupon dinonaktifkan via functions.php — sembunyikan sisa UI (Elementor
   coupon box, form cart/checkout, Modern Cart, Power Coupons). */
.e-coupon-box,
.woocommerce-form-coupon-toggle,
form.checkout_coupon,
.woocommerce-cart .coupon,
.cart .coupon,
.moderncart-have-coupon-code-area,
#moderncart-coupon-form-container,
.moderncart-coupon-form,
.power-coupons-drawer-trigger-wrapper,
.power-coupons-view-coupons-btn,
.power-coupons-drawer,
.power-coupons-section,
.power-coupons-list {
  display: none !important;
}

/* Section titles (dipakai di heading "Shipping details" & "Your order") */
.ergocraft-checkout-section-title {
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--ergo-checkout-border);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Rapikan urutan di dalam field wrapper (billing_email + field shipping) */
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* Order summary table: rapikan garis & spacing tanpa mengubah lebar/posisi kolom */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  tfoot
  tr.order-total
  th,
.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  tfoot
  tr.order-total
  td {
  font-weight: 600;
  font-size: 1.05em;
}

/* Payment methods: highlight halus pada metode yang sedang dipilih */
.ergocraft-checkout-payment .wc_payment_methods {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.ergocraft-checkout-payment .wc_payment_method {
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.ergocraft-checkout-payment
  .wc_payment_method
  > input[type="radio"]:checked
  + label {
  font-weight: 600;
}

.ergocraft-checkout-payment
  .wc_payment_method:has(> input[type="radio"]:checked) {
  background: rgba(0, 0, 0, 0.03);
}

.ergocraft-checkout-payment .place-order {
  margin-top: 1.25rem;
}

.ergocraft-checkout-payment #place_order {
  width: 100%;
  margin-top: 0.5rem;
}

/* ==========================================================================
   Checkout — Monokrom (hitam / putih / abu-abu) + Flat (border-radius 0)

   Permintaan: hilangkan semua warna biru & buat semua sudut kotak jadi 0
   (tidak rounded). Sumber warna biru di checkout ini berasal dari CSS
   HARDCODE (bukan setting yang bisa diubah dari wp-admin) di beberapa
   plugin, jadi semua di-override di sini pakai !important supaya pasti
   menang:
   - Tombol "Place order" (elementor-pro/.../widget-woocommerce-checkout-page.min.css
     → #place_order { background-color:#5bc0de } )
   - Garis bawah kotak "Select Shipping Method"
     (woocommerce-jne/assets/css/agenwebsite-shipping.css
     → .aw-shipping-label-header { border-bottom: 2px solid #4a90e2 } )
   - Warna aksen bulatan radio/checkbox bawaan browser (belum pernah di-set,
     jadi browser pakai warna biru sistem secara default)
   - Warna link & border fokus input bawaan Elementor/select2
   ========================================================================== */

.woocommerce-checkout {
  --ergo-mono-black: #1a1a1a;
  --ergo-mono-dark-gray: #444444;
  --ergo-mono-gray: #8a8a8a;
  --ergo-mono-light-gray: #d9d9d9;
  --ergo-mono-bg-gray: #f5f5f5;
}

/* Flat corners di seluruh halaman checkout — tidak ada border-radius */
.woocommerce-checkout,
.woocommerce-checkout *,
.woocommerce-checkout *::before,
.woocommerce-checkout *::after {
  border-radius: 0 !important;
}

/* Link: hitam/abu-abu tua + garis bawah, tidak ada biru */
.woocommerce-checkout a {
  color: var(--ergo-mono-black);
}

.woocommerce-checkout a:hover,
.woocommerce-checkout a:focus {
  color: #000;
}

/* Radio & checkbox: aksen hitam, bukan biru bawaan browser */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--ergo-mono-black);
}

/* Border/outline saat focus di input, select, textarea */
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout
  .select2-container--default.select2-container--focus
  .select2-selection,
.woocommerce-checkout
  .select2-container--default.select2-container--open
  .select2-selection {
  border-color: var(--ergo-mono-black) !important;
  outline-color: var(--ergo-mono-black) !important;
  box-shadow: none !important;
}

.woocommerce-checkout
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ergo-mono-black) !important;
  color: #fff !important;
}

/* Tombol umum di dalam checkout (mis. "Update totals") */
.woocommerce-checkout .button,
.woocommerce-checkout button.woocommerce-button,
.woocommerce-checkout input.button {
  background-color: var(--ergo-mono-black) !important;
  border-color: var(--ergo-mono-black) !important;
  color: #fff !important;
}

.woocommerce-checkout .button:hover,
.woocommerce-checkout button.woocommerce-button:hover,
.woocommerce-checkout input.button:hover {
  background-color: var(--ergo-mono-dark-gray) !important;
  border-color: var(--ergo-mono-dark-gray) !important;
  color: #fff !important;
}

/* Tombol "Place order" — defaultnya biru (#5bc0de) dari Elementor Pro */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #payment #place_order:hover {
  background-color: var(--ergo-mono-black) !important;
  border-color: var(--ergo-mono-black) !important;
  color: #fff !important;
}

.woocommerce-checkout #payment #place_order:hover {
  background-color: var(--ergo-mono-dark-gray) !important;
}

/* Header "Select Shipping Method" dari plugin woocommerce-jne — defaultnya
   garis bawah biru (#4a90e2) di atas background biru muda */
.woocommerce-checkout .aw-shipping-label-header {
  background: var(--ergo-mono-bg-gray) !important;
  border: 1px solid var(--ergo-mono-light-gray) !important;
  border-bottom: 2px solid var(--ergo-mono-black) !important;
}

.woocommerce-checkout .aw-shipping-title,
.woocommerce-checkout .aw-shipping-subtitle {
  color: var(--ergo-mono-black) !important;
}

.woocommerce-checkout .aw-shipping-label-footer {
  background: var(--ergo-mono-bg-gray) !important;
  border-color: var(--ergo-mono-light-gray) !important;
}

.woocommerce-checkout .woocommerce-shipping-methods.aw-enhanced > li {
  border-color: var(--ergo-mono-light-gray) !important;
}

/* Popup pemilih Provinsi/Kota/Kecamatan (JNE) — border fokus & spinner biru */
.aw-location-modal input:focus,
.aw-location-modal select:focus,
.aw-modal input:focus,
.aw-modal select:focus {
  border-color: var(--ergo-mono-black) !important;
  box-shadow: none !important;
}

.aw-loading-spinner,
.aw-spinner {
  border-top-color: var(--ergo-mono-black) !important;
}

/* Beri jarak dari tepi kanan untuk label & harga di baris shipping pada tabel
   "Your order" (default dari tema ergocraft: right: 0, mepet ke tepi) */
.elementor-widget-woocommerce-checkout-page.vamtam-has-theme-widget-styles
  .woocommerce
  .shop_table
  tr.woocommerce-shipping-totals.shipping
  :is(.tax_label, .woocommerce-Price-amount) {
  right: 10px !important;
}

/* ==========================================================================
   Order Pay ("order-receipt.php") & Thank You ("thankyou.php"/"order-received.php")

   CATATAN: Halaman-halaman ini TIDAK dibungkus form/div ".e-checkout__container"
   milik Elementor (hook grid 2 kolomnya hanya jalan di halaman checkout awal),
   tapi WooCommerce tetap menambahkan class body "woocommerce-checkout" di SEMUA
   halaman keluarga checkout (checkout, order-pay, order-received) lewat
   `is_checkout()`. Jadi semua rule ".woocommerce-checkout ..." di atas (monokrom,
   flat border-radius, dst) OTOMATIS berlaku juga di sini tanpa perlu diulang.
   Bagian di bawah ini hanya menambah layout (lebar & spacing) + styling khusus
   elemen yang cuma ada di halaman-halaman ini.
   ========================================================================== */

/* Kartu putih generik — dipakai di halaman order-pay & thank you yang TIDAK
   punya elemen native Elementor untuk di-cardkan otomatis (beda dengan
   .shipping_address / #payment / dst di halaman checkout awal) */
.ergocraft-checkout-card {
  background: #fff;
  border: 1px solid var(--ergo-mono-light-gray, #d5d8dc);
  padding: 1.5rem;
}

/* Batasi lebar & tengahkan konten, karena halaman ini tidak punya grid 2 kolom */
.woocommerce-order-pay .woocommerce,
.woocommerce-order-received .woocommerce-order,
.woocommerce-checkout .ergocraft-receipt {
  max-width: 640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Mobile: full width + padding kiri/kanan supaya kartu tidak mepet tepi layar */
@media (max-width: 767px) {
  .woocommerce-order-pay .woocommerce,
  .woocommerce-order-received .woocommerce-order,
  .woocommerce-checkout .ergocraft-receipt {
    max-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.ergocraft-receipt {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ergocraft-receipt-note {
  color: var(--ergo-mono-gray);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

/* List "Order Summary" / "Order Details" jadi baris-baris rapi dengan pemisah.
   Override kuat terhadap default WooCommerce (`ul.order_details li` float +
   border-right dashed) supaya tiap baris full width label kiri / value kanan. */
.ergocraft-receipt-details,
.woocommerce-checkout .ergocraft-receipt-details,
.woocommerce ul.order_details.ergocraft-receipt-details {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
}

.ergocraft-receipt-details::before,
.ergocraft-receipt-details::after,
.woocommerce ul.order_details.ergocraft-receipt-details::before,
.woocommerce ul.order_details.ergocraft-receipt-details::after {
  content: none;
  display: none;
}

.ergocraft-receipt-details li,
.woocommerce ul.order_details.ergocraft-receipt-details li {
  float: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.75rem 0;
  border-right: none;
  border-bottom: 1px solid var(--ergo-mono-light-gray, #e5e5e5);
  box-sizing: border-box;
  color: var(--ergo-mono-gray, #8a8a8a);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.ergocraft-receipt-details li:last-child,
.woocommerce ul.order_details.ergocraft-receipt-details li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ergocraft-receipt-details li strong,
.woocommerce ul.order_details.ergocraft-receipt-details li strong {
  display: inline;
  color: var(--ergo-mono-black, #1a1a1a);
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
}

/* Tombol "Proceed To Payment" dari plugin Midtrans (id #pay-button) */
.ergocraft-receipt-payment-action {
  text-align: center;
}

.ergocraft-receipt-payment-action #pay-button {
  display: inline-block;
  min-width: 240px;
}

.ergocraft-receipt-payment-action #payment-instruction {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ergo-mono-light-gray, #e5e5e5);
  text-align: left;
}

.ergocraft-receipt-payment-action #payment-instruction p {
  color: var(--ergo-mono-gray, #8a8a8a);
  line-height: 1.6;
}

/* Hero "Thank you" — ikon centang + pesan sukses */
.ergocraft-order-received-hero {
  text-align: center;
  padding: 1rem 0 1.75rem;
}

.ergocraft-order-received-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 0;
  color: var(--ergo-mono-black, #1a1a1a);
  margin-bottom: 1rem;
}

.ergocraft-order-received-message.woocommerce-notice--success {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ergo-mono-black, #1a1a1a);
  text-align: center;
}

/* State "order failed" — tetap pakai aksen merah standar untuk kejelasan makna error,
   tapi kartu & tombolnya tetap ikut gaya flat/monokrom yang sama */
.ergocraft-order-failed-card .woocommerce-notice--error {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

.ergocraft-order-failed-card .woocommerce-thankyou-order-failed-actions {
  margin: 0;
  display: flex;
  gap: 0.75rem;
}

.ergocraft-order-failed-card .button.pay {
  background-color: var(--ergo-mono-black, #1a1a1a) !important;
  border-color: var(--ergo-mono-black, #1a1a1a) !important;
  color: #fff !important;
  padding: 0.75rem 1.5rem;
}

/* ==========================================================================
   Popup "Provinsi/Kota/Kecamatan" (plugin woocommerce-jne) — samakan font +
   selaraskan ke gaya flat/monokrom checkout
   ==========================================================================
   Sumber: wp-content/plugins/woocommerce-jne/assets/js/agenwebsite-shipping.js
   (fungsi awCityPopup.createPopup(), muncul saat field "Provinsi/Kota/Kecamatan"
   di-klik) + CSS aslinya di
   wp-content/plugins/woocommerce-jne/assets/css/agenwebsite-shipping.css.
   CSS asli plugin sengaja pakai `all: initial !important` supaya "theme-proof"
   (kebal dari CSS tema), lalu font-family di-set ke system-font stack
   (`-apple-system, BlinkMacSystemFont, "Segoe UI", ...`) — beda jauh dari
   font situs ini ("Inter", dimuat via Google Fonts). Selector di bawah ini
   sengaja ditulis PERSIS sama (ID + class + urutan) & tetap pakai `!important`
   supaya spesifisitasnya menang lawan CSS plugin (menang karena dienqueue
   setelahnya, sesuai urutan file di <head>).
   Kalau plugin di-update dan struktur popup berubah, cek ulang selector di
   agenwebsite-shipping.css & sesuaikan blok ini. Dicatat juga di
   wp-content/WOOCOMMERCE-CHECKOUT-OVERRIDE-NOTES.md. */

#aw-city-popup-overlay.aw-city-popup-overlay,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-header,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-title,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-close,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-search-input,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-result-item,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-result-text,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-loading,
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-no-results {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

/* Flat corners + border monokrom, konsisten dengan seluruh halaman checkout */
#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup {
  border-radius: 0 !important;
  border-color: var(--ergo-mono-black, #1a1a1a) !important;
}

#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-title {
  font-weight: 700 !important;
  color: var(--ergo-mono-black, #1a1a1a) !important;
}

#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-close {
  border-radius: 0 !important;
}

#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-close:focus {
  outline-color: var(--ergo-mono-black, #1a1a1a) !important;
}

#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-search-input {
  border-radius: 0 !important;
}

#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-search-input:focus {
  border-color: var(--ergo-mono-black, #1a1a1a) !important;
  box-shadow: 0 0 0 1px var(--ergo-mono-black, #1a1a1a) !important;
}

#aw-city-popup-overlay.aw-city-popup-overlay .aw-city-loading-spinner {
  border-top-color: var(--ergo-mono-black, #1a1a1a) !important;
}

/* Scroll-lock: class `ergocraft-aw-popup-open` di <html> ditambahkan/dilepas
   otomatis oleh assets/js/aw-city-popup-enhance.js mengikuti class `.show`
   di #aw-city-popup-overlay (deteksi lewat MutationObserver, tanpa perlu
   edit JS plugin). Tanpa ini, konten DI BELAKANG popup tetap bisa di-scroll
   jari user di mobile walau popup-nya sendiri full-screen — terasa "buggy". */
html.ergocraft-aw-popup-open,
html.ergocraft-aw-popup-open body {
  overflow: hidden !important;
}

/* ===== Polish mobile: popup jadi "bottom sheet" full-height yang lebih
   natural (slide-up, bukan scale-in dari tengah layar), target sentuh
   diperbesar, & aman dari notch/home-indicator (safe-area-inset). Cuma
   berlaku di layar sempit; di desktop tampilan popup tetap seperti sebelumnya
   (dialog scale-in di tengah, sudah diatur CSS plugin). ===== */
@media (max-width: 600px) {
  #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 88vh !important;
    max-height: none !important;
    transform: translateY(100%) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    transition: transform 0.3s ease !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  #aw-city-popup-overlay.aw-city-popup-overlay.show .aw-city-popup {
    transform: translateY(0) !important;
  }

  /* Drag-handle visual (murni dekoratif, tanpa fungsi drag) supaya sekilas
     terlihat seperti bottom sheet native yang familiar buat user mobile */
  #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-header {
    padding-top: 22px !important;
  }

  #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-header::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 4px !important;
    background: var(--ergo-mono-light-gray, #d9d9d9) !important;
  }

  /* Target sentuh lebih besar & nyaman di jari (Apple/Google HIG: minimal ~44px) */
  #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-popup-close {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-result-item {
    padding: 16px 20px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #aw-city-popup-overlay.aw-city-popup-overlay .aw-city-search-input {
    padding: 14px 16px !important;
  }
}

/* ==========================================================================
   Thank You page — kartu "Order Items" (tabel produk) + "Billing/Shipping
   Address" + kotak "Payment Info" dari plugin Midtrans
   ==========================================================================
   Sumber template: wp-content/themes/ergocraft-child/woocommerce/order/order-details.php
   & order-details-customer.php (override dari WooCommerce core, sebelumnya
   belum pernah di-override sehingga tampilannya masih mentah/bawaan plugin —
   lihat WOOCOMMERCE-CHECKOUT-POST-ORDER-FLOW-NOTES.md untuk detail & alasan
   tombol "Pay"/"Cancel" tetap ditampilkan kalau order belum lunas).
   Kotak "Payment Info" sendiri di-inject oleh
   wp-content/plugins/midtrans-woocommerce/class/order-view-and-thankyou-page.php
   lewat action `woocommerce_thankyou` — TIDAK bisa dibungkus div lewat
   template override (plugin nge-print HTML langsung, bukan lewat
   wc_get_template()), jadi cuma bisa distyling lewat CSS supaya rapi &
   senada, tanpa bentuk kartu penuh. */

/* Jarak vertikal rapi antar section di halaman Thank You (kartu ringkasan,
   kartu order items, kartu alamat, kotak payment info) */
.woocommerce-order-received .woocommerce-order > * + * {
  margin-top: 1.5rem;
}

.ergocraft-order-items-card .woocommerce-order-details__title,
.ergocraft-address-card .woocommerce-column__title {
  margin-top: 0;
}

/* Samakan tipografi Order Items dengan Order Details:
   label abu uppercase kecil, value hitam bold, pemisah antar baris. */
.ergocraft-order-items-card table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.ergocraft-order-items-card table.woocommerce-table--order-details th,
.ergocraft-order-items-card table.woocommerce-table--order-details td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ergo-mono-light-gray, #e5e5e5);
  text-align: left;
  vertical-align: baseline;
  line-height: 1.4;
}

.ergocraft-order-items-card table.woocommerce-table--order-details thead th,
.ergocraft-order-items-card table.woocommerce-table--order-details tfoot th {
  color: var(--ergo-mono-gray, #8a8a8a);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ergocraft-order-items-card table.woocommerce-table--order-details tbody td,
.ergocraft-order-items-card table.woocommerce-table--order-details tfoot td {
  color: var(--ergo-mono-black, #1a1a1a);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.ergocraft-order-items-card table.woocommerce-table--order-details tbody td a {
  color: var(--ergo-mono-black, #1a1a1a);
  text-decoration: none;
  font-weight: 600;
}

.ergocraft-order-items-card
  table.woocommerce-table--order-details
  .product-total,
.ergocraft-order-items-card table.woocommerce-table--order-details tfoot td {
  text-align: right;
}

.ergocraft-order-items-card
  table.woocommerce-table--order-details
  tfoot
  td
  small,
.ergocraft-order-items-card
  table.woocommerce-table--order-details
  tfoot
  td
  .includes_tax,
.ergocraft-order-items-card
  table.woocommerce-table--order-details
  .woocommerce-Price-amount
  + * {
  display: inline;
  color: var(--ergo-mono-gray, #8a8a8a);
  font-size: 0.75rem;
  font-weight: 400;
}

.ergocraft-order-items-card
  table.woocommerce-table--order-details
  tfoot
  tr:last-child
  th,
.ergocraft-order-items-card
  table.woocommerce-table--order-details
  tfoot
  tr:last-child
  td {
  border-bottom: none;
  padding-bottom: 0;
}

.ergocraft-order-items-card .order-actions--heading {
  vertical-align: middle;
}

.ergocraft-order-items-card .order-actions-button {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.6rem 1.25rem;
  background-color: var(--ergo-mono-black, #1a1a1a);
  border: 1px solid var(--ergo-mono-black, #1a1a1a);
  color: #fff !important;
  text-decoration: none;
  border-radius: 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ergocraft-order-items-card .order-actions-button.cancel {
  background-color: red !important;
  color: white !important;
  margin-top: 5px !important;
}

/* Alamat: samakan warna teks body dengan value di kartu lain */
.ergocraft-address-card address {
  font-style: normal;
  color: var(--ergo-mono-black, #1a1a1a);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
}

.ergocraft-address-card .woocommerce-column__title {
  margin-bottom: 0.75rem;
}

.ergocraft-address-card .woocommerce-customer-details--phone,
.ergocraft-address-card .woocommerce-customer-details--email {
  color: var(--ergo-mono-gray, #8a8a8a);
  font-size: 0.875rem;
}

/* Kartu "Confirm Your Payment" (tombol WhatsApp) — cuma tampil kalau order
   sudah lunas ($order->is_paid()), lihat woocommerce/checkout/thankyou.php +
   fungsi ergocraft_child_get_order_confirmation_whatsapp_url() di functions.php */
.ergocraft-order-confirm-action {
  text-align: center;
}

.ergocraft-whatsapp-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 260px;
  padding: 0.85rem 1.5rem;
  line-height: 1.2;
  background-color: var(--ergo-mono-black, #1a1a1a);
  border: 1px solid var(--ergo-mono-black, #1a1a1a);
  color: #fff !important;
  text-decoration: none;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 0.15s ease-in-out;
}

.ergocraft-whatsapp-button:hover,
.ergocraft-whatsapp-button:focus {
  opacity: 0.85;
  color: #fff !important;
}

.ergocraft-whatsapp-icon {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
  align-self: center;
  line-height: 0;
}

/* Kotak "Payment Info" bawaan plugin Midtrans SENGAJA tidak ditampilkan lagi
   di halaman Thank You (hook-nya benar-benar dilepas, bukan cuma CSS
   display:none — lihat ergocraft_child_remove_midtrans_payment_info_box() di
   functions.php), jadi CSS khusus untuk elemen tsb sudah tidak diperlukan &
   dihapus dari sini. Lihat WOOCOMMERCE-CHECKOUT-POST-ORDER-FLOW-NOTES.md
   untuk riwayat perubahannya. */

/* ==========================================================================
   Halaman Single Product — widget "Add To Cart" (Elementor Pro widget
   `woocommerce-product-add-to-cart`, ID widget d594e81 di template Theme
   Builder "Single Product" post 6693). Markup quantity & tombol sendiri
   berasal dari WooCommerce core (woocommerce_template_single_add_to_cart()),
   BUKAN dari child theme, jadi tidak ada file PHP untuk di-override di sini
   — semua polish dilakukan lewat CSS + sedikit JS progressive-enhancement
   (lihat assets/js/quantity-stepper.js, di-enqueue lewat functions.php HANYA
   di halaman single product) untuk menambah tombol +/- pada quantity (bawaan
   WooCommerce di tema ini cuma <input type="number"> polos tanpa tombol).
   ========================================================================== */

/* PENTING — root cause tombol +/- bikin baris ini overflow ke kanan (dicek
   lewat Playwright headless, bukan cuma tebak-tebakan):
   Elementor Pro widget "Add To Cart" (LESS aslinya:
   wp-content/themes/ergocraft/vamtam/assets/css/src/elementor/widgets/
   wocommerce-product-add-to-cart/wocommerce-product-add-to-cart.less,
   blok `@media(min-width:768px)` di dekat baris 356) punya rule:
     .elementor-add-to-cart form.cart :is(button, .added_to_cart):not(.woosw-btn) {
       min-width: calc(100% - 140px);
       max-width: calc(100% - 40px);
       flex-grow: 1;
     }
   Selector `:is(button, ...)` cocok ke SEMUA elemen <button> di dalam
   form.cart — TERMASUK tombol +/- baru yang kita tambahkan (elemen
   `<button>` juga!). Akibatnya tombol +/- ikut kena `min-width: calc(100% -
   140px)` (dihitung dari lebar kotak `.quantity`, container flex-nya) DAN
   tombol "Add to Cart" (yang juga match selector sama, dihitung dari lebar
   form.cart) — keduanya minta lebar minimum masing-masing yang kalau
   dijumlah MELEBIHI lebar form.cart itu sendiri (form.cart sendiri lebarnya
   cuma 100% dari kolom Elementor, TIDAK ikut membesar untuk menyesuaikan
   anak-anaknya yang overflow) → hasilnya baris quantity+tombol jadi lebih
   lebar dari kolomnya sendiri dan "bocor" keluar ke kanan.
   Fix: reset semua properti dari rule tsb (`min-width`, `max-width`,
   `flex-grow`, `padding`, `font-size`, `text-transform` bawaan tombol
   Elementor global) KHUSUS untuk tombol +/- kustom kita, supaya ukurannya
   balik kecil & rapi (40px), dan longgarkan `min-width` tombol "Add to
   Cart" jadi 0 supaya dia cuma mengisi SISA ruang yang benar-benar
   tersedia (lewat flex-grow), bukan memaksa lebar minimum yang bikin
   overflow. */

/* Kotak quantity: dibingkai flat 1 border, tombol +/- & input jadi 1 kesatuan
   visual (progressive enhancement: kalau JS gagal load, input number biasa
   tetap berfungsi normal, cuma tanpa tombol +/-) */
.single-product .quantity {
  display: inline-flex;
  align-items: stretch;
  height: 53px;
  max-width: 100%;
  vertical-align: middle;
}

.single-product .quantity.ergocraft-quantity {
  border: 1px solid var(--ergo-mono-black, #1a1a1a) !important;
  flex: 0 0 auto !important;
}

.single-product .quantity.ergocraft-quantity input.qty {
  border: none !important;
  outline: none !important;
  width: 48px !important;
  height: 100% !important;
  min-height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  background: transparent;
  -moz-appearance: textfield;
}

.single-product
  .quantity.ergocraft-quantity
  input.qty::-webkit-outer-spin-button,
.single-product
  .quantity.ergocraft-quantity
  input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.single-product .ergocraft-quantity__button {
  /* Reset properti yang "bocor" dari style tombol global Elementor
     (lihat catatan panjang di atas) — tanpa ini tombol +/- ikut jadi
     selebar `calc(100% - 140px)`, ber-padding besar, huruf kapital, dst. */
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.125rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-style: none !important;
  background-color: transparent !important;
  color: var(--ergo-mono-black, #1a1a1a) !important;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.single-product .ergocraft-quantity__button:hover,
.single-product .ergocraft-quantity__button:focus-visible {
  background-color: var(--ergo-mono-bg-gray, #f5f5f5) !important;
}

.single-product .ergocraft-quantity__button--minus {
  border-right: 1px solid var(--ergo-mono-light-gray, #d9d9d9) !important;
}

.single-product .ergocraft-quantity__button--plus {
  border-left: 1px solid var(--ergo-mono-light-gray, #d9d9d9) !important;
}

/* Selaraskan tinggi tombol "Add to Cart" dengan kotak quantity di sebelahnya
   + kasih transisi halus (state normal/hover/loading/disabled). `min-width`
   di-reset ke 0 supaya tombol ini cuma mengisi SISA ruang yang tersedia di
   form.cart (lewat flex-grow bawaan, tidak dihapus), bukan memaksa lebar
   minimum `calc(100% - 140px)` yang menyebabkan overflow (lihat catatan
   panjang di atas kotak quantity). */
.single-product form.cart .single_add_to_cart_button {
  height: 53px;
  min-width: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}

/* Loading state (dipicu WooCommerce lewat AJAX add-to-cart bawaan tema):
   redupkan tombol tapi tetap tampilkan spinner (::after bawaan WooCommerce)
   dengan jelas, dan matikan hover/klik ganda selama proses berlangsung */
.single-product form.cart .single_add_to_cart_button.loading {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

a.checkout-button.wc-forward {
    border-radius: 0 !important;
}

.woocommerce-order {
}