/* ============================================================
   maswebsite MY ACCOUNT WIDGET

   Menata tampilan markup RESMI WooCommerce yang dicetak apa adanya oleh
   widget (lihat class-maswebsite-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 .maswebsite-ma (wrapper milik widget ini
   sendiri), jadi TIDAK PERNAH menyentuh widget maswebsite Account (off-canvas)
   atau bagian lain situs yang kebetulan memakai class WooCommerce yang
   sama di luar widget ini.

   KENAPA SELECTORNYA DITULIS ".maswebsite-ma.maswebsite-ma" (class-nya dobel)?
   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.
   ============================================================ */

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

/* -------- Jaring pengaman: pembungkus widget Elementor itu sendiri --------
   BUKAN soal CSS di dalam .maswebsite-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 .maswebsite-ma - maka seluruh isi widget ikut
   menyempit mengikuti lebar alami kontennya. Efeknya: memaksa
   width:100% di DALAM .maswebsite-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-maswebsite_myaccount {
  width: 100% !important;
}

.maswebsite-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.
   ============================================================ */

.maswebsite-ma {
  --maswebsite-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");
  --maswebsite-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");
  --maswebsite-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");
  --maswebsite-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");
  --maswebsite-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");
  --maswebsite-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");
  --maswebsite-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 .maswebsite-ma__inner (milik widget ini) yang menjadi wadah flex-nya.
   ============================================================ */

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

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

.maswebsite-ma.maswebsite-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) {
  .maswebsite-ma--stack-tablet.maswebsite-ma--stack-tablet .woocommerce-MyAccount-navigation,
  .maswebsite-ma--stack-tablet.maswebsite-ma--stack-tablet .woocommerce-MyAccount-content {
    flex: 1 1 100%;
  }
}

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

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

.maswebsite-ma.maswebsite-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) {
  .maswebsite-ma--stack-tablet.maswebsite-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(--maswebsite-ma-line, #e5e5e5);
  }
}

@media (max-width: 767px) {
  .maswebsite-ma--stack-mobile.maswebsite-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(--maswebsite-ma-line, #e5e5e5);
  }
}

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

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

  color: var(--maswebsite-ma-nav-fg, #6b6b6b);
  background: var(--maswebsite-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;
}

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

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

.maswebsite-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;
}

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

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

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

.maswebsite-ma.maswebsite-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. */
.maswebsite-ma.maswebsite-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.
   ============================================================ */

.maswebsite-ma.maswebsite-ma .shop_table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
}

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

.maswebsite-ma.maswebsite-ma .shop_table thead th:first-child {
  border-top-left-radius: 4px;
}
.maswebsite-ma.maswebsite-ma .shop_table thead th:last-child {
  border-top-right-radius: 4px;
}

.maswebsite-ma.maswebsite-ma .shop_table tbody td {
  padding: var(--maswebsite-ma-cell-pad, 14px);
  border-bottom: 1px solid var(--maswebsite-ma-line, #e5e5e5);
  color: var(--maswebsite-ma-cell-fg, #000000);
  vertical-align: middle;
}

.maswebsite-ma.maswebsite-ma .shop_table tbody tr:last-child td {
  border-bottom: none;
}

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

/* Kolom Actions (Orders/Payment Methods) berisi beberapa tombol
   sekaligus - dirapikan jadi baris yang bisa turun ke bawah kalau
   sempit, bukan meluber. */
.maswebsite-ma.maswebsite-ma .shop_table .woocommerce-orders-table__cell-order-actions,
.maswebsite-ma.maswebsite-ma .shop_table td.payment-method-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* -------- 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) {
  .maswebsite-ma.maswebsite-ma .shop_table_responsive thead {
    display: none;
  }

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

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

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

  .maswebsite-ma.maswebsite-ma .shop_table .woocommerce-orders-table__cell-order-actions,
  .maswebsite-ma.maswebsite-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.
   ============================================================ */

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

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

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

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

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

.maswebsite-ma.maswebsite-ma .order-status.status-cancelled,
.maswebsite-ma.maswebsite-ma .order-status.status-failed {
  background: var(--maswebsite-ma-status-error-bg, #fef2f2);
  color: var(--maswebsite-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. */
.maswebsite-ma.maswebsite-ma p.order-status,
.maswebsite-ma.maswebsite-ma mark.order-status {
  border-radius: var(--maswebsite-ma-status-radius, 4px);
}

/* ============================================================
   6. DETAIL PESANAN (view-order.php)
   Tabel item pesanan dibuat senada dengan tabel keranjang di maswebsite 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.
   ============================================================ */

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

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

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

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

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

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

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

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

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

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

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

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

.maswebsite-ma.maswebsite-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.
   ============================================================ */

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

  background: var(--maswebsite-ma-notice-btn-bg, #000000);
  color: var(--maswebsite-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;
}

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

.maswebsite-ma.maswebsite-ma .button.cancel,
.maswebsite-ma.maswebsite-ma .button.delete,
.maswebsite-ma.maswebsite-ma a.button.cancel,
.maswebsite-ma.maswebsite-ma a.button.delete {
  background: transparent;
  color: var(--maswebsite-ma-btn2-fg, #000000);
  border: 1px solid var(--maswebsite-ma-btn2-fg, #000000);
  padding: calc(var(--maswebsite-ma-btn-pad, 12px 22px) - 1px);
}

.maswebsite-ma.maswebsite-ma .button.cancel:hover,
.maswebsite-ma.maswebsite-ma .button.delete:hover,
.maswebsite-ma.maswebsite-ma a.button.cancel:hover,
.maswebsite-ma.maswebsite-ma a.button.delete:hover {
  background: var(--maswebsite-ma-btn2-bg-h, #000000);
  color: var(--maswebsite-ma-btn2-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. */
.maswebsite-ma.maswebsite-ma .woocommerce-MyAccount-content form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.maswebsite-ma.maswebsite-ma .maswebsite-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(--maswebsite-ma-nav-fg, #6b6b6b);
  cursor: pointer;
}

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

.maswebsite-ma.maswebsite-ma .maswebsite-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. */
.maswebsite-ma.maswebsite-ma .woocommerce-form-login,
.maswebsite-ma.maswebsite-ma .woocommerce-form-register {
  float: none;
  width: auto;
}

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

@media (max-width: 600px) {
  .maswebsite-ma.maswebsite-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.
   ============================================================ */

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

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

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

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

.maswebsite-ma.maswebsite-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.
   ============================================================ */

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

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

.maswebsite-ma.maswebsite-ma .default-payment-method-label {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--maswebsite-ma-status-radius, 4px);
  background: var(--maswebsite-ma-status-success-bg, #f0fdf4);
  color: var(--maswebsite-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.
   ============================================================ */

.maswebsite-ma.maswebsite-ma .woocommerce-message,
.maswebsite-ma.maswebsite-ma .woocommerce-info,
.maswebsite-ma.maswebsite-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 (.maswebsite-ma.maswebsite-ma +
   .woocommerce-message/-info/-error + .button), satu lapis lebih banyak
   dari aturan umum di bagian 7 yang cuma 3 lapis (.maswebsite-ma.maswebsite-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. */

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

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