/* =========================================================
   IKIMOCHI — Promo Buy 1 Get 1 (halaman publik)
   Brand: Pink #FE2785 / Blue #015CE0 / Yellow #FBC45C / White
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

:root {
  --ik-pink: #FE2785;
  --ik-pink-dark: #D81368;
  --ik-pink-soft: #FFE3F0;
  --ik-blue: #015CE0;
  --ik-yellow: #FBC45C;
  --ik-ink: #2B1E28;
  --ik-ink-soft: #6B5F68;
  --ik-line: #F0DDE8;
  --ik-font-head: "Baloo 2", "Poppins", sans-serif;
}

body.promo-page {
  background: var(--ik-pink);
  margin: 0;
}

.promo-page .container {
  padding: 0 !important;
  max-width: none !important;
}

.promo-hero {
  position: relative;
  background: var(--ik-pink);
  padding: 20px 20px 40px;
  text-align: center;
  overflow: hidden;
}
.promo-hero__pattern {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("/img/pattern-mask.svg");
  mask-image: url("/img/pattern-mask.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  background-color: rgba(255,255,255,0.16);
  pointer-events: none;
}
.promo-hero__cloud {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 340px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.45), rgba(255,255,255,0));
  border-radius: 50%;
  pointer-events: none;
}
.promo-hero__logo {
  position: relative;
  width: 120px;
  margin: 0 auto 4px;
  display: block;
}
.promo-hero__tag {
  position: relative;
  color: #fff;
  font-family: var(--ik-font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.95;
}

.promo-body {
  max-width: 480px;
  margin: -36px auto 40px;
  padding: 0 16px;
  position: relative;
}

.promo-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(216, 19, 104, 0.18);
  padding: 28px 22px 26px;
}

.promo-card h1 {
  font-family: var(--ik-font-head);
  font-weight: 800;
  font-size: 2.1rem;
  margin: 0 0 4px;
  text-align: center;
  line-height: 1;
}
.promo-card h1 .promo-sticker--pink,
.promo-card h1 .promo-sticker--blue {
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill;
}
.promo-card h1 .promo-sticker--pink { color: var(--ik-pink); }
.promo-card h1 .promo-sticker--blue { color: var(--ik-blue); }

.promo-card__subtitle {
  text-align: center;
  font-weight: 700;
  color: var(--ik-ink);
  font-size: 0.95rem;
  margin: 6px 0 14px;
}
.promo-card__subtitle strong { color: var(--ik-pink-dark); }

.promo-card__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  background: var(--ik-yellow);
  color: var(--ik-ink);
  font-family: var(--ik-font-head);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 999px;
}

.promo-card > p.helper-text {
  text-align: center;
  color: var(--ik-ink-soft);
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.promo-page label {
  font-weight: 600;
  color: var(--ik-ink);
  font-size: 0.9rem;
  display: block;
  margin: 18px 0 6px;
}

.promo-page input[type="text"],
.promo-page input[type="number"],
.promo-page input[type="tel"],
.promo-page select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--ik-line);
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--ik-ink);
}
.promo-page input:focus,
.promo-page select:focus {
  outline: none;
  border-color: var(--ik-blue);
}

.promo-page input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 12px;
  border: 2px dashed var(--ik-line);
  background: #FFFAFC;
  font-size: 0.85rem;
}

.promo-page .field__input--error {
  border-color: var(--ik-pink-dark) !important;
  background: var(--ik-pink-soft) !important;
}
.promo-page input[type="file"].field__input--error {
  border-style: dashed;
}

.promo-page .helper-text {
  color: var(--ik-ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

.promo-page .btn.btn-block.btn-lg {
  width: 100%;
  margin-top: 24px;
  background: var(--ik-pink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 15px;
  font-family: var(--ik-font-head);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(254, 39, 133, 0.35);
}
.promo-page .btn.btn-block.btn-lg:hover { background: var(--ik-pink-dark); }

.promo-page .flash-error {
  background: var(--ik-pink-soft);
  color: var(--ik-pink-dark);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

/* Success page */
.promo-card--success { text-align: center; }
.promo-voucher-code {
  font-family: var(--ik-font-head);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ik-pink);
  margin: 20px 0;
  padding: 18px;
  border: 3px dashed var(--ik-yellow);
  border-radius: 16px;
  background: #FFFBEF;
}
.promo-card--success .promo-emoji { font-size: 2.5rem; margin-bottom: 8px; }