/* Booking picker (booking-picker.js): the day and time buttons, the book button and the messages.
   Step 7 of the application on the home page and the /book page both load this file.
   Greens, borders and radius match the application's answer buttons. The book button is the .btn-app button from brand.css. */

.bp{color:#234b1a}
.bp,.bp *,.bp *::before,.bp *::after{box-sizing:border-box}
.bp [hidden]{display:none!important}

/* Day and time groups. Each choice is a hidden radio input followed by the visible face. */
.bp-group{border:0;margin:0;padding:0;min-width:0}
.bp-group+.bp-group{margin-top:20px}
.bp-legend{display:block;padding:0;margin:0 0 8px;font:600 12px/1.2 var(--site-font,Arial,sans-serif);letter-spacing:1.2px;text-transform:uppercase;color:#555}
.bp-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.bp-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}
.bp-opt{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bp-opt input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bp-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:7px 9px;border:1px solid #6c9b58;border-radius:3px;background:#f3f8ed;color:#234b1a;font-size:14px;line-height:1.3;text-align:center;transition:background .12s ease,border-color .12s ease}
.bp-day .bp-face{min-height:56px}
@media (hover:hover){.bp-opt:hover .bp-face{background:#e5f7d8;border-color:#2e6e22}}
.bp-opt input:checked+.bp-face{background:var(--green,#c5f49d);border-color:#2e6e22;box-shadow:inset 0 0 0 1px #2e6e22;font-weight:600}
.bp-opt input:focus+.bp-face{outline:2px solid #2e6e22;outline-offset:2px}
.bp-opt input:focus:not(:focus-visible)+.bp-face{outline:none}

/* Time zone line, the chosen time and the messages. */
.bp-zone{margin:14px 0 0;font-size:13px;line-height:1.5;color:#555}
.bp-picked{margin:8px 0 0;min-height:1.5em;font-size:15px;line-height:1.5;font-weight:600;color:#111}
.bp-msg{margin:10px 0 0;font-size:14px;line-height:1.5;color:#b42318}
.bp-msg:empty{display:none}

/* Book button row. */
.bp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px}
.bp-book{font-size:16px;min-width:140px}
.btn-app.btn-app.btn-app.bp-book:disabled{opacity:.55;cursor:progress;filter:none}
.bp-hint{font-size:12px;color:#666}

/* Loading and problem views. */
.bp-load{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:16px;line-height:1.5}
.bp-spin{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--green,#c5f49d);border-top-color:#2e6e22;animation:bp-spin .8s linear infinite}
@keyframes bp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bp-spin{animation:none}.bp-face{transition:none}}
.bp-problem p{margin:0 0 10px;font-size:16px;line-height:1.6;color:#234b1a}
.bp-problem p:empty{display:none}
.bp-problem a{color:#2e6e22;font-weight:600}
.bp-problem .bp-actions{margin:14px 0 18px}
.bp-problem .btn-app{font-size:16px}

@media (max-width:480px){.bp-days{gap:6px}.bp-times{gap:6px}}