/* ============================================================
   GRO PWA Installer — Android + iPhone compatible
   Premium compact UI + standalone app helpers
   ============================================================ */

:root{
  --gro-green:#5AB94C;
  --gro-green-2:#79d56b;
  --gro-bg:#0b0f0b;

  --gro-text:rgba(255,255,255,0.92);
  --gro-muted:rgba(255,255,255,0.70);

  --gro-border:rgba(255,255,255,0.10);
  --gro-border-2:rgba(255,255,255,0.16);

  --gro-card:rgba(255,255,255,0.04);
  --gro-card-2:rgba(0,0,0,0.24);

  --gro-shadow:0 16px 40px rgba(0,0,0,0.30);
  --gro-radius:16px;

  --gro-icon-192:url("https://grogrowthcoin.com/wp-content/uploads/2025/09/android-chrome-192x192-1.png");
  --gro-icon-512:url("https://grogrowthcoin.com/wp-content/uploads/2025/09/android-chrome-512x512-1.png");
  --gro-icon-ios:url("https://grogrowthcoin.com/wp-content/uploads/2025/09/apple-touch-icon.png");
}

/* ============================================================
   INSTALL UI
   ============================================================ */

body .gro-install-wrap{
  position:relative;
  overflow:hidden;

  max-width:720px;
  margin:18px auto;
  padding:14px;

  border-radius:var(--gro-radius);
  border:1px solid var(--gro-border);
  background:
    radial-gradient(circle at top right, rgba(90,185,76,0.12), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22));
  box-shadow:var(--gro-shadow);
  color:var(--gro-text);
}

body .gro-install-wrap,
body .gro-install-wrap *{
  box-sizing:border-box;
}

body .gro-install-wrap::after{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle at 30% 30%, rgba(90,185,76,0.18), rgba(90,185,76,0) 60%);
  pointer-events:none;
}

body .gro-install-wrap p,
body .gro-install-wrap li{
  color:var(--gro-muted);
}

body .gro-install-wrap h2,
body .gro-install-wrap h3{
  margin:0;
  color:rgba(255,255,255,0.96);
}

/* Head */
body .gro-install-head{
  display:flex;
  gap:12px;
  align-items:center;
  padding:4px 2px 10px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

body .gro-install-logo{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:12px;
  background-image:var(--gro-icon-192);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 22px rgba(0,0,0,.38);
}

@media (min-width:720px){
  body .gro-install-logo{
    width:50px;
    height:50px;
    background-image:var(--gro-icon-512);
  }
}

body .gro-install-title h2{
  font-size:18px;
  line-height:1.15;
  letter-spacing:-0.01em;
}

body .gro-install-sub{
  margin:4px 0 0 0;
  font-size:13px;
  line-height:1.35;
  color:var(--gro-muted);
}

/* Banner */
body #gro-install-banner.gro-install-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin:10px 0 12px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(90,185,76,0.22);
  background:rgba(90,185,76,0.08);
}

body .gro-install-banner-left{
  min-width:220px;
  font-size:13px;
  line-height:1.35;
  color:var(--gro-text);
}

body .gro-install-banner-left strong{
  color:rgba(255,255,255,0.96);
}

body .gro-install-banner-msg{
  margin-left:6px;
  color:var(--gro-muted);
}

body .gro-install-ios-hint{
  margin-top:6px;
  font-size:12px;
  color:var(--gro-muted);
}

body .gro-install-ios-hint strong{
  color:rgba(255,255,255,0.92);
}

body .gro-install-banner-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* Buttons */
body #gro-install-btn.gro-install-btn,
body #gro-install-dismiss.gro-install-dismiss{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:9px 12px;
  border-radius:999px;

  font-weight:800;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}

body #gro-install-btn.gro-install-btn{
  border:0;
  background:var(--gro-green);
  color:var(--gro-bg);
  box-shadow:0 10px 20px rgba(90,185,76,0.20);
}

body #gro-install-btn.gro-install-btn:active{
  transform:translateY(1px);
}

body #gro-install-btn.gro-install-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

body #gro-install-dismiss.gro-install-dismiss{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.88);
}

body #gro-install-dismiss.gro-install-dismiss:hover{
  opacity:.95;
}

/* Grid */
body .gro-install-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

@media (min-width:720px){
  body .gro-install-grid{
    grid-template-columns:1fr 1fr;
  }
}

body .gro-install-card{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.22);
}

body .gro-install-card h3{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:-0.01em;
}

body .gro-install-card ol{
  margin:0;
  padding-left:18px;
}

body .gro-install-card li{
  margin:6px 0;
  font-size:13px;
  color:var(--gro-muted);
}

body .gro-install-card strong{
  color:rgba(255,255,255,0.92);
}

body .gro-install-tip{
  margin:10px 2px 0;
  font-size:12.5px;
  color:rgba(255,255,255,0.62);
}

@media (max-width:520px){
  body .gro-install-wrap{
    padding:12px;
  }

  body .gro-install-head{
    gap:10px;
  }

  body .gro-install-title h2{
    font-size:17px;
  }

  body #gro-install-banner.gro-install-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  body .gro-install-banner-right{
    width:100%;
  }

  body #gro-install-btn.gro-install-btn,
  body #gro-install-dismiss.gro-install-dismiss{
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
   STANDALONE APP MODE — COMMON (Android + iPhone)
   ============================================================ */

html.gro-standalone{
  background:var(--gro-bg);
}

html.gro-standalone body{
  background:var(--gro-bg);
  overscroll-behavior-y:contain;
}

html.gro-standalone a,
html.gro-standalone button{
  -webkit-tap-highlight-color:transparent;
}

html.gro-standalone .ct-header a,
html.gro-standalone header a,
html.gro-standalone .ct-header button,
html.gro-standalone header button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Slightly app-like feel */
html.gro-standalone .site,
html.gro-standalone #main,
html.gro-standalone .site-main{
  position:relative;
}

/* ============================================================
   ANDROID STANDALONE
   ============================================================ */

html.gro-standalone.gro-android body{
  padding-top:0 !important;
}

/* ============================================================
   iOS STANDALONE — SAFE AREA / HEADER FIX
   ============================================================ */

html.gro-standalone.gro-ios{
  --gro-safe-top: env(safe-area-inset-top, 0px);
  --gro-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* old iOS fallback names */
  --gro-safe-top-legacy: constant(safe-area-inset-top);
  --gro-safe-bottom-legacy: constant(safe-area-inset-bottom);
}

/* breathing room */
html.gro-standalone.gro-ios body{
  padding-top:var(--gro-safe-top) !important;
  padding-top:var(--gro-safe-top-legacy) !important;
  padding-bottom:var(--gro-safe-bottom) !important;
  padding-bottom:var(--gro-safe-bottom-legacy) !important;
}

/* common theme headers */
html.gro-standalone.gro-ios .ct-header,
html.gro-standalone.gro-ios header#header,
html.gro-standalone.gro-ios .site-header,
html.gro-standalone.gro-ios .elementor-location-header,
html.gro-standalone.gro-ios header{
  padding-top:var(--gro-safe-top) !important;
  padding-top:var(--gro-safe-top-legacy) !important;
}

/* sticky/fixed headers */
html.gro-standalone.gro-ios .ct-sticky-container,
html.gro-standalone.gro-ios .ct-header [data-sticky*="yes"],
html.gro-standalone.gro-ios .is-sticky,
html.gro-standalone.gro-ios .sticky,
html.gro-standalone.gro-ios .fixed,
html.gro-standalone.gro-ios [style*="position:fixed"][style*="top: 0"],
html.gro-standalone.gro-ios [style*="position: fixed"][style*="top: 0"]{
  top:var(--gro-safe-top) !important;
  top:var(--gro-safe-top-legacy) !important;
}

/* easier auth/menu taps */
html.gro-standalone.gro-ios .ct-header a,
html.gro-standalone.gro-ios header a,
html.gro-standalone.gro-ios .ct-header button,
html.gro-standalone.gro-ios header button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* ============================================================
   FLOATING REFRESH BUTTON
   ============================================================ */

html.gro-standalone .gro-pwa-refresh{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:2147483600;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:44px;
  padding:10px 13px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,15,15,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  color:#fff;
  font-weight:800;
  font-size:13px;
  line-height:1;
  cursor:pointer;

  box-shadow:0 10px 26px rgba(0,0,0,.32);
}

html.gro-standalone .gro-pwa-refresh:hover{
  border-color:rgba(90,185,76,.30);
}

html.gro-standalone .gro-pwa-refresh:active{
  transform:translateY(1px);
}

html.gro-standalone .gro-pwa-refresh small{
  opacity:.75;
  font-weight:700;
}

html.gro-standalone.gro-ios .gro-pwa-refresh{
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  bottom:calc(12px + constant(safe-area-inset-bottom));
}

/* ============================================================
   OPTIONAL: SMALL PWA START VISUAL STABILITY
   ============================================================ */

html.gro-pwa-start body{
  min-height:100vh;
  min-height:100dvh;
}