/* Hunt for the Roses — Mother's Day 2026
   Brand colors: charcoal #3b3d3a, tan #b6886e, blue-gray #647275, off-white #f8f6f4
*/

/* Promo strip (sitewide, dismissible per-session) — sits ABOVE the header */
.rose-promo-strip {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9990;
  background: linear-gradient(135deg, #b6886e 0%, #c89878 100%);
  color: #fff;
  padding: 10px 14px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.92rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Push existing fixed header down so the promo strip doesn't cover it */
body.has-rose-promo header.header,
body.has-rose-promo .header,
body.has-rose-promo nav.navbar { top: 44px !important; }
body.has-rose-promo { padding-top: 44px; }
@media (max-width: 600px) {
  body.has-rose-promo header.header,
  body.has-rose-promo .header,
  body.has-rose-promo nav.navbar { top: 56px !important; }
  body.has-rose-promo { padding-top: 56px; }
}

.rose-promo-strip a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}
.rose-promo-strip .rose-promo-emoji { font-size: 1.1rem; }
.rose-promo-strip .rose-promo-close {
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.rose-promo-strip .rose-promo-close:hover { background: rgba(255,255,255,0.35); }
@media (max-width: 600px) {
  .rose-promo-strip { font-size: 0.82rem; padding: 10px 10px; gap: 8px; }
}

/* Hidden roses — small, low-visibility, but interactive */
.rose-hunt-rose {
  position: fixed;
  width: 26px;
  height: 26px;
  z-index: 9985;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  opacity: 0.62;
  transition: opacity .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.rose-hunt-rose:hover,
.rose-hunt-rose:focus-visible {
  opacity: 1;
  transform: scale(1.12);
  outline: none;
}
.rose-hunt-rose svg { width: 100%; height: 100%; display: block; }
.rose-hunt-rose.rose-inline {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  opacity: 0.55;
}
.rose-hunt-rose.rose-found {
  animation: rose-pulse 1.6s ease 2;
}
@keyframes rose-pulse {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(182,136,110,0)); }
  50%  { transform: scale(1.4); filter: drop-shadow(0 0 14px rgba(182,136,110,.95)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(182,136,110,0)); }
}

/* Modal */
.rose-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,20,20,0.72);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: rose-fade-in .25s ease;
}
@keyframes rose-fade-in { from { opacity: 0; } to { opacity: 1; } }
.rose-modal {
  background: #fff;
  border-radius: 18px;
  max-width: 480px;
  width: 100%;
  padding: 32px 28px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  color: #3b3d3a;
  position: relative;
  animation: rose-pop .35s cubic-bezier(.18,1.2,.4,1);
}
@keyframes rose-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rose-modal-close {
  position: absolute;
  top: 10px; right: 12px;
  background: transparent; border: 0;
  font-size: 1.6rem; line-height: 1;
  color: #647275;
  cursor: pointer;
  padding: 4px 8px;
}
.rose-modal-close:hover { color: #3b3d3a; }
.rose-modal-icon { font-size: 3rem; margin-bottom: 8px; line-height: 1; }
.rose-modal-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  margin: 4px 0 6px;
  color: #b6886e;
}
.rose-modal-subtitle { font-size: 0.95rem; color: #647275; margin: 0 0 14px; }
.rose-modal-body { font-size: 1rem; line-height: 1.6; margin: 12px 0 16px; }
.rose-modal-hint {
  background: #f8f6f4;
  border-left: 4px solid #b6886e;
  padding: 14px 16px;
  border-radius: 8px;
  font-style: italic;
  text-align: left;
  margin: 12px 0;
  color: #3b3d3a;
}
.rose-modal-code {
  background: #3b3d3a;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  letter-spacing: 1px;
  margin: 14px 0;
  user-select: all;
  word-break: break-all;
}
.rose-modal .rose-btn {
  display: inline-block;
  background: #b6886e;
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  margin-top: 8px;
  font-size: 1rem;
}
.rose-modal .rose-btn:hover { background: #9b6f57; }
.rose-modal .rose-btn-ghost {
  background: transparent;
  color: #647275;
  border: 1px solid #d0c8c0;
  margin-left: 6px;
}

/* Hunt landing page styles */
.hunt-page-hero {
  background: linear-gradient(135deg, #b6886e 0%, #d4a584 60%, #f8d4c0 100%);
  color: #fff;
  padding: 110px 20px 70px;
  text-align: center;
  /* Soft fade into the warm off-white page background below — no more harsh edge */
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.hunt-page-hero h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 3.4rem;
  margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.hunt-page-hero .hunt-sub {
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto 18px;
  opacity: 0.96;
}
/* Override the global `section` rule in styles-new.css that applies a dog-photo
   background to every <section>. On the hunt page we want a clean warm-off-white
   surface so the prize cards and sections aren't overlaid on the dog image. */
section.hunt-section,
section.hunt-page-hero ~ section {
  background: transparent !important;
  background-attachment: initial !important;
  background-position: initial !important;
}
body:has(.hunt-page-hero) {
  background: #f8f6f4 !important;
}
.hunt-section { padding: 50px 20px; max-width: 920px; margin: 0 auto; }
.hunt-section h2 {
  color: #3b3d3a;
  font-size: 1.8rem;
  border-bottom: 3px solid #b6886e;
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 22px;
}
.hunt-prizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.hunt-prize-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
  text-align: center;
  border-top: 6px solid #b6886e;
  cursor: pointer;
  transition: transform .2s ease;
}
.hunt-prize-card:hover { transform: translateY(-4px); }
.hunt-prize-card.rose-pink   { border-top-color: #ff7eb3; }
.hunt-prize-card.rose-red    { border-top-color: #d64545; }
.hunt-prize-card.rose-yellow { border-top-color: #e8c547; }
.hunt-prize-card .tier {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #647275;
  font-weight: 600;
}
.hunt-prize-card h3 {
  font-family: 'Dancing Script', cursive;
  font-size: 1.8rem;
  margin: 6px 0 4px;
  color: #3b3d3a;
}
.hunt-prize-card .rose-glyph { font-size: 2.4rem; margin: 8px 0; line-height: 1; }
.hunt-prize-card p { font-size: 0.95rem; color: #3b3d3a; line-height: 1.55; margin: 6px 0 0; }

.hunt-progress-tracker {
  background: #f8f6f4;
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 14px;
}
.hunt-progress-tracker h3 { margin: 0 0 10px; color: #3b3d3a; }
.hunt-found-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hunt-found-chip {
  background: #fff;
  border: 1px solid #d0c8c0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #3b3d3a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hunt-found-chip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hunt-found-chip .dot.white   { background: #fafafa; border: 1px solid #ccc; }
.hunt-found-chip .dot.lavender{ background: #c8a8e0; }
.hunt-found-chip .dot.blue    { background: #6da3d6; }
.hunt-found-chip .dot.green   { background: #6dba85; }
.hunt-found-chip .dot.orange  { background: #f29b4b; }
.hunt-found-chip .dot.peach   { background: #f4b89c; }
.hunt-found-chip .dot.yellow  { background: #e8c547; }
.hunt-found-chip .dot.red     { background: #d64545; }
.hunt-found-chip .dot.pink    { background: #ff7eb3; }

.hunt-claim-form {
  background: #fff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
  margin-top: 20px;
}
.hunt-claim-form label { display: block; font-weight: 600; margin: 14px 0 6px; color: #3b3d3a; font-size: 0.95rem; }
.hunt-claim-form input,
.hunt-claim-form select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e3ddd5;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.hunt-claim-form input:focus,
.hunt-claim-form select:focus { outline: none; border-color: #b6886e; }
.hunt-claim-form button {
  background: #b6886e; color: #fff; border: 0;
  padding: 14px 28px; border-radius: 999px;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  margin-top: 18px; width: 100%;
}
.hunt-claim-form button:hover:not(:disabled) { background: #9b6f57; }
.hunt-claim-form button:disabled { opacity: 0.55; cursor: not-allowed; }
.hunt-claim-result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 0.98rem;
}
.hunt-claim-result.ok { background: #e7f5ec; color: #1f5f33; border: 1px solid #b6dec0; }
.hunt-claim-result.err { background: #fbe7e7; color: #842020; border: 1px solid #f0bcbc; }

.hunt-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

.hunt-faq-item {
  background: #fff;
  padding: 18px 22px;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.hunt-faq-item h4 { margin: 0 0 8px; color: #3b3d3a; }
.hunt-faq-item p { margin: 0; color: #3b3d3a; line-height: 1.6; }

.hunt-status-banner {
  background: #f8f6f4;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  margin: 18px 0;
  font-size: 0.98rem;
  color: #3b3d3a;
}
.hunt-status-banner .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #6dba85; margin-right: 6px; vertical-align: middle;
}
.hunt-status-banner.ended .dot { background: #d64545; }

@media (max-width: 600px) {
  .hunt-page-hero h1 { font-size: 2.4rem; }
  .hunt-page-hero { padding: 90px 16px 50px; }
}