/* LOA Web App */

/* ---------- Installed app only ---------- */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  a, button { -webkit-touch-callout: none; }
  button, .button, nav a { -webkit-user-select: none; user-select: none; }
  input, select, textarea { font-size: 16px !important; }
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Loading bar ---------- */
#loa-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2147483000;
  background: var(--loa-theme, #FFB800); transition: width .5s ease, opacity .3s ease; pointer-events: none;
}

/* ---------- Back + share buttons (installed app) ---------- */
#loa-back, #loa-share {
  display: none; position: fixed; z-index: 2147482990;
  top: calc(env(safe-area-inset-top) + 12px);
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.94); color: #1F1A0E;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer;
  align-items: center; justify-content: center;
}
#loa-back { left: 12px; font-size: 28px; line-height: 1; padding-bottom: 3px; }
/* Share: bottom-left, above the theme's bottom menu, away from the header and the WhatsApp button */
#loa-share {
  top: auto; left: 16px; right: auto; width: 46px; height: 46px;
  bottom: calc(var(--loa-banner-bottom, 84px) + 16px + env(safe-area-inset-bottom));
}
/* Logged-in admins: keep the back button below the WordPress admin bar */
body.admin-bar #loa-back { top: calc(env(safe-area-inset-top) + 58px); }
#loa-back.loa-show, #loa-share.loa-show { display: flex; }

/* ---------- Pull to refresh ---------- */
#loa-ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) - 48px); z-index: 2147482995;
  width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2);
  display: none; align-items: center; justify-content: center; pointer-events: none;
  color: var(--loa-ink, #1F1A0E);
}
#loa-ptr.loa-on { display: flex; }
#loa-ptr .loa-ptr-icon { font-size: 22px; line-height: 1; display: block; }
#loa-ptr.loa-ready { background: var(--loa-theme, #FFB800); }
#loa-ptr.loa-spin .loa-ptr-icon { animation: loa-spin .8s linear infinite; }
@keyframes loa-spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
#loa-toast {
  position: fixed; left: 50%; bottom: calc(var(--loa-banner-bottom, 84px) + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 2147482999;
  background: #1F1A0E; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw;
}
#loa-toast.loa-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Install banner ---------- */
#loa-install {
  display: none; position: fixed; left: 12px; right: 12px; z-index: 2147482980;
  bottom: calc(var(--loa-banner-bottom, 84px) + env(safe-area-inset-bottom));
  background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.2);
  padding: 12px; align-items: center; gap: 12px; font-family: inherit; max-width: 520px; margin: 0 auto;
  animation: loa-up .3s ease;
}
#loa-install.loa-show { display: flex; }
@keyframes loa-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
#loa-install img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
#loa-install .loa-t { flex: 1; min-width: 0; line-height: 1.3; }
#loa-install .loa-t b { display: block; font-size: 15px; color: #1F1A0E; }
#loa-install .loa-t span { font-size: 13px; color: #6B5F45; }
#loa-install .loa-actions { display: flex; flex-direction: column; align-items: center; }
#loa-install .loa-go {
  background: var(--loa-theme, #FFB800); color: var(--loa-ink, #1F1A0E); border: 0; border-radius: 10px;
  padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1.2;
}
#loa-install .loa-x { background: none; border: 0; color: #8A8270; font-size: 13px; padding: 4px; cursor: pointer; }

/* Top position: full-width bar above the header, part of the page flow */
#loa-install.loa-top {
  position: relative; left: auto; right: auto; bottom: auto; z-index: 2147482980;
  max-width: none; margin: 0; border-radius: 0; width: 100%; box-sizing: border-box;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: #FFF8E6; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
  animation: loa-down .3s ease;
}
#loa-install.loa-top img { width: 40px; height: 40px; border-radius: 10px; }
#loa-install.loa-top .loa-actions { flex-direction: row-reverse; gap: 6px; }
#loa-install.loa-top .loa-go { padding: 8px 16px; font-size: 14px; }
#loa-install.loa-top .loa-x { font-size: 0; width: 28px; height: 28px; padding: 0; }
#loa-install.loa-top .loa-x::before { content: "\00D7"; font-size: 22px; line-height: 28px; color: #8A8270; }
@keyframes loa-down { from { margin-top: -70px; opacity: 0; } to { margin-top: 0; opacity: 1; } }

/* ---------- Instructions sheet + "Installed" popup ---------- */
#loa-sheet, #loa-done, #loa-ask {
  display: none; position: fixed; inset: 0; z-index: 2147482998; background: rgba(0,0,0,.45);
  align-items: flex-end; justify-content: center;
}
#loa-sheet.loa-show, #loa-done.loa-show, #loa-ask.loa-show { display: flex; }
#loa-done, #loa-ask { align-items: center; padding: 24px; box-sizing: border-box; }
#loa-ask .loa-done-box {
  background: #fff; width: 100%; max-width: 360px; border-radius: 22px; text-align: center; color: #1F1A0E;
  padding: 26px 22px 18px; animation: loa-pop .35s cubic-bezier(.2,1.4,.4,1);
}
#loa-ask .loa-bell {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--loa-theme, #FFB800); color: var(--loa-ink, #1F1A0E);
}
#loa-ask h3 { margin: 14px 0 6px; font-size: 20px; color: #1F1A0E; }
#loa-ask p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #6B5F45; }
#loa-ask .loa-close, #loa-done .loa-close {
  width: 100%; background: var(--loa-theme, #FFB800); color: var(--loa-ink, #1F1A0E);
  border: 0; border-radius: 12px; padding: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
}
#loa-ask .loa-close.loa-secondary, #loa-done .loa-close.loa-secondary {
  background: none; color: #8A8270; font-weight: 600; font-size: 15px; padding: 10px; margin-top: 4px;
}
#loa-done .loa-done-box {
  background: #fff; width: 100%; max-width: 360px; border-radius: 22px; text-align: center; color: #1F1A0E;
  padding: 28px 22px 22px; position: relative; animation: loa-pop .35s cubic-bezier(.2,1.4,.4,1);
}
#loa-done img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
#loa-done .loa-check {
  width: 30px; height: 30px; border-radius: 50%; background: #1E9E4A; color: #fff; font-size: 17px; line-height: 30px;
  margin: -20px auto 0; position: relative; left: 26px; border: 3px solid #fff; font-weight: 700;
}
#loa-done h3 { margin: 12px 0 6px; font-size: 20px; color: #1F1A0E; }
#loa-done p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #6B5F45; }
#loa-done .loa-close {
  width: 100%; background: var(--loa-theme, #FFB800); color: var(--loa-ink, #1F1A0E);
  border: 0; border-radius: 12px; padding: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
}
@keyframes loa-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
#loa-sheet .loa-box {
  background: #fff; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; color: #1F1A0E;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); animation: loa-up .3s ease;
}
#loa-sheet h3 { margin: 0 0 14px; font-size: 18px; color: #1F1A0E; }
#loa-sheet ol { margin: 0 0 18px; padding-left: 20px; font-size: 15px; line-height: 1.9; }
#loa-sheet .loa-close {
  width: 100%; background: var(--loa-theme, #FFB800); color: var(--loa-ink, #1F1A0E);
  border: 0; border-radius: 12px; padding: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
}