/**
 * Checkout layanan penerjemahan tersumpah.
 *
 * Dimuat HANYA saat keranjang dalam mode terjemahan, SETELAH css/checkout.css
 * sebagai ketergantungannya. Kartu, label, dan kolom isian memakai kelas
 * checkout yang sudah ada (.la-checkout__card, __field, __label, __input),
 * jadi tampilannya otomatis sama dengan checkout kelas. Berkas ini hanya
 * berisi yang khas layanan ini, seluruhnya berawalan .la-jtc-.
 *
 * @package Lisanularab
 */

/* =====================================================
   PETUNJUK DAN CATATAN
   ===================================================== */

.la-jtc-petunjuk {
	font-size: var(--font-size-eyebrow);
	color: var(--color-text-secondary);
	line-height: 1.55;
	margin: 0 0 var(--space-md);
}

.la-jtc-petunjuk--bawah {
	margin-top: var(--space-sm);
}

.la-jtc-petunjuk--data-diri {
	margin-top: var(--space-sm);
}

.la-jtc-opsional {
	font-weight: 400;
	color: var(--color-text-secondary);
}

.la-jtc-notis {
	margin-top: var(--space-md);
	padding: 12px 14px;
	font-size: var(--font-size-eyebrow);
	line-height: 1.55;
	color: var(--color-text-secondary-2);
	background: var(--color-bg-secondary);
	border-radius: var(--radius-md);
}

/* =====================================================
   BARIS DOKUMEN
   ===================================================== */

.la-jtc-daftar {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.la-jtc-baris {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: var(--space-md);
	border: 1px dashed var(--color-border-2);
	border-radius: var(--radius-md);
}

.la-jtc-baris.is-terisi {
	border-style: solid;
}

.la-jtc-baris__nomor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--color-text);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}

.la-jtc-baris__isi {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

/* Pilihan jenis memakai .la-checkout__input; panah bawaan peramban dibiarkan
   supaya tetap dikenali sebagai pilihan di semua perangkat. */
.la-jtc-jenis {
	cursor: pointer;
}

/* --- Zona unggah --- */

.la-jtc-zona {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 18px 14px;
	text-align: center;
	border: 1.5px dashed var(--color-border-2);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.la-jtc-zona:hover,
.la-jtc-zona.is-seret {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

/* Input berkas menutupi seluruh zona, tak terlihat tapi tetap bisa difokus
   papan ketik dan dibaca pembaca layar. */
.la-jtc-zona__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.la-jtc-zona__input:focus-visible + .la-jtc-zona__ajakan {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.la-jtc-zona__ajakan {
	font-size: var(--font-size-eyebrow);
	font-weight: 500;
	color: var(--color-text);
}

.la-jtc-zona__format {
	font-size: 12px;
	color: var(--color-text-tertiary);
}

/* --- Progres --- */

.la-jtc-progres {
	height: 6px;
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--color-bg-tertiary);
}

.la-jtc-progres__batang {
	display: block;
	width: 0;
	height: 100%;
	background: var(--color-primary);
	transition: width 0.15s linear;
}

/* --- Berkas terunggah --- */

.la-jtc-berkas {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	background: #eff6ff;
}

.la-jtc-berkas__nama {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--font-size-eyebrow);
	color: #1447e6;
}

.la-jtc-berkas__ukuran {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--color-text-tertiary);
}

.la-jtc-berkas__hapus {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--color-text-secondary);
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.la-jtc-berkas__hapus:hover {
	color: var(--color-danger);
	background: var(--color-danger-light);
}

.la-jtc-berkas__hapus:disabled {
	opacity: 0.4;
	cursor: wait;
}

/* --- Peringatan duplikat --- */

.la-jtc-duplikat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 10px 12px;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	background: #fff8e6;
	border: 1px solid #f5d98b;
	border-radius: var(--radius-md);
}

.la-jtc-duplikat span {
	flex-basis: 100%;
}

.la-jtc-duplikat__ya,
.la-jtc-duplikat__batal {
	padding: 6px 12px;
	font-size: 13px;
	font-family: var(--font-regular);
	border-radius: var(--radius-full);
	cursor: pointer;
}

.la-jtc-duplikat__ya {
	color: #fff;
	background: var(--color-text);
	border: 1px solid var(--color-text);
}

.la-jtc-duplikat__batal {
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-border-2);
}

/* --- Tombol tambah --- */

.la-jtc-tambah {
	margin-top: var(--space-md);
	padding: 10px 16px;
	font-size: var(--font-size-eyebrow);
	font-weight: 500;
	font-family: var(--font-regular);
	color: var(--color-primary);
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-full);
	cursor: pointer;
}

.la-jtc-tambah:hover {
	background: var(--color-primary-light);
}

/* =====================================================
   GALAT
   ===================================================== */

.la-jtc-galat {
	margin: 0;
	font-size: 13px;
	color: var(--color-danger);
}

/* Jarak dari kolom di atasnya. Sebelumnya margin-top: -10px — margin NEGATIF,
   yang membuat notice menempel tanpa jarak ke elemen di atasnya. Dilaporkan
   pemilik 17 Sep 2026. */
.la-jtc-galat--umum {
	margin-top: 6px;
	line-height: 1.3;
}

/* =====================================================
   KECEPATAN PENGERJAAN
   ===================================================== */

/* Dua baris dua kolom sejak tingkat keempat ditambahkan (21 Sep 2026).
   Kolom kiri halaman pemesanan hanya ~760px — empat kolom menyisakan ~180px
   per kartu, dan "Rp 100.000 / halaman" pecah tiga baris di situ. Kartu harga
   di landing page memang empat sebaris, tapi lebarnya 1200px penuh. */
.la-jtc-tingkat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 480px) {
	.la-jtc-tingkat {
		grid-template-columns: minmax(0, 1fr);
	}
}

.la-jtc-tingkat__kartu {
	position: relative;
	display: block;
	cursor: pointer;
}

/* Radio tersembunyi tapi tetap bisa difokus; kartunya yang menunjukkan
   keadaan terpilih. */
.la-jtc-tingkat__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.la-jtc-tingkat__isi {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px;
	border: 1.5px solid var(--color-border-2);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.la-jtc-tingkat__radio:checked + .la-jtc-tingkat__isi {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

.la-jtc-tingkat__radio:focus-visible + .la-jtc-tingkat__isi {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.la-jtc-tingkat__nama {
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--color-text);
}

.la-jtc-tingkat__waktu {
	font-size: 13px;
	color: var(--color-text-secondary);
}

.la-jtc-tingkat__harga {
	margin-top: 4px;
	font-size: var(--font-size-eyebrow);
	font-weight: 600;
	color: var(--color-text);
}

.la-jtc-tingkat__satuan {
	font-weight: 400;
	color: var(--color-text-secondary);
	margin-bottom: 5px;
}

/* =====================================================
   CENTANG, PENGIRIMAN FISIK
   ===================================================== */

.la-jtc-centang {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--font-size-eyebrow);
	line-height: 1.3;
	color: var(--color-text);
	cursor: pointer;
}

.la-jtc-centang__kotak {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.la-jtc-fisik {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border-2);
}

.la-jtc-fisik .la-jtc-petunjuk {
	margin-bottom: 0;
}

.la-jtc-alamat {
	resize: vertical;
	min-height: 84px;
}

/* =====================================================
   RINGKASAN PESANAN
   ===================================================== */

.la-jtc-ringkasan__daftar {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.la-jtc-ringkasan__baris {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--font-size-eyebrow);
	color: var(--color-text);
}

.la-jtc-ringkasan__dokumen {
	min-width: 0;
}

.la-jtc-ringkasan__halaman {
	display: block;
	font-size: 12px;
	color: var(--color-text-tertiary);
	margin-top: 3px;
}

.la-jtc-ringkasan__harga {
	flex-shrink: 0;
}

.la-jtc-ringkasan__kosong {
	margin: 0;
	font-size: var(--font-size-eyebrow);
	color: var(--color-text-secondary);
}

.la-jtc-ringkasan__catatan {
	margin: var(--space-sm) 0 0;
	font-size: 12px;
	color: var(--color-text-tertiary);
}

/* =====================================================
   PERSETUJUAN DAN KEPERCAYAAN
   ===================================================== */

.la-jtc-persetujuan {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.la-jtc-kepercayaan {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--color-text-secondary);
	margin-bottom: 10px !important;
}

.la-jtf-lanjut {
	font-size: var(--font-size-15);
}

.la-jtc-kepercayaan svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

/* =====================================================
   HIDDEN — penegak terakhir
   =====================================================
   `hidden` adalah atribut HTML, bukan gaya: aturan display apa pun
   menimpanya. Beberapa bagian di berkas ini memakai display:flex, sehingga
   elemen yang disembunyikan skrip tetap terlihat. Ditemukan 16 Sep 2026 pada
   kotak peringatan duplikat (tampil kosong sejak halaman dibuka) dan blok
   alamat pengiriman fisik (tampil sebelum centangnya aktif). */

.la-jtc-duplikat[hidden],
.la-jtc-fisik[hidden],
.la-jtc-penerima[hidden],
.la-jtc-dokumen [hidden],
.la-jtc-kirim [hidden] {
	display: none !important;
}

/* =====================================================
   HALAMAN PEMESANAN — penimpa khusus /penerjemah-tersumpah/pesan/
   =====================================================
   SELURUH selektor di blok ini berawalan .la-jtf, yaitu kelas yang hanya ada
   di templates/page-penerjemah-pesan.php. Checkout kelas memakai kelas
   .la-checkout__* yang sama, jadi tanpa awalan itu perubahan di sini akan ikut
   mengubah halaman pendaftaran kelas. Diminta pemilik, 17 Sep 2026. */

/* Tombol membatalkan kolom dokumen yang masih kosong. Meniru tombol hapus
   berkas supaya keduanya terbaca sebagai tindakan sejenis, tetapi didorong ke
   ujung baris dengan properti logis agar ikut berpindah sisi di RTL. */
.la-jtc-baris__batal {
	flex-shrink: 0;
	margin-inline-start: auto;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--color-text-secondary);
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.la-jtc-baris__batal:hover {
	color: var(--color-danger);
	background: var(--color-danger-light);
}

/* Di layar sempit, checkout kelas menaikkan Ringkasan ke urutan pertama supaya
   peserta melihat apa yang dibeli sebelum mengisi data (aturan G di
   css/checkout.css). Di halaman ini alasan itu TIDAK berlaku: ringkasannya
   masih kosong sampai dokumen diunggah, sehingga yang tampil paling atas justru
   "Belum ada dokumen yang diunggah" — dan tombol "Lanjut ke Pembayaran" ikut
   terdorong ke atas, jauh dari ujung formulir tempat pelanggan menyelesaikan
   isiannya. Dilaporkan pemilik 17 Sep 2026 setelah mencoba sendiri di ponsel. */
@media (max-width: 900px) {
	.la-jtf .la-checkout__left  { order: 1; }
	.la-jtf .la-checkout__right { order: 2; }
}

/* Pembungkus halaman pemesanan — pengganti .la-container milik tema.
   Lebar maksimum DAN jarak tepi berada pada SATU elemen yang sama; kalau
   paddingnya ditaruh pada pembungkus di luar batas lebar, ia tidak berpengaruh
   di layar lebar. Angkanya mengikuti .la-pt-wrap di landing penerjemah (1344px
   / 32px) supaya kedua halaman terasa satu keluarga, dan supaya di laptop
   isinya tidak tampak sesempit lebar bawaan tema (1200px).
   Properti logis dipakai agar jarak tepinya ikut berpindah sisi di RTL. */
.la-jtf__wrap {
	width: 100%;
	max-width: 1208px;
	margin-inline: auto;
	padding-inline: 40px;
	padding-top: var(--space-xl);
}

/* Latar halaman. Selektornya TIDAK lagi memakai .la-main sebagai induk:
   halaman ini memakai header-checkout.php, dan kelas .la-main dibuang dari
   <main> karena ia memberi ruang untuk navbar melayang yang sudah tidak ada.
   Nilai warnanya dipertahankan apa adanya. */
.la-jtf {
	background: #f5f5f6;
}

@media (max-width: 767px) {
	.la-jtf__wrap {
		padding-inline: var(--space-md);
	}
}

/* Kolom kanan: lengket, TANPA penggaris sendiri.
   css/checkout.css memberi kolom kanan max-height setinggi layar plus
   overflow-y:auto — perlu di checkout kelas, yang ringkasannya bisa memuat
   banyak kelas sekaligus. Di halaman ini isinya tetap pendek (ringkasan,
   persetujuan, satu tombol), sehingga yang muncul hanya penggaris yang tidak
   pernah dipakai. Dilaporkan pemilik 17 Sep 2026. */
@media (min-width: 901px) {
	.la-jtf .la-checkout__right {
		max-height: none;
		overflow: visible;
	}
}

/* Jarak antar-kolom khusus halaman pemesanan. Kolom kanan lebarnya tetap
   380px, jadi tambahan gap diambil dari kolom kiri — kiri menyempit sebanyak
   itu. Di bawah 900px tata letaknya satu kolom, sehingga angka ini menjadi
   jarak vertikal antara Dokumen dan Ringkasan. */
.la-jtf .la-checkout__layout {
	gap: var(--space-2xl);   /* 48px */
}

/* =====================================================
   TAMPILAN KARTU (17 Sep 2026, permintaan pemilik)
   =====================================================
   Latar halaman abu, seluruh isi berdiri di atas kartu putih, dan judul tiap
   bagian masuk KE DALAM kartunya. Semua berawalan .la-jtf supaya checkout
   kelas — yang memakai kelas .la-checkout__* yang sama — tidak ikut berubah. */

/* B — latar halaman. */
.la-jtf {
	background: #f5f5f6;
}

/* Kartu diberi latar putih. Tanpa ini kartu menyatu dengan latar abu, karena
   .la-checkout__card hanya punya garis tepi tanpa latar sendiri. */
.la-jtf .la-checkout__card,
.la-jtf .la-jtf__kanan {
	background: #fff;
}

/* A — judul bagian tanpa garis bawah. checkout.css memasang garis itu pada
   .la-checkout__section-title, dan penghapusnya di sana diikat ke
   .woocommerce-checkout — kelas milik checkout kelas, yang tidak pernah ada
   di halaman ini. Itu sebabnya garisnya masih tampil di sini. */
.la-jtf .la-checkout__judul {
	border-bottom: none;
	padding-bottom: 0;
}

/* C — judul kini anak pertama kartunya, jadi jarak atas bawaannya dibuang
   supaya tidak menyisakan ruang kosong di dalam kartu. */
.la-jtf .la-checkout__card > .la-checkout__judul:first-child,
.la-jtf .la-jtf__kanan > .la-checkout__judul:first-child {
	margin-top: 0;
}

/* Kartu pembungkus kolom kanan: judul, ringkasan, persetujuan, tombol, dan
   catatan berada di dalam SATU kartu. */
.la-jtf .la-jtf__kanan {
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

/* Ringkasan tidak lagi berkartu sendiri — kartunya adalah pembungkus di atas;
   dua kartu bertumpuk menghasilkan dua garis tepi berdempetan. */
.la-jtf .la-checkout__summary {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* D — di ponsel, nomor urut naik ke atas dan seluruh isi baris menumpuk.
   Berlaku untuk baris terisi maupun baris kosong supaya bentuknya seragam.
   Tombol batal tidak bisa lagi didorong dengan margin otomatis di tata letak
   menumpuk, jadi ia ditempatkan di pojok, sebaris dengan nomornya. */
@media (max-width: 600px) {
	.la-jtf .la-jtc-baris {
		position: relative;
		flex-direction: column;
		align-items: stretch;
	}

	.la-jtf .la-jtc-baris__nomor {
		margin-top: 0;
	}

	.la-jtf .la-jtc-baris__batal {
		position: absolute;
		inset-block-start: var(--space-md);
		inset-inline-end: var(--space-md);
		margin-inline-start: 0;
	}
}

/* 2 — kartu tanpa garis tepi (17 Sep 2026). Latar putih di atas latar abu
   halaman sudah cukup memisahkan kartu dari sekitarnya; garis tambahan
   membuat halaman terasa penuh garis. */
.la-jtf .la-checkout__card,
.la-jtf .la-jtf__kanan {
	border: none;
}

/* 3 — jarak antar-kartu kolom kiri 16px, sama di desktop maupun ponsel.
   Sebelumnya jarak itu datang dari margin atas judul section; begitu judul
   pindah KE DALAM kartu, sumber jaraknya ikut hilang dan kartu berdempetan.
   Sekarang jaraknya dipegang kolomnya sendiri, satu tempat, bukan menumpang
   margin elemen lain. */
.la-jtf .la-checkout__left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Bar atas dan kaki ringkas DIPINDAH ke css/checkout.css, 18 Sep 2026.
   Keduanya kini dipakai dua halaman — pemesanan dan bayar tagihan — dan
   hanya checkout.css yang dimuat di keduanya. Selama masih di sini, halaman
   bayar menampilkan bar dan kaki tanpa gaya sama sekali. */
.la-jtf .la-checkout__heading {
	font-weight: 600;
}
/* Kolom jenis dokumen mengikuti gaya filter halaman /courses/
   (.la-aff-custom-select__trigger di css/courses.css): padding, garis tepi,
   radius, ukuran dan bobot huruf yang sama. Panah bawaan peramban dimatikan
   dan diganti chevron sendiri, supaya jaraknya dari tepi kanan bisa diatur —
   panah bawaan menempel terlalu rapat ke garis tepi. Diminta pemilik
   17 Sep 2026. */
.la-jtf .la-jtc-jenis {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 14px;
	padding-inline-end: 40px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color 0.15s;
}

.la-jtf .la-jtc-jenis:hover,
.la-jtf .la-jtc-jenis:focus {
	border-color: var(--color-primary);
}

/* Chevron berpindah sisi di RTL. Ditulis di sini, BUKAN di berkas -rtl.css
   hasil pembangkit, karena pembangkitnya sudah tidak ada di proyek. */
[dir="rtl"] .la-jtf .la-jtc-jenis {
	padding-inline-end: 14px;
	padding-inline-start: 40px;
	background-position: left 14px center;
}

/* Tombol lanjut — ukuran huruf diminta pemilik 17 Sep 2026. */
.la-jtf .la-jtf__lanjut {
	font-size: 15px;
}

/* Kotak unggah yang terkunci — jenis dokumen belum dipilih. Tampak jelas tidak
   bisa dipakai, sehingga pelanggan tidak menempuh langkah yang pasti ditolak. */
.la-jtf .la-jtc-zona.is-terkunci {
	cursor: not-allowed;
	opacity: 0.6;
	background: var(--color-bg-secondary);
}

.la-jtf .la-jtc-zona.is-terkunci:hover {
	border-color: var(--color-border-2);
	background: var(--color-bg-secondary);
}