/* ================================
   8FLiX — Donate UI
   Includes:
   - Donate button cards
   - Thank You page
   - Why Donate callout
   ================================= */

/* -------------------------------
   Donate Buttons
   Scoped to: .efx-cardcallout / .efx-cardgrid / .efx-cardbtn
   ------------------------------- */

.efx-cardcallout{
  --efx-mag:  #D3239A;
  --efx-warm: #FF6A00;
  --efx-br:   14px;
  --efx-btn-text: #fff;
  --efx-btn-bg: linear-gradient(90deg, var(--efx-mag), var(--efx-warm));
  --efx-btn-border: rgba(255,255,255,.18);
  --efx-btn-shadow: 0 8px 18px rgba(0,0,0,.12), inset 0 -2px 0 rgba(0,0,0,.14);
  --efx-btn-shadow-hover: 0 10px 22px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.16);
  --efx-ring: 0 0 0 3px rgba(211,35,154,.35), 0 6px 14px rgba(0,0,0,.18);
}

.efx-cardgrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}

.efx-cardgrid .efx-cardbtn{
  --efx-card-pad-y: .95rem;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 96px;
  padding: var(--efx-card-pad-y) 1rem;
  border-radius: var(--efx-br);
  text-align: center;
  text-decoration: none;
  background: var(--efx-btn-bg);
  color: var(--efx-btn-text);
  border: 1px solid var(--efx-btn-border);
  box-shadow: var(--efx-btn-shadow);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.efx-cardgrid .efx-cardbtn:link,
.efx-cardgrid .efx-cardbtn:visited{
  color: var(--efx-btn-text);
}

.efx-cardgrid .efx-cardbtn > strong{
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.efx-cardgrid .efx-cardbtn > span{
  display: block;
  font-size: .92rem;
  line-height: 1.15;
  opacity: .95;
}

.efx-cardgrid .efx-cardbtn::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top: clamp(4px, calc(var(--efx-card-pad-y, .9rem) * 0.6), 9px);
  height:2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.92) 35%,
    rgba(255,255,255,0) 65%
  );
  opacity:.95;
  pointer-events:none;
  border-radius: inherit;
}

.efx-cardgrid .efx-cardbtn::after{
  content:"";
  position:absolute;
  inset:1px;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 54%
  );
  transform: translateX(-125%) rotate(0.001deg);
  pointer-events:none;
  border-radius: inherit;
}

.efx-cardgrid .efx-cardbtn:hover{
  transform: translateY(-1px);
  box-shadow: var(--efx-btn-shadow-hover);
}

.efx-cardgrid .efx-cardbtn:active{
  transform: translateY(0);
  filter: saturate(1.05);
}

.efx-cardgrid .efx-cardbtn:hover::after,
.efx-cardgrid .efx-cardbtn:focus-visible::after{
  animation: efxSheen 900ms ease-out forwards;
}

.efx-cardgrid .efx-cardbtn:focus-visible{
  outline: none;
  box-shadow: var(--efx-ring);
}

.efx-cardbtn--sm{
  --efx-card-pad-y: .65rem;
  min-height: 84px;
}

.efx-cardbtn--lg{
  --efx-card-pad-y: 1.1rem;
  min-height: 108px;
}

/* Optional shimmer safety */
@media (prefers-reduced-motion: reduce){
  .efx-cardgrid .efx-cardbtn,
  .efx-cardgrid .efx-cardbtn:hover{
    transition: none;
    transform: none;
  }

  .efx-cardgrid .efx-cardbtn:hover::after,
  .efx-cardgrid .efx-cardbtn:focus-visible::after,
  .efx-cardbtn.efx-shimmer:hover::after,
  .efx-cardbtn.efx-shimmer:focus-visible::after{
    animation: none;
  }
}

@media (prefers-color-scheme: dark){
  .efx-cardcallout{
    --efx-btn-border: rgba(255,255,255,.22);
    --efx-btn-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.22);
    --efx-btn-shadow-hover: 0 10px 22px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.24);
    --efx-ring: 0 0 0 3px rgba(211,35,154,.45), 0 6px 14px rgba(0,0,0,.6);
  }
}

/* -------------------------------
   Thank You Page
   ------------------------------- */

.efx-thanks{
  --efx-mag:#D3239A;
  --efx-warm:#FF6A00;
  --efx-br:14px;
  --efx-btn-border: rgba(255,255,255,.18);
  --efx-btn-shadow: 0 8px 18px rgba(0,0,0,.12), inset 0 -2px 0 rgba(0,0,0,.14);
  --efx-btn-shadow-hover: 0 10px 22px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.16);
  --efx-ring: 0 0 0 3px rgba(211,35,154,.35), 0 6px 14px rgba(0,0,0,.18);
}

.efx-thanks *{
  box-sizing:border-box;
}

.efx-confetti{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(211,35,154,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(255,106,0,.10), transparent 60%);
  animation: efx-fade 2.2s ease forwards;
}

.efx-thanks-hero{
  position:relative;
  z-index:1;
  text-align:center;
  padding:1.25rem;
  border:1px solid rgba(211,35,154,.18);
  border-radius:var(--efx-br);
  background:linear-gradient(90deg, rgba(211,35,154,.06), rgba(255,106,0,.06));
  margin:.5rem 0 1rem;
}

.efx-thanks-hero h1{
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  margin:.25rem 0;
}

.efx-thanks-lede{
  font-size:1.05rem;
  max-width:70ch;
  margin:.25rem auto .75rem;
}

.efx-thanks-badges{
  display:flex;
  gap:.5rem;
  justify-content:center;
  flex-wrap:wrap;
}

.efx-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  font-size:.92rem;
}

.efx-thanks-panels{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:.8rem;
}

@media (max-width:980px){
  .efx-thanks-panels{
    grid-template-columns:1fr;
  }
}

.efx-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--efx-br);
  padding:1rem;
}

.efx-card--accent{
  border-left:6px solid var(--efx-mag);
  background:linear-gradient(90deg, rgba(211,35,154,.05), rgba(255,106,0,.05));
}

.efx-list{
  margin:.5rem 0;
  padding-left:1.1rem;
}

.efx-list--check li{
  list-style:none;
  position:relative;
  padding-left:1.2rem;
}

.efx-list--check li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--efx-mag);
  font-weight:700;
}

.efx-label{
  display:block;
  font-weight:600;
  margin:.4rem 0 .2rem;
}

.efx-input{
  width:100%;
  padding:.55rem .7rem;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}

.efx-check{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:.5rem 0;
}

.efx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  transition:opacity .2s ease;
}

.efx-btn--primary{
  background:linear-gradient(90deg, var(--efx-mag), var(--efx-warm));
  color:#fff;
}

.efx-btn--ghost{
  background:#fff;
  border-color:rgba(0,0,0,.10);
}

.efx-btn--outline{
  background:transparent;
  border-color:var(--efx-mag);
  color:var(--efx-mag);
}

.efx-btn--chip{
  background:#fff;
  border-color:rgba(0,0,0,.12);
  border-radius:999px;
  font-weight:600;
}

.efx-fine,
.efx-note{
  font-size:.9rem;
  opacity:.8;
}

.efx-thanks-share{
  text-align:center;
  margin:1rem 0;
}

.efx-share{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

.efx-thanks-footer{
  display:flex;
  gap:.5rem;
  justify-content:center;
  margin:1rem 0;
  flex-wrap:wrap;
}

.efx-btn-thanks-sub{
  font:inherit !important;
  font-size:11px !important;
}

/* Thank You primary button upgrades */
.efx-thanks .efx-btn{
  --efx-btn-pad-y: .6rem;
  position: relative;
  overflow: hidden;
  min-height: 44px;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .2s ease;
}

.efx-thanks .efx-btn--primary{
  background: linear-gradient(90deg, var(--efx-mag), var(--efx-warm));
  color:#fff;
  border-color: var(--efx-btn-border);
  box-shadow: var(--efx-btn-shadow);
}

.efx-thanks a.efx-btn--primary:link,
.efx-thanks a.efx-btn--primary:visited{
  color:#fff;
}

.efx-thanks .efx-btn--primary::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top: clamp(4px, calc(var(--efx-btn-pad-y, .6rem) * 0.6), 9px);
  height:2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.92) 35%,
    rgba(255,255,255,0) 65%
  );
  opacity:.95;
  pointer-events:none;
  border-radius: inherit;
}

.efx-thanks .efx-btn--primary::after{
  content:"";
  position:absolute;
  inset:1px;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 54%
  );
  transform: translateX(-125%) rotate(0.001deg);
  pointer-events:none;
  border-radius: inherit;
}

.efx-thanks .efx-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--efx-btn-shadow-hover);
}

.efx-thanks .efx-btn--primary:active{
  transform: translateY(0);
  filter: saturate(1.05);
}

.efx-thanks .efx-btn--primary:hover::after,
.efx-thanks .efx-btn--primary:focus-visible::after{
  animation: efxSheen 900ms ease-out forwards;
}

.efx-thanks .efx-btn--primary:focus-visible{
  outline: none;
  box-shadow: var(--efx-ring);
}

@media (prefers-reduced-motion: reduce){
  .efx-thanks .efx-btn--primary,
  .efx-thanks .efx-btn--primary:hover{
    transition:none;
    transform:none;
  }

  .efx-thanks .efx-btn--primary:hover::after,
  .efx-thanks .efx-btn--primary:focus-visible::after{
    animation:none;
  }
}

@media (prefers-color-scheme: dark){
  .efx-thanks{
    --efx-btn-border: rgba(255,255,255,.22);
    --efx-btn-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.22);
    --efx-btn-shadow-hover: 0 10px 22px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.24);
    --efx-ring: 0 0 0 3px rgba(211,35,154,.45), 0 6px 14px rgba(0,0,0,.6);
  }
}

/* -------------------------------
   Why Donate Callout
   ------------------------------- */

.efx-why-donate{
  --efx-mag:#D3239A;
  --efx-warm:#FF6A00;
  --efx-br:14px;
  --efx-bg:#fff !important;
  position: relative;
  background: var(--efx-bg);
  border: 1px solid rgba(211,35,154,.22);
  border-radius: var(--efx-br);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  padding: 1rem 1rem 1.25rem 1.25rem;
}

.efx-why-donate::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(180deg, var(--efx-mag), var(--efx-warm));
  border-top-left-radius: var(--efx-br);
  border-bottom-left-radius: var(--efx-br);
}

.efx-why-donate.efx-edu-wash{
  background: linear-gradient(90deg, rgba(211,35,154,.04), rgba(255,106,0,.04));
}

@media (max-width:480px){
  .efx-why-donate{
    padding-left: 1rem;
  }

  .efx-why-donate::before{
    width: 8px;
  }
}

/* -------------------------------
   Shared keyframes
   ------------------------------- */

@keyframes efxSheen{
  from{ transform: translateX(-125%) rotate(0.001deg); }
  to{   transform: translateX(125%) rotate(0.001deg); }
}

@keyframes efx-fade{
  from{ opacity:1; }
  to{ opacity:.4; }
}