/* MAS Portal Terapis v0.8.0 — dua warna merek: ORANYE (identitas/harga) dan BIRU (aksi/status). */
html { min-height: 100%; background: #f2f5fa; }
body.mas-therapist-app-page { min-height: 100vh; margin: 0; padding: 1px 0 24px; background: #f2f5fa; color: #1d2938; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
#mas-therapist-app { width: 100%; }

.mas-claim-app,
.mas-claim-app * {
	box-sizing: border-box !important;
	font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	letter-spacing: normal !important;
}
.mas-claim-app {
	--o1: #F7941D; --o2: #D97706; --o3: #C45C00; --o-bg: #FFF4E5;
	--b1: #0060DA; --b2: #004AAD; --b3: #00337A; --b-bg: #EAF2FD; --b-line: #B9D2F2;
	--ink: #1d2938; --muted: #5b6a7d; --line: #dfe5ec;
	width: min(calc(100% - 24px), 680px) !important;
	max-width: 680px !important;
	margin: 24px auto !important;
	padding: 0 !important;
	color: var(--ink) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: left !important;
}
.mas-claim-app [hidden] { display: none !important; }
.mas-claim-app p, .mas-claim-app label, .mas-claim-app span, .mas-claim-app h2, .mas-claim-app h3, .mas-claim-app dt, .mas-claim-app dd {
	color: inherit; font-size: inherit; line-height: 1.5;
}

/* Header oranye (gradasi merek: Tertiary dominan agar teks putih tetap kontras) */
.mas-claim-app-header {
	display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
	padding: 18px 22px !important;
	background: linear-gradient(115deg, #F7941D 0%, #E97700 100%) !important;
	border-radius: 14px 14px 0 0 !important;
}
.mas-claim-app-header strong, .mas-claim-app-header span { display: block !important; color: #fff !important; }
.mas-claim-app-header strong { font-size: 21px !important; font-weight: 750 !important; }
.mas-claim-app-header span { font-size: 14px !important; opacity: .95; }
.mas-claim-app .mas-claim-app-header button {
	min-height: 38px !important; padding: 6px 14px !important; border: 1px solid rgb(255 255 255 / 55%) !important;
	border-radius: 999px !important; background: rgb(255 255 255 / 16%) !important; color: #fff !important; font-size: 13px !important;
}
.mas-claim-app-header [data-install-app][disabled] { cursor: default !important; opacity: .9 !important; }

.mas-claim-portal, .mas-therapist-login {
	padding: 20px !important; background: #fff !important; border: 1px solid #e2e7ed !important; border-top: 0 !important;
	border-radius: 0 0 14px 14px !important; box-shadow: 0 8px 24px rgb(21 32 51 / 8%) !important;
}
.mas-admin-preview-banner { margin: 0 0 14px !important; padding: 14px !important; border: 1px solid #f4bd78 !important; border-left: 5px solid #f7941d !important; border-radius: 10px !important; background: #fff8ef !important; }
.mas-admin-preview-banner > strong { display: block !important; margin-bottom: 8px !important; color: #9a4f00 !important; font-size: 16px !important; }
.mas-admin-preview-banner form { display: flex !important; align-items: end !important; gap: 8px !important; }
.mas-admin-preview-banner form label { flex: 1 1 auto !important; color: var(--ink) !important; font-weight: 600 !important; }
.mas-admin-preview-banner select { width: 100% !important; min-height: 44px !important; margin-top: 4px !important; padding: 8px !important; border: 1px solid #d6dce4 !important; border-radius: 8px !important; background: #fff !important; }
.mas-admin-preview-banner p { margin: 9px 0 0 !important; color: #66451f !important; font-size: 13px !important; }
.mas-claim-app .mas-preview-access-state { margin: 0 0 12px !important; padding: 10px 12px !important; border-radius: 8px !important; background: #eef8ef !important; color: #276738 !important; font-size: 13px !important; }

/* Tombol umum */
.mas-claim-app button, .mas-claim-app .mas-account-btn {
	display: inline-flex !important; min-height: 46px !important; align-items: center !important; justify-content: center !important;
	margin: 0 !important; padding: 10px 16px !important; border: 1px solid #c9d3df !important; border-radius: 10px !important;
	background: #fff !important; box-shadow: none !important; color: var(--b3) !important; font-size: 15px !important; font-weight: 650 !important;
	line-height: 1.2 !important; text-decoration: none !important; text-transform: none !important; cursor: pointer !important;
}
.mas-claim-app button:hover, .mas-claim-app .mas-account-btn:hover { background: var(--b-bg) !important; border-color: var(--b-line) !important; }
.mas-claim-app button:focus-visible, .mas-claim-app a:focus-visible { outline: 3px solid var(--b1) !important; outline-offset: 2px !important; }
.mas-claim-app .mas-order-primary, .mas-claim-app .mas-notification-toggle {
	border-color: var(--b3) !important; background: #004AAD !important; color: #fff !important;
}
.mas-claim-app .mas-order-primary:hover, .mas-claim-app .mas-notification-toggle:hover { background: #00337A !important; color: #fff !important; }
.mas-claim-app .mas-order-primary { width: 100% !important; margin-top: 4px !important; }
.mas-claim-app .mas-order-primary[disabled] { opacity: .6 !important; cursor: default !important; }

/* Kartu identitas terapis */
.mas-claim-app .mas-profile-card {
	margin: 0 0 14px !important; padding: 16px !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
	background: #fff !important; box-shadow: 0 2px 8px rgb(20 35 50 / 5%) !important;
}
.mas-claim-app .mas-profile-top { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 12px !important; }
.mas-claim-app .mas-profile-avatar {
	display: flex !important; flex: 0 0 52px !important; width: 52px !important; height: 52px !important; align-items: center !important; justify-content: center !important;
	border-radius: 50% !important; background: #004AAD !important; color: #fff !important; font-size: 22px !important; font-weight: 750 !important;
}
.mas-claim-app .mas-profile-avatar img { display: block !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; }
.mas-claim-app-footer { max-width: 960px; margin: 18px auto 0; padding: 14px 16px 22px; color: #5b6672; text-align: center; font-size: 12px; line-height: 1.6; }
.mas-claim-app-footer a { color: #004aad; text-decoration: underline; }
.mas-claim-app .mas-profile-name { margin: 0 !important; color: var(--ink) !important; font-size: 20px !important; font-weight: 750 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; }
.mas-claim-app .mas-profile-name a { color: inherit !important; text-decoration: underline !important; text-decoration-color: var(--b1) !important; text-underline-offset: 3px !important; }
.mas-claim-app .mas-profile-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 5px 0 0 !important; }
.mas-claim-app .mas-id-badge { padding: 3px 10px !important; border-radius: 999px !important; background: var(--o-bg) !important; color: var(--o3) !important; font-size: 12.5px !important; font-weight: 700 !important; }
.mas-claim-app .mas-active-badge { padding: 3px 10px !important; border-radius: 999px !important; background: var(--b-bg) !important; color: var(--b3) !important; font-size: 12.5px !important; font-weight: 700 !important; }
.mas-claim-app .mas-profile-list { display: grid !important; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.4fr) !important; gap: 8px 12px !important; margin: 0 0 12px !important; padding: 12px 0 0 !important; border-top: 1px solid #e8edf3 !important; }
.mas-claim-app .mas-profile-list dt { margin: 0 !important; color: var(--muted) !important; font-size: 13.5px !important; }
.mas-claim-app .mas-profile-list dd { margin: 0 !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 650 !important; overflow-wrap: anywhere !important; }
.mas-claim-app .mas-profile-label { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 0 7px !important; color: var(--muted) !important; font-size: 13.5px !important; cursor: pointer !important; list-style: none !important; }
.mas-claim-app .mas-profile-label::-webkit-details-marker { display: none !important; }
.mas-claim-app .mas-profile-label::after { content: '+'; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 1px solid var(--b-line); border-radius: 50%; background: var(--b-bg); color: var(--b3); font-size: 18px; font-weight: 700; line-height: 1; }
.mas-claim-app .mas-profile-services[open] > .mas-profile-label::after { content: '−'; }
.mas-claim-app .mas-services-count { display: inline-flex; min-width: 23px; height: 23px; align-items: center; justify-content: center; margin-left: auto; border-radius: 999px; background: var(--b-bg); color: var(--b3); font-size: 12px; font-weight: 700; }
.mas-claim-app .mas-profile-services[open] .mas-services-count { margin-left: 0; }
.mas-claim-app .mas-chip-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.mas-claim-app .mas-chip { padding: 5px 11px !important; border: 1px solid var(--b-line) !important; border-radius: 999px !important; background: var(--b-bg) !important; color: var(--b3) !important; font-size: 13px !important; font-weight: 600 !important; }
.mas-claim-app .mas-chip-empty { border-color: #f1c9a5 !important; background: var(--o-bg) !important; color: var(--o3) !important; }

/* Kartu notifikasi (menonjol): oranye = perlu tindakan, biru = sudah aktif */
.mas-claim-app .mas-notify-card {
	display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
	margin: 0 0 12px !important; padding: 14px 16px !important; border: 1px solid #f1c9a5 !important; border-left: 5px solid var(--o1) !important; border-radius: 12px !important; background: #fff8f0 !important;
}
.mas-claim-app .mas-notify-card[data-state="on"] { border-color: var(--b-line) !important; border-left-color: var(--b1) !important; background: var(--b-bg) !important; }
.mas-claim-app .mas-notify-text { flex: 1 1 auto !important; min-width: 0 !important; }
.mas-claim-app .mas-notify-text strong { display: block !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 750 !important; }
.mas-claim-app .mas-notify-text p { margin: 2px 0 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.mas-claim-app .mas-notify-card .mas-notification-toggle { flex: 0 0 auto !important; }
.mas-claim-app .mas-notify-card .mas-notification-toggle.is-active { border-color: var(--b-line) !important; background: #fff !important; color: var(--b3) !important; }

/* Ganti sandi + Keluar bersebelahan */
.mas-claim-app .mas-account-actions { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: center !important; gap: 10px !important; margin: 0 0 12px !important; }
.mas-claim-app .mas-account-actions > * { flex: 0 1 190px !important; min-width: 0 !important; white-space: nowrap !important; text-align: center !important; }
.mas-claim-app .mas-claim-logout { color: var(--o3) !important; border-color: #f1c9a5 !important; }
.mas-claim-app .mas-claim-logout:hover { background: var(--o-bg) !important; border-color: #e9ae7c !important; color: var(--o3) !important; }
.mas-claim-app .mas-password-result, .mas-claim-app .mas-claim-outcome { display: grid; justify-items: center; gap: 6px; padding: 8px; text-align: center; }
.mas-claim-app .mas-claim-outcome svg { width: 76px; height: 76px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.mas-claim-app .mas-claim-outcome.is-won { color: #D97706; }
.mas-claim-app .mas-claim-outcome.is-won svg circle { fill: #FFF7ED; }
.mas-claim-app .mas-claim-outcome.is-missed { color: #2563EB; }
.mas-claim-app .mas-claim-outcome.is-missed svg circle { fill: #EFF6FF; }
.mas-claim-app .mas-claim-outcome strong { color: inherit !important; font-size: 18px !important; }
.mas-claim-app .mas-claim-outcome span { color: var(--ink) !important; }
.mas-claim-app .mas-claim-notice.is-claim-won { border-color: #F59E0B !important; background: #FFF7ED !important; color: #B45309 !important; }
.mas-claim-app .mas-claim-notice.is-claim-missed { border-color: #60A5FA !important; background: #EFF6FF !important; color: #1D4ED8 !important; }
.mas-claim-app .mas-completion-notice strong { display: block; color: var(--ink) !important; font-size: 17px !important; }
.mas-claim-app .mas-completion-notice p { margin: 8px 0 12px !important; white-space: pre-line !important; color: var(--ink) !important; }
.mas-claim-app .mas-completion-notice a { color: #004AAD !important; font-weight: 700 !important; text-decoration: underline !important; }.mas-claim-app .mas-claim-notice {
	margin: 0 0 12px !important; padding: 12px 14px !important; border: 1px solid var(--b-line) !important; border-radius: 10px !important; background: var(--b-bg) !important; color: #1b3a63 !important;
}
.mas-claim-app .mas-change-password { margin: 0 0 14px !important; padding: 14px 16px 16px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; }
.mas-claim-app .mas-change-password p { margin: 0 0 12px !important; color: var(--ink) !important; }
.mas-claim-app .mas-change-password label { font-weight: 600 !important; }
.mas-claim-app .mas-change-password input[type="password"],
.mas-therapist-login input[type="text"],
.mas-therapist-login input[type="password"] {
	width: 100% !important; min-height: 46px !important; margin-top: 6px !important; padding: 10px 12px !important; border: 1px solid #aeb9c7 !important;
	border-radius: 8px !important; background: #fff !important; box-shadow: none !important; color: var(--ink) !important; font-size: 16px !important;
}

/* Tab: Tersedia / Order saya / Riwayat */
.mas-claim-app .mas-order-tabs { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 8px !important; margin: 16px 0 14px !important; padding: 0 0 12px !important; border-bottom: 1px solid #e1e6ec !important; }
.mas-claim-app .mas-order-tabs button { flex: 1 1 0 !important; min-width: 0 !important; white-space: nowrap !important; gap: 7px !important; min-height: 44px !important; padding: 8px 6px !important; border-radius: 10px !important; font-size: 14px !important; color: #34445a !important; }
.mas-claim-app .mas-order-tabs button span { min-width: 22px !important; padding: 1px 7px !important; border-radius: 999px !important; background: #edf1f5 !important; color: #34445a !important; font-size: 12px !important; text-align: center !important; }
.mas-claim-app .mas-order-tabs button[aria-selected="true"] { border-color: var(--b2) !important; background: var(--b-bg) !important; color: var(--b3) !important; }
.mas-claim-app .mas-order-tabs button[aria-selected="true"] span { background: var(--b2) !important; color: #fff !important; }

/* Kartu order */
.mas-claim-app .mas-claim-orders { display: grid !important; gap: 12px !important; }
.mas-claim-app .mas-order-card { margin: 0 !important; padding: 16px !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--b1) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 2px 8px rgb(20 35 50 / 4%) !important; }
.mas-claim-app .mas-order-claimed { border-left-color: var(--o1) !important; }
.mas-claim-app .mas-order-completed { border-left-color: #9fb0c4 !important; }
.mas-claim-app .mas-order-card-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; }
.mas-claim-app .mas-order-title { flex: 1 1 auto !important; margin: 0 0 9px !important; color: var(--ink) !important; font-size: 17px !important; font-weight: 750 !important; line-height: 1.3 !important; overflow-wrap: anywhere !important; }
.mas-claim-app .mas-order-status { flex: 0 0 auto !important; padding: 4px 10px !important; border-radius: 999px !important; background: #edf1f5 !important; color: #3c4b5e !important; font-size: 12px !important; font-weight: 700 !important; }
.mas-claim-app .mas-status-open { background: var(--b-bg) !important; color: var(--b3) !important; }
.mas-claim-app .mas-status-claimed { background: var(--o-bg) !important; color: var(--o3) !important; }
.mas-claim-app .mas-status-completed { background: #e9edf2 !important; color: #43546a !important; }
.mas-claim-app .mas-order-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 12px !important; }
.mas-claim-app .mas-order-meta span { display: inline-block !important; padding: 5px 9px !important; border-radius: 6px !important; background: #f4f6f8 !important; color: #46566a !important; font-size: 13px !important; }
.mas-claim-app .mas-order-details { display: grid !important; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr) !important; gap: 7px 12px !important; margin: 12px 0 !important; padding: 12px !important; border: 1px solid #e4e9ef !important; border-radius: 9px !important; background: #f8fafc !important; }
.mas-claim-app .mas-order-details dt { margin: 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.mas-claim-app .mas-order-details dd { margin: 0 !important; color: #253448 !important; font-size: 13px !important; font-weight: 600 !important; overflow-wrap: anywhere !important; }
.mas-claim-app .mas-order-details dd:last-child { color: var(--o3) !important; font-size: 15px !important; font-weight: 800 !important; }
.mas-claim-app .mas-order-contact { margin: 12px 0 !important; padding: 12px !important; border-left: 4px solid var(--b1) !important; border-radius: 0 8px 8px 0 !important; background: var(--b-bg) !important; }
.mas-claim-app .mas-order-contact p { margin: 5px 0 !important; color: #1b3a63 !important; font-size: 14px !important; overflow-wrap: anywhere !important; }
.mas-claim-app .mas-order-contact a { color: var(--b3) !important; font-weight: 650 !important; text-decoration: underline !important; }
.mas-claim-app .mas-order-empty { margin: 0 !important; padding: 24px 14px !important; border: 1px dashed #c3cfdd !important; border-radius: 10px !important; background: #f8fafc !important; color: #68778a !important; text-align: center !important; }

/* Login */
.mas-therapist-login { border-top: 1px solid #e2e7ed !important; border-radius: 14px !important; }
.mas-therapist-login h2 { margin: 0 0 10px !important; font-size: 22px !important; }
.mas-therapist-login label { color: #263445 !important; font-weight: 600 !important; }
.mas-therapist-login input[type="checkbox"] { width: 18px !important; height: 18px !important; vertical-align: middle !important; }
.mas-therapist-login button[type="submit"] { border-color: var(--b3) !important; background: #004AAD !important; color: #fff !important; }

@media (max-width: 520px) {
	.mas-claim-app { width: min(calc(100% - 20px), 680px) !important; margin: 12px auto !important; }
	.mas-claim-app-header { padding: 15px 16px !important; }
	.mas-claim-portal, .mas-therapist-login { padding: 14px !important; }
	.mas-claim-app-header strong { font-size: 18px !important; }
	.mas-claim-app .mas-notify-card { flex-direction: column !important; align-items: stretch !important; }
	.mas-claim-app .mas-notify-card .mas-notification-toggle { width: 100% !important; }
	.mas-claim-app .mas-profile-list { grid-template-columns: minmax(96px, .8fr) minmax(0, 1.4fr) !important; }
	.mas-claim-app .mas-order-card { padding: 14px !important; }
	.mas-claim-app .mas-order-title { font-size: 16px !important; }
	.mas-claim-app .mas-order-details { grid-template-columns: minmax(100px, .75fr) minmax(0, 1.25fr) !important; }
	.mas-claim-app .mas-order-tabs button { font-size: 13px !important; }
	.mas-admin-preview-banner form { flex-direction: column !important; align-items: stretch !important; }
}

/* Status siap menerima order (saklar) */
.mas-claim-app .mas-ready-card { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 12px !important; padding: 14px 16px !important; border: 1px solid var(--line) !important; border-left: 5px solid #9fb0c4 !important; border-radius: 12px !important; background: #f8fafc !important; }
.mas-claim-app .mas-ready-card[data-state="on"] { border-color: var(--b-line) !important; border-left-color: var(--b1) !important; background: #fff !important; }
.mas-claim-app .mas-ready-text { flex: 1 1 auto !important; min-width: 0 !important; }
.mas-claim-app .mas-ready-text strong { display: block !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 750 !important; }
.mas-claim-app .mas-ready-text p { margin: 2px 0 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.mas-claim-app .mas-switch, .mas-claim-app .mas-switch:hover { position: relative !important; display: block !important; flex: 0 0 58px !important; width: 58px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #b8c4d2 !important; }
.mas-claim-app .mas-switch[aria-checked="true"], .mas-claim-app .mas-switch[aria-checked="true"]:hover { background: #004AAD !important; }
.mas-claim-app .mas-switch .mas-switch-knob { position: absolute !important; top: 4px !important; left: 4px !important; display: block !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgb(0 0 0 / 30%) !important; transition: transform .18s ease !important; }
.mas-claim-app .mas-switch[aria-checked="true"] .mas-switch-knob { transform: translateX(24px) !important; }
.mas-claim-app .mas-switch[disabled] { opacity: .6 !important; }

/* Tombol di kartu order yang diambil */
.mas-claim-app .mas-order-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 6px !important; }
.mas-claim-app .mas-order-actions .mas-order-primary { margin-top: 0 !important; }
.mas-claim-app .mas-order-contact a.mas-wa-btn { display: flex !important; width: 100% !important; min-height: 46px !important; align-items: center !important; justify-content: center !important; margin-top: 10px !important; padding: 10px 14px !important; border-radius: 10px !important; background: #004AAD !important; color: #fff !important; font-weight: 700 !important; text-decoration: none !important; }
@media (max-width: 520px) {
	.mas-claim-app .mas-ready-text p { font-size: 12.5px !important; }
}

/* Pembayaran: LUNAS = biru, BELUM LUNAS = oranye */
.mas-claim-app .mas-pay-box { margin: 12px 0 !important; padding: 12px 14px !important; border: 1px solid #f1c9a5 !important; border-left: 5px solid var(--o1) !important; border-radius: 10px !important; background: #fff8f0 !important; }
.mas-claim-app .mas-pay-box.mas-pay-lunas { border-color: var(--b-line) !important; border-left-color: var(--b1) !important; background: var(--b-bg) !important; }
.mas-claim-app .mas-pay-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 0 4px !important; }
.mas-claim-app .mas-pay-head strong { color: var(--ink) !important; font-size: 15px !important; }
.mas-claim-app .mas-pay-badge { padding: 3px 11px !important; border-radius: 999px !important; background: var(--o3) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 800 !important; }
.mas-claim-app .mas-pay-lunas .mas-pay-badge { background: var(--b3) !important; }
.mas-claim-app .mas-pay-line { margin: 2px 0 !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 700 !important; }
.mas-claim-app .mas-pay-code { margin: 2px 0 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.mas-claim-app .mas-qris-btn { width: 100% !important; margin-top: 10px !important; }

/* Tampilan QRIS layar penuh untuk ditunjukkan ke pelanggan */
.mas-claim-app .mas-qris-overlay { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; background: rgb(15 25 40 / 75%) !important; }
.mas-claim-app .mas-qris-panel { width: min(100%, 420px) !important; max-height: 100% !important; overflow: auto !important; padding: 18px !important; border-radius: 14px !important; background: #fff !important; text-align: center !important; }
.mas-claim-app .mas-qris-panel h3 { margin: 0 0 10px !important; color: var(--ink) !important; font-size: 19px !important; }
.mas-claim-app .mas-qris-panel img { display: block !important; width: 100% !important; max-height: 60vh !important; margin: 0 auto 10px !important; object-fit: contain !important; }
.mas-claim-app .mas-qris-panel p { margin: 0 0 12px !important; color: var(--ink) !important; font-weight: 700 !important; }

/* Tombol akun (Ganti sandi, dll.): kalem seperti form pemesanan, tanpa gradasi, kontras tinggi */
.mas-claim-app .mas-account-actions button, .mas-claim-app .mas-account-btn, .mas-claim-app [data-toggle-password] { background: #EAF2FD !important; background-image: none !important; border-color: #B9D2F2 !important; color: #00337A !important; text-shadow: none !important; }
.mas-claim-app .mas-account-actions button:hover, .mas-claim-app .mas-account-btn:hover, .mas-claim-app [data-toggle-password]:hover { background: #DCE9FB !important; border-color: #004AAD !important; color: #00337A !important; }
.mas-claim-install-help { margin: 0 !important; padding: 10px 16px !important; background: #fff7ed !important; color: #7c2d12 !important; font-size: 14px !important; line-height: 1.5 !important; border-bottom: 1px solid #fed7aa !important; }
.mas-claim-install-help[hidden] { display: none !important; }

.mas-portal-announcement{margin:1rem 0;padding:1rem 1.1rem;border:1px solid #f4ad69;border-left:4px solid #f56600;border-radius:.85rem;background:#fff7ed;color:#4f2b12}
.mas-portal-announcement strong{display:block;margin-bottom:.35rem}.mas-portal-announcement p{margin:0;white-space:pre-wrap}


.mas-notification-help{margin:.55rem 0;color:#503515;font-size:.92rem;line-height:1.55}.mas-notification-help summary{cursor:pointer;font-weight:700}.mas-notification-help p{margin:.45rem 0 0}


/* Penyegaran, countdown reservasi, panduan dan kartu profil yang lebih menonjol. */
.mas-claim-app .mas-profile-card { padding: 20px !important; border-color: #d7e3f1 !important; box-shadow: 0 5px 16px rgb(20 35 50 / 7%) !important; }
.mas-claim-app .mas-profile-avatar { flex-basis: 68px !important; width: 68px !important; height: 68px !important; font-size: 26px !important; box-shadow: 0 0 0 4px #eaf2fd !important; }
.mas-claim-app .mas-profile-name { font-size: 23px !important; }
.mas-claim-app .mas-profile-label { font-size: 14.5px !important; font-weight: 650 !important; }
.mas-claim-app .mas-profile-services { padding: 9px 11px; border-radius: 10px; background: #f8fafc; }
.mas-claim-app .mas-order-refresh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -5px 0 12px; color: var(--muted); font-size: 12px; }
.mas-claim-app .mas-order-refresh button { min-height: 34px !important; padding: 6px 12px !important; border-radius: 8px !important; font-size: 12px !important; }
.mas-claim-app .mas-order-countdown { margin: -3px 0 12px !important; padding: 8px 10px !important; border-radius: 8px !important; background: #fff4e5 !important; color: #9a4f00 !important; font-size: 13px !important; font-weight: 750 !important; }
.mas-claim-app .mas-order-countdown.is-urgent { background: #fff0ec !important; color: #b42318 !important; }
.mas-claim-app .mas-order-countdown.is-expired { background: #fef2f2 !important; color: #991b1b !important; }
.mas-claim-app .mas-notification-help { margin-top: 9px !important; color: var(--b3) !important; }
.mas-claim-app .mas-notification-help > summary { cursor: pointer !important; font-size: 13px !important; font-weight: 700 !important; }
.mas-claim-app .mas-notification-help > p, .mas-claim-app .mas-portal-guide { color: var(--muted) !important; font-size: 13px !important; line-height: 1.65 !important; }
.mas-claim-app .mas-portal-guide { margin-top: 10px; padding: 12px; border: 1px solid #e2eaf4; border-radius: 10px; background: #f8fafc; }
.mas-claim-app .mas-portal-guide h3 { margin: 12px 0 4px !important; color: var(--ink) !important; font-size: 14px !important; }
.mas-claim-app .mas-portal-guide h3:first-child { margin-top: 0 !important; }
.mas-claim-app .mas-portal-guide p { margin: 4px 0 8px !important; }
.mas-claim-app .mas-portal-guide ul { margin: 6px 0 10px !important; padding-left: 21px !important; }
@media (max-width: 520px) { .mas-claim-app .mas-profile-card { padding: 16px !important; } .mas-claim-app .mas-profile-avatar { flex-basis: 60px !important; width: 60px !important; height: 60px !important; } .mas-claim-app .mas-order-refresh { font-size: 11px; } }

.mas-claim-app .mas-fee-reminder { margin: 9px 0 0 !important; padding: 10px 12px !important; border-left: 4px solid var(--o1) !important; border-radius: 0 8px 8px 0 !important; background: var(--o-bg) !important; color: #704214 !important; font-size: 12.5px !important; line-height: 1.55 !important; }
.mas-claim-app .mas-completion-instruction { margin: 0 0 10px !important; padding: 10px 12px !important; border-radius: 8px !important; background: var(--o-bg) !important; color: #704214 !important; font-weight: 700 !important; }

/* Foto profil kotak dan besar; seluruh foto terlihat tanpa pemotongan. */
.mas-claim-app .mas-profile-top { align-items: flex-start !important; gap: 18px !important; }
.mas-claim-app .mas-profile-avatar { flex: 0 0 132px !important; width: 132px !important; height: 132px !important; border: 1px solid #dfe5ec !important; border-radius: 16px !important; background: #f8fafc !important; color: #004AAD !important; font-size: 40px !important; box-shadow: 0 3px 12px rgb(20 35 50 / 9%) !important; overflow: hidden !important; }
.mas-claim-app .mas-profile-avatar img { width: 100% !important; height: 100% !important; padding: 4px !important; border-radius: 0 !important; background: #fff !important; object-fit: contain !important; }
@media (max-width: 520px) {
  .mas-claim-app .mas-profile-top { gap: 13px !important; }
  .mas-claim-app .mas-profile-avatar { flex-basis: 104px !important; width: 104px !important; height: 104px !important; border-radius: 14px !important; }
  .mas-claim-app .mas-profile-name { font-size: 20px !important; }
}

.mas-claim-app .mas-order-actions .mas-share-nota-btn { grid-column: 1 / -1 !important; border-color: #b9d2f2 !important; background: #eaf2fd !important; color: #00337a !important; }
.mas-claim-app .mas-order-actions .mas-share-nota-btn:hover { background: #dce9fb !important; }


/* ===== MAS Portal 1.3.9 — tab menu, kartu lebih rapi, foto profil kotak utuh, langkah order berurutan ===== */
body.mas-therapist-app-page { background: linear-gradient(180deg, #fff4e5 0, #f2f5fa 260px) fixed !important; }
.mas-claim-app { --shadow-s: 0 1px 3px rgb(20 35 50 / 7%), 0 1px 2px rgb(20 35 50 / 5%); --shadow-m: 0 6px 20px rgb(20 35 50 / 9%); --radius: 16px; }
.mas-claim-app-header { padding: 20px 22px !important; border-radius: 20px 20px 0 0 !important; background: linear-gradient(120deg, #F7941D 0%, #E97700 60%, #D96A00 100%) !important; }
.mas-claim-app-header strong { font-size: 22px !important; }
.mas-claim-app-header span { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
.mas-claim-portal, .mas-therapist-login { padding: 18px !important; border-radius: 0 0 20px 20px !important; box-shadow: var(--shadow-m) !important; }

/* Tab menu utama */
.mas-claim-app .mas-main-tabs { position: sticky !important; top: 8px !important; z-index: 20 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; margin: 0 0 16px !important; padding: 5px !important; border: 1px solid #dfe7f1 !important; border-radius: 14px !important; background: rgb(244 247 251 / 94%) !important; backdrop-filter: blur(6px); box-shadow: var(--shadow-s) !important; }
.mas-claim-app .mas-main-tabs button { position: relative !important; flex-direction: column !important; gap: 2px !important; min-height: 54px !important; padding: 7px 4px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #52627a !important; font-size: 13px !important; font-weight: 700 !important; }
.mas-claim-app .mas-main-tabs button:hover { background: #e8eef7 !important; }
.mas-claim-app .mas-main-tabs button[aria-selected="true"] { background: #fff !important; color: var(--b2) !important; box-shadow: 0 1px 4px rgb(20 35 50 / 14%), inset 0 -3px 0 var(--o1) !important; }
.mas-claim-app .mas-tab-ico { font-size: 18px !important; line-height: 1 !important; }
.mas-claim-app .mas-main-tabs button.has-alert::after { content: ''; position: absolute; top: 7px; right: calc(50% - 24px); width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #E5484D; }
.mas-claim-app .mas-tab-panel { animation: masFade .18s ease; }
@keyframes masFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mas-claim-app .mas-tab-panel { animation: none; } }

/* Kartu profil: foto KOTAK dan UTUH (tidak terpotong) */
.mas-claim-app .mas-profile-card { padding: 18px !important; border: 1px solid #e0e8f2 !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-m) !important; }
.mas-claim-app .mas-profile-avatar { flex: 0 0 128px !important; width: 128px !important; height: 128px !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border: 1px solid #d7e3f1 !important; border-radius: 16px !important; background: #eef3fa !important; box-shadow: var(--shadow-s) !important; }
.mas-claim-app .mas-profile-avatar img { width: 100% !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; background: #eef3fa !important; object-fit: contain !important; object-position: center !important; }
.mas-claim-app .mas-profile-id { flex: 1 1 auto !important; min-width: 0 !important; padding-top: 4px !important; }
.mas-claim-app .mas-profile-list dt { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
.mas-claim-app .mas-profile-list dd { font-size: 15px !important; }
.mas-claim-app .mas-profile-services { border: 1px solid #e4ebf3 !important; background: #f7f9fc !important; }

.mas-claim-app .mas-ready-card, .mas-claim-app .mas-notify-card { border-radius: var(--radius) !important; box-shadow: var(--shadow-s) !important; }
.mas-claim-app .mas-ready-card { margin-bottom: 16px !important; }
.mas-claim-app .mas-ready-card[data-state="on"] { border-color: #c6ebd6 !important; border-left-color: #1a9e5c !important; background: #f2fbf6 !important; }
.mas-claim-app .mas-ready-card[data-state="on"] .mas-switch[aria-checked="true"] { background: #1a9e5c !important; }

/* Sub-tab order jadi pil */
.mas-claim-app .mas-order-tabs { gap: 6px !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; }
.mas-claim-app .mas-order-tabs button { min-height: 42px !important; border: 1px solid #dbe3ee !important; border-radius: 999px !important; background: #fff !important; font-weight: 700 !important; }
.mas-claim-app .mas-order-tabs button[aria-selected="true"] { border-color: var(--b2) !important; background: var(--b2) !important; color: #fff !important; box-shadow: 0 2px 8px rgb(0 74 173 / 28%) !important; }
.mas-claim-app .mas-order-tabs button[aria-selected="true"] span { background: #fff !important; color: var(--b2) !important; }
.mas-claim-app .mas-order-refresh { margin: 0 0 12px !important; padding: 8px 10px !important; border-radius: 10px !important; background: #f4f7fb !important; }

/* Kartu order */
.mas-claim-app .mas-claim-orders { gap: 14px !important; }
.mas-claim-app .mas-order-card { padding: 18px !important; border: 1px solid #e0e8f2 !important; border-left-width: 5px !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-s) !important; }
.mas-claim-app .mas-order-title { font-size: 18px !important; }
.mas-claim-app .mas-order-meta span { border-radius: 999px !important; padding: 5px 11px !important; background: #eef3fa !important; font-weight: 600 !important; }
.mas-claim-app .mas-order-details { border-radius: 12px !important; background: #f7f9fc !important; }
.mas-claim-app .mas-order-contact { border-radius: 0 12px 12px 0 !important; }
.mas-claim-app .mas-order-primary { min-height: 50px !important; border-radius: 12px !important; background: linear-gradient(135deg, #0060DA, #004AAD) !important; box-shadow: 0 3px 10px rgb(0 74 173 / 25%) !important; }
.mas-claim-app .mas-order-empty { border-radius: 14px !important; padding: 34px 16px !important; }

/* Langkah setelah menang: 1 unduh nota, 2 kirim nota, 3 chat, 4 selesai */
.mas-claim-app .mas-order-steps { margin: 14px 0 0 !important; padding: 14px !important; border: 1px solid #e0e8f2 !important; border-radius: 14px !important; background: #f7f9fc !important; }
.mas-claim-app .mas-nota-warning { margin: 0 0 12px !important; padding: 10px 12px !important; border-left: 4px solid #E5484D !important; border-radius: 0 10px 10px 0 !important; background: #fff1f0 !important; color: #8a1c1c !important; font-size: 13.5px !important; font-weight: 650 !important; line-height: 1.55 !important; }
.mas-claim-app .mas-order-steps .mas-order-actions { grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 !important; }
.mas-claim-app .mas-order-actions .mas-download-btn, .mas-claim-app .mas-order-actions .mas-share-nota-btn { grid-column: auto !important; justify-content: flex-start !important; min-height: 50px !important; border-color: #b9d2f2 !important; border-radius: 12px !important; background: #eaf2fd !important; color: #00337a !important; }
.mas-claim-app .mas-order-actions .mas-chat-btn { justify-content: flex-start !important; min-height: 50px !important; border-color: #1a9e5c !important; border-radius: 12px !important; background: #1a9e5c !important; color: #fff !important; }
.mas-claim-app .mas-order-actions .mas-chat-btn:hover { background: #148049 !important; }
.mas-claim-app .mas-order-actions .mas-chat-btn[disabled] { opacity: .5 !important; cursor: default !important; }
.mas-claim-app .mas-order-actions .mas-order-primary { justify-content: flex-start !important; }

.mas-claim-app .mas-change-password { border-radius: var(--radius) !important; box-shadow: var(--shadow-s) !important; }
.mas-claim-app .mas-account-actions { margin: 14px 0 !important; }
.mas-claim-app .mas-account-actions > * { flex: 1 1 0 !important; }
.mas-portal-announcement { border-radius: 14px !important; box-shadow: var(--shadow-s) !important; }

@media (max-width: 520px) {
	.mas-claim-portal, .mas-therapist-login { padding: 12px !important; }
	.mas-claim-app .mas-profile-avatar { flex-basis: 104px !important; width: 104px !important; height: 104px !important; }
	.mas-claim-app .mas-main-tabs button { font-size: 12px !important; }
}

/* 1.3.10: tab Beranda + 3 tab */
.mas-claim-app .mas-main-tabs { grid-template-columns: repeat(4, 1fr) !important; }
.mas-claim-app .mas-tab-panel + .mas-tab-panel { margin-top: 18px !important; }
@media (max-width: 380px) { .mas-claim-app .mas-main-tabs button { font-size: 11px !important; } }


/* 1.3.11: navigasi atas datar (ikon + teks sebaris, satu baris sejajar) */
.mas-claim-app .mas-main-tabs { align-items: stretch !important; }
.mas-claim-app .mas-main-tabs button { flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; min-height: 46px !important; padding: 6px 4px !important; white-space: nowrap !important; line-height: 1 !important; }
.mas-claim-app .mas-main-tabs button .mas-tab-ico { font-size: 16px !important; }
.mas-claim-app .mas-main-tabs button.has-alert::after { top: 6px !important; right: 6px !important; }
@media (max-width: 480px) {
	.mas-claim-app .mas-main-tabs button .mas-tab-ico { display: none !important; }
	.mas-claim-app .mas-main-tabs button { font-size: 12.5px !important; }
}

/* 1.3.11: gambar menang tepat di bawah tab, sebelum data order */
.mas-claim-app .mas-win-slot { margin: 0 0 12px !important; padding: 10px 14px !important; border: 1px solid #F59E0B !important; border-radius: 12px !important; background: #FFF7ED !important; color: #B45309 !important; }

/* 1.3.11: panduan nota (buka-tutup) */
.mas-claim-app .mas-nota-help { padding: 0 !important; }
.mas-claim-app .mas-nota-help > summary { cursor: pointer !important; padding: 10px 12px !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.5 !important; }
.mas-claim-app .mas-nota-help-body { padding: 0 12px 10px !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.6 !important; }
.mas-claim-app .mas-nota-help-body p { margin: 8px 0 0 !important; }
.mas-claim-app .mas-nota-help-body strong { font-weight: 700 !important; }

/* 1.3.11: Beranda saja — urutan: Ganti sandi/Keluar, Profil, Notifikasi order, Status menerima, daftar order */
.mas-claim-app .mas-claim-portal[data-view="all"] { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.mas-claim-app .mas-claim-portal[data-view="all"] > .mas-tab-panel { display: contents !important; }
.mas-claim-app .mas-claim-portal[data-view="all"] > *,
.mas-claim-app .mas-claim-portal[data-view="all"] > .mas-tab-panel > * { margin: 0 !important; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-account-actions { order: 1; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-password-result { order: 2; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-change-password { order: 3; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-profile-card { order: 4; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-notify-card { order: 5; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-ready-card { order: 6; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-order-tabs { order: 7; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-win-slot { order: 8; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-order-refresh { order: 9; }
.mas-claim-app .mas-claim-portal[data-view="all"] .mas-claim-orders { order: 10; }

/* 1.3.12: navigasi atas — aturan berspesifisitas tinggi agar selalu satu baris datar; .is-stacked = cadangan rata kanan */
.mas-claim-app nav.mas-main-tabs[role="tablist"]{display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;justify-content:space-between!important;gap:4px!important;width:100%!important;grid-template-columns:none!important}
.mas-claim-app nav.mas-main-tabs[role="tablist"]>button{display:flex!important;flex:1 1 0%!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:auto!important;min-width:0!important;min-height:46px!important;padding:6px 2px!important;white-space:nowrap!important;line-height:1!important}
.mas-claim-app nav.mas-main-tabs[role="tablist"]>button .mas-tab-ico{display:inline-block!important;flex:0 0 auto!important;font-size:16px!important;line-height:1!important}
@media (max-width:480px){.mas-claim-app nav.mas-main-tabs[role="tablist"]>button{font-size:12.5px!important}
.mas-claim-app nav.mas-main-tabs[role="tablist"]>button .mas-tab-ico{display:none!important}
}
.mas-claim-app nav.mas-main-tabs[role="tablist"].is-stacked{flex-direction:column!important;align-items:flex-end!important;width:max-content!important;max-width:100%!important;margin-left:auto!important}
.mas-claim-app nav.mas-main-tabs[role="tablist"].is-stacked>button{flex:0 0 auto!important;width:100%!important;justify-content:flex-end!important;padding:6px 14px!important}

/* 1.3.20: navigasi atas memakai class baru .mas-topnav (grid 4 kolom, sticky, rata tengah). Aturan lama .mas-main-tabs di atas tidak lagi dipakai. */
.mas-claim-app nav.mas-topnav{position:sticky!important;top:0!important;z-index:50!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;justify-content:center!important;gap:4px!important;width:100%!important;box-sizing:border-box!important;margin:0 0 16px!important;padding:5px!important;border:1px solid #dfe7f1!important;border-radius:14px!important;background:#f4f7fb!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:var(--shadow-s)!important}
.mas-claim-app nav.mas-topnav>button{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-width:0!important;min-height:46px!important;margin:0!important;padding:6px 2px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#52627a!important;font-size:13px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;text-align:center!important}
.mas-claim-app nav.mas-topnav>button:hover{background:#e8eef7!important}
.mas-claim-app nav.mas-topnav>button[aria-selected="true"]{background:#fff!important;color:var(--b2)!important;box-shadow:0 1px 4px rgb(20 35 50 / 14%),inset 0 -3px 0 var(--o1)!important}
.mas-claim-app nav.mas-topnav>button.has-alert::after{content:'';position:absolute;top:6px;right:6px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#E5484D}
.mas-claim-app nav.mas-topnav>button .mas-tab-ico{display:inline-block!important;font-size:16px!important;line-height:1!important}
@media (max-width:480px){.mas-claim-app nav.mas-topnav>button{font-size:12.5px!important}.mas-claim-app nav.mas-topnav>button .mas-tab-ico{display:none!important}}
/* 1.3.19: opsi tampilkan kata sandi */
.mas-claim-app .mas-show-pw{margin:-4px 0 12px!important}
.mas-claim-app .mas-show-pw label{display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:14px!important}
.mas-claim-app .mas-show-pw input[type="checkbox"]{width:18px!important;height:18px!important;margin:0!important}
.mas-claim-install-help .mas-ios-guide-title { display: block !important; margin: 0 0 6px !important; font-size: 15px !important; color: #9a3412 !important; }
.mas-claim-install-help .mas-ios-guide-steps { margin: 6px 0 8px !important; padding-left: 20px !important; }
.mas-claim-install-help .mas-ios-guide-steps li { margin: 0 0 5px !important; }
.mas-claim-install-help p { margin: 6px 0 !important; }
.mas-claim-install-help .mas-ios-guide-warn { padding: 8px 10px !important; border-radius: 8px !important; background: #fff !important; border: 1px solid #f59e0b !important; color: #9a4f00 !important; font-weight: 600 !important; }
.mas-claim-install-help .mas-ios-guide-note { font-size: 13px !important; opacity: .9 !important; }
.mas-claim-install-help .mas-ios-guide-copy { display: block !important; margin: 8px 0 0 !important; padding: 8px 14px !important; border: 1px solid #004AAD !important; border-radius: 8px !important; background: #fff !important; color: #004AAD !important; font-weight: 700 !important; font-size: 14px !important; min-height: 40px !important; }