/* ==========================================================================
   WN Specials (4.20) — official WritingNepal Akshar offers.
   Cards on the Official Profile (Akshar Offers section), the teaser on
   /akshar-offers/, and the bonus notice on /wallet-topup/.
   Quiet ink-and-gold: cream cards, ink hairline, small offset shadow.
   ========================================================================== */

.wn-sp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px;
  margin-top:14px;
}
.wn-sp-card{
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:var(--radius,20px);
  box-shadow:4px 4px 0 var(--ink);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  transition:transform .25s var(--bounce), box-shadow .25s var(--bounce);
}
.wn-sp-card:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.wn-sp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wn-sp-icon{ font-size:1.6rem; line-height:1; }
.wn-sp-big{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;
  font-size:1.15rem;
  background:var(--gold);
  color:#120A08;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:3px 12px;
  white-space:nowrap;
}
.wn-sp-card h4{ margin:4px 0 0; font-size:1.05rem; }
.wn-sp-card p{ margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.wn-sp-card .wn-sp-meta{ font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.wn-sp-card .wn-sp-done{ color:var(--leaf-deep); }
.wn-sp-admin-note{ font-size:.74rem !important; font-style:italic; }
.wn-sp-btn{ align-self:flex-start; margin-top:auto; font-size:.84rem; padding:9px 18px; }

/* Lucky box */
.wn-sp-result{ font-weight:700; color:var(--ink) !important; min-height:0; }
.wn-sp-result:empty{ display:none; }
.wn-sp-lucky.is-opening .wn-sp-box{ display:inline-block; animation:wn-sp-shake .5s ease-in-out 2; }
.wn-sp-lucky.is-won .wn-sp-result{ animation:wn-sp-pop .45s var(--bounce); }
.wn-sp-lucky.is-opened .wn-sp-box{ filter:grayscale(.2); }
@keyframes wn-sp-shake{
  0%,100%{ transform:rotate(0); }
  25%{ transform:rotate(-14deg) scale(1.08); }
  75%{ transform:rotate(14deg) scale(1.08); }
}
@keyframes wn-sp-pop{
  0%{ transform:scale(.6); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

/* Invite */
.wn-sp-linkrow{ display:flex; gap:8px; align-items:center; margin-top:2px; }
.wn-sp-link{
  flex:1; min-width:0;
  padding:9px 10px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:.8rem;
  background:var(--paper-deep);
  color:var(--ink);
  font-family:inherit;
}
.wn-sp-linkrow .wn-sp-btn{ margin-top:0; flex-shrink:0; }

.wn-sp-foot{ font-size:.76rem; color:var(--ink-soft); margin:14px 2px 0; }
.wn-sp-foot a{ color:var(--clay-deep); font-weight:700; }

/* Teaser on /akshar-offers/ */
.wn-sp-teaser{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  margin-bottom:18px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:var(--radius,20px);
  box-shadow:4px 4px 0 var(--gold-deep);
  color:var(--ink);
  text-decoration:none;
}
.wn-sp-teaser:hover{ transform:translate(-1px,-1px); }
.wn-sp-teaser-icon{ font-size:1.7rem; line-height:1; }
.wn-sp-teaser strong{ display:block; font-size:.98rem; }
.wn-sp-teaser-sub{ display:block; font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.wn-sp-teaser-go{ margin-left:auto; font-weight:700; font-size:1.1rem; }

/* Notice on /wallet-topup/ */
.wn-sp-topup-notice{
  max-width:480px;
  margin:20px auto 0;
  padding:14px 16px;
  background:var(--paper-deep);
  border:1.5px solid var(--gold-deep);
  border-radius:14px;
  font-size:.86rem;
  text-align:center;
}
.wn-sp-topup-notice strong{ display:block; margin-bottom:4px; font-size:.95rem; }
.wn-sp-pkg-bonus{ display:block; font-size:.68rem; font-weight:700; color:var(--bronze-deep); }

@media (max-width:600px){
  .wn-sp-grid{ grid-template-columns:1fr; gap:14px; }
  .wn-sp-card{ padding:16px; }
}
@media (prefers-reduced-motion:reduce){
  .wn-sp-card, .wn-sp-lucky.is-opening .wn-sp-box, .wn-sp-lucky.is-won .wn-sp-result{ animation:none; transition:none; }
}

/* 4.36 — WN Offers card in the Catch feed */
.wn-sp-grid.wn-sp-feed{display:block;margin:18px 0;padding:0;}
.wn-sp-feed .wn-sp-feed-tag{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:800;letter-spacing:.02em;margin:0 4px 6px;color:var(--ink-soft,#5a534a);}
.wn-sp-feed .wn-sp-feed-tag a{color:var(--clay-deep,#a33f15);text-decoration:none;font-weight:700;}
.wn-sp-feed .wn-sp-card{max-width:none;}
.wn-sp-feed .wn-sp-card h4{margin:6px 0 4px;}


/* 4.42 — Writing challenges */
.wn-wc-card .wn-wc-rules{ font-size:.8rem; color:var(--ink) !important; background:var(--paper-deep,#f6f1e7); border-radius:10px; padding:6px 10px; }
.wn-wc-claim{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.wn-wc-label{ display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.wn-wc-select{ width:100%; max-width:100%; font-size:.84rem; padding:8px 10px; border:1.5px solid var(--ink); border-radius:10px; background:var(--white); color:var(--ink); }
.wn-wc-claim .wn-sp-btn{ margin-top:0; }
.wn-sp-card .wn-wc-pending{ color:var(--clay-deep,#a33f15); }
.wn-sp-card .wn-wc-rejected{ color:#b32d2e; }
.wn-wc-more{ font-size:.8rem; font-weight:700; color:var(--ink); text-decoration:underline; }