/* Custom Scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #ccc #f1f1f2;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f2;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FE2C55;
}

*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#FE2C55;--ink:#161823;--muted:#8A8A8A}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#fff;color:var(--ink);line-height:1.4}
a{color:inherit;text-decoration:none}
.top{position:sticky;top:0;background:#fff;z-index:50;padding:16px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #f0f0f0}
.top .logo{font-size:22px;font-weight:900;letter-spacing:-0.5px;color:var(--ink)}
.top .logo span{color:var(--red)}
.search{flex:1;max-width:780px;background:#F1F1F2;border-radius:999px;height:44px;display:flex;align-items:center;overflow:hidden}
.search span{padding-left:16px;display:inline-flex}
.search span svg{width:19px;height:19px}
.search input{flex:1;border:none;background:transparent;height:44px;padding:0 10px;font-size:15px;outline:none}
.search b{border-left:1px solid #ddd;padding:4px 20px 4px 16px;font-size:15px;cursor:pointer}
.pinkpill{display:inline-flex;align-items:center;gap:9px;background:#FEF0F2;color:var(--red);font-weight:600;font-size:16px;padding:10px 18px;border-radius:999px;white-space:nowrap}
.pinkpill svg{width:22px;height:22px}
.wrap{max-width:640px;margin:0 auto;padding:26px 20px 70px}
.hero{background:linear-gradient(135deg,#FE2C55,#ff6a3d);color:#fff;border-radius:20px;padding:26px 24px;margin-bottom:22px}
.hero h1{font-size:28px;font-weight:800;margin-bottom:6px}
.hero p{font-size:15px;opacity:.95}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.perk{background:#F6F5F2;border-radius:14px;padding:16px 16px}
.perk .big{font-size:24px;font-weight:800;color:var(--red);line-height:1}
.perk .lbl{font-size:13.5px;color:#444;margin-top:7px;font-weight:600;line-height:1.35}
.perk.full{grid-column:1/3}
h3{font-size:16px;font-weight:800;margin:22px 0 12px}
.form label{display:block;font-size:13px;font-weight:700;color:#444;margin:0 0 5px 2px}
.form .opt{color:var(--muted);font-weight:500}
.form input,.form select,.form textarea{width:100%;border:1px solid #ddd;border-radius:10px;padding:12px 14px;font-size:16px;margin-bottom:12px;outline:none;font-family:inherit}
.form textarea{min-height:80px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--red)}
.frow{display:flex;gap:10px}.frow>div{flex:1;min-width:0}
.form select{background:#fff;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A8A8A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.cardwrap{position:relative}
.cardwrap input{padding-right:78px}
.cardbrand{position:absolute;right:14px;top:19px;font-weight:800;font-size:13px;letter-spacing:.5px;display:none}
.paynote{background:#F6F5F2;border-radius:10px;padding:12px 14px;font-size:12.5px;color:#555;margin:2px 0 14px;line-height:1.45}
.subbtn{width:100%;background:var(--red);color:#fff;border:none;border-radius:999px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;margin-top:6px}
.subbtn:active{transform:scale(.99)}
#done{display:none;margin-top:14px;background:#EAF8F0;color:#0a8f4c;font-weight:700;border-radius:12px;padding:16px;font-size:15px;text-align:center}
.back{display:inline-block;margin-bottom:16px;color:var(--muted);font-weight:700;font-size:14px}
@media(max-width:560px){.hero h1{font-size:24px}}

/* Custom Error Banner & Modal */
.error-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFF0F2;
  color: #FE2C55;
  border-bottom: 2px solid #FFD3D9;
  padding: 14px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(254, 44, 85, 0.15);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.error-banner.show {
  transform: translateY(0);
}
.error-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 24, 35, 0.45);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.error-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.error-modal {
  background: #ffffff;
  border-radius: 24px;
  width: 90%;
  max-width: 420px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.error-modal-overlay.show .error-modal {
  transform: scale(1);
}
.error-modal-icon {
  width: 60px;
  height: 60px;
  background: #FFF0F2;
  color: #FE2C55;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: shake 0.5s ease;
}
.error-modal-icon svg {
  width: 32px;
  height: 32px;
}
.error-modal h2 {
  font-size: 22px;
  font-weight: 800;
  color: #161823;
  margin-bottom: 12px;
}
.error-modal p {
  font-size: 15px;
  color: #55555d;
  line-height: 1.6;
  margin-bottom: 24px;
}
.error-modal-btn {
  width: 100%;
  background: #FE2C55;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.error-modal-btn:hover {
  background: #e02447;
}
.error-modal-btn:active {
  transform: scale(0.98);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── Phone layout (2026-08-03) ─────────────────────────────────────────────
   This sheet shipped with a single mobile rule (hero font-size), so on a phone
   the header overflowed and the perks grid stayed locked at two columns —
   "$25 bonus — when a referral spends $100…" wrapped to five cramped lines.
   Perks go single-column and the header sheds the Free Shipping pill. */
@media(max-width:560px) {
  .top {
    padding: 10px 12px;
    gap: 10px
  }
  .top .logo {
    font-size: 18px;
    flex: none;
    white-space: nowrap
  }
  .pinkpill {
    display: none
  }
  .search {
    height: 38px
  }
  .search span {
    padding-left: 12px
  }
  /* 15px triggers iOS's focus-zoom; 16px is the threshold that suppresses it. */
  .search input {
    height: 38px;
    font-size: 16px;
    padding: 0 8px
  }
  .search b {
    padding: 4px 12px 4px 10px;
    font-size: 14px
  }
  .wrap {
    padding: 18px 14px 56px
  }
  .hero {
    padding: 20px 18px;
    border-radius: 16px;
    margin-bottom: 18px
  }
  .hero h1 {
    font-size: 23px
  }
  .hero p {
    font-size: 14px
  }
  .perks {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px
  }
  .perk {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px
  }
  .perk .big {
    flex: none;
    min-width: 54px
  }
  .perk .lbl {
    margin-top: 0
  }
  .perk.full {
    grid-column: auto
  }
  h3 {
    font-size: 15px;
    margin: 18px 0 10px
  }
  .subbtn {
    padding: 15px;
    font-size: 16px
  }
}

@media(max-width:390px) {
  .search b {
    display: none
  }
  .top .logo {
    font-size: 16px
  }
}