/* Gift for Knowledge – Frontend styles */
.gfk-no-scroll { overflow: hidden; }
/* Utility: force-hide any element with [hidden] */
/* Scope: only hide OUR components when they carry [hidden] */
#gfk-overlay[hidden],
#gfk-modal[hidden],
#gfk-inter[hidden],
#gfk-stage[hidden],
#gfk-end[hidden],
#gfk-thanks[hidden] {
  display: none !important;
}

/* ---------- Overlay & Modal ---------- */
.gfk-overlay[hidden] { display: none !important; }
.gfk-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(17, 24, 39, .55);
  display: none; /* shown via JS with fadeIn */
}
.gfk-modal {
  position: relative;
  width: min(96vw, 1180px);
  /* desktop/tablet: cap height but allow interior to scroll */
  max-height: 92vh;
  margin: 4vh auto;
  background: #fff;
  color: #111827;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gfk-progress-right {
margin-right: 12px;
}

/* Mobile: use dynamic viewport height so browser chrome doesn’t steal space */
@media (max-width: 720px) {
  .gfk-modal {
    xxheight: 95dvh;          /* modern mobile browsers */
    width: 90dvw;
    top: 10px;
    max-height: none;      
    margin: auto;        
  }
  .gfk-progress-right {
    margin-right: 20px;
  }
  .gfk-progress {
    background: transparent !important;
  }
}
@media (min-width: 1024px) {
  .gfk-modal { width: min(92vw, 1280px); }
}
.gfk-close {
  position: absolute; top: -3px; right: -17px;
  width: 38px; height: 38px; border-radius: 9999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.06); color: #111;
  border: none; cursor: pointer;
  transition: background .2s ease, transform .08s ease;
}
.gfk-close:hover { background: rgba(0,0,0,.10); transform: translateY(-1px); }
.gfk-close svg { width: auto; height: 18px; }

/* ---------- Shell ---------- */
.gfk-shell {
  padding: clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;             /* take available height inside modal */
  min-height: 0;       /* allow children with overflow to actually scroll */
  /* no overflow here; children (stage/end) will scroll */
}

/* Only the main content panes scroll; header stays visible */
.gfk-stage,
.gfk-end {
  flex: 1;
  min-height: 0;                 /* critical for flex children to scroll */
  overflow: auto;
  -webkit-overflow-scrolling: touch;  /* smooth iOS scrolling */
  overscroll-behavior: contain;
  padding-bottom: 8px;           /* tiny buffer under last row */
}

@media (max-width: 420px) {
  .gfk-overlay { background: rgba(17,24,39,.60); }
}

/* ---------- Progress (header) ---------- */
.gfk-progress {
  position: sticky; top: 0; z-index: 10;
  background: transparent;
  padding-top: 6px; padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  display: grid; gap: 8px;
}
.gfk-progress-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: #374151; font-weight: 600;
}
.gfk-progress-track {
  width: 100%; height: 10px; border-radius: 9999px;
  background: hsl(43 57% 40%); overflow: hidden;
}
.gfk-progress-fill {
  height: 100%; width: 0%; background: hsl(158 100% 19%);
  transition: width .4s ease;
}

/* ---------- Question Stage ---------- */
.gfk-stage { display: block; }
.gfk-title {
  margin: 2px 0 8px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2;
  font-weight: 800; color: #0f172a;
}

/* Grid: dynamic columns via data attribute */
.gfk-grid {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile default */
}

@media (min-width: 1024px) {
  .gfk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* always 4 cols on desktop */
  }
}

/* Card */
.gfk-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  background: #fff; border-radius: 16px; border: 2px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  cursor: pointer; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.gfk-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.10); }
.gfk-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f8fafc; }
.gfk-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1); transition: transform .35s ease;
}
.gfk-card:hover .gfk-card-img { transform: scale(1.05); }
.gfk-card-label {
  padding: 10px 12px; font-size: 13px; color: #374151; font-weight: 600;
  border-top: 1px solid #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Reveal states */
.gfk-card.revealed { cursor: default; }
.gfk-card.is-correct { border-color: hsl(158 100% 19%); box-shadow: 0 0 0 3px hsla(158,100%,19%,.15), 0 10px 24px rgba(0,0,0,.12); }
.gfk-card.is-wrong   { border-color: hsl(0 72% 60%);   box-shadow: 0 0 0 3px hsla(0,72%,60%,.15),   0 10px 24px rgba(0,0,0,.12); }

/* Badge (top-right) */
.gfk-badge {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 9999px;
  background: rgba(255,255,255,.85);
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
}
.gfk-card.is-correct .gfk-badge { color: hsl(158 100% 19%); }
.gfk-card.is-wrong   .gfk-badge { color: hsl(0 72% 50%); }
.gfk-badge svg { width: 18px; height: 18px; }

/* Fine print */
.gfk-fine {
  margin-top: 8px; font-size: 12px; color: #6b7280; font-weight: 600;
}
#gfk-reward-per { color: hsl(158 100% 19%); font-weight: 800; }
.gfk-fine-dollar { margin-right: 2px; }

/* ---------- End Screen ---------- */
.gfk-end { display: grid; gap: 16px; }
/* Thank-you screen */
.gfk-thanks {
  min-height: 52vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(16px, 3vw, 28px);
}
.gfk-thanks-head {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
}

.gfk-end-head {
  margin: 0; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; font-weight: 900; color: #0f172a;
}
.gfk-end-sub {
  margin: -6px 0 6px; font-size: 14px; color: #475569; font-weight: 600;
}

/* Large accuracy bar */
.gfk-end-progress { display: grid; gap: 8px; }
.gfk-end-track {
  width: 100%; height: 14px; border-radius: 9999px;
  background: #eef2f7; overflow: hidden;
}
.gfk-end-fill {
  height: 100%; width: 0%; background: hsl(158 100% 19%);
  transition: width .5s ease;
}
.gfk-end-acc {
  text-align: center; font-size: 13px; color: #374151; font-weight: 700;
}

/* Reward card (80% transparent green bg) */
.gfk-reward-card {
  border-radius: 18px;
  background: hsla(158, 100%, 19%, .20); /* ~80% transparent */
  border: 1px solid hsla(158, 100%, 19%, .25);
  padding: clamp(14px, 2vw, 18px);
  display: grid; place-items: center;
}
.gfk-reward-lines { text-align: center; line-height: 1.2; }
.gfk-reward-lines .l1 { font-size: 14px; color: #064e3b; font-weight: 700; opacity: .9; }
.gfk-reward-lines .l2 {
  margin: 4px 0 2px;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 900; color: #065f46;
}
.gfk-reward-lines .l3 { font-size: 12px; color: #065f46; font-weight: 700; opacity: .9; }

/* Email row */
.gfk-email-row { display: grid; gap: 8px; }
.gfk-email-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #374151; font-weight: 700;
}
.gfk-email-label svg { width: 16px; height: 16px; }
.gfk-email-ctrls {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
.gfk-email {
  width: 100%; height: 42px; border-radius: 12px; border: 1.5px solid #e5e7eb;
  padding: 0 12px; font-size: 14px; color: #111827; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gfk-email:focus { border-color: hsl(158 100% 19%); box-shadow: 0 0 0 3px hsla(158,100%,19%,.15); }
.gfk-send {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px; border-radius: 12px; border: none;
  background: hsl(158 100% 19%); color: #fff; font-weight: 800; letter-spacing: .2px;
  cursor: pointer; transition: background .2s ease, transform .08s ease, box-shadow .2s ease;
  box-shadow: 0 10px 20px hsla(158, 100%, 19%, .25);
}
.gfk-send:hover { background: hsl(158 100% 25%); transform: translateY(-1px); }
.gfk-send.is-busy { opacity: .75; cursor: wait; }
.gfk-send svg { width: 16px; height: 16px; }

.gfk-send-msg { min-height: 18px; font-size: 12px; color: #374151; }

/* Try again */
.gfk-actions { display: flex; justify-content: center; margin-top: 6px; }
.gfk-restart {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #111827; font-weight: 800;
  cursor: pointer; transition: border-color .2s ease, transform .08s ease, box-shadow .2s ease;
}
.gfk-restart:hover { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.gfk-restart svg { width: 16px; height: 16px; }

/* ---------- Empty / Skeleton / Toast ---------- */
.gfk-empty {
  width: 100%; padding: 40px 0; text-align: center; color: #6b7280; font-weight: 600;
  background: #f8fafc; border-radius: 14px; border: 1px dashed #e5e7eb;
}

.gfk-skel-row {
  height: 140px; border-radius: 14px; background: linear-gradient(90deg,#f2f4f8 0%,#f8fafc 50%,#f2f4f8 100%);
  animation: gfk-shimmer 1.2s infinite;
}
@keyframes gfk-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }

.gfk-toast {
  position: fixed; z-index: 1000000;
  top: 14px; right: 14px; padding: 10px 12px; border-radius: 12px;
  background: #111827; color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease;
}
.gfk-toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Accessibility ---------- */
.gfk-card:focus-visible,
.gfk-send:focus-visible,
.gfk-restart:focus-visible,
.gfk-close:focus-visible {
  outline: 3px solid hsla(158, 100%, 19%, .5);
  outline-offset: 2px;
}
/* -------- Interstitial (small modal) -------- */
.gfk-inter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 7px;
}

/* Card: flatter, sharper, thinner radius + new gold */
.gfk-inter-card {
  position: relative;
  width: min(92vw, 440px);
  background: #fff;
  border: 2px solid #a37e2c;            /* new gold */
  border-radius: 4px;                    /* smaller corners; set to 0 for perfectly square */
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 20px;
}

/* Keep the close button as-is */
.gfk-inter-close {
  position: absolute;
  top: 4px;
  right: -10px;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.06);
  color: #111;
  border: none;
  cursor: pointer;
  transition: background .2s ease, transform .08s ease;
  line-height: 0;
  --gfk-close-nudge-x: -0.5px;
}
.gfk-inter-close:hover { background: rgba(0,0,0,.10); transform: translateY(-1px); }
.gfk-inter-close svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translate(var(--gfk-close-nudge-x, 0), var(--gfk-close-nudge-y, 0));
  margin-left: -9px;
}

/* Body + typography */
.gfk-inter-body { text-align: center; }

.gfk-inter-head {
  font-weight: 900;
  font-size: clamp(24px, 2.2vw, 30px);
  margin: 6px 0 8px;
  color: #a37e2c;                        /* flat gold, no gradient */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.gfk-inter-sub {
  font-weight: 800;
  color: #006039;                        /* new green */
  font-size: clamp(14px, 2vw, 18px);
  margin: 4px 0 6px;
}

.gfk-inter-fine {
  font-weight: 600;
  color: #334155;
  font-size: 13px;
  margin: 2px 0 12px;
}

.gfk-inter-line1 { margin-top: 12px; }
.gfk-inter-line1 b { font-weight: 900; color: #0f172a; }

.gfk-inter-line2 {
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
  color: #006039;                        /* tie-in green */
}

/* Start button: flat, square, no gradients or rounded corners */
.gfk-inter-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  min-width: 220px;
  border-radius: 0;                       /* remove corners */
  border: 2px solid #a37e2c;              /* new gold */
  background: #a37e2c;                    /* flat fill */
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  position: relative;
  overflow: hidden;
margin-top:6px;
}
.gfk-inter-start:hover {
  background: #8b6a25;                    /* subtle darken */
  border-color: #8b6a25;
  transform: translateY(-1px);
}
.gfk-inter-start:active {
  transform: translateY(0);
  background: #775a1f;
  border-color: #775a1f;
}
.gfk-inter-start:focus-visible {
  outline: 2px solid #006039;             /* accessible focus using new green */
  outline-offset: 2px;
}
/* kill old shine overlay */
.gfk-inter-start::after { content: none; }

/*floating icon*/
/* --- GFK FAB animations --- */
#gfk-fab .gfk-fab-q{
  display:block;
  animation: gfkPulse 0.55s ease-out 0.35s 2;
}
#gfk-fab .gfk-fab-badge{
  will-change: transform;
  overflow:hidden;
  /* wiggle once per 4s cycle, total 5 cycles */
  animation: gfkWiggleLoop 4s ease-out 0s 5 both;
}

#gfk-fab .gfk-fab-badge::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0) 75%);
  transform: translateX(-130%) rotate(10deg);
  /* brief shine in the first ~25% of each 4s cycle, total 5 cycles */
  animation: gfkShineLoop 4s ease-out 0s 5 both;
  pointer-events:none;
  border-radius: inherit;
}

@keyframes gfkPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  70%{transform:scale(0.96)}
  100%{transform:scale(1)}
}
/* Runs once near the start of each 4s cycle */
@keyframes gfkWiggleLoop{
  0%{transform:rotate(0)}
  5%{transform:rotate(-10deg)}
  10%{transform:rotate(6deg)}
  15%{transform:rotate(0)}
  100%{transform:rotate(0)}
}

/* Shine sweeps across early in each 4s cycle */
@keyframes gfkShineLoop{
  0%{transform:translateX(-130%) rotate(10deg); opacity:0}
  5%{opacity:1}
  25%{transform:translateX(130%) rotate(10deg); opacity:0}
  100%{transform:translateX(130%) rotate(10deg); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  #gfk-fab .gfk-fab-q,
  #gfk-fab .gfk-fab-badge,
  #gfk-fab .gfk-fab-badge::after{ animation:none !important; }
}

.gfk-confetti-bg{
  /*
background-image: url('img/confetti.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto;
*/
}