/* Quarantined in the `legacy` cascade layer: aura.css (tokens, type,
   components) wins over everything here regardless of selector weight.
   New work goes in aura.css, not this file. */
@layer legacy {
/* =============================================================================
   FILE: public/css/receptivity-offers.css
   All receptivity-gated offer components (OfferGate.js).
   Mobile-first. Non-intrusive. Matches Aura warm-cream palette.
   ============================================================================= */

/* ── Shared: slide-up strip (bundle offer) ── */
.ae-offer-strip {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #2C2416;
  color: #FAF7F2;
  z-index: 900;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ae-offer-strip.ae-offer-visible { transform: translateY(0); }

.ae-offer-strip-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.ae-offer-icon  { font-size: 18px; color: #C8956C; flex-shrink: 0; }
.ae-offer-text  { flex: 1; font-size: 13px; line-height: 1.4; min-width: 180px; }
.ae-offer-text strong { color: #fff; }
.ae-offer-cta {
  background: #C8956C;
  color: #fff;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.ae-offer-dismiss {
  background: none;
  border: none;
  color: #9e8f7f;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
}
.ae-offer-dismiss:hover { color: #FAF7F2; }

@media (min-width: 640px) {
  .ae-offer-strip-inner { flex-wrap: nowrap; padding: 12px 24px; }
}

/* ── TES gate nudge — bottom-right card ── */
.ae-tes-nudge {
  position: fixed;
  bottom: 24px; right: 16px;
  width: min(300px, calc(100vw - 32px));
  background: #FAF7F2;
  border: 1.5px solid #DDD5C8;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(44, 36, 22, 0.16);
  z-index: 850;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ae-tes-nudge.ae-tes-visible { opacity: 1; transform: translateY(0) scale(1); }
.ae-tes-nudge-inner { padding: 16px; }

.ae-tes-progress-bar {
  height: 4px;
  background: #EDE8E1;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ae-tes-progress-fill {
  height: 100%;
  background: #C8956C;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.ae-tes-hint {
  font-size: 13px;
  color: #4A3C2C;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ae-tes-dismiss {
  font-size: 12px;
  color: #8B7355;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  min-height: 44px;
}
.ae-tes-dismiss:hover { color: #2C2416; }

/* ── Professional invite — top-right card ── */
.ae-pro-invite {
  position: fixed;
  top: 80px; right: 16px;
  width: min(320px, calc(100vw - 32px));
  background: linear-gradient(135deg, #F5F0E8 0%, #EDE5D8 100%);
  border: 1.5px solid #C8956C;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(200, 149, 108, 0.18);
  z-index: 850;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ae-pro-invite.ae-pro-visible { opacity: 1; transform: translateX(0); }
.ae-pro-invite-inner { padding: 18px; }

.ae-pro-invite-badge {
  display: inline-block;
  background: #C8956C;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.ae-pro-invite-inner p {
  font-size: 13px;
  color: #3D2F1E;
  line-height: 1.5;
  margin: 0 0 14px;
}
.ae-pro-invite-inner p strong { color: #2C2416; }
.ae-pro-invite-actions { display: flex; gap: 10px; align-items: center; }
.ae-pro-invite-cta {
  background: #2C2416;
  color: #FAF7F2;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.ae-pro-invite-cta:hover { background: #C8956C; }
.ae-pro-invite-later {
  background: none;
  border: none;
  font-size: 12px;
  color: #8B7355;
  cursor: pointer;
  min-height: 44px;
}
.ae-pro-invite-later:hover { color: #2C2416; }

/* ── Reorder strip — same slide-up pattern ── */
.ae-reorder-strip {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1C2B1A;
  color: #EEF5ED;
  z-index: 910;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ae-reorder-strip.ae-reorder-visible { transform: translateY(0); }

.ae-reorder-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.ae-reorder-icon { font-size: 20px; color: #7CBF6E; flex-shrink: 0; }
.ae-reorder-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.ae-reorder-item { line-height: 1.4; }
.ae-reorder-item strong { color: #fff; }
.ae-reorder-link {
  color: #7CBF6E;
  text-decoration: none;
  font-weight: 600;
  margin-left: 8px;
}
.ae-reorder-more {
  color: #7CBF6E;
  font-size: 12px;
  text-decoration: none;
  margin-top: 2px;
}
.ae-reorder-dismiss {
  background: none; border: none;
  color: #8aaa86; font-size: 20px;
  cursor: pointer; padding: 4px 8px;
  min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ae-reorder-dismiss:hover { color: #EEF5ED; }
}