/* =========================================================
   MASSAGE ARMY SPA — MAS Booking Popup (global, semua halaman)
   File: css/components/booking-popup.css
   Dipasang oleh: inc/booking-popup.php (mas_enqueue_booking_popup_assets)
   Warna pakai variabel global dari css/root-colors.css:
   --mas-orange, --mas-orange-bright, --mas-orange-dark,
   --mas-orange-bg, --mas-orange-soft, --mas-blue, --mas-blue-bright,
   --mas-blue-dark, --mas-blue-bg, --mas-blue-soft
   ========================================================= */

/* ============ TRIGGER DI HERO -- shortcode [mas_booking_trigger] ============
   Bukan floating -- ditanam di dalam section Hero (Home & tiap halaman
   kota) lewat GenerateBlocks. Teks judul/deskripsi otomatis menyesuaikan
   konteks halaman (lihat mas_booking_trigger_shortcode() di PHP). */
.mas-hero-trigger {
	background: #fff;
	border: 1px solid var(--mas-orange-bg);
	border-radius: var(--border-radius-xl, 20px);
	padding: 28px 24px;
	max-width: 420px;
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0,74,173,0.10));
	font-family: 'Poppins', sans-serif;
	text-align: center;
	/* Kotak ini duduk di dalam kolom Gutenberg yang defaultnya "stretch"
	   ke tinggi kolom sebelah (paragraf About), jadi kalau tidak diatur
	   sisa ruang di bawah tombol jadi putih kosong panjang. align-self:
	   center bikin kotak menyusut sesuai isinya sendiri (tidak ikut
	   meregang) SEKALIGUS otomatis diposisikan di tengah (jarak atas/
	   bawah ke kolom sebelah jadi sama) -- pas untuk 2 kondisi yang
	   diminta sekaligus, tanpa perlu ubah pengaturan block di editor. */
	align-self: center;
}
.mas-hero-trigger-badge {
	display: inline-block;
	background: var(--mas-orange-soft);
	color: var(--mas-orange-dark);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.mas-hero-trigger-title { color: var(--mas-blue); font-size: 22px; margin: 0 0 8px; }
.mas-hero-trigger-desc { color: #666; font-size: 14px; margin: 0 0 18px; }
.mas-hero-trigger-btn {
	background: var(--mas-orange);
	color: #fff;
	border: none;
	padding: 14px 28px;
	border-radius: var(--border-radius-md, 10px);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
}
.mas-hero-trigger-btn:hover { background: var(--mas-orange-bright); }

.mas-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.mas-modal-overlay[hidden] { display: none; }

.mas-modal-box {
	background: #fff;
	width: 100%;
	max-width: 480px;
	border-radius: var(--border-radius-xl, 20px) var(--border-radius-xl, 20px) 0 0;
	padding: 24px 20px 28px;
	max-height: 88vh;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	font-family: 'Poppins', sans-serif;
}
@media (min-width: 560px) {
	.mas-modal-overlay { align-items: center; }
	.mas-modal-box { border-radius: var(--border-radius-lg, 16px); }
}

.mas-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #999;
}
.mas-modal-box h3 { margin: 0 0 4px; color: var(--mas-blue); }
.mas-modal-subheading { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--mas-orange); }
.mas-modal-sub { color: #666; font-size: 14px; margin: 0 0 16px; }

.mas-choice-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 2px solid #eee;
	border-radius: var(--border-radius-md, 12px);
	background: #fff;
	cursor: pointer;
	transition: var(--transition-base, all 0.3s ease);
}
.mas-choice-btn:hover { border-color: var(--mas-blue-bg); }
.mas-choice-btn strong { color: #222; font-size: 15px; }
.mas-choice-btn span { color: #888; font-size: 13px; margin-top: 2px; }
.mas-choice-primary { border-color: var(--mas-orange); background: var(--mas-orange-soft); }

.mas-form { display: flex; flex-direction: column; gap: 14px; }
.mas-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: #333; }
.mas-form input[type=text], .mas-form input[type=date], .mas-form input[type=time],
.mas-form select, .mas-form textarea {
	font-weight: 400;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-sm, 8px);
	font-size: 14px;
	font-family: inherit;
}
.mas-form-row { display: flex; gap: 12px; }
.mas-form-row label { flex: 1; }

/* Pilihan Jenis Kelamin / Request Terapis / Jenis Terapis -- dulu pakai
   radio bulat bawaan browser (titik), sekarang jadi kotak: seluruh label
   jadi tombol pilihan (border + background highlight saat kepilih) dan
   indikatornya sendiri kotak dengan centang, bukan titik. */
.mas-radio-group { display: flex; gap: 10px; font-weight: 400; }
.mas-therapist-request-options, .mas-customer-gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mas-therapist-request-options .mas-radio-option-free { grid-column: 1 / -1; width: min(100%, calc((100% - 10px) / 2)); justify-self: center; }
.mas-radio-group label {
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border: 2px solid #eee;
	border-radius: var(--border-radius-sm, 8px);
	cursor: pointer;
	font-weight: 500;
	color: #444;
	transition: var(--transition-base, all 0.3s ease);
}
.mas-radio-group label:hover { border-color: var(--mas-blue-bg); }
.mas-radio-group label:has(input:checked) {
	border-color: var(--mas-blue);
	background: var(--mas-blue-soft);
	color: var(--mas-blue-dark);
}
.mas-radio-group input[type=radio] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	border: 2px solid #ccc;
	border-radius: 4px;
	position: relative;
	cursor: pointer;
	transition: var(--transition-base, all 0.3s ease);
}
.mas-radio-group input[type=radio]:checked {
	border-color: var(--mas-blue);
	background: var(--mas-blue);
}
.mas-radio-group input[type=radio]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: -1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.mas-step-cepat { display: flex; flex-direction: column; gap: 14px; }
.mas-divider { border: none; border-top: 1px dashed #ddd; margin: 4px 0; }

/* Garis pemisah antar blok field di form Reservasi (Data Pemesan ->
   Preferensi -> Jadwal -> Setuju & Lanjut). Sengaja TANPA judul grup
   supaya form tidak bertambah panjang -- cukup jeda visual tipis. */
.mas-form-sep {
	border: none;
	border-top: 1px solid #eee;
	margin: 4px 0;
}

.mas-locked-city {
	background: var(--mas-orange-soft);
	padding: 8px 12px;
	border-radius: var(--border-radius-sm, 8px);
	font-size: 14px;
	margin: 0;
}

/* ============ POPUP BOOKING: ADD-ON TOGGLE (khusus popup ini, bukan <details>) ============ */
.mas-popupaddon-accordion {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 4px 0;
}
.mas-popupaddon-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 0;
	border: none;
	background: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: #333;
	font-family: inherit;
	text-align: left;
}
.mas-popupaddon-caret {
	transition: var(--transition-base, all 0.3s ease);
	color: #999;
	font-size: 14px;
}
.mas-popupaddon-accordion.is-open .mas-popupaddon-caret {
	transform: rotate(180deg);
}
.mas-popupaddon-content {
	padding: 4px 0 8px;
	display: none;          /* default: sembunyi */
	flex-direction: column;
	gap: 4px;
}
.mas-popupaddon-accordion.is-open .mas-popupaddon-content {
	display: flex;          /* baru muncul saat is-open */
}

/* ============ ADD-ON ITEM (checkbox layanan tambahan di dalam accordion) ============
   Dipakai oleh mas_render_addon_checkboxes() di inc/booking-popup.php:
   <label class="mas-addon-item">
     <input type="checkbox" ...>
     <span class="mas-addon-name">...</span>
     <span class="mas-addon-price">...</span>
   </label>
   Tanpa display:flex di sini, checkbox + nama + harga jatuh ke baris
   terpisah dan checkbox bawaan browser kecil -- makanya dulu berantakan. */
.mas-addon-group-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--mas-blue);
	margin: 12px 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.mas-addon-group-label:first-child { margin-top: 0; }

.mas-addon-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	margin-bottom: 8px;
	border: 2px solid #eee;
	border-radius: var(--border-radius-sm, 8px);
	background: #fff;
	cursor: pointer;
	font-weight: 400;
	transition: var(--transition-base, all 0.3s ease);
}
.mas-addon-item:hover { border-color: var(--mas-blue-bg); }
.mas-addon-item:has(input:checked) {
	border-color: var(--mas-blue);
	background: var(--mas-blue-soft);
}

.mas-addon-item input[type=checkbox] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--mas-blue);
	cursor: pointer;
}

.mas-addon-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	line-height: 1.3;
}

.mas-addon-price {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--mas-orange-dark);
	white-space: nowrap;
}

/* ============ JUMLAH ORANG (stepper) ============ */
.mas-qty-stepper { display: flex; align-items: center; gap: 10px; }
.mas-qty-btn {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-sm, 8px);
	background: #fff;
	color: var(--mas-blue);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
}
.mas-qty-btn:hover { border-color: var(--mas-blue-bg); background: var(--mas-blue-soft); }
.mas-qty-stepper input[type=number] {
	flex: 1;
	min-width: 0;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-sm, 8px);
	font-family: inherit;
}

/* ============ JAM: hint, error, notif midnight ============ */
.mas-jam-hint { margin: -6px 0 0; font-size: 12px; color: #888; }
.mas-jam-error {
	margin: -6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #c0392b;
}
.mas-midnight-warning {
	background: var(--mas-blue-soft);
	color: var(--mas-blue-dark);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: var(--border-radius-sm, 8px);
	margin: 0;
	text-align: center;
}
#mas-jam-input.invalid, #mas-tanggal-input.invalid { border-color: #c0392b; }

/* ============ PREVIEW HARGA (di bawah dropdown Durasi, sebelum Kode Tiket) ============ */
.mas-harga-preview {
	background: var(--mas-orange-soft);
	color: var(--mas-orange-dark);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 12px;
	border-radius: var(--border-radius-sm, 8px);
	margin: 0;
	text-align: center;
}

.mas-ticket-box {
	background: var(--mas-blue-soft);
	border: 1px dashed var(--mas-blue);
	border-radius: var(--border-radius-md, 12px);
	padding: 12px 14px;
	text-align: center;
}
.mas-ticket-box p { margin: 0 0 6px; font-size: 13px; color: var(--mas-blue-dark); font-weight: 600; }
.mas-ticket-box input {
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--mas-blue-dark);
	background: #fff;
	border: 1px solid var(--mas-blue-bg);
	border-radius: var(--border-radius-sm, 8px);
	padding: 8px;
}

.mas-consent {
	flex-direction: row !important;
	align-items: flex-start;
	gap: 8px !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: #555 !important;
}
.mas-consent input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }

.mas-submit-btn {
	background: var(--mas-blue);
	color: #fff;
	border: none;
	padding: 14px;
	border-radius: var(--border-radius-md, 10px);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	margin-top: 6px;
	font-family: inherit;
}
.mas-submit-btn:hover { background: var(--mas-blue-bright); }
.mas-form-note { text-align: center; color: #999; font-size: 12px; margin: 0; }

.mas-map-btn {
	background: var(--mas-orange-soft);
	border: 1px dashed var(--mas-orange);
	color: var(--mas-orange-dark);
	padding: 10px 12px;
	border-radius: var(--border-radius-sm, 8px);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	margin-top: -6px;
	font-family: inherit;
}
.mas-map-confirm {
	background: var(--mas-blue-soft);
	color: var(--mas-blue-dark);
	padding: 8px 12px;
	border-radius: var(--border-radius-sm, 8px);
	font-size: 13px;
	margin: -6px 0 0;
}

.mas-btn-lokasi-ringan {
	background: #fff;
	border: 1px dashed var(--mas-orange);
	color: var(--mas-orange-dark);
	padding: 10px 12px;
	border-radius: var(--border-radius-sm, 8px);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	transition: var(--transition-base, all 0.3s ease);
}
.mas-btn-lokasi-ringan.is-done {
	border-style: solid;
	border-color: var(--mas-blue);
	color: var(--mas-blue-dark);
	background: var(--mas-blue-soft);
}

.mas-modal-box-map { max-width: 520px; }
#mas-leaflet-map { width: 100%; height: 320px; border-radius: var(--border-radius-md, 12px); margin: 8px 0; }
.mas-map-status { font-size: 13px; color: #666; margin: 0 0 12px; min-height: 18px; }

/* ==========================================================================
   SINKRON DENGAN FORM PEMESANAN (/form-pemesanan/) - sumber warna & gaya tunggal
   Semua form popup tema memakai palet kalem yang sama: oranye lembut #F7941D,
   biru #004AAD, latar biru-soft #EAF2FD, isian abu-abu lembut, tombol tanpa gradasi.
   Jika form-pemesanan diubah, perbarui bagian ini dengan token & aturan yang sama.
   ========================================================================== */
.mas-modal-overlay, .mas-hero-trigger{
	--mas-orange:#F7941D; --mas-orange-bright:#FFA733; --mas-orange-dark:#C26A00;
	--mas-orange-bg:#FBD9A8; --mas-orange-soft:#FFF4E5;
	--mas-blue:#004AAD; --mas-blue-bright:#0060DA; --mas-blue-dark:#00337A;
	--mas-blue-bg:#B9D2F2; --mas-blue-soft:#EAF2FD;
	--mas-green:#2a7d3f; --mas-red:#c0392b;
}
.mas-modal-overlay .mas-modal-box{ font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; color:#1F2933; }
.mas-modal-overlay .mas-modal-box button{ background-image:none; text-shadow:none; }
/* Tombol di popup: tidak ada gradasi/teks merah tua, kontras aman */
.mas-modal-overlay .mas-choice-btn{ background:#fff; color:var(--mas-blue-dark); border:1px solid var(--mas-blue-bg); box-shadow:none; }
.mas-modal-overlay .mas-choice-btn.mas-choice-primary{ background:var(--mas-blue-soft); border-color:var(--mas-blue); }
.mas-modal-overlay .mas-choice-btn:hover{ background:var(--mas-blue-soft); color:var(--mas-blue-dark); }
.mas-modal-overlay .mas-modal-close{ background:var(--mas-blue-soft); color:var(--mas-blue-dark); border:1px solid var(--mas-blue-bg); box-shadow:none; }
/* Aturan turunan dari form pemesanan */
.mas-modal-overlay .mas-badge {display:inline-block;background:var(--mas-orange-soft);color:var(--mas-orange-dark);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.mas-modal-overlay .mas-form {display:flex;flex-direction:column;gap:14px}
.mas-modal-overlay .mas-form label {display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#333}
.mas-modal-overlay .mas-form input[type=text], .mas-modal-overlay .mas-form input[type=tel], .mas-modal-overlay .mas-form input[type=date], .mas-modal-overlay .mas-form input[type=time], .mas-modal-overlay .mas-form input[type=number], .mas-modal-overlay .mas-form select, .mas-modal-overlay .mas-form textarea {font-weight:400;padding:10px 12px;border:1px solid #ddd;border-radius:var(--radius-sm);font-size:14px;font-family:inherit;width:100%}
.mas-modal-overlay .mas-form select:focus-visible, .mas-modal-overlay .mas-form input:focus-visible, .mas-modal-overlay .mas-form textarea:focus-visible, .mas-modal-overlay button:focus-visible {outline:2px solid var(--mas-blue);outline-offset:2px}
.mas-modal-overlay .mas-form-row {display:flex;gap:12px}
.mas-modal-overlay .mas-form-row label {flex:1}
.mas-modal-overlay .mas-form-sep {border:none;border-top:1px solid #eee;margin:4px 0}
.mas-modal-overlay .mas-form-hint {font-size:12px;color:#888;font-weight:400;margin-top:2px}
.mas-modal-overlay .mas-radio-group {display:flex;gap:10px;font-weight:400}
.mas-modal-overlay .mas-therapist-request-options, .mas-modal-overlay .mas-customer-gender-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.mas-modal-overlay .mas-therapist-request-options .mas-radio-option-free {grid-column:1/-1;width:min(100%,calc((100% - 10px)/2));justify-self:center}
.mas-modal-overlay .mas-radio-group label {flex:1;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 12px;border:2px solid #eee;border-radius:var(--radius-sm);cursor:pointer;font-weight:500;color:#444;transition:all .25s ease}
.mas-modal-overlay .mas-radio-group label:hover {border-color:var(--mas-blue-bg)}
.mas-modal-overlay .mas-radio-group label:has(input:checked) {border-color:var(--mas-blue);background:var(--mas-blue-soft);color:var(--mas-blue-dark)}
.mas-modal-overlay .mas-radio-group input[type=radio] {appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex-shrink:0;border:2px solid #ccc;border-radius:4px;position:relative;cursor:pointer}
.mas-modal-overlay .mas-radio-group input[type=radio]:checked {border-color:var(--mas-blue);background:var(--mas-blue)}
.mas-modal-overlay .mas-radio-group input[type=radio]:checked::after {content:"";position:absolute;left:4px;top:-1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mas-modal-overlay .mas-popupaddon-accordion {border-top:1px solid #eee;border-bottom:1px solid #eee;padding:4px 0}
.mas-modal-overlay .mas-popupaddon-summary {display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 0;border:none;background:none;cursor:pointer;font-weight:600;font-size:14px;color:#333;font-family:inherit;text-align:left}
.mas-modal-overlay .mas-popupaddon-summary>span:first-child {display:flex;align-items:center;gap:0}
.mas-modal-overlay .mas-addon-badge-count {background:var(--mas-blue);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:8px}
.mas-modal-overlay .mas-popupaddon-caret {color:#999;font-size:14px;transition:transform .25s ease}
.mas-modal-overlay .mas-popupaddon-accordion.is-open .mas-popupaddon-caret {transform:rotate(180deg)}
.mas-modal-overlay .mas-popupaddon-content {padding:4px 0 8px;display:none;flex-direction:column;gap:4px}
.mas-modal-overlay .mas-popupaddon-accordion.is-open .mas-popupaddon-content {display:flex}
.mas-modal-overlay .mas-addon-group-label {font-size:13px;font-weight:700;color:var(--mas-blue);margin:12px 0 6px}
.mas-modal-overlay .mas-addon-group-label:first-child {margin-top:0}
.mas-modal-overlay .mas-addon-item {display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;margin-bottom:8px;border:2px solid #eee;border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-weight:400;transition:all .25s ease}
.mas-modal-overlay .mas-addon-item:hover {border-color:var(--mas-blue-bg)}
.mas-modal-overlay .mas-addon-item:has(input:checked) {border-color:var(--mas-blue);background:var(--mas-blue-soft)}
.mas-modal-overlay .mas-addon-item input[type=checkbox] {width:22px;height:22px;flex-shrink:0;margin:0;accent-color:var(--mas-blue);cursor:pointer}
.mas-modal-overlay .mas-addon-name {flex:1;font-size:14px;font-weight:600;color:#333;line-height:1.3}
.mas-modal-overlay .mas-addon-price {flex-shrink:0;font-size:13px;font-weight:700;color:var(--mas-orange-dark);white-space:nowrap}
.mas-modal-overlay .mas-timeaddon-wrap {border:2px dashed var(--mas-blue-bg);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px}
.mas-modal-overlay .mas-timeaddon-wrap label {font-size:13px;gap:4px}
.mas-modal-overlay .mas-addon-subtle {font-weight:400;color:#888;font-size:12px}
.mas-modal-overlay .mas-qty-stepper {display:flex;align-items:center;gap:10px}
.mas-modal-overlay .mas-qty-btn {width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid #ddd;background:#fff;font-size:18px;font-weight:700;cursor:pointer;color:var(--mas-blue);font-family:inherit}
.mas-modal-overlay .mas-qty-btn:hover {background:var(--mas-blue-soft)}
.mas-modal-overlay #mas-jumlah-orang {width:64px;text-align:center;font-weight:700;flex:none}
.mas-modal-overlay .mas-midnight-warning {display:flex;gap:8px;align-items:flex-start;background:var(--mas-orange-soft);border:2px solid var(--mas-orange);color:var(--mas-orange-dark);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;font-weight:400}
.mas-modal-overlay .mas-midnight-warning[hidden] {display:none}
.mas-modal-overlay .mas-harga-preview-wrap {background:var(--mas-orange-soft);border-radius:var(--radius-sm);padding:12px 14px}
.mas-modal-overlay .mas-harga-preview-title {margin:0 0 8px;font-size:13px;font-weight:700;color:var(--mas-orange-dark)}
.mas-modal-overlay .mas-harga-table {width:100%;border-collapse:collapse;font-size:13px;color:#444}
.mas-modal-overlay .mas-harga-table td {padding:3px 0}
.mas-modal-overlay .mas-harga-table td:last-child {text-align:right;font-weight:600;white-space:nowrap;padding-left:10px}
.mas-modal-overlay .mas-harga-table tr.mas-harga-diskon td {color:var(--mas-green)}
.mas-modal-overlay .mas-harga-table tr.mas-harga-durasi td {color:var(--mas-blue-dark)}
.mas-modal-overlay .mas-harga-table tr.mas-harga-total td {border-top:1px solid var(--mas-orange-bg);padding-top:6px;font-size:15px;font-weight:700;color:var(--mas-orange-dark)}
.mas-modal-overlay .mas-payment-group {display:flex;flex-direction:column;gap:8px;font-weight:400}
.mas-modal-overlay .mas-payment-group label {flex-direction:row;align-items:center;gap:10px;margin:0;padding:10px 12px;border:2px solid #eee;border-radius:var(--radius-sm);cursor:pointer;font-weight:500;color:#444;transition:all .25s ease}
.mas-modal-overlay .mas-payment-group label:hover {border-color:var(--mas-blue-bg)}
.mas-modal-overlay .mas-payment-group label:has(input:checked) {border-color:var(--mas-blue);background:var(--mas-blue-soft);color:var(--mas-blue-dark)}
.mas-modal-overlay .mas-payment-group input[type=radio] {width:18px;height:18px;accent-color:var(--mas-blue)}
.mas-modal-overlay .mas-ticket-box {background:var(--mas-blue-soft);border:1px dashed var(--mas-blue);border-radius:var(--radius-md);padding:12px 14px;text-align:center}
.mas-modal-overlay .mas-ticket-box p {margin:0 0 6px;font-size:13px;color:var(--mas-blue-dark);font-weight:600}
.mas-modal-overlay .mas-ticket-box input {width:100%;text-align:center;font-weight:700;font-size:15px;color:var(--mas-blue-dark);background:#fff;border:1px solid var(--mas-blue-bg);border-radius:var(--radius-sm);padding:8px}
.mas-modal-overlay .mas-map-btn {background:var(--mas-orange-soft);border:1px dashed var(--mas-orange);color:var(--mas-orange-dark);padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;text-align:left;margin-top:-6px;font-family:inherit;width:100%}
.mas-modal-overlay .mas-map-confirm {background:var(--mas-blue-soft);color:var(--mas-blue-dark);padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;margin:-6px 0 0}
.mas-modal-overlay .mas-jam-error {color:var(--mas-red);font-size:12px;margin-top:-2px;font-weight:500}
.mas-modal-overlay .mas-consent {flex-direction:row !important;align-items:flex-start;gap:8px !important;font-weight:400 !important;font-size:13px !important;color:#555 !important}
.mas-modal-overlay .mas-consent input[type=checkbox] {margin-top:3px;width:16px;height:16px;flex-shrink:0}
.mas-modal-overlay .mas-submit-btn {background:var(--mas-blue);color:#fff;border:none;padding:14px;border-radius:var(--radius-md);font-weight:700;font-size:15px;cursor:pointer;margin-top:6px;font-family:inherit;width:100%;transition:background .2s}
.mas-modal-overlay .mas-submit-btn:hover {background:var(--mas-blue-bright)}
.mas-modal-overlay .mas-submit-btn:disabled {background:#ccc;cursor:not-allowed}
.mas-modal-overlay .mas-form-note {text-align:center;color:#999;font-size:12px;margin:0}