/* 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: 400; 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(4, minmax(0, 1fr)); gap: 8px; }
  .rsv-lot { min-height: 0; padding: 11px 8px 9px; text-align: center; }
  .rsv-lot .n { font-size: 15px; }
  .rsv-lot .s { font-size: 8.5px; letter-spacing: 0.08em; margin-top: 4px; }
  .rsv-lot { transition: border-color .15s, background .15s, transform .15s; }
  .rsv-lot:active:not([disabled]) { transform: scale(0.97); }
}
/* Numbered steps and the summary note under them */
.rsv-how { counter-reset: step; }
.rsv-how b::before { counter-increment: step; content: counter(step) ". "; }
.rsv-summary { margin: 18px 0 36px; }
.band .num { text-transform: uppercase; color: rgba(252,251,248,0.6); margin-top: 18px; }