/* Built by SR Visual LLC
   The reservation form inside the dark band on the home page, and the lot status colors
   on the site plan. Loaded after the page's own styles. */

/* Site plan and table states, driven by /api/lots */
.lot.r  { fill: #B8923E; }
.lot.c  { fill: #4A3F35; }
.lot.s  { fill: #1A1A18; }
.lot.u  { fill: #E6E2DA; }
.ln.r, .ln.c, .ln.s { fill: #FCFBF8; }
.legend i.c { background: #4A3F35; border-color: #4A3F35; }
.legend i.s { background: #1A1A18; border-color: #1A1A18; }
td.st-reserved { color: var(--straw-ink); }
td.st-under_contract, td.st-sold { color: var(--ink-2); font-weight: 600; }

/* Head and the four steps */
.rsv-head { max-width: 720px; }
.rsv-how { list-style: none; padding: 0; margin: 40px 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(252,251,248,0.18); }
.rsv-how li { padding: 20px 20px 0 0; }
.rsv-how li + li { padding-left: 20px; border-left: 1px solid rgba(252,251,248,0.18); }
.rsv-how b { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--straw-light); font-weight: 600; margin-bottom: 8px; }
.rsv-how span { font-size: 14px; line-height: 1.55; color: rgba(252,251,248,0.78); }

/* The form */
#rsv { display: block; max-width: 880px; margin-top: 56px; }
#rsv[hidden], .rsv-done[hidden] { display: none !important; }
.rsv-step { border: 0; margin: 0; padding: 32px 0; border-top: 1px solid rgba(252,251,248,0.18); min-width: 0; }
.rsv-step legend { padding: 0; font-size: 18px; font-weight: 600; color: var(--paper); margin-bottom: 6px; }
.rsv-step legend span { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--straw); color: var(--straw-light); font-size: 12px; line-height: 24px; text-align: center; margin-right: 12px; vertical-align: 2px; }
.rsv-hint { font-size: 14px; color: rgba(252,251,248,0.66) !important; margin: 4px 0 18px; }
.rsv-hint a { color: var(--straw-light); }

.rsv-lots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rsv-lot { font: inherit; text-align: left; cursor: pointer; background: transparent; color: var(--paper); border: 1px solid rgba(252,251,248,0.28); padding: 14px 14px 12px; min-height: 76px; transition: border-color .15s, background .15s; }
.rsv-lot:hover:not([disabled]) { border-color: var(--straw-light); }
.rsv-lot:focus-visible { outline: 2px solid var(--straw-light); outline-offset: 2px; }
.rsv-lot .n { display: block; font-size: 17px; font-weight: 600; }
.rsv-lot .s { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; color: rgba(252,251,248,0.6); }
.rsv-lot.is-reserved .s, .rsv-lot.is-under_contract .s { color: var(--straw-light); }
.rsv-lot[disabled] { cursor: not-allowed; opacity: 0.4; }
.rsv-lot.sel-r { background: var(--straw); border-color: var(--straw); color: var(--ink); }
.rsv-lot.sel-r .s { color: var(--ink); }
.rsv-lot.sel-w { border-color: var(--straw-light); box-shadow: inset 0 0 0 1px var(--straw-light); }
.rsv-lot.sel-w .s { color: var(--straw-light); }
.rsv-pick { min-height: 1.6em; font-size: 14.5px; color: var(--paper) !important; margin: 16px 0 0; }

.rsv-check { display: flex !important; gap: 12px; align-items: flex-start; font-size: 14.5px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; color: rgba(252,251,248,0.86) !important; margin: 18px 0 0 !important; cursor: pointer; }
.rsv-check input { width: 18px !important; height: 18px; flex: 0 0 18px; margin: 2px 0 0; padding: 0 !important; border: 1px solid rgba(252,251,248,0.5) !important; background: transparent; -webkit-appearance: checkbox !important; appearance: auto !important; accent-color: #B8923E; }

.rsv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 24px; }
.rsv-terms { max-height: 300px; overflow-y: auto; padding: 20px 22px; background: rgba(252,251,248,0.04); border: 1px solid rgba(252,251,248,0.18); font-size: 14px; line-height: 1.65; color: rgba(252,251,248,0.86); }
.rsv-terms:focus-visible { outline: 2px solid var(--straw-light); outline-offset: 2px; }
.rsv-terms h1 { font-size: 18px; font-weight: 600; color: var(--paper); margin: 0 0 4px; letter-spacing: 0; line-height: 1.3; }
.rsv-terms h1 b { font-weight: 600; }
.rsv-terms .ver { font-size: 12px; color: rgba(252,251,248,0.5); margin: 0 0 12px; }
.rsv-terms h2 { font-size: 14px; font-weight: 600; color: var(--paper); margin: 18px 0 4px; max-width: none; letter-spacing: 0; }
.rsv-terms p { color: rgba(252,251,248,0.82) !important; max-width: none; margin: 0 0 10px; }
.rsv-sig { max-width: 420px; margin-top: 22px; }

#rsv .btn { margin-top: 28px; color: var(--ink); background: var(--paper); border-color: var(--paper); cursor: pointer; font: inherit; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 16px 30px; }
#rsv .btn[disabled] { opacity: 0.6; cursor: wait; }
.rsv-msg { min-height: 1.4em; margin: 14px 0 0; font-size: 14.5px; color: #F2C9B5 !important; }
.rsv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Done */
.rsv-done { max-width: 720px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(252,251,248,0.18); }
.rsv-done:focus { outline: none; }
.rsv-done h3 { font-size: 26px; font-weight: 300; color: var(--paper); margin: 0 0 18px; letter-spacing: -0.01em; }
.rsv-done h3 b { font-weight: 600; }
.rsv-done ul { list-style: none; padding: 0; margin: 0 0 18px; }
.rsv-done li { padding: 12px 0; border-bottom: 1px solid rgba(252,251,248,0.14); color: var(--paper); font-size: 15px; }
.rsv-done li small { display: block; color: rgba(252,251,248,0.6); font-size: 13px; margin-top: 2px; }
.rsv-link { display: flex; gap: 10px; align-items: stretch; margin: 10px 0 6px; flex-wrap: wrap; }
.rsv-link input { flex: 1 1 280px; font-size: 13px !important; color: var(--straw-light) !important; }
.rsv-link button { font: inherit; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 10px 16px; background: transparent; color: var(--paper); border: 1px solid rgba(252,251,248,0.4); cursor: pointer; }
.rsv-closed { margin-top: 40px; font-size: 16px; color: var(--paper); }

@media (max-width: 880px) {
  .rsv-how { grid-template-columns: 1fr 1fr; }
  .rsv-how li:nth-child(3) { padding-left: 0; border-left: 0; }
  .rsv-lots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rsv-how { grid-template-columns: 1fr; }
  .rsv-how li + li { padding-left: 0; border-left: 0; }
  .rsv-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}