/* ==========================================================================
   Tuma Wallet Transfer — full-screen fintech UI
   Scope everything under .tuma-tf to avoid any theme collisions.
   ========================================================================== */

:root{
	--tuma-deep-green:#064e3b;
	--tuma-green:#059669;
	--tuma-emerald:#10b981;
	--tuma-green-light:#ecfdf5;
	--tuma-green-border:#6ee7b7;
	--tuma-white:#ffffff;
	--tuma-bg:#f4f6f8;
	--tuma-text:#111827;
	--tuma-text-muted:#6b7280;
	--tuma-border:#e5e7eb;
	--tuma-error:#dc2626;
	--tuma-error-bg:#fef2f2;
	--tuma-error-border:#fca5a5;
	--tuma-radius-lg:22px;
	--tuma-radius-md:16px;
	--tuma-radius-sm:12px;
	--tuma-shadow:0 20px 50px rgba(6,78,59,0.10);
	--tuma-font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* Full-screen takeover: hides normal theme chrome for a true app feel
   without editing the theme itself. */
body.page-template-default:has(#tumaTf),
body:has(#tumaTf){
	background:var(--tuma-bg);
}

#tumaTf, .tuma-tf{
	font-family:var(--tuma-font);
	max-width:520px;
	margin:0 auto;
	min-height:100vh;
	background:var(--tuma-bg);
	position:relative;
}

*{ box-sizing:border-box; }

.tuma-tf *{ box-sizing:border-box; }

.tuma-tf__header{
	background:linear-gradient(135deg,var(--tuma-deep-green) 0%,var(--tuma-green) 60%,var(--tuma-emerald) 100%);
	padding:36px 24px 46px;
	position:relative;
	overflow:hidden;
}

.tuma-tf__header::before{
	content:'';
	position:absolute;
	top:-50px; right:-50px;
	width:200px; height:200px;
	background:rgba(255,255,255,0.07);
	border-radius:50%;
}

.tuma-tf__brand{
	display:flex;
	align-items:center;
	gap:14px;
	position:relative;
	z-index:1;
}

.tuma-tf__brand-icon{
	width:52px; height:52px;
	background:rgba(255,255,255,0.16);
	border-radius:16px;
	display:flex; align-items:center; justify-content:center;
	font-size:24px;
	flex-shrink:0;
}

.tuma-tf__title{
	margin:0;
	color:#fff;
	font-size:24px;
	font-weight:800;
	letter-spacing:-0.4px;
}

.tuma-tf__subtitle{
	margin:2px 0 0;
	color:rgba(255,255,255,0.78);
	font-size:13px;
	font-weight:500;
}

.tuma-tf__body{
	padding:0 20px 60px;
	margin-top:-30px;
	position:relative;
	z-index:1;
}

.tuma-tf__card{
	background:var(--tuma-white);
	border-radius:var(--tuma-radius-lg);
	box-shadow:var(--tuma-shadow);
}

.tuma-tf__balance-card{
	padding:20px 22px;
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:22px;
	border:1px solid #eef2f1;
}

.tuma-tf__balance-icon{
	width:48px; height:48px;
	background:var(--tuma-green-light);
	border:1.5px solid var(--tuma-green-border);
	border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	font-size:22px;
	flex-shrink:0;
}

.tuma-tf__balance-label{
	font-size:12px;
	font-weight:700;
	color:var(--tuma-text-muted);
	text-transform:uppercase;
	letter-spacing:0.6px;
	margin-bottom:4px;
}

.tuma-tf__balance-amount{
	font-size:26px;
	font-weight:800;
	color:var(--tuma-deep-green);
	letter-spacing:-0.4px;
}

.tuma-tf__currency{
	font-size:14px;
	font-weight:700;
	color:var(--tuma-green);
}

.tuma-tf__form{
	background:var(--tuma-white);
	border-radius:var(--tuma-radius-lg);
	padding:24px 22px 26px;
	box-shadow:var(--tuma-shadow);
	border:1px solid #eef2f1;
}

.tuma-tf__field{ margin-bottom:20px; }

.tuma-tf__label{
	display:block;
	font-size:12px;
	font-weight:800;
	color:#374151;
	text-transform:uppercase;
	letter-spacing:0.6px;
	margin-bottom:8px;
}

.tuma-tf__input-wrap{
	position:relative;
	display:flex;
	align-items:stretch;
	border-radius:14px;
	border:2px solid var(--tuma-border);
	background:#f9fafb;
	outline:none;
	transition:border-color .18s, box-shadow .18s, background .18s;
	overflow:hidden;
}

/* Icon is a real flex box with its own reserved width, not an overlay
   positioned on top of the text — so it can never overlap the value
   the user types, regardless of emoji glyph width/rendering on Android. */
.tuma-tf__input-icon{
	flex:0 0 44px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:17px;
	pointer-events:none;
	color:var(--tuma-text-muted);
}

.tuma-tf__input{
	flex:1 1 auto;
	min-width:0;
	width:100%;
	padding:15px 16px 15px 2px;
	border:none;
	border-radius:0;
	font-size:16px;
	font-weight:600;
	color:var(--tuma-text);
	background:transparent;
	outline:none;
	font-family:var(--tuma-font);
	-webkit-appearance:none;
}

.tuma-tf__input::placeholder{ color:#9ca3af; font-weight:500; }

.tuma-tf__input-wrap:focus-within{
	border-color:var(--tuma-green);
	background:#fff;
	box-shadow:0 0 0 4px rgba(5,150,105,0.10);
}

.tuma-tf__input-wrap:has(.tuma-tf__input.is-valid){ border-color:var(--tuma-emerald); }
.tuma-tf__input-wrap:has(.tuma-tf__input.is-invalid){ border-color:var(--tuma-error); }

.tuma-tf__status{
	margin-top:10px;
	font-size:14px;
	font-weight:700;
	border-radius:12px;
	display:none;
	align-items:center;
	gap:8px;
	padding:0;
}

.tuma-tf__status.show{ display:flex; }

.tuma-tf__status.success{
	background:linear-gradient(135deg,var(--tuma-green-light),#d1fae5);
	border:1.5px solid var(--tuma-green-border);
	color:var(--tuma-deep-green);
	padding:12px 14px;
}

.tuma-tf__status.error{
	background:var(--tuma-error-bg);
	border:1.5px solid var(--tuma-error-border);
	color:var(--tuma-error);
	padding:12px 14px;
}

.tuma-tf__status.loading{
	color:var(--tuma-text-muted);
	font-weight:600;
	font-size:13px;
	padding:2px 0;
}

.tuma-tf__receiver-name{
	font-size:16px;
	font-weight:800;
}

.tuma-tf__submit{
	width:100%;
	border:none;
	padding:18px;
	border-radius:16px;
	background:linear-gradient(135deg,var(--tuma-deep-green),var(--tuma-green));
	color:#fff;
	font-size:16px;
	font-weight:800;
	cursor:pointer;
	letter-spacing:0.2px;
	transition:transform .15s, box-shadow .15s, opacity .15s;
	font-family:var(--tuma-font);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	box-shadow:0 10px 25px rgba(5,150,105,0.30);
}

.tuma-tf__submit:disabled{
	opacity:0.5;
	cursor:not-allowed;
	box-shadow:none;
}

.tuma-tf__submit:not(:disabled):active{
	transform:translateY(1px) scale(0.99);
}

.tuma-tf__submit-icon{ font-size:18px; }

.tuma-tf__form-error{
	margin-top:14px;
	text-align:center;
	font-weight:700;
	font-size:14px;
	color:var(--tuma-error);
	min-height:20px;
}

/* Overlays */
.tuma-tf__overlay{
	position:fixed;
	inset:0;
	background:rgba(6,20,15,0.55);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	padding:16px;
	animation:tumaFadeIn .2s ease-out;
}

/* CRITICAL: without this, the browser's built-in [hidden]{display:none}
   rule gets overridden by the display:flex rule above (author CSS always
   wins over the UA default at equal specificity), so setting
   element.hidden = true in JS would silently fail to hide the overlay. */
.tuma-tf__overlay[hidden]{
	display:none !important;
}

@keyframes tumaFadeIn{ from{opacity:0;} to{opacity:1;} }

.tuma-tf__overlay--processing{
	flex-direction:column;
	gap:16px;
}

.tuma-tf__spinner{
	width:46px; height:46px;
	border-radius:50%;
	border:4px solid rgba(255,255,255,0.25);
	border-top-color:#fff;
	animation:tumaSpin .8s linear infinite;
}

@keyframes tumaSpin{ to{ transform:rotate(360deg); } }

.tuma-tf__processing-text{
	color:#fff;
	font-weight:700;
	font-size:14px;
}

.tuma-tf__receipt{
	background:#fff;
	border-radius:24px;
	max-width:420px;
	width:100%;
	max-height:90vh;
	overflow-y:auto;
	padding:28px 24px 24px;
	animation:tumaPopIn .25s ease-out;
	box-shadow:0 30px 80px rgba(0,0,0,0.35);
}

@keyframes tumaPopIn{
	from{ opacity:0; transform:translateY(20px) scale(0.97); }
	to{ opacity:1; transform:translateY(0) scale(1); }
}

.tuma-tf__receipt-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-size:19px;
	font-weight:800;
	color:var(--tuma-deep-green);
	margin-bottom:16px;
	text-align:center;
}

.tuma-tf__receipt-badge-icon{ font-size:24px; }

.tuma-tf__receipt-sentence{
	background:var(--tuma-green-light);
	border:1.5px solid var(--tuma-green-border);
	border-radius:14px;
	padding:16px;
	font-size:14px;
	line-height:1.9;
	color:var(--tuma-deep-green);
	font-weight:600;
	text-align:center;
	margin:0 0 18px;
}

.tuma-tf__receipt-summary{
	border-top:1px dashed var(--tuma-border);
	padding-top:14px;
}

.tuma-tf__receipt-row{
	display:flex;
	justify-content:space-between;
	gap:12px;
	padding:9px 0;
	border-bottom:1px solid #f1f5f9;
	font-size:13px;
}

.tuma-tf__receipt-row:last-child{ border-bottom:none; }

.tuma-tf__receipt-row-label{
	color:var(--tuma-text-muted);
	font-weight:600;
}

.tuma-tf__receipt-row-value{
	color:var(--tuma-text);
	font-weight:800;
	text-align:right;
	word-break:break-word;
}

.tuma-tf__receipt-row-value.green{ color:var(--tuma-green); }

.tuma-tf__receipt-actions{
	display:flex;
	gap:10px;
	margin-top:20px;
}

.tuma-tf__btn{
	flex:1;
	padding:14px;
	border-radius:14px;
	font-weight:800;
	font-size:14px;
	border:none;
	cursor:pointer;
	font-family:var(--tuma-font);
	transition:transform .15s, opacity .15s;
}

.tuma-tf__btn:active{ transform:translateY(1px); }

.tuma-tf__btn--ghost{
	background:#f3f4f6;
	color:#374151;
}

.tuma-tf__btn--primary{
	background:linear-gradient(135deg,var(--tuma-deep-green),var(--tuma-green));
	color:#fff;
	box-shadow:0 8px 20px rgba(5,150,105,0.30);
}

/* Mobile */
@media (max-width:600px){
	.tuma-tf__header{ padding:26px 18px 40px; }
	.tuma-tf__title{ font-size:21px; }
	.tuma-tf__body{ padding:0 14px 50px; }
	.tuma-tf__balance-amount{ font-size:23px; }
	.tuma-tf__input{ font-size:16px; padding-top:16px; padding-bottom:16px; }
	.tuma-tf__submit{ padding:17px; font-size:15px; }
}