/*
Theme Name: FruityFarm
Theme URI: https://fruityfarm.online
Author: FruityFarm
Description: Mobile-first, app-style WordPress theme for the FruityFarm tree-farming engagement app. Pure UI layer — all real data is fetched from the FruityFarm Engine plugin's REST API (namespace ffarm/v1). No hardcoded demo data in production paths.
Version: 1.10.1
Requires PHP: 7.4
Text Domain: fruityfarm
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
	--ff-bg-0:#050d06;
	--ff-bg-1:#0a1c0e;
	--ff-bg-2:#0d2818;
	--ff-card:#0e2214cc;
	--ff-card-solid:#0e2214;
	--ff-border:rgba(139,195,74,.30);
	--ff-border-strong:rgba(139,195,74,.55);
	--ff-accent:#8bc34a;
	--ff-accent-2:#6fcf3e;
	--ff-accent-dark:#4c9a24;
	--ff-accent-glow:rgba(139,195,74,.35);
	--ff-text:#f4f8ef;
	--ff-text-dim:#9fb79a;
	--ff-text-faint:#6e8a6a;
	--ff-blue:#3aa0ff;
	--ff-purple:#a266f0;
	--ff-red:#ef5350;
	--ff-amber:#ffb43c;
	--ff-radius-lg:22px;
	--ff-radius-md:16px;
	--ff-radius-sm:12px;
	--ff-shadow-glow:0 0 0 1px var(--ff-border), 0 8px 24px rgba(0,0,0,.45);
	--ff-maxw:480px;
	--ff-font:'Poppins','Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
	margin:0; padding:0;
	background:
		radial-gradient(ellipse at top, var(--ff-bg-2) 0%, var(--ff-bg-1) 45%, var(--ff-bg-0) 100%);
	color:var(--ff-text);
	font-family:var(--ff-font);
	min-height:100%;
	-webkit-font-smoothing:antialiased;
}

body{ overflow-x:hidden; }

a{ color:var(--ff-accent); text-decoration:none; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }

#ff-app{
	max-width:var(--ff-maxw);
	margin:0 auto;
	min-height:100vh;
	position:relative;
	display:flex;
	flex-direction:column;
	background:linear-gradient(180deg, var(--ff-bg-2) 0%, var(--ff-bg-1) 30%, var(--ff-bg-0) 100%);
	box-shadow:0 0 80px rgba(0,0,0,.6);
}

#ff-view{
	flex:1 1 auto;
	padding:20px 18px calc(96px + env(safe-area-inset-bottom));
	position:relative;
	animation:ffFadeIn .28s ease both;
}
@keyframes ffFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* decorative corners — custom images */
.ff-leaf-corner{
	position:absolute; width:88px; height:88px; pointer-events:none; opacity:.85; z-index:0;
	overflow:hidden;
}
.ff-leaf-corner.tl{ top:4px; left:4px; }
.ff-leaf-corner.tr{ top:4px; right:4px; }
.ff-leaf-corner.bl{ bottom:4px; left:4px; }
.ff-leaf-corner.br{ bottom:4px; right:4px; }
.ff-corner-img{ width:100%; height:100%; object-fit:contain; display:block; }
.ff-decor-bottom{
	position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
	width:min(220px, 70%); pointer-events:none; opacity:.7; z-index:0;
}
.ff-decor-bottom-img{ width:100%; height:auto; display:block; }

/* ==========================================================================
   Logo / brand
   ========================================================================== */
.ff-brand{ text-align:center; position:relative; z-index:1; }
.ff-brand__mark{
	width:56px;height:56px;margin:0 auto 6px;
	display:flex;align-items:center;justify-content:center;
	font-size:26px;
}
.ff-logo{ width:56px; height:56px; object-fit:contain; display:block; }
.ff-logo--sm{ width:36px; height:36px; }
.ff-brand__name{ font-size:26px; font-weight:800; letter-spacing:-.5px; }
.ff-brand__name .hi{ color:var(--ff-text); }
.ff-brand__name .lo{ color:var(--ff-accent); }
.ff-brand__tag{ color:var(--ff-accent); font-size:12.5px; font-weight:600; margin-top:2px; letter-spacing:.3px; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.ff-topbar{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 18px 4px; position:relative; z-index:2;
}
.ff-icon-btn{
	width:40px;height:40px;border-radius:12px;
	background:var(--ff-card-solid); border:1px solid var(--ff-border);
	display:flex;align-items:center;justify-content:center;
	color:var(--ff-text); font-size:18px; cursor:pointer;
	position:relative;
}
.ff-icon-btn:active{ transform:scale(.94); }
.ff-badge{
	position:absolute; top:-6px; right:-6px; background:var(--ff-red);
	color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px;
	border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.ff-topbar__center{ text-align:center; }
.ff-topbar__center .ff-brand__name{ font-size:19px; }
.ff-topbar__center .ff-brand__tag{ font-size:10px; }
.ff-topbar__actions{ display:flex; gap:8px; }

.ff-page-head{ text-align:center; margin:6px 0 18px; position:relative; z-index:1; }
.ff-page-head h1{ font-size:24px; margin:2px 0 4px; font-weight:800; }
.ff-page-head p{ color:var(--ff-text-dim); font-size:13.5px; margin:0; }
.ff-back-row{ display:flex; align-items:center; margin-bottom:4px; }

/* ==========================================================================
   Cards / sections
   ========================================================================== */
.ff-card{
	background:var(--ff-card);
	border:1px solid var(--ff-border);
	border-radius:var(--ff-radius-lg);
	padding:16px;
	margin-bottom:14px;
	position:relative; z-index:1;
}
.ff-card.tight{ padding:12px 14px; }
.ff-info-banner{
	display:flex; gap:10px; align-items:flex-start;
	background:var(--ff-card); border:1px solid var(--ff-border);
	border-radius:var(--ff-radius-md); padding:12px 14px; font-size:12.5px; color:var(--ff-text-dim);
	margin-bottom:14px;
}
.ff-info-banner b{ color:var(--ff-accent); }

.ff-section-title{
	font-size:15px; font-weight:700; margin:0 0 10px;
	display:flex; align-items:center; gap:6px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ff-btn{
	display:flex; align-items:center; justify-content:center; gap:8px;
	width:100%; border:none; cursor:pointer;
	border-radius:999px; padding:15px 18px; font-weight:700; font-size:15px;
	color:#fff; background:linear-gradient(135deg,var(--ff-accent),var(--ff-accent-dark));
	box-shadow:0 10px 24px rgba(139,195,74,.28);
	transition:transform .12s ease;
}
.ff-btn:active{ transform:scale(.97); }
.ff-btn.blue{ background:linear-gradient(135deg,#4db8ff,#2176d1); box-shadow:0 10px 24px rgba(58,160,255,.28); }
.ff-btn.ghost{
	background:transparent; color:var(--ff-accent); border:1px solid var(--ff-border-strong);
	box-shadow:none;
}
.ff-btn.danger{ background:linear-gradient(135deg,#ef5350,#b52320); box-shadow:0 10px 24px rgba(239,83,80,.25); }
.ff-btn:disabled{ opacity:.45; cursor:not-allowed; }
.ff-btn-sm{
	padding:9px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
	background:linear-gradient(135deg,var(--ff-accent),var(--ff-accent-dark)); color:#fff; border:none; cursor:pointer;
}

/* ==========================================================================
   Inputs
   ========================================================================== */
.ff-field{ margin-bottom:14px; position:relative; }
.ff-field label{ display:block; font-size:12.5px; color:var(--ff-text-dim); margin-bottom:6px; }
.ff-input-wrap{
	display:flex; align-items:center; gap:10px;
	background:var(--ff-card-solid); border:1px solid var(--ff-border);
	border-radius:var(--ff-radius-md); padding:13px 15px;
}
.ff-input-wrap .ico{ color:var(--ff-accent); font-size:16px; width:18px; text-align:center; }
.ff-input-wrap input, .ff-input-wrap select{
	flex:1; background:transparent; border:none; outline:none; color:var(--ff-text); font-size:14.5px;
}
.ff-input-wrap input::placeholder{ color:var(--ff-text-faint); }
.ff-eye{ cursor:pointer; color:var(--ff-text-dim); font-size:16px; }
.ff-hint{ font-size:11.5px; color:var(--ff-text-faint); margin-top:5px; }
.ff-error{ font-size:12px; color:var(--ff-red); margin-top:6px; }
.ff-success{ font-size:12px; color:var(--ff-accent); margin-top:6px; }
.ff-divider{ display:flex; align-items:center; gap:10px; color:var(--ff-text-faint); font-size:12px; margin:16px 0; }
.ff-divider::before,.ff-divider::after{ content:''; flex:1; height:1px; background:var(--ff-border); }
.ff-checkbox-row{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ff-text-dim); margin:6px 0 18px; }
.ff-checkbox-row input{ margin-top:3px; accent-color:var(--ff-accent); }

/* ==========================================================================
   Stat tiles / grids
   ========================================================================== */
.ff-stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.ff-stat-row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.ff-stat-row.cols-4{ grid-template-columns:1fr 1fr; }
.ff-stat{
	background:var(--ff-card); border:1px solid var(--ff-border); border-radius:var(--ff-radius-md);
	padding:12px; text-align:center;
}
.ff-stat .n{ font-size:19px; font-weight:800; color:var(--ff-accent); }
.ff-stat .l{ font-size:11px; color:var(--ff-text-dim); margin-top:2px; }
.ff-stat.link{ cursor:pointer; }
.ff-stat.link .arrow{ font-size:11px; color:var(--ff-accent); }

.ff-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.ff-mini-box{
	background:rgba(255,255,255,.03); border:1px solid var(--ff-border); border-radius:var(--ff-radius-sm);
	padding:10px 12px;
}
.ff-mini-box .l{ font-size:11px; color:var(--ff-text-dim); }
.ff-mini-box .n{ font-size:15px; font-weight:700; margin-top:2px; }

/* ==========================================================================
   Action cards (Buy / Sell / Garden)
   ========================================================================== */
.ff-action-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.ff-action-card{
	border-radius:var(--ff-radius-md); padding:14px 8px; text-align:center; cursor:pointer;
	color:#fff; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12);
}
.ff-action-card:active{ transform:scale(.96); }
.ff-action-card .emoji{ font-size:26px; display:block; margin-bottom:6px; }
.ff-action-card .t{ font-weight:800; font-size:12px; letter-spacing:.3px; }
.ff-action-card .s{ font-size:10px; opacity:.85; margin-top:2px; }
.ff-action-card.green{ background:linear-gradient(155deg,#3a7d1e,#1c3d10); }
.ff-action-card.blue{ background:linear-gradient(155deg,#2176d1,#123a63); }
.ff-action-card.purple{ background:linear-gradient(155deg,#7b3fd1,#301a4d); }

/* ==========================================================================
   Tree illustration (CSS, no external image dependency)
   ========================================================================== */
.ff-tree-ill{
	width:78px; height:78px; border-radius:50%;
	background:radial-gradient(circle at 35% 30%, #2f6d1a, #16330c);
	display:flex; align-items:center; justify-content:center; font-size:34px;
	border:1px solid var(--ff-border); flex-shrink:0;
}
.ff-tree-hero{
	border-radius:var(--ff-radius-lg);
	background:linear-gradient(160deg,#1c3d10,#0d2818);
	display:flex; align-items:center; justify-content:center; font-size:64px;
	padding:24px; margin-bottom:14px; border:1px solid var(--ff-border);
}

/* ==========================================================================
   Tree / buyer selection cards
   ========================================================================== */
.ff-tree-card,.ff-buyer-card{
	display:flex; gap:14px; align-items:flex-start;
	background:var(--ff-card); border:1px solid var(--ff-border); border-radius:var(--ff-radius-lg);
	padding:14px; margin-bottom:14px;
}
.ff-tree-card.selected,.ff-buyer-card.selected{ border-color:var(--ff-accent); box-shadow:0 0 0 1px var(--ff-accent); }
.ff-tree-card__body,.ff-buyer-card__body{ flex:1; min-width:0; }
.ff-tree-card__name{ font-weight:800; font-size:16px; }
.ff-tree-card__price{ color:var(--ff-accent); font-weight:700; font-size:14px; margin:4px 0 8px; }
.ff-tree-card__price small{ color:var(--ff-text-dim); font-weight:500; }

.ff-stepper{ display:flex; align-items:center; gap:0; margin-top:6px; width:fit-content; }
.ff-stepper button{
	width:34px;height:34px;border-radius:10px;border:1px solid var(--ff-border);
	background:var(--ff-card-solid); color:var(--ff-accent); font-size:18px; font-weight:700; cursor:pointer;
}
.ff-stepper .val{ width:44px; text-align:center; font-weight:800; font-size:15px; }

.ff-shield{
	width:56px;height:56px;border-radius:12px; flex-shrink:0;
	display:flex;align-items:center;justify-content:center; font-weight:800; font-size:20px; color:#fff;
	background:linear-gradient(155deg,var(--ff-accent),var(--ff-accent-dark));
	clip-path:polygon(50% 0%,100% 20%,100% 65%,50% 100%,0% 65%,0% 20%);
}
.ff-radio{
	width:22px;height:22px;border-radius:50%;border:2px solid var(--ff-border-strong);
	flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.ff-radio.on{ border-color:var(--ff-accent); }
.ff-radio.on::after{ content:''; width:12px;height:12px;border-radius:50%;background:var(--ff-accent); }
.ff-select-row{ display:flex; align-items:center; justify-content:space-between; }

/* ==========================================================================
   Summary / sticky bars
   ========================================================================== */
.ff-summary-bar{
	display:flex; background:var(--ff-card-solid); border:1px solid var(--ff-border);
	border-radius:var(--ff-radius-md); padding:14px; margin-bottom:14px;
}
.ff-summary-bar > div{ flex:1; text-align:center; }
.ff-summary-bar .l{ font-size:11px; color:var(--ff-text-dim); }
.ff-summary-bar .n{ font-size:18px; font-weight:800; color:var(--ff-accent); margin-top:2px; }
.ff-summary-bar .sep{ width:1px; background:var(--ff-border); flex:0 0 1px; margin:0 10px; }

/* ==========================================================================
   Steps indicator
   ========================================================================== */
.ff-steps{ display:flex; align-items:center; justify-content:space-between; margin:10px 0 20px; font-size:11px; color:var(--ff-text-faint); }
.ff-steps .step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.ff-steps .dot{ width:26px;height:26px;border-radius:50%; background:var(--ff-card-solid); border:1px solid var(--ff-border); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ff-text-dim); }
.ff-steps .step.active .dot{ background:var(--ff-accent); border-color:var(--ff-accent); color:#08210a; }
.ff-steps .step.active{ color:var(--ff-accent); font-weight:700; }
.ff-steps .line{ flex:1; height:2px; background:var(--ff-border); margin-top:-16px; }
.ff-steps .line.active{ background:var(--ff-accent); }

/* ==========================================================================
   Upload dropzone
   ========================================================================== */
.ff-dropzone{
	border:2px dashed var(--ff-border-strong); border-radius:var(--ff-radius-md);
	text-align:center; padding:26px 14px; cursor:pointer; color:var(--ff-text-dim); margin:10px 0;
}
.ff-dropzone .cloud{ font-size:28px; color:var(--ff-accent); }
.ff-dropzone .t{ font-weight:600; color:var(--ff-text); margin-top:6px; font-size:13.5px; }
.ff-dropzone .s{ font-size:11px; margin-top:2px; }
.ff-dropzone.has-file{ border-style:solid; border-color:var(--ff-accent); color:var(--ff-accent); }

/* ==========================================================================
   Badges / pills
   ========================================================================== */
.ff-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700; }
.ff-pill.pending{ background:rgba(255,180,60,.15); color:var(--ff-amber); }
.ff-pill.approved,.ff-pill.completed,.ff-pill.active{ background:rgba(111,207,62,.15); color:var(--ff-accent); }
.ff-pill.rejected,.ff-pill.expired{ background:rgba(239,83,80,.15); color:var(--ff-red); }
.ff-pill.type-buy{ background:rgba(139,195,74,.18); color:var(--ff-accent); }
.ff-pill.type-sell{ background:rgba(239,83,80,.18); color:#ff8a87; }
.ff-pill.type-referral{ background:rgba(162,102,240,.2); color:#c9a4ff; }

/* ==========================================================================
   Rows: recent activity / transactions / notifications
   ========================================================================== */
.ff-row{
	display:flex; align-items:center; gap:12px;
	background:var(--ff-card); border:1px solid var(--ff-border); border-radius:var(--ff-radius-md);
	padding:12px 14px; margin-bottom:10px;
}
.ff-row__icon{
	width:42px;height:42px;border-radius:12px; flex-shrink:0;
	background:rgba(139,195,74,.12); display:flex;align-items:center;justify-content:center;font-size:19px;
}
.ff-row__body{ flex:1; min-width:0; }
.ff-row__title{ font-weight:700; font-size:13.5px; }
.ff-row__sub{ font-size:11.5px; color:var(--ff-text-dim); margin-top:2px; }
.ff-row__right{ text-align:right; flex-shrink:0; }
.ff-row__amount{ font-weight:800; font-size:14px; }
.ff-row__unread-dot{ width:9px;height:9px;border-radius:50%; background:var(--ff-accent); flex-shrink:0; }
.ff-row.unread{ border-color:var(--ff-border-strong); }

/* ==========================================================================
   Filter pills (transaction history tabs)
   ========================================================================== */
.ff-filter-row{ display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; }
.ff-filter-pill{
	padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap;
	background:var(--ff-card-solid); border:1px solid var(--ff-border); color:var(--ff-text-dim); cursor:pointer;
}
.ff-filter-pill.active{ background:linear-gradient(135deg,var(--ff-accent),var(--ff-accent-dark)); color:#fff; border-color:transparent; }

/* ==========================================================================
   Bottom navigation
   ========================================================================== */
.ff-bottomnav{
	position:fixed; left:50%; transform:translateX(-50%); bottom:0;
	width:100%; max-width:var(--ff-maxw);
	display:flex; justify-content:space-around; align-items:center;
	background:rgba(8,20,10,.92); backdrop-filter:blur(10px);
	border-top:1px solid var(--ff-border); padding:10px 4px calc(10px + env(safe-area-inset-bottom));
	z-index:50;
}
.ff-navitem{
	display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ff-text-faint);
	font-size:10px; font-weight:600; cursor:pointer; padding:4px 8px; position:relative;
}
.ff-navitem .ico{ font-size:19px; }
.ff-navitem.active{ color:var(--ff-accent); }
.ff-navitem.active::after{ content:''; width:18px; height:3px; border-radius:3px; background:var(--ff-accent); margin-top:2px; }

/* ==========================================================================
   Side menu (hamburger)
   ========================================================================== */
.ff-overlay{
	position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:98; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.ff-overlay.open{ opacity:1; pointer-events:auto; }
.ff-sidemenu{
	position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px;
	background:linear-gradient(180deg,var(--ff-bg-2),var(--ff-bg-0));
	border-right:1px solid var(--ff-border);
	z-index:99; padding:26px 16px; transform:translateX(-105%); transition:transform .25s ease;
	overflow-y:auto;
}
.ff-sidemenu.open{ transform:translateX(0); }
.ff-menu-item{
	display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:var(--ff-radius-md);
	color:var(--ff-text); font-weight:600; font-size:14px; cursor:pointer; margin-bottom:4px; position:relative;
}
.ff-menu-item:active{ background:rgba(139,195,74,.1); }
.ff-menu-item .ico{ font-size:18px; width:22px; text-align:center; }
.ff-menu-item .chev{ margin-left:auto; color:var(--ff-text-faint); }
.ff-menu-item.logout{ color:var(--ff-red); margin-top:14px; border-top:1px solid var(--ff-border); padding-top:16px; border-radius:0; }
.ff-menu-item .ff-badge{ position:static; margin-left:auto; }

/* ==========================================================================
   Skeleton loaders
   ========================================================================== */
.ff-skel{ background:linear-gradient(90deg, rgba(139,195,74,.08) 25%, rgba(139,195,74,.16) 37%, rgba(139,195,74,.08) 63%); background-size:400% 100%; animation:ffskel 1.4s ease infinite; border-radius:var(--ff-radius-md); }
@keyframes ffskel{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.ff-skel-card{ height:90px; margin-bottom:14px; }
.ff-skel-row{ height:60px; margin-bottom:10px; }

/* ==========================================================================
   Empty states
   ========================================================================== */
.ff-empty{ text-align:center; padding:40px 20px; color:var(--ff-text-dim); }
.ff-empty .emoji{ font-size:40px; display:block; margin-bottom:10px; }

/* ==========================================================================
   Toast
   ========================================================================== */
#ff-toast{
	position:fixed; left:50%; bottom:100px; transform:translate(-50%,20px); max-width:calc(var(--ff-maxw) - 40px);
	background:var(--ff-card-solid); border:1px solid var(--ff-border-strong); color:var(--ff-text);
	padding:12px 18px; border-radius:var(--ff-radius-md); font-size:13px; z-index:200;
	opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:var(--ff-shadow-glow);
}
#ff-toast.show{ opacity:1; transform:translate(-50%,0); }
#ff-toast.err{ border-color:var(--ff-red); }

/* ==========================================================================
   Misc
   ========================================================================== */
.ff-center{ text-align:center; }
.ff-mt-8{ margin-top:8px; } .ff-mt-16{ margin-top:16px; } .ff-mb-0{ margin-bottom:0; }
.ff-spinner{ width:34px;height:34px;border-radius:50%; border:3px solid var(--ff-border); border-top-color:var(--ff-accent); animation:ffspin .7s linear infinite; margin:30px auto; }
@keyframes ffspin{ to{ transform:rotate(360deg); } }
.ff-fullscreen-center{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ff-copy-btn{ display:flex; align-items:center; gap:5px; background:var(--ff-card-solid); border:1px solid var(--ff-border); color:var(--ff-accent); border-radius:8px; padding:7px 10px; font-size:11.5px; font-weight:700; cursor:pointer; }
.ff-mono{ font-family:'Courier New',monospace; letter-spacing:.5px; }
.ff-hr{ border:none; border-top:1px solid var(--ff-border); margin:10px 0; }

@media (min-width:481px){
	body{ background:var(--ff-bg-0); }
}

/* ==========================================================================
   Custom image icons (replacing emojis)
   ========================================================================== */
.ff-ico, .ff-field-ico, .ff-nav-ico, .ff-menu-ico, .ff-ico-btn,
.ff-inline-ico, .ff-action-ico, .ff-stat-ico, .ff-stat-ico-sm {
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
	pointer-events: none;
}
.ff-field-ico { width: 22px; height: 22px; }
.ff-nav-ico { width: 26px; height: 26px; }
.ff-menu-ico { width: 24px; height: 24px; border-radius: 6px; }
.ff-ico-btn { width: 24px; height: 24px; }
.ff-inline-ico { width: 28px; height: 28px; margin-left: 4px; vertical-align: -6px; }
.ff-action-ico { width: 48px; height: 48px; display: block; margin: 0 auto 6px; }
.ff-stat-ico { width: 40px; height: 40px; flex-shrink: 0; }
.ff-stat-ico-sm { width: 28px; height: 28px; margin-bottom: 4px; display: block; }
.ff-action-card .emoji { line-height: 0; }
.ff-icon-btn { display: flex; align-items: center; justify-content: center; position: relative; }
.ff-navitem .ico { line-height: 0; }
.ff-menu-item .ico { line-height: 0; display: flex; align-items: center; }

.ff-welcome-card {
	position: relative;
	overflow: hidden;
	min-height: 168px;
	background-size: cover !important;
	background-position: center 35% !important;
	background-repeat: no-repeat !important;
}
.ff-welcome-inner {
	position: relative; z-index: 1;
	background: linear-gradient(180deg, rgba(10,28,14,.55), rgba(10,28,14,.82));
	margin: -18px; padding: 18px; border-radius: inherit;
	min-height: 168px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ff-invite-card { position: relative; overflow: hidden; min-height: 100px; }
.ff-invite-inner {
	position: relative; z-index: 1;
	background: linear-gradient(90deg, rgba(10,28,14,.75), rgba(10,28,14,.45));
	margin: -16px; padding: 16px; border-radius: inherit; width: 100%;
}

/* Larger logo on auth screens */
.ff-logo--lg { width: 96px; height: 96px; }
.ff-brand__mark { width: auto; height: auto; }

/* Full-width bottom decor bar (login/register) */
.ff-decor-bottom-bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	width: 100%; pointer-events: none; z-index: 0; opacity: .9;
}
.ff-decor-bottom-bar-img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 120px; }

/* Image-only CTA buttons */
.ff-img-btn {
	display: block; width: 100%; padding: 0; margin: 12px 0 8px;
	background: transparent; border: none; cursor: pointer; line-height: 0;
}
.ff-img-btn:disabled { opacity: .45; pointer-events: none; }
.ff-img-btn__img {
	width: 100%; height: auto; max-height: 64px; object-fit: contain; display: block;
}

.ff-tree-img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto; }
.ff-tree-card .ff-tree-ill { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.ff-action-ico { width: 64px !important; height: 64px !important; }
.ff-pay-ico { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.ff-hero-ico { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto 8px; }

/* Clearer welcome wallpaper — light overlay so full tree image shows */
.ff-welcome-inner--clear {
	background: linear-gradient(180deg, rgba(10,28,14,.18) 0%, rgba(10,28,14,.28) 45%, rgba(10,28,14,.62) 100%) !important;
}

/* Extra bottom padding so content isn't hidden by decor bar */
#ff-view { padding-bottom: 28px; }
.ff-body .ff-page-head, .ff-brand { position: relative; z-index: 1; }

/* Auth: fixed bottom decor fully visible */
.ff-decor-bottom-bar {
	position: fixed !important;
	left: 50% !important;
	bottom: 0 !important;
	transform: translateX(-50%) !important;
	width: 100% !important;
	max-width: var(--ff-maxw, 430px) !important;
	pointer-events: none;
	z-index: 6;
	opacity: 1 !important;
}
.ff-decor-bottom-bar-img {
	width: 100% !important;
	height: auto !important;
	max-height: 88px !important;
	object-fit: cover !important;
	object-position: center bottom !important;
	display: block;
}
#ff-view { padding-bottom: 100px !important; }

.ff-img-btn { position: relative; display: block; width: 100%; padding: 0; margin: 14px 0 10px; background: transparent; border: none; cursor: pointer; line-height: 0; }
.ff-img-btn__img { width: 100%; height: auto; max-height: 58px; object-fit: contain; display: block; }
.ff-img-btn__label {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font-weight: 800; font-size: 15px; letter-spacing: .4px; color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.55); pointer-events: none; white-space: nowrap;
}

.ff-tree-ill, .ff-tree-ill--sq { border-radius: 12px !important; overflow: hidden; background: rgba(255,255,255,.04); }
.ff-tree-img { width: 96px !important; height: 96px !important; object-fit: contain !important; border-radius: 0 !important; }
.ff-tree-card.selected { outline: 2px solid var(--ff-accent); box-shadow: 0 0 0 3px rgba(90,180,60,.25); }
.ff-tree-card { cursor: pointer; }

.ff-welcome-inner--nofilter { background: transparent !important; }
.ff-welcome-card { text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ff-logo--lg { width: 110px; height: auto; max-height: 110px; }

/* Buy quantity modal popup */
.ff-modal {
	position: fixed; inset: 0; z-index: 400;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}
.ff-modal__backdrop {
	position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.ff-modal__sheet {
	position: relative; z-index: 1;
	width: 100%; max-width: min(400px, calc(100% - 24px));
	max-height: 80vh; overflow-y: auto;
	background: var(--ff-card-solid, #0d1f12);
	border-radius: 18px;
	padding: 18px 16px 22px;
	border: 1px solid var(--ff-border);
	box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.ff-modal__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 12px; font-size: 16px;
}
.ff-modal__x { cursor: pointer; font-size: 18px; padding: 4px 8px; opacity: .8; }

/* Watch video popup */
.ff-video-modal .ff-video-sheet {
	max-width: min(480px, calc(100% - 24px));
	padding: 14px 12px 16px;
}
.ff-video-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 177.78%; /* 9:16 for Shorts */
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}
.ff-video-wrap iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ff-popup-row {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0; border-bottom: 1px solid var(--ff-border);
}
.ff-popup-row__img .ff-tree-img { width: 56px !important; height: 56px !important; }
.ff-popup-row__info { flex: 1; min-width: 0; }
.ff-popup-row__info .name { font-weight: 800; font-size: 14px; }
.ff-popup-row__info .price { font-size: 12px; color: var(--ff-text-dim); }

.ff-tree-check {
	position: absolute; top: 10px; right: 10px;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--ff-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 800;
}
.ff-tree-card { position: relative; }
.ff-tree-card:not(.selected) .ff-tree-check { background: transparent; border: 2px solid var(--ff-border); }

.ff-buyer-img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; flex-shrink: 0; }
.ff-avatar-big { width: 100%; height: 100%; object-fit: cover; }
.ff-tip-img { width: 100%; max-height: 48px; object-fit: contain; display: block; }
.ff-menu-decor-top, .ff-menu-decor-bottom { text-align: center; padding: 6px 0; }
.ff-menu-decor-img { max-width: 100%; height: auto; max-height: 80px; object-fit: contain; }


/* Space so last cards are above bottom nav (not covered / not clickable under nav) */
.ff-bottom-spacer { height: 96px; width: 100%; }
body.ff-modal-open { overflow: hidden; }
.ff-bottomnav { z-index: 50; }
.ff-modal { z-index: 400 !important; }
#ff-view { padding-bottom: 20px !important; }


/* CRITICAL: never block clicks */
.ff-decor-bottom-bar,
.ff-decor-bottom-bar-img,
.ff-leaf-corner,
.ff-corner-img,
.ff-decor-bottom {
	pointer-events: none !important;
	z-index: 0 !important;
}
.ff-img-btn,
.ff-btn,
.ff-btn-sm,
.ff-navitem,
.ff-tree-card,
.ff-buyer-card,
.ff-icon-btn,
.ff-stepper button {
	position: relative;
	z-index: 10;
	pointer-events: auto !important;
}
.ff-bottomnav {
	z-index: 50 !important;
	pointer-events: auto !important;
}
.ff-bottom-spacer {
	height: 100px !important;
	width: 100%;
	flex-shrink: 0;
}
#ff-buy-modal[style*="none"] { display: none !important; pointer-events: none !important; }


/* Bottom login/register decor — full image, no leaf cut */
.ff-decor-bottom-bar {
	position: fixed !important;
	left: 50% !important;
	bottom: 0 !important;
	transform: translateX(-50%) !important;
	width: 100% !important;
	max-width: var(--ff-maxw, 430px) !important;
	pointer-events: none !important;
	z-index: 0 !important;
	opacity: 1 !important;
	overflow: visible !important;
}
.ff-decor-bottom-bar-img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center bottom !important;
	display: block !important;
}

/* Big centered heroes (Invite / Need Help) */
.ff-hero-big {
	text-align: center !important;
	margin: 12px auto 18px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}
.ff-hero-ico-lg {
	width: min(280px, 78vw) !important;
	height: auto !important;
	max-height: 200px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}
.ff-hero-ico {
	width: min(200px, 60vw) !important;
	height: auto !important;
	max-height: 160px !important;
	object-fit: contain !important;
}

/* Unified master buttons */
.ff-img-btn {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 16px 0 12px;
	background: transparent;
	border: none;
	cursor: pointer;
	line-height: 0;
}
.ff-img-btn__img {
	width: 100%;
	height: auto;
	max-height: 56px;
	object-fit: contain;
	display: block;
}
.ff-img-btn__label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .5px;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
	pointer-events: none;
	white-space: nowrap;
}

/* Auth pages need padding so content clears bottom leaves */
#ff-view { padding-bottom: 120px !important; }


/* Profile avatar + verified tick (not clipped) */
.ff-avatar-wrap {
	position: relative;
	width: 140px;
	height: 140px;
	margin: 0 auto;
	display: inline-block;
}
.ff-avatar-circle {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--ff-accent);
	background: linear-gradient(160deg, #2f6d1a, #123a1c);
}
.ff-avatar-big {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
.ff-avatar-verified {
	position: absolute;
	right: 4px;
	bottom: 6px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ff-accent, #3ecf4a);
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #0a1a0c;
	box-shadow: 0 2px 8px rgba(0,0,0,.45);
	z-index: 5;
	line-height: 1;
}

/* Heroes even larger */
.ff-hero-ico-lg {
	width: min(320px, 85vw) !important;
	max-height: 220px !important;
	height: auto !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	display: block !important;
}

/* Bottom decor: show full leaves (contain, not cover/crop) */
.ff-decor-bottom-bar-img {
	object-fit: contain !important;
	max-height: none !important;
	width: 100% !important;
	height: auto !important;
}


/* Larger dashboard top icons */
.ff-ico-btn--lg {
	width: 34px !important;
	height: 34px !important;
}
.ff-icon-btn {
	width: 46px !important;
	height: 46px !important;
}

/* Tree images full + clear (no crop, no blur) */
.ff-tree-img {
	width: 110px !important;
	height: 110px !important;
	object-fit: contain !important;
	image-rendering: auto;
	filter: none !important;
}
.ff-tree-img--lg {
	width: 72px !important;
	height: 72px !important;
	object-fit: contain !important;
}
.ff-tree-ill, .ff-tree-ill--sq {
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible !important;
	border-radius: 12px !important;
	background: rgba(255,255,255,.06);
}

/* Clear submitted heroes */
.ff-hero-ico-lg {
	width: min(280px, 80vw) !important;
	max-height: 200px !important;
	object-fit: contain !important;
	filter: none !important;
	image-rendering: auto;
}

/* Change password tip large */
.ff-tip-img-lg {
	width: min(280px, 85%) !important;
	max-height: 180px !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto 10px;
}

/* Tx history icons */
.ff-tx-ico {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
}
.ff-row__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Payment logos */
.ff-pay-ico {
	width: 52px !important;
	height: 52px !important;
	object-fit: contain !important;
	border-radius: 10px;
	background: #fff;
	padding: 4px;
}

/* Watch video / APK / Collect buttons */
.ff-watch-btn, .ff-apk-btn, .ff-collect-btn {
	margin: 10px 0 14px !important;
}


/* Large image-only buttons (Watch Video / APK) — no text overlay */
.ff-img-btn--lg {
	margin: 12px 0 16px !important;
	width: 100% !important;
}
.ff-img-btn__img--lg {
	width: 100% !important;
	max-height: 90px !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
}
.ff-watch-btn .ff-img-btn__label,
.ff-apk-btn .ff-img-btn__label,
.ff-collect-btn .ff-img-btn__label {
	display: none !important;
}


/* Full-width horizontal Watch / APK / Collect buttons (left to right) */
.ff-img-btn.ff-watch-btn,
.ff-img-btn.ff-apk-btn,
.ff-img-btn.ff-collect-btn,
.ff-img-btn--lg {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px 0 16px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.ff-img-btn.ff-watch-btn .ff-img-btn__img,
.ff-img-btn.ff-apk-btn .ff-img-btn__img,
.ff-img-btn.ff-collect-btn .ff-img-btn__img,
.ff-img-btn__img--lg {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 56px !important;
	object-fit: fill !important;
	display: block !important;
	border-radius: 14px;
}


/* Full-bleed large action banners */
.ff-img-btn.ff-watch-btn,
.ff-img-btn.ff-apk-btn,
.ff-img-btn.ff-collect-btn {
	display: block !important;
	width: 100% !important;
	margin: 14px 0 18px !important;
	padding: 0 !important;
}
.ff-img-btn.ff-watch-btn .ff-img-btn__img,
.ff-img-btn.ff-apk-btn .ff-img-btn__img,
.ff-img-btn.ff-collect-btn .ff-img-btn__img,
.ff-img-btn.ff-watch-btn .ff-img-btn__img--lg,
.ff-img-btn.ff-apk-btn .ff-img-btn__img--lg,
.ff-img-btn.ff-collect-btn .ff-img-btn__img--lg {
	width: 100% !important;
	height: auto !important;
	min-height: 72px !important;
	max-height: 110px !important;
	object-fit: fill !important;
	display: block !important;
	border-radius: 14px;
}

/* Security tip image large, no extra text */
.ff-security-tip-img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 90px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 8px auto 16px !important;
}

/* Success message green */
.ff-success {
	color: #1a7f37 !important;
	background: rgba(46, 160, 67, 0.12);
	border: 1px solid rgba(46, 160, 67, 0.35);
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	margin: 8px 0;
}


/* FORCE large full-width APK / Collect buttons */
.ff-img-btn.ff-watch-btn,
.ff-img-btn.ff-apk-btn,
.ff-img-btn.ff-collect-btn {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 16px 0 20px !important;
	padding: 0 !important;
	line-height: 0 !important;
}
.ff-img-btn.ff-watch-btn .ff-img-btn__img,
.ff-img-btn.ff-apk-btn .ff-img-btn__img,
.ff-img-btn.ff-collect-btn .ff-img-btn__img,
.ff-img-btn.ff-watch-btn img,
.ff-img-btn.ff-apk-btn img,
.ff-img-btn.ff-collect-btn img {
	width: 100% !important;
	height: auto !important;
	min-height: 88px !important;
	max-height: 130px !important;
	object-fit: fill !important;
	display: block !important;
	border-radius: 16px !important;
}


/* Watch video = same width as info banner (24 hours line) */
.ff-info-banner {
	width: 100% !important;
	box-sizing: border-box !important;
}
.ff-img-btn.ff-watch-btn {
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px 0 16px !important;
}
.ff-img-btn.ff-watch-btn img,
.ff-img-btn.ff-watch-btn .ff-img-btn__img {
	width: 100% !important;
	height: auto !important;
	min-height: 52px !important;
	max-height: 64px !important;
	object-fit: fill !important;
	border-radius: 14px !important;
}

/* APK button = Invite & Earn card width */
.ff-invite-card {
	width: 100% !important;
	box-sizing: border-box !important;
}
.ff-img-btn.ff-apk-btn {
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px 0 16px !important;
}
.ff-img-btn.ff-apk-btn img,
.ff-img-btn.ff-apk-btn .ff-img-btn__img {
	width: 100% !important;
	height: auto !important;
	min-height: 72px !important;
	max-height: 100px !important;
	object-fit: fill !important;
	border-radius: 16px !important;
}

/* Collect Fruit button — smaller */
.ff-img-btn.ff-collect-btn {
	width: 100% !important;
	max-width: 100% !important;
	margin: 8px 0 12px !important;
	padding: 0 !important;
	line-height: 0 !important;
}
.ff-img-btn.ff-collect-btn img,
.ff-img-btn.ff-collect-btn .ff-img-btn__img,
.ff-img-btn.ff-collect-btn .ff-img-btn__img--lg {
	width: 100% !important;
	height: auto !important;
	min-height: 42px !important;
	max-height: 54px !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 12px !important;
}

/* Admin panel */
.ff-admin-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	margin: 0 0 14px;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.ff-admin-tab {
	flex: 0 0 auto;
	border: 1px solid rgba(120, 200, 120, 0.35);
	background: rgba(20, 40, 20, 0.6);
	color: #c8e6c9;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
}
.ff-admin-tab.on {
	background: linear-gradient(180deg, #7CFC00, #2e7d32);
	color: #0b1f0b;
	border-color: transparent;
}
.ff-btn-outline {
	background: transparent !important;
	border: 1px solid rgba(120, 200, 120, 0.5) !important;
	color: #c8e6c9 !important;
	box-shadow: none !important;
}
.ff-btn-sm.on {
	background: rgba(124, 252, 0, 0.25);
	border-color: #7CFC00;
}

/* Payment method badges in admin */
.ff-pay-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 8px 0 4px;
}
.ff-pay-row__label {
	font-size: 12px;
	color: rgba(200, 230, 201, 0.75);
	font-weight: 600;
}
.ff-pay-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.02em;
}
.ff-pay-badge--jazz {
	background: #c62828;
	color: #fff;
}
.ff-pay-badge--easy {
	background: #1565c0;
	color: #fff;
}
.ff-pay-badge--raast {
	background: #2e7d32;
	color: #fff;
}
.ff-pay-badge--other {
	background: #6a1b9a;
	color: #fff;
}
.ff-pay-badge--none {
	background: rgba(255, 80, 80, 0.25);
	color: #ff8a80;
	border: 1px solid rgba(255, 80, 80, 0.4);
}

.ff-img-btn--full {
	display: block;
	width: 100%;
	margin-top: 12px;
}
.ff-img-btn--full .ff-img-btn__img {
	width: 100%;
	height: auto;
	max-height: none;
}