/* Alpine Crossing open house order page — values transcribed from the
   design handoff prototype (Tour Alpine Crossing.dc.html). */

body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, rgba(232, 164, 180, 0.16) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(90deg, rgba(232, 164, 180, 0.16) 0 26px, transparent 26px 52px),
    #FBF3E9;
  font-family: 'Source Sans 3', sans-serif;
}

a { color: #B4552D; }
a:hover { color: #8a3d1e; }
input::placeholder { color: #b9a88f; font-style: italic; }

.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 12px 30px;
  box-sizing: border-box;
}

.paper {
  position: relative;
  width: 100%;
  max-width: 680px;
  background-color: #FDFBF4;
  background-image:
    linear-gradient(90deg, transparent 0 44px, rgba(214, 120, 120, 0.16) 44px 46px, transparent 46px),
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(110, 140, 190, 0.10) 33px 34.5px);
  box-shadow: 0 14px 30px rgba(120, 80, 50, 0.22);
  padding: 38px 26px 44px;
  box-sizing: border-box;
}

.tape {
  position: absolute;
  top: -10px;
  width: 104px;
  height: 28px;
  box-shadow: 0 1px 3px rgba(120, 60, 40, 0.2);
}
.tape-left {
  left: -18px;
  transform: rotate(-43deg);
  background: repeating-linear-gradient(45deg, rgba(240, 150, 170, 0.75) 0 10px, rgba(252, 232, 236, 0.75) 10px 20px);
}
.tape-right {
  right: -18px;
  transform: rotate(41deg);
  background: repeating-linear-gradient(45deg, rgba(150, 190, 220, 0.7) 0 10px, rgba(235, 245, 250, 0.7) 10px 20px);
}

.logo {
  display: block;
  margin: 0 auto;
  width: 290px;
  max-width: 88%;
  height: 134px;
  object-fit: cover;
  object-position: center 47%;
  filter: invert(1) grayscale(1) brightness(1.4) contrast(1.25);
  mix-blend-mode: multiply;
  transform: rotate(-1.2deg);
}

.kicker {
  margin: 0;
  text-align: center;
  font: italic 600 15px 'Source Sans 3', sans-serif;
  color: #C56A50;
  margin-top: 2px;
}

h1 {
  margin: 10px 0 0;
  text-align: center;
  font: 400 44px/1.02 'Times New Roman', Times, serif;
  letter-spacing: -0.02em;
  color: #2B241C;
}

.sub {
  margin: 0;
  text-align: center;
  font: italic 400 17px 'Times New Roman', Times, serif;
  color: #4a3a2a;
  margin-top: 8px;
}

.sticker {
  width: fit-content;
  margin: 18px auto 0;
  transform: rotate(-1.2deg);
  background: #E8804F;
  color: #FFF7EC;
  padding: 13px 24px 14px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(150, 70, 20, 0.28);
  clip-path: polygon(2% 12%, 6% 4%, 13% 9%, 20% 2%, 28% 8%, 36% 3%, 44% 9%, 52% 2%, 60% 8%, 68% 3%, 76% 9%, 84% 3%, 92% 8%, 97% 4%, 99% 14%, 97% 30%, 100% 46%, 97% 62%, 99% 78%, 96% 90%, 90% 96%, 82% 91%, 74% 97%, 66% 92%, 58% 98%, 50% 92%, 42% 97%, 34% 91%, 26% 97%, 18% 92%, 10% 96%, 4% 90%, 1% 78%, 3% 62%, 0% 46%, 3% 30%, 1% 18%);
}
.sticker-line1 {
  font: 600 22px 'Times New Roman', Times, serif;
  letter-spacing: 0.02em;
}
.sticker-line2 {
  font: italic 400 14.5px 'Source Sans 3', sans-serif;
  margin-top: 3px;
}
.sticker-line2 a { color: #FFF7EC; text-decoration: underline; }
.sticker-line2 a:hover { color: #ffe1cc; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 34px 0 6px;
}
.section-head.first { margin: 30px 0 6px; }

.chip {
  padding: 6px 15px 7px;
  font: 600 20px 'Times New Roman', Times, serif;
}
.chip-pink {
  background: #F6D9DF;
  transform: rotate(-1.6deg);
  box-shadow: 0 3px 7px rgba(150, 70, 90, 0.18);
  color: #5a3040;
}
.chip-blue {
  background: #DCE8EF;
  transform: rotate(1.2deg);
  box-shadow: 0 3px 7px rgba(60, 100, 130, 0.18);
  color: #22394a;
}
.chip-tan {
  background: #F6C48F;
  transform: rotate(-1deg);
  box-shadow: 0 3px 7px rgba(150, 90, 30, 0.2);
  color: #3d2a16;
}

.side-note {
  font: italic 400 13px 'Source Sans 3', sans-serif;
  color: #9a8468;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.tile {
  position: relative;
  background: #fff;
  border: 2px solid #EFE3CF;
  border-radius: 16px;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(120, 70, 40, 0.10);
  font-family: inherit;
}
.tile-cookie:hover { border-color: #E8B48F; }
.tile-coffee:hover { border-color: #9FBACC; }

.tile-photo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(120, 70, 40, 0.18);
}
.tile-name {
  font: 600 15px/1.2 'Times New Roman', Times, serif;
  color: #2B241C;
}
.tile-coffee .tile-name {
  font: 600 16px/1.2 'Times New Roman', Times, serif;
  margin-top: 4px;
}
.tile-tag {
  font: italic 400 12px 'Source Sans 3', sans-serif;
  color: #9a8468;
}

.tile .ring {
  display: none;
  position: absolute;
  inset: -2px;
  border: 3px solid #E8804F;
  border-radius: 16px;
  pointer-events: none;
}
.tile .badge {
  display: none;
  position: absolute;
  top: -10px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E8804F;
  color: #FFF7EC;
  align-items: center;
  justify-content: center;
  font: 400 15px 'Times New Roman', Times, serif;
  box-shadow: 0 3px 6px rgba(150, 70, 20, 0.3);
}
.tile.sel .ring { display: block; }
.tile.sel .badge { display: flex; }
.tile-coffee .ring { border-color: #33566B; }
.tile-coffee .badge {
  background: #33566B;
  color: #F2F7FA;
  box-shadow: 0 3px 6px rgba(30, 60, 80, 0.3);
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.fields input {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  border: 2px dashed #D8C4A8;
  border-radius: 12px;
  padding: 13px 14px;
  font: 400 16px 'Source Sans 3', sans-serif;
  color: #2B241C;
  outline: none;
}
.fields input:focus { border: 2px solid #E8804F; }
.fields .full { grid-column: 1 / -1; }

/* honeypot — visually removed, still in the form for bots */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.err {
  margin: 12px 0 0;
  font: italic 600 14px 'Source Sans 3', sans-serif;
  color: #B0432F;
  text-align: center;
}

.submit {
  display: block;
  width: 100%;
  border: none;
  margin-top: 18px;
  background: #E8804F;
  color: #FFF7EC;
  text-align: center;
  padding: 17px 20px 18px;
  cursor: pointer;
  font: 600 25px 'Times New Roman', Times, serif;
  box-shadow: 0 7px 14px rgba(150, 70, 20, 0.28);
  clip-path: polygon(1% 18%, 4% 6%, 10% 12%, 16% 4%, 23% 11%, 30% 5%, 37% 12%, 44% 4%, 51% 11%, 58% 5%, 65% 12%, 72% 4%, 79% 11%, 86% 5%, 93% 12%, 97% 6%, 99% 20%, 98% 40%, 100% 60%, 98% 80%, 96% 92%, 90% 87%, 83% 95%, 76% 88%, 69% 96%, 62% 89%, 55% 96%, 48% 89%, 41% 96%, 34% 88%, 27% 95%, 20% 89%, 13% 96%, 7% 90%, 2% 94%, 0% 74%, 2% 52%, 0% 34%);
}
.submit:hover { background: #d9703f; }
.submit:disabled { cursor: progress; }

.fine-print {
  margin: 14px 0 0;
  text-align: center;
  font: italic 400 12.5px 'Source Sans 3', sans-serif;
  color: #9a8468;
}

/* confirmation view */
#view-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
#view-done[hidden] { display: none; }

.roundel {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E8804F;
  color: #FFF7EC;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 30px 'Times New Roman', Times, serif;
  box-shadow: 0 6px 12px rgba(150, 70, 20, 0.3);
  transform: rotate(-6deg);
}

.done-title {
  margin: 0;
  text-align: center;
  font: 400 42px/1 'Times New Roman', Times, serif;
  color: #2B241C;
}

.done-sub {
  margin: 0;
  text-align: center;
  font: italic 400 16px 'Times New Roman', Times, serif;
  color: #4a3a2a;
  margin-top: -6px;
}

.picks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.pick-chip {
  padding: 8px 16px;
  font: 600 16px 'Times New Roman', Times, serif;
}
.pick-cookie {
  background: #F6D9DF;
  transform: rotate(-1.4deg);
  box-shadow: 0 3px 7px rgba(150, 70, 90, 0.18);
  color: #5a3040;
}
.pick-coffee {
  background: #DCE8EF;
  transform: rotate(1.2deg);
  box-shadow: 0 3px 7px rgba(60, 100, 130, 0.18);
  color: #22394a;
}

.mail-card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #EFE3CF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(120, 70, 40, 0.12);
  margin-top: 8px;
  text-align: left;
}
.mail-head {
  background: #F7EFE2;
  padding: 10px 16px;
  border-bottom: 1px solid #EFE3CF;
}
.mail-meta {
  font: italic 400 12.5px 'Source Sans 3', sans-serif;
  color: #9a8468;
}
.mail-subject {
  font: 600 15px 'Source Sans 3', sans-serif;
  color: #2B241C;
  margin-top: 2px;
}
.mail-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mail-body p { margin: 0; }
.mail-greeting {
  font: 400 14.5px/1.55 'Source Sans 3', sans-serif;
  color: #4a3a2a;
}
.mail-event {
  font: 400 21px 'Times New Roman', Times, serif;
  color: #2B241C;
}
.mail-address {
  font: 400 15px 'Source Sans 3', sans-serif;
  color: #4a3a2a;
}
.mail-tap { font-style: italic; color: #9a8468; }
.mail-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pill {
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  font: 600 14.5px 'Source Sans 3', sans-serif;
}
.pill-orange {
  background: #E8804F;
  color: #FFF7EC;
  padding: 11px 18px;
}
.pill-orange:hover { background: #d9703f; color: #FFF7EC; }
.pill-outline {
  background: #fff;
  color: #33566B;
  border: 2px solid #33566B;
  padding: 9px 18px;
}
.pill-outline:hover { background: #f0f5f8; color: #33566B; }
.mail-questions {
  font: italic 400 12.5px 'Source Sans 3', sans-serif;
  color: #9a8468;
}

.done-note {
  margin: 0;
  font: italic 400 13px 'Source Sans 3', sans-serif;
  color: #9a8468;
  text-align: center;
}

.change-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  color: #B4552D;
  font: italic 600 14px 'Source Sans 3', sans-serif;
}

.footer {
  margin-top: 16px;
  font: italic 400 12.5px 'Source Sans 3', sans-serif;
  color: #a08b70;
  text-align: center;
}