/* =========================================================
   GRO Ads Rewards - GRO Theme CSS (Clean / Deduped)
   Palette: GRO Green #5AB94C
   Notes:
   - Removed duplicate "dark premium" .gro-ad-open block (kept neon version only)
   - Added safe z-index for backdrop/dialog
   - Added smooth bar transition
   ========================================================= */

:root{
  --gro-green: #5AB94C;
  --gro-green-2: #4AA23E;
  --gro-bg: #0b0b0b;
  --gro-panel: #0f0f0f;
  --gro-border: #262626;
  --gro-border-soft: #1f1f1f;
  --gro-text: #ffffff;
  --gro-muted: #9a9a9a;
  --gro-soft: #d6d6d6;
}

/* -------------------------
   Card
-------------------------- */
.gro-ad-card{
  background: linear-gradient(180deg, var(--gro-bg) 0%, #090909 100%);
  border: 1px solid var(--gro-border-soft);
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
}

.gro-ad-hero{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.gro-ad-hero img{
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--gro-border-soft);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

.gro-ad-copy h3{
  margin:0 0 6px;
  color:var(--gro-text);
  font-size:18px;
  line-height:1.2;
}

.gro-ad-text{
  color: var(--gro-soft);
  margin:0 0 10px;
  line-height:1.35;
}

.gro-ad-bullets{
  margin:0 0 12px;
  padding-left:18px;
  color: var(--gro-soft);
}
.gro-ad-bullets li{ margin: 2px 0; }

/* -------------------------
   Buttons (base)
-------------------------- */
.gro-ad-cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.gro-ad-cta,
.gro-ad-open,
.gro-ad-claim,
.gro-ad-visit{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
  outline: none;
  user-select: none;
}

/* Focus ring */
.gro-ad-cta:focus-visible,
.gro-ad-open:focus-visible,
.gro-ad-claim:focus-visible,
.gro-ad-visit:focus-visible,
.grox-close:focus-visible{
  box-shadow: 0 0 0 3px rgba(90,185,76,.22), 0 0 0 1px rgba(90,185,76,.55);
}

/* Hover/active */
.gro-ad-cta:hover,
.gro-ad-open:hover,
.gro-ad-claim:hover,
.gro-ad-visit:hover{ transform: translateY(-1px); }
.gro-ad-cta:active,
.gro-ad-open:active,
.gro-ad-claim:active,
.gro-ad-visit:active{ transform: translateY(0px); }

/* Primary (Visit / CTA) */
.gro-ad-cta,
.gro-ad-visit{
  background: linear-gradient(180deg, #6AD35A 0%, var(--gro-green) 55%, var(--gro-green-2) 100%);
  color: #071207;
  border: 1px solid rgba(90,185,76,.35);
  box-shadow: 0 12px 20px rgba(90,185,76,.14);
}
.gro-ad-cta:hover,
.gro-ad-visit:hover{
  border-color: rgba(90,185,76,.58);
  box-shadow: 0 16px 24px rgba(90,185,76,.18);
}

/* Claim (green but slightly different emphasis) */
.gro-ad-claim{
  background: linear-gradient(180deg, var(--gro-green) 0%, var(--gro-green-2) 100%);
  color: #071207;
  border: 1px solid rgba(90,185,76,.35);
  box-shadow: 0 12px 20px rgba(90,185,76,.12);
}
.gro-ad-claim[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Muted text */
.muted{ color: var(--gro-muted); }

/* -------------------------
   Modal overlay + centering (no svh)
-------------------------- */
html.gro-modal-open,
body.gro-modal-open{
  overflow: hidden !important;
}

.gro-ad-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
}

.gro-ad-modal.is-open,
.gro-ad-modal[aria-hidden="false"]{
  pointer-events: auto;
  opacity: 1;
}

.grox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
  z-index: 0; /* harden stacking */
}

/* Dialog is fixed centered for maximum compatibility */
.gro-ad-dialog{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(720px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;

  background: linear-gradient(180deg, var(--gro-panel) 0%, #0b0b0b 100%);
  border: 1px solid var(--gro-border);
  border-radius: 18px;
  padding: 16px;
  color: var(--gro-text);

  box-shadow: 0 22px 70px rgba(0,0,0,.75);
  z-index: 1; /* harden stacking */
}

.grox-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;

  font-size: 26px;
  line-height: 1;
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}
.grox-close:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

.gro-ad-modal-img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--gro-border);
  margin-bottom:10px;
  box-shadow: 0 14px 26px rgba(0,0,0,.45);
}

.gro-ad-content h3{
  margin: 0 0 8px;
}

/* -------------------------
   Timer
-------------------------- */
.gro-ad-timer{ margin:12px 0; }

.gro-ad-progress{
  height: 10px;
  background: #141414;
  border: 1px solid var(--gro-border);
  border-radius: 999px;
  overflow: hidden;
}

.gro-ad-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6AD35A 0%, var(--gro-green) 60%, var(--gro-green-2) 100%);
  transition: width .18s linear; /* smoother */
}

.gro-ad-countdown{
  margin-top: 8px;
  color: var(--gro-soft);
}

/* -------------------------
   Actions + status
-------------------------- */
.gro-ad-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

/* Status looks like a pill/notice */
.gro-ad-status{
  min-height: 18px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--gro-border);
  background: rgba(255,255,255,.04);
  color: var(--gro-soft);
  line-height: 1.25;
}

.gro-ad-status a{
  color: #9BEA8F;
  text-decoration: underline;
}

/* Optional state classes (your JS supports these) */
.gro-ad-status.is-error{
  border-color: rgba(255,98,98,.35);
  background: rgba(255,98,98,.08);
}
.gro-ad-status.is-ok{
  border-color: rgba(90,185,76,.35);
  background: rgba(90,185,76,.08);
}

/* -------------------------
   View Ad button - GRO neon style (single source of truth)
-------------------------- */
.gro-ad-open{
  background: linear-gradient(180deg, #7AF06A 0%, #5AB94C 55%, #3f8f35 100%);
  border: 1px solid rgba(90,185,76,.55);
  color: #061206;

  box-shadow:
    0 14px 28px rgba(0,0,0,.55),
    0 0 0 1px rgba(32,208,178,.18),
    0 10px 22px rgba(16,180,155,.16);

  font-weight: 900;
  letter-spacing: .2px;
}

/* Play icon */
.gro-ad-open::before{
  content: "▶";
  font-size: 12px;
  opacity: .95;
}

/* Hover */
.gro-ad-open:hover{
  border-color: rgba(32,208,178,.70);
  box-shadow:
    0 18px 34px rgba(0,0,0,.62),
    0 0 0 1px rgba(32,208,178,.22),
    0 14px 26px rgba(16,180,155,.22);
}

/* Active */
.gro-ad-open:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Disabled states if ever used */
.gro-ad-open[disabled],
.gro-ad-open[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* -------------------------
   Responsive
-------------------------- */
@media (max-width: 480px){
  .gro-ad-hero{ gap: 12px; }
  .gro-ad-hero img{ width: 80px; height: 80px; }

  .gro-ad-cta,
  .gro-ad-open,
  .gro-ad-claim,
  .gro-ad-visit{
    width: 100%;
  }

  .gro-ad-cta-row,
  .gro-ad-actions{
    align-items: stretch;
  }

  .gro-ad-dialog{
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }
}