/* =====================================================================
   Book Buddy fundraiser opt-in (only used by /ruby/book-buddy/)
   Same design as the "embed code" block that was on the Google Site.
   Everything is inside .bb so it can't affect other pages.
   ===================================================================== */

.bb {
  /* colors used below */
  --navy: #1f3f7a; --blue: #2f6fd0;
  --green: #3f9a2c; --green-d: #2a6e1d;
  --gold-d: #c9a23a; --cream: #fff9ec;
  --ink: #1d2a3a; --muted: #4b5a6b; --orange: #e8662a;

  font-family: "Nunito", "Fredoka", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  background: linear-gradient(180deg, #e8c45a 0, #f3e3a3 300px, #f6ecc4 100%);
  overflow: hidden;
}

/* ---------- scenic picture at the top (pure CSS + one SVG drawing) ---------- */
.bb .scene {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: linear-gradient(180deg, #7cc5ee 0%, #c9ecfa 75%);
}

/* clouds */
.bb .cloud { position: absolute; background: #fff; border-radius: 50px; opacity: 0.9; }
.bb .cloud::before,
.bb .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.bb .c1 { width: 120px; height: 34px; top: 40px; left: 8%; }
.bb .c1::before { width: 56px; height: 56px; top: -26px; left: 18px; }
.bb .c1::after  { width: 42px; height: 42px; top: -18px; left: 62px; }
.bb .c2 { width: 90px; height: 28px; top: 78px; right: 10%; }
.bb .c2::before { width: 44px; height: 44px; top: -22px; left: 14px; }
.bb .c2::after  { width: 34px; height: 34px; top: -14px; left: 46px; }

/* snowy mountains (triangles) */
.bb .mtn {
  position: absolute;
  bottom: 70px;
  background: linear-gradient(180deg, #f4f8fc 0 22%, #8ea6c4 22% 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bb .m1 { width: 380px; height: 150px; left: 50%; transform: translateX(-62%); }
.bb .m2 { width: 280px; height: 110px; left: 50%; transform: translateX(10%);
          background: linear-gradient(180deg, #eef4fa 0 20%, #7d97b8 20% 100%); }
.bb .m3 { width: 240px; height: 95px; left: -40px;
          background: linear-gradient(180deg, #eef4fa 0 18%, #8aa2c0 18% 100%); }

/* grass field */
.bb .field {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(180deg, #9cc94a 0, #d8c45a 55%, #e8c45a 100%);
}

/* pine trees */
.bb .trees { position: absolute; bottom: 60px; left: 0; right: 0; height: 120px; pointer-events: none; }
.bb .tree {
  position: absolute; bottom: 0; width: 46px; height: 110px;
  background: linear-gradient(#2f6b3a, #1f4f2b);
  clip-path: polygon(50% 0, 72% 28%, 62% 28%, 84% 56%, 70% 56%, 100% 90%, 56% 90%, 56% 100%,
                     44% 100%, 44% 90%, 0 90%, 30% 56%, 16% 56%, 38% 28%, 28% 28%);
}
.bb .tree.s { width: 34px; height: 80px; }

/* "Book Buddies School Fundraiser" label */
.bb .brand { position: absolute; top: 16px; left: 0; right: 0; text-align: center; z-index: 2; }
.bb .brand .ss {
  display: inline-block;
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: 0.3px;
  color: #fff; background: var(--navy);
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* the glyptodon drawing */
.bb .mascot {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 180px; z-index: 3;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.18));
}

/* ---------- content card ---------- */
.bb .bb-main { max-width: 560px; margin: -18px auto 0; padding: 0 16px 40px; position: relative; z-index: 4; }
.bb .card {
  background: var(--cream);
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: 0 10px 30px rgba(31, 63, 122, 0.18);
  border: 3px solid #fff;
}

.bb h1 {
  font-family: "Fredoka", "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--green-d);
  text-align: center;
}
.bb h1 span { color: var(--blue); }
.bb .sub { text-align: center; margin: 0 0 18px; color: var(--muted); font-weight: 600; }

/* the three colored "pills" */
.bb .badge { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.bb .pill { font-size: 13px; font-weight: 800; color: #fff; background: var(--green); padding: 4px 10px; border-radius: 999px; }
.bb .pill.b { background: var(--blue); }
.bb .pill.g { background: var(--gold-d); }

.bb p { margin: 0 0 12px; }

/* orange "heads-up" box */
.bb .note {
  background: #fff3e6;
  border: 2px solid var(--orange);
  border-left-width: 8px;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0;
}
.bb .note h2 { font-size: 17px; margin: 0 0 6px; color: #a6400f; font-family: "Fredoka", "Nunito", system-ui, sans-serif; }
.bb .note p { margin: 0 0 8px; font-size: 15.5px; }
.bb .note p:last-child { margin: 0; }

/* ---------- the sign-up form ---------- */
.bb form { margin-top: 6px; }
.bb label.f { display: block; font-weight: 800; margin: 14px 0 6px; font-size: 15px; }
.bb label.f small { font-weight: 600; color: var(--muted); }
.bb input[type=text],
.bb input[type=email] {
  width: 100%;
  font: inherit; font-size: 17px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 2px solid #b9cbe0;
  background: #fff;
  color: var(--ink);
}
.bb input[type=text]:focus,
.bb input[type=email]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 111, 208, 0.18); }

.bb .consent {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 6px;
  background: #eef6e4; border: 2px solid #b8dc94; border-radius: 12px;
  padding: 12px 14px; font-size: 15px; cursor: pointer;
}
.bb .consent input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--green); }

.bb button {
  display: block; width: 100%; margin-top: 18px;
  font: inherit; font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 700; font-size: 20px; color: #fff;
  border: 0; border-radius: 14px; padding: 15px; cursor: pointer;
  background: linear-gradient(180deg, #4fb336, #2f8a22);
  box-shadow: 0 5px 0 #20661a;
}
.bb button:active { transform: translateY(3px); box-shadow: 0 2px 0 #20661a; }

.bb .fine { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }

/* "Rather skip the emails?" */
.bb .alt { margin-top: 22px; }
.bb .alt h2 { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-size: 19px; margin: 0 0 6px; color: var(--navy); }
.bb .alt p { font-size: 15px; color: var(--muted); }

.bb .bb-footer { text-align: center; font-size: 13px; color: #5b5a3a; margin-top: 22px; }

/* ---------- thank-you message (shown after a successful sign-up) ---------- */
.bb #thanks { display: none; }
.bb.sent #thanks { display: block; }
.bb.sent .formwrap,
.bb.sent .alt { display: none; }
.bb .thanks { text-align: center; background: #eef6e4; border: 2px solid #9fd13a; border-radius: 16px; padding: 18px; margin-bottom: 6px; }
.bb .thanks .big { font-size: 42px; line-height: 1; }
.bb .thanks h2 { font-family: "Fredoka", "Nunito", system-ui, sans-serif; color: var(--green-d); margin: 6px 0; }

@media (max-width: 420px) {
  .bb .scene { height: 230px; }
  .bb .mascot { width: 160px; }
  .bb .m1 { width: 340px; height: 160px; }
  .bb .card { padding: 20px 16px; }
}