/*
 * iOS app promo — small Apple icon pinned at the top of the workout page,
 * plus an explainer modal telling members to sign in with their haddiction.lv
 * email and password (the app links the account automatically).
 *
 * The icon is hidden by default and only revealed by app-promo.js on iOS
 * devices (kept client-side so page caching never serves it to the wrong
 * platform). Buttons carry !important where needed so the Elementor Hello
 * theme can't restyle them.
 */

/* ---- Bar holding the icon (centered, above the version number) ---- */
.had-app-promo{
	display:flex;justify-content:center;align-items:center;
	width:100%;margin:24px 0 0;
}
.had-app-promo[hidden]{ display:none !important; }
/* When the promo shows, sit it snug above the version line. */
.had-app-promo + .had-may-version{ margin-top:8px !important; }

/* ---- Row holding multiple app buttons side by side (workout + meals) ---- */
.had-app-promo-row{
	display:flex;justify-content:center;align-items:center;
	flex-wrap:wrap;gap:10px;width:100%;
}
/* Inside a row each button hugs its content instead of taking the full width. */
.had-app-promo-row .had-app-promo{ width:auto; }
/* Tighten the version line only when at least one button is actually shown. */
.had-app-promo-row:has(.had-app-promo:not([hidden])) + .had-may-version{ margin-top:8px !important; }

/* ---- The Apple icon button ---- */
.had-app-promo-btn{
	-webkit-appearance:none !important;appearance:none !important;
	display:inline-flex !important;align-items:center !important;gap:8px !important;
	background:#12141A !important;border:1px solid rgba(213,242,91,.5) !important;
	border-radius:999px !important;padding:8px 14px 8px 12px !important;margin:0 !important;
	color:#D5F25B !important;cursor:pointer;box-shadow:none !important;
	line-height:1 !important;min-height:0 !important;height:auto !important;
	text-transform:none !important;letter-spacing:0 !important;
	transition:background .18s,border-color .18s,transform .1s;
}
.had-app-promo-btn:hover{ background:#181B22 !important;border-color:#D5F25B !important; }
.had-app-promo-btn:active{ transform:scale(.97); }
.had-app-promo-ico{ display:inline-flex;width:18px;height:18px;flex-shrink:0; }
.had-app-promo-ico svg{ width:100%;height:100%;display:block;fill:currentColor; }
.had-app-promo-txt{
	font-size:12px !important;font-weight:700 !important;line-height:1 !important;
	color:#D5F25B !important;white-space:nowrap;
}

/* ---- Modal ---- */
.had-app-modal{
	position:fixed;inset:0;z-index:100010;
	display:flex;align-items:center;justify-content:center;
	padding:20px;box-sizing:border-box;
}
.had-app-modal[hidden]{ display:none !important; }
.had-app-modal-overlay{
	position:absolute;inset:0;background:rgba(0,0,0,.72);
	-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.had-app-modal-box{
	position:relative;z-index:1;
	width:100%;max-width:380px;box-sizing:border-box;
	background:#181B22;border:1px solid rgba(255,255,255,.1);
	border-radius:16px;padding:26px 22px 22px;
	text-align:center;color:#fff;
	box-shadow:0 24px 70px rgba(0,0,0,.55);
	animation:hadAppPop .16s ease-out;
}
@keyframes hadAppPop{ from{ transform:scale(.96);opacity:0; } to{ transform:scale(1);opacity:1; } }
.had-app-modal-close{
	-webkit-appearance:none !important;appearance:none !important;
	position:absolute;top:8px;right:8px;
	width:34px !important;height:34px !important;padding:0 !important;margin:0 !important;
	background:transparent !important;border:none !important;box-shadow:none !important;
	color:rgba(255,255,255,.6) !important;font-size:26px !important;line-height:32px !important;
	cursor:pointer;border-radius:8px !important;text-align:center !important;
}
.had-app-modal-close:hover{ color:#fff !important;background:rgba(255,255,255,.08) !important; }
.had-app-modal-ico{
	display:inline-flex;align-items:center;justify-content:center;
	width:56px;height:56px;margin:0 auto 14px;
	background:rgba(213,242,91,.12);border-radius:16px;color:#D5F25B;
}
.had-app-modal-ico svg{ width:30px;height:30px;fill:currentColor; }
.had-app-modal-title{
	margin:0 0 10px;font-size:18px;font-weight:800;line-height:1.25;color:#fff;
}
.had-app-modal-body{
	margin:0 0 20px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);
	/* The body is numbered steps written with textContent (app-promo.js), so the
	   line breaks in the source string have to survive — pre-line keeps them and
	   still wraps long lines. Left-aligned because the box is centred and centred
	   numbered steps are hard to scan. */
	white-space:pre-line;text-align:left;
}
.had-app-modal-cta{
	-webkit-appearance:none !important;appearance:none !important;
	display:block !important;width:100% !important;box-sizing:border-box;
	background:#D5F25B !important;color:#12141A !important;
	border:none !important;border-radius:11px !important;
	padding:13px 16px !important;margin:0 !important;
	font-size:14px !important;font-weight:800 !important;line-height:1.2 !important;
	text-align:center !important;text-decoration:none !important;
	text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;
	cursor:pointer;transition:filter .15s;
}
.had-app-modal-cta:hover{ filter:brightness(1.05); }