/* ============================================================
   ARC MY ACCOUNT WIDGET

   Menata tampilan markup RESMI WooCommerce yang dicetak apa adanya oleh
   widget (lihat class-arc-myaccount-widget.php - shortcode
   [woocommerce_my_account], jalur publik WooCommerce sendiri). MURNI
   CSS - tidak ada data akun, pesanan, atau alamat yang disentuh di sini.

   Semua rule di-scope di bawah .arc-ma (wrapper milik widget ini
   sendiri), jadi TIDAK PERNAH menyentuh widget ARC Account (off-canvas)
   atau bagian lain situs yang kebetulan memakai class WooCommerce yang
   sama di luar widget ini.

   KENAPA SELECTORNYA DITULIS ".arc-ma.arc-ma" (class-nya dobel)?
   Sama seperti arc-cart-page.css: kalau tema atau WooCommerce sendiri
   memuat CSS dasar untuk class yang sama SETELAH file ini, dan
   specificity-nya seri, yang dimuat belakangan yang menang. Menulis
   class dua kali menaikkan specificity tanpa mengubah HTML sama sekali,
   jadi aturan di sini menang tanpa !important dan tanpa bergantung
   urutan pemuatan file.

   Nilai warna/ukuran dibaca dari CSS variable yang di-set Elementor
   lewat kontrol Style di panel widget. Angka di var(..., X) adalah
   nilai cadangan kalau kontrolnya belum pernah disentuh.

   CATATAN: nama class WooCommerce di bawah diverifikasi dari cabang
   trunk github.com/woocommerce/woocommerce (templates/myaccount/*.php)
   per Agustus 2026. Kalau versi WooCommerce lain mengubah nama
   class-nya: klik kanan bagian yang tidak ikut ter-style > Inspect,
   kirim nama class-nya, sesuaikan di sini.
   ============================================================ */

.arc-ma {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #000000;
}

/* -------- Jaring pengaman: pembungkus widget Elementor itu sendiri --------
   BUKAN soal CSS di dalam .arc-ma - ini soal WADAH DI LUARNYA.

   Elementor punya kontrol Advanced > Layout > Width per widget dengan dua
   pilihan: "Default" (lebar penuh, mengisi kolom) atau "Inline" (menyusut
   mengikuti ukuran isinya). Kalau widget ini kebetulan ke-set "Inline" -
   ditandai Elementor lewat class .elementor-widget__width-initial di
   elemen PALING LUAR, di atas .arc-ma - maka seluruh isi widget ikut
   menyempit mengikuti lebar alami kontennya. Efeknya: memaksa
   width:100% di DALAM .arc-ma percuma, karena 100% itu dihitung dari
   induk yang sudah menyusut duluan.

   Widget ini fungsinya selalu jadi blok isi halaman penuh - tidak
   pernah masuk akal dia inline/menyusut. Jadi lebar penuh dipaksa di
   sini, di titik yang paling luar, terlepas dari kontrol Width yang
   dipilih di panel Elementor. !important dipakai SENGAJA di sini -
   bukan menimpa aturan widget lain, tapi menimpa satu setelan spesifik
   milik widget ini sendiri supaya perilakunya konsisten apa pun yang
   ke-klik di panel. */
.elementor-widget-arc_myaccount {
  width: 100% !important;
}

.arc-ma__title {
  margin: 0 0 32px;
}

/* ============================================================
   0. IKON NAVIGASI (mask data-URI, lihat bagian 2)
   Satu tempat definisi supaya gampang diganti kalau suatu saat perlu.
   Warnanya ikut currentColor karena ini MASK, bukan gambar - otomatis
   benar untuk warna teks link normal maupun aktif tanpa kontrol
   terpisah.
   ============================================================ */

.arc-ma {
  --arc-ma-icon-dashboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%2214%22%20y%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%223%22%20y%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --arc-ma-icon-orders: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7.5%204.27%209%205.15%22%2F%3E%3Cpath%20d%3D%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E");
  --arc-ma-icon-downloads: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V3%22%2F%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%2F%3E%3C%2Fsvg%3E");
  --arc-ma-icon-address: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --arc-ma-icon-payment: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%222%22%20x2%3D%2222%22%20y1%3D%2210%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  --arc-ma-icon-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  --arc-ma-icon-logout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3Cpolyline%20points%3D%2216%2017%2021%2012%2016%207%22%2F%3E%3Cline%20x1%3D%2221%22%20x2%3D%229%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   1. LAYOUT 2 KOLOM (navigasi + konten)
   WooCommerce mencetak <nav> dan <div class="woocommerce-MyAccount-
   content"> sebagai DUA elemen sejajar, bukan dibungkus satu wadah -
   jadi .arc-ma__inner (milik widget ini) yang menjadi wadah flex-nya.
   ============================================================ */

.arc-ma.arc-ma .arc-ma__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--arc-ma-gap, 48px);
}

/* -------- Pembungkus .woocommerce di tengah-tengah --------
   PENYEBAB SELURUH HALAMAN TERLIHAT SEMPIT (form, tabel, notice
   semuanya). Shortcode My Account tidak mencetak <nav> dan
   .woocommerce-MyAccount-content sebagai anak langsung; keduanya
   dibungkus lagi satu lapis <div class="woocommerce">. Jadi flex di
   .arc-ma__inner tidak pernah menata nav dan konten - yang ditata cuma
   SATU item, yaitu div pembungkus itu.

   Dan flex item tanpa flex-grow menyusut mengikuti lebar alami isinya
   (shrink-to-fit). Itulah kenapa kolom konten berhenti di tengah
   halaman dengan ruang kosong lebar di kanannya: bukan lebar widget
   yang salah di panel Elementor, tapi lapis ini yang tidak pernah
   disuruh mengisi.

   Dua perbaikan sekaligus: pembungkusnya dipaksa mengisi satu baris
   penuh, DAN dia sendiri jadi flex container - jadi nav dan konten
   akhirnya benar-benar bersebelahan lewat aturan yang sama.

   Aturan di .arc-ma__inner di atas tetap dipertahankan supaya markup
   tanpa lapis .woocommerce (mis. kalau template diganti) tetap tertata.

   min-width:0 wajib: tanpa itu tabel pesanan yang lebar tidak bisa
   menyusut di bawah lebar alaminya dan mendorong seluruh kolom keluar
   halaman. */
.arc-ma.arc-ma .arc-ma__inner > .woocommerce {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--arc-ma-gap, 48px);
}

/* Di sebagian endpoint, WooCommerce mencetak wadah notice sebagai anak
   langsung .woocommerce - bukan di dalam kolom konten. Tanpa aturan ini
   dia jadi item flex ketiga dan berdiri berdempetan di samping menu. */
.arc-ma.arc-ma .arc-ma__inner > .woocommerce > .woocommerce-notices-wrapper {
  flex: 1 1 100%;
  order: -1;
}

.arc-ma.arc-ma .woocommerce-MyAccount-navigation {
  flex: 0 0 var(--arc-ma-nav-w, 240px);
  max-width: 100%;
}

.arc-ma.arc-ma .woocommerce-MyAccount-content {
  flex: 1 1 320px;
  min-width: 0;
}

/* Satu kolom di layar sempit: nav pindah ke atas jadi baris tab yang
   bisa digeser, konten jadi satu kolom penuh di bawahnya. Dua varian
   breakpoint - dipilih dari kontrol "Stack to One Column At". */

@media (max-width: 1024px) {
  .arc-ma--stack-tablet.arc-ma--stack-tablet .woocommerce-MyAccount-navigation,
  .arc-ma--stack-tablet.arc-ma--stack-tablet .woocommerce-MyAccount-content {
    flex: 1 1 100%;
  }
}

@media (max-width: 767px) {
  .arc-ma--stack-mobile.arc-ma--stack-mobile .woocommerce-MyAccount-navigation,
  .arc-ma--stack-mobile.arc-ma--stack-mobile .woocommerce-MyAccount-content {
    flex: 1 1 100%;
  }
}

/* ============================================================
   2. NAVIGASI
   ============================================================ */

.arc-ma.arc-ma .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Di layar sempit (saat nav ikut stack), baris tab yang bisa digeser -
   lebih wajar untuk 7 link daripada ditumpuk vertikal memakan tempat
   di atas konten. */
@media (max-width: 1024px) {
  .arc-ma--stack-tablet.arc-ma--stack-tablet .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--arc-ma-line, #e5e5e5);
  }
}

@media (max-width: 767px) {
  .arc-ma--stack-mobile.arc-ma--stack-mobile .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--arc-ma-line, #e5e5e5);
  }
}

.arc-ma.arc-ma .woocommerce-MyAccount-navigation-link {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arc-ma.arc-ma .woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--arc-ma-nav-pad, 12px 16px);
  border-radius: var(--arc-ma-nav-radius, 0px);
  border-left: 3px solid transparent;

  color: var(--arc-ma-nav-fg, #6b6b6b);
  background: var(--arc-ma-nav-bg, transparent);
  text-decoration: none;
  white-space: nowrap;

  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.arc-ma.arc-ma .woocommerce-MyAccount-navigation-link a:hover {
  color: var(--arc-ma-nav-fg-active, #000000);
  background: var(--arc-ma-nav-bg-active, #f5f5f5);
}

/* WooCommerce menandai link endpoint yang sedang aktif dengan class
   "is-active" di elemen <li>, bukan di <a>. */
.arc-ma.arc-ma .woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--arc-ma-nav-fg-active, #000000);
  background: var(--arc-ma-nav-bg-active, #f5f5f5);
  border-left-color: var(--arc-ma-nav-indicator, #000000);
}

/* Ikon di depan tiap link - lihat kontrol "Show Navigation Icons".
   Ditarget lewat endpoint yang tertanam di nama class WooCommerce
   sendiri (...-link--dashboard, ...-link--orders, dst), jadi tidak
   perlu satu pun perubahan di markup atau di render() widget. */

.arc-ma--icons .woocommerce-MyAccount-navigation-link a::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.arc-ma--icons .woocommerce-MyAccount-navigation-link--dashboard a::before {
  -webkit-mask-image: var(--arc-ma-icon-dashboard);
  mask-image: var(--arc-ma-icon-dashboard);
}
.arc-ma--icons .woocommerce-MyAccount-navigation-link--orders a::before {
  -webkit-mask-image: var(--arc-ma-icon-orders);
  mask-image: var(--arc-ma-icon-orders);
}
.arc-ma--icons .woocommerce-MyAccount-navigation-link--downloads a::before {
  -webkit-mask-image: var(--arc-ma-icon-downloads);
  mask-image: var(--arc-ma-icon-downloads);
}
.arc-ma--icons .woocommerce-MyAccount-navigation-link--edit-address a::before {
  -webkit-mask-image: var(--arc-ma-icon-address);
  mask-image: var(--arc-ma-icon-address);
}
.arc-ma--icons .woocommerce-MyAccount-navigation-link--payment-methods a::before {
  -webkit-mask-image: var(--arc-ma-icon-payment);
  mask-image: var(--arc-ma-icon-payment);
}
.arc-ma--icons .woocommerce-MyAccount-navigation-link--edit-account a::before {
  -webkit-mask-image: var(--arc-ma-icon-user);
  mask-image: var(--arc-ma-icon-user);
}
.arc-ma--icons .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  -webkit-mask-image: var(--arc-ma-icon-logout);
  mask-image: var(--arc-ma-icon-logout);
}

/* ============================================================
   3. KONTEN UMUM (Dashboard, dan teks di endpoint lain)
   ============================================================ */

.arc-ma.arc-ma .woocommerce-MyAccount-content > p {
  margin: 0 0 16px;
  line-height: 1.6;
}

.arc-ma.arc-ma .woocommerce-MyAccount-content h2 {
  margin: 0 0 16px;
}

/* mark milik WooCommerce dipakai untuk highlight ringan di teks
   Dashboard (nama user) dan di baris status pesanan (view-order.php) -
   dikembalikan ke tampilan polos, warna/tebalnya ikut teks sekitar. */
.arc-ma.arc-ma .woocommerce-MyAccount-content mark {
  background: none;
  color: inherit;
  font-weight: 700;
}

/* ============================================================
   4. TABEL (Orders, Downloads, Payment Methods)
   Ketiganya sama-sama memakai .shop_table.shop_table_responsive dari
   WooCommerce, jadi satu blok style ini berlaku untuk semuanya.
   ============================================================ */

/* border-collapse:separate, bukan collapse. Dengan collapse, garis tepi
   sel dan garis tepi tabel dilebur jadi satu dan sudut membulat tidak
   pernah muncul - tabelnya selalu kotak siku. separate + border-spacing:0
   memberi tampilan yang sama rapatnya, tapi radius di sel pojok
   benar-benar terlihat. */
.arc-ma.arc-ma .shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--arc-ma-line, #e5e5e5);
  border-radius: var(--arc-ma-table-radius, 8px);
  margin: 0 0 24px;
}

.arc-ma.arc-ma .shop_table thead th {
  padding: var(--arc-ma-cell-pad, 14px);
  background: var(--arc-ma-thead-bg, #000000);
  color: var(--arc-ma-thead-fg, #ffffff);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.arc-ma.arc-ma .shop_table thead th:first-child {
  border-top-left-radius: var(--arc-ma-table-radius, 8px);
}
.arc-ma.arc-ma .shop_table thead th:last-child {
  border-top-right-radius: var(--arc-ma-table-radius, 8px);
}

/* Kolom nomor pesanan dicetak WooCommerce sebagai <th scope="row">,
   bukan <td> - kalau tidak ikut disebut di sini, sel pertama tiap baris
   mewarisi gaya header (latar hitam, teks putih). */
.arc-ma.arc-ma .shop_table tbody td,
.arc-ma.arc-ma .shop_table tbody th {
  padding: var(--arc-ma-cell-pad, 14px);
  border-top: 1px solid var(--arc-ma-line, #e5e5e5);
  background: transparent;
  color: var(--arc-ma-cell-fg, #000000);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

/* Baris pertama tidak perlu garis atas - sudah ada tepi bawah header. */
.arc-ma.arc-ma .shop_table tbody tr:first-child td,
.arc-ma.arc-ma .shop_table tbody tr:first-child th {
  border-top: none;
}

.arc-ma.arc-ma .shop_table tbody tr:hover td,
.arc-ma.arc-ma .shop_table tbody tr:hover th {
  background: rgba(0, 0, 0, 0.02);
}

/* Tanggal dan total tidak boleh patah jadi dua baris - itu yang bikin
   tinggi baris tidak rata dan tabelnya terlihat berantakan. */
.arc-ma.arc-ma .shop_table .woocommerce-orders-table__cell-order-date,
.arc-ma.arc-ma .shop_table .woocommerce-orders-table__cell-order-number {
  white-space: nowrap;
}

/* Tombol di dalam tabel lebih kecil daripada tombol utama halaman -
   di baris setinggi satu teks, tombol ukuran penuh mendominasi
   isinya. */
.arc-ma.arc-ma .shop_table .button,
.arc-ma.arc-ma .shop_table a.button,
.arc-ma.arc-ma .shop_table .woocommerce-Button {
  padding: 8px 16px;
  font-size: 0.8em;
}

/* Kolom Actions (Orders/Payment Methods) berisi beberapa tombol
   sekaligus - dirapikan jadi baris yang bisa turun ke bawah kalau
   sempit, bukan meluber. */
/* TETAP display:table-cell. Sebelumnya sel ini dibuat display:flex -
   dan sel yang bukan table-cell lagi keluar dari perhitungan lebar
   kolom tabel, jadi isinya meluber melewati garis tepi tabel (tombol
   Cancel terpotong di ujung kanan). Tombolnya dirapikan dengan jarak
   antar-tombol biasa, dan sel-nya dibiarkan jadi sel. */
.arc-ma.arc-ma .shop_table td.woocommerce-orders-table__cell-order-actions,
.arc-ma.arc-ma .shop_table td.payment-method-actions {
  text-align: right;
}

.arc-ma.arc-ma .shop_table td.woocommerce-orders-table__cell-order-actions .button,
.arc-ma.arc-ma .shop_table td.payment-method-actions .button {
  margin: 3px 0 3px 8px;
  vertical-align: middle;
}

/* -------- Tabel responsif --------
   WooCommerce sendiri menaruh atribut data-title="..." di tiap <td>
   pada tabel .shop_table_responsive, presisnya untuk dipakai lewat CSS
   seperti ini - lihat wc_get_account_orders_columns() dkk. Di layar
   sempit, header tabel disembunyikan dan tiap sel jadi baris
   label:value sendiri. */

@media (max-width: 600px) {
  .arc-ma.arc-ma .shop_table_responsive thead {
    display: none;
  }

  .arc-ma.arc-ma .shop_table_responsive tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--arc-ma-line, #e5e5e5);
  }

  .arc-ma.arc-ma .shop_table_responsive tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px var(--arc-ma-cell-pad, 14px);
    border-bottom: none;
    text-align: right;
  }

  .arc-ma.arc-ma .shop_table_responsive tbody tr td::before {
    content: attr(data-title);
    flex: none;
    font-weight: 600;
    text-align: left;
  }

  .arc-ma.arc-ma .shop_table .woocommerce-orders-table__cell-order-actions,
  .arc-ma.arc-ma .shop_table td.payment-method-actions {
    justify-content: flex-end;
  }
}

/* ============================================================
   5. BADGE STATUS PESANAN
   WooCommerce mencetak <mark class="order-status status-{slug}">.
   Warnanya dikelompokkan jadi 5 kelompok makna (lihat kontrol Style) -
   status yang tidak dikenali otomatis jatuh ke kelompok Netral karena
   dia cocok dengan selector paling umum ("order-status" saja) yang
   ditulis PALING ATAS, lalu ditimpa oleh selector yang lebih spesifik
   kalau status-nya dikenali.
   ============================================================ */

.arc-ma.arc-ma .order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--arc-ma-status-radius, 4px);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;

  background: var(--arc-ma-status-neutral-bg, #f5f5f5);
  color: var(--arc-ma-status-neutral-fg, #404040);
}

.arc-ma.arc-ma .order-status.status-completed {
  background: var(--arc-ma-status-success-bg, #f0fdf4);
  color: var(--arc-ma-status-success-fg, #166534);
}

.arc-ma.arc-ma .order-status.status-processing {
  background: var(--arc-ma-status-info-bg, #eff6ff);
  color: var(--arc-ma-status-info-fg, #1e40af);
}

.arc-ma.arc-ma .order-status.status-pending,
.arc-ma.arc-ma .order-status.status-on-hold {
  background: var(--arc-ma-status-warning-bg, #fffbeb);
  color: var(--arc-ma-status-warning-fg, #92400e);
}

.arc-ma.arc-ma .order-status.status-cancelled,
.arc-ma.arc-ma .order-status.status-failed {
  background: var(--arc-ma-status-error-bg, #fef2f2);
  color: var(--arc-ma-status-error-fg, #991b1b);
}

/* Dipakai juga di baris status pada halaman detail pesanan
   (view-order.php: "Order #123 was placed on ... and is currently
   {status}."), bukan cuma di tabel daftar pesanan. */
.arc-ma.arc-ma p.order-status,
.arc-ma.arc-ma mark.order-status {
  border-radius: var(--arc-ma-status-radius, 4px);
}

/* ============================================================
   6. DETAIL PESANAN (view-order.php)
   Tabel item pesanan dibuat senada dengan tabel keranjang di ARC Cart
   Page - kolom gambar, nama produk, qty, total - walaupun ini tabel
   HTML klasik biasa (bukan Cart block), bukan kebetulan disamakan
   supaya pembeli tidak merasa berpindah "sistem" saat lihat pesanan
   lamanya.
   ============================================================ */

.arc-ma.arc-ma .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
}

.arc-ma.arc-ma .woocommerce-table--order-details thead th {
  padding: var(--arc-ma-cell-pad, 14px) 0;
  border-bottom: 2px solid var(--arc-ma-line, #e5e5e5);
  text-align: left;
  font-weight: 600;
}

.arc-ma.arc-ma .woocommerce-table--order-details tbody td,
.arc-ma.arc-ma .woocommerce-table--order-details tfoot td,
.arc-ma.arc-ma .woocommerce-table--order-details tfoot th {
  padding: var(--arc-ma-cell-pad, 14px) 0;
  border-bottom: 1px solid var(--arc-ma-line, #e5e5e5);
}

.arc-ma.arc-ma .woocommerce-table--order-details tfoot th {
  text-align: left;
  font-weight: 400;
  color: var(--arc-ma-nav-fg, #6b6b6b);
}

.arc-ma.arc-ma .woocommerce-table--order-details tfoot tr:last-child th,
.arc-ma.arc-ma .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  color: #000000;
}

.arc-ma.arc-ma .woocommerce-table--order-details .product-thumbnail img {
  display: block;
  width: 64px;
  height: auto;
  border-radius: 2px;
}

/* Catatan pesanan (customer note / system note). */
.arc-ma.arc-ma .woocommerce-OrderUpdates {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arc-ma.arc-ma .woocommerce-OrderUpdate {
  padding: 14px 16px;
  border-left: 3px solid var(--arc-ma-line, #e5e5e5);
  background: #fafafa;
}

.arc-ma.arc-ma .woocommerce-OrderUpdate.customer-note {
  border-left-color: var(--arc-ma-status-info-fg, #1e40af);
  background: var(--arc-ma-status-info-bg, #eff6ff);
}

/* Kolom alamat billing/shipping di bawah detail pesanan. */
.arc-ma.arc-ma .woocommerce-customer-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arc-ma-addr-gap, 24px);
  margin-top: 24px;
}

.arc-ma.arc-ma .woocommerce-column--billing-address,
.arc-ma.arc-ma .woocommerce-column--shipping-address {
  flex: 1 1 240px;
}

.arc-ma.arc-ma .woocommerce-column__title {
  margin: 0 0 8px;
}

.arc-ma.arc-ma address {
  font-style: normal;
  line-height: 1.6;
}

/* ============================================================
   7. TOMBOL
   Berlaku untuk semua tombol/link aksi WooCommerce di halaman ini:
   View, Pay, Order Again, Download, Add Payment Method, dan tombol
   submit form (Save Changes, Update Address, dst).

   Aksi yang lebih ringan (Cancel, Delete) ditandai WooCommerce lewat
   nama aksinya sendiri yang jadi bagian class ("button cancel",
   "button delete") - dipakai sebagai penanda tampil sebagai tombol
   outline, tanpa perlu tahu urusan di baliknya. Perilaku klik/hapus
   itu sendiri sepenuhnya tetap kode WooCommerce.
   ============================================================ */

.arc-ma.arc-ma .button,
.arc-ma.arc-ma a.button,
.arc-ma.arc-ma button.button,
.arc-ma.arc-ma input.button,
.arc-ma.arc-ma .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--arc-ma-btn-pad, 12px 22px);
  border: none;
  border-radius: var(--arc-ma-btn-radius, 0px);

  background: var(--arc-ma-notice-btn-bg, #000000);
  color: var(--arc-ma-notice-btn-fg, #ffffff);

  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;

  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.arc-ma.arc-ma .button:hover,
.arc-ma.arc-ma a.button:hover,
.arc-ma.arc-ma button.button:hover,
.arc-ma.arc-ma input.button:hover,
.arc-ma.arc-ma .woocommerce-Button:hover {
  background: var(--arc-ma-notice-btn-bg-h, #2b2b2b);
  color: var(--arc-ma-notice-btn-fg-h, #ffffff);
}

/* -------- Aksi merusak: Cancel & Delete --------
   MERAH, BUKAN WARNA SEKUNDER SITUS. Membatalkan pesanan dan menghapus
   alamat/metode bayar tidak bisa diurungkan pembeli sendiri, jadi
   tombolnya harus terbaca sebagai peringatan sebelum diklik - bukan
   sekadar "tombol yang lain". Warnanya sengaja TIDAK diambil dari
   kontrol Secondary Button di panel Elementor: kontrol itu dipakai
   untuk tombol netral, dan waktu warnanya diganti (mis. jadi coklat
   atau abu terang) tombol Cancel ikut berubah jadi tidak terbaca -
   persis yang terjadi sebelumnya.

   Bisa tetap diganti kalau memang perlu, lewat variabel --arc-ma-danger*
   di CSS, tapi tidak akan ikut berubah tanpa sengaja.

   CATATAN BUG YANG DIPERBAIKI: padding-nya dulu ditulis
   calc(var(--arc-ma-btn-pad) - 1px). --arc-ma-btn-pad isinya EMPAT
   nilai ("12px 22px 12px 22px"), dan calc() tidak bisa mengurangi
   daftar nilai - deklarasinya jadi tidak sah dan dibuang browser. Jadi
   tombol Cancel tampil tanpa padding sama sekali: kotak kecil gepeng
   yang nyaris tidak terlihat. Sekarang padding-nya diwarisi apa adanya
   dari aturan tombol di atas, dan border 1px dikompensasi lewat
   box-sizing, bukan lewat hitungan padding. */
.arc-ma.arc-ma .button.cancel,
.arc-ma.arc-ma .button.delete,
.arc-ma.arc-ma a.button.cancel,
.arc-ma.arc-ma a.button.delete {
  box-sizing: border-box;
  background: var(--arc-ma-danger-bg, #ffffff);
  color: var(--arc-ma-danger-fg, #b91c1c);
  border: 1px solid var(--arc-ma-danger-line, #ef4444);
}

.arc-ma.arc-ma .button.cancel:hover,
.arc-ma.arc-ma .button.delete:hover,
.arc-ma.arc-ma a.button.cancel:hover,
.arc-ma.arc-ma a.button.delete:hover {
  background: var(--arc-ma-danger-bg-h, #dc2626);
  border-color: var(--arc-ma-danger-bg-h, #dc2626);
  color: var(--arc-ma-danger-fg-h, #ffffff);
}

/* ============================================================
   8. FORM (Edit Address, Account Details, Login/Register, Lost
   Password) - semuanya memakai struktur .form-row/.woocommerce-input-
   wrapper yang sama dari fungsi woocommerce_form_field().
   ============================================================ */

/* -------- Lebar dipaksa penuh di SETIAP lapis --------
   PENYEBAB FORM TERLIHAT "MIRING"/MENGAMBANG:
   Sebelumnya tidak satu pun elemen di sini diberi width eksplisit -
   <form>, .form-row, .woocommerce-input-wrapper semuanya dibiarkan
   mengikuti lebar alami browser. Elemen yang tidak dipaksa lebarnya
   gampang diperkecil oleh CSS lain di situs (tema, plugin lain, atau
   reset umum seperti "input { max-width: ... }") tanpa widget ini
   pernah tahu itu terjadi. Hasilnya: form kelihatan menyempit sendiri
   dan posisinya "meleset" dari kolom yang seharusnya - terutama kalau
   dipaksa rata tengah, karena lebar aslinya tidak konsisten.

   Diperbaiki dengan memaksa width:100% + box-sizing:border-box di
   SETIAP lapis pembungkus, bukan cuma di <input>-nya - dari <form>
   itu sendiri sampai ke kotak inputnya. box-sizing:border-box penting
   supaya padding & border ikut dihitung DI DALAM 100% itu, bukan
   menambah lebar ekstra di luarnya (yang bisa bikin overflow horizontal
   sedikit dan sekilas terlihat "miring" juga).

   Selector <form> ditulis generik (elemen apa pun bernama <form> di
   dalam kolom konten), bukan menyebut nama class satu-satu - berlaku
   sekaligus untuk Edit Account, Edit Address, Login, Register, Lost
   Password, dan Add Payment Method, apa pun nama class formnya. */
.arc-ma.arc-ma .woocommerce-MyAccount-content form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.arc-ma.arc-ma .form-row {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
}

.arc-ma.arc-ma .form-row label {
  display: block;
  margin: 0 0 6px;
}

.arc-ma.arc-ma .form-row .optional {
  font-weight: 400;
  opacity: 0.6;
}

.arc-ma.arc-ma .woocommerce-input-wrapper {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.arc-ma.arc-ma .input-text,
.arc-ma.arc-ma .woocommerce-Input,
.arc-ma.arc-ma select,
.arc-ma.arc-ma textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--arc-ma-input-line, #d5d5d5);
  border-radius: var(--arc-ma-input-radius, 0px);
  background: var(--arc-ma-input-bg, #ffffff);
  color: var(--arc-ma-input-fg, #000000);
  font-family: inherit;
  font-size: 0.95em;
}

.arc-ma.arc-ma .input-text:focus,
.arc-ma.arc-ma .woocommerce-Input:focus,
.arc-ma.arc-ma select:focus,
.arc-ma.arc-ma textarea:focus {
  outline: none;
  border-color: var(--arc-ma-input-line-focus, #000000);
}

/* Baris berdampingan (First name / Last name, dst) - class ini dari
   woocommerce_form_field() sendiri, bukan buatan widget. */
.arc-ma.arc-ma .form-row-first,
.arc-ma.arc-ma .form-row-last {
  width: calc(50% - 8px);
  display: inline-block;
}

.arc-ma.arc-ma .form-row-first {
  margin-right: 16px;
  clear: both;
}

@media (max-width: 480px) {
  .arc-ma.arc-ma .form-row-first,
  .arc-ma.arc-ma .form-row-last {
    width: 100%;
    margin-right: 0;
  }
}

/* Fieldset "Password change" di form Account Details. */
.arc-ma.arc-ma fieldset {
  margin: 24px 0;
  padding: 0;
  border: none;
}

.arc-ma.arc-ma fieldset legend {
  margin: 0 0 16px;
  padding: 0;
  font-weight: 700;
}

/* Tombol lihat/sembunyikan password - wadahnya disisipkan
   arc-myaccount.js (lihat catatan di file itu), murni kosmetik. */
.arc-ma.arc-ma .arc-ma__pw-wrap {
  position: relative;
  display: block;
}

.arc-ma.arc-ma .arc-ma__pw-wrap .input-text,
.arc-ma.arc-ma .arc-ma__pw-wrap .woocommerce-Input {
  padding-right: 44px;
}

.arc-ma.arc-ma .arc-ma__pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;

  border: none;
  background: none;
  color: var(--arc-ma-nav-fg, #6b6b6b);
  cursor: pointer;
}

.arc-ma.arc-ma .arc-ma__pw-toggle:hover {
  color: #000000;
}

.arc-ma.arc-ma .arc-ma__pw-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Login + Register berdampingan (form-login.php, saat registrasi
   aktif) - dua kolom lewat grid, menggantikan float .u-columns bawaan
   WooCommerce yang gampang berantakan kalau tingginya beda. */
.arc-ma.arc-ma .woocommerce-form-login,
.arc-ma.arc-ma .woocommerce-form-register {
  float: none;
  width: auto;
}

.arc-ma.arc-ma .u-columns.col2-set:has(.woocommerce-form-login) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

@media (max-width: 600px) {
  .arc-ma.arc-ma .u-columns.col2-set:has(.woocommerce-form-login) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   9. ALAMAT (my-address.php)
   Grid yang menyesuaikan sendiri ke jumlah kolom alamat - WooCommerce
   defaultnya 2 (billing/shipping), tapi kalau plugin lain menambah
   jenis alamat, grid ini ikut menambah baris otomatis alih-alih
   mengandalkan class float .u-column1/.u-column2 bawaan yang cuma
   dirancang untuk 2 kolom.
   ============================================================ */

.arc-ma.arc-ma .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--arc-ma-addr-gap, 24px);
}

.arc-ma.arc-ma .woocommerce-Address {
  float: none;
  width: auto;
  padding: var(--arc-ma-addr-pad, 24px);
  border: 1px solid var(--arc-ma-addr-line, #e5e5e5);
  border-radius: var(--arc-ma-addr-radius, 0px);
}

.arc-ma.arc-ma .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.arc-ma.arc-ma .woocommerce-Address-title h2 {
  margin: 0;
}

.arc-ma.arc-ma .woocommerce-Address-title a {
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ============================================================
   10. UNDUHAN (my-downloads.php)
   Tabelnya sudah kena style umum di bagian 4 (sama-sama .shop_table);
   ini cuma tambahan khusus tombol Download di dalamnya.
   ============================================================ */

.arc-ma.arc-ma .woocommerce-MyAccount-downloads-file a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   11. METODE PEMBAYARAN (payment-methods.php)
   ============================================================ */

.arc-ma.arc-ma .default-payment-method-label {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--arc-ma-status-radius, 4px);
  background: var(--arc-ma-status-success-bg, #f0fdf4);
  color: var(--arc-ma-status-success-fg, #166534);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   12. PESAN "TIDAK ADA APA-APA"
   WooCommerce mencetak notice biasa (lihat setelan WooCommerce Notice
   Elementor di Site Settings kalau dipasang) untuk keadaan kosong -
   "No order has been made yet", "No downloads available yet", dst.
   Kotak/teks/ikonnya dirapikan jaraknya di sini; WARNA kotaknya ikut
   sistem notice yang dipakai situs (Elementor Site Settings > WooCommerce
   > Notices, TIDAK disentuh widget ini). Warna TOMBOL di dalamnya beda
   cerita - lihat bagian 13.
   ============================================================ */

.arc-ma.arc-ma .woocommerce-message,
.arc-ma.arc-ma .woocommerce-info,
.arc-ma.arc-ma .woocommerce-error {
  margin: 0 0 16px;
}

/* ============================================================
   13. TOMBOL DI DALAM NOTICE (terpisah dari tombol umum di bagian 7)

   MASALAH YANG DIPECAHKAN: Elementor Site Settings > WooCommerce >
   Notices cuma mengatur teks/ikon/kotak notice - TIDAK ADA kontrol
   warna untuk tombol aksi di dalamnya (Browse products, Confirm email
   address, dst). Tombol itu sebelumnya numpang ke aturan .button umum
   di bagian 7 - artinya mengubah warna tombol notice ikut mengubah
   warna SEMUA tombol di halaman, termasuk "Save changes" yang sama
   sekali bukan bagian dari notice.

   Selector di bawah ini SENGAJA 4 lapis class (.arc-ma.arc-ma +
   .woocommerce-message/-info/-error + .button), satu lapis lebih banyak
   dari aturan umum di bagian 7 yang cuma 3 lapis (.arc-ma.arc-ma
   .button). Specificity yang lebih tinggi itu yang membuat aturan di
   sini otomatis menang untuk tombol DI DALAM notice, tanpa perlu
   !important dan tanpa mengganggu tombol lain di luar notice sama
   sekali - keduanya kontrol yang independen di panel Elementor. */

.arc-ma.arc-ma .woocommerce-message .button,
.arc-ma.arc-ma .woocommerce-info .button,
.arc-ma.arc-ma .woocommerce-error .button {
  background: var(--arc-ma-btn-bg, #000000);
  color: var(--arc-ma-btn-fg, #ffffff);
}

.arc-ma.arc-ma .woocommerce-message .button:hover,
.arc-ma.arc-ma .woocommerce-info .button:hover,
.arc-ma.arc-ma .woocommerce-error .button:hover {
  background: var(--arc-ma-btn-bg-h, #2b2b2b);
  color: var(--arc-ma-btn-fg-h, #ffffff);
}