/* JH Booking — front-end form styles. Intentionally calm and neutral. */
.jhb-wrap { max-width: 640px; margin: 0 auto; }
.jhb-intro { margin-bottom: 1.25rem; }

.jhb-field { display: block; margin: 0 0 1rem; }
.jhb-label { display: block; font-weight: 600; margin-bottom: .35rem; }
.jhb-input {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid #c7ccd1;
    border-radius: 8px;
    font: inherit;
    box-sizing: border-box;
}
.jhb-input:focus { outline: 2px solid #3a6ea5; outline-offset: 1px; border-color: #3a6ea5; }
textarea.jhb-input { resize: vertical; }

/* Slot picker */
.jhb-slots { margin: 0 0 1.25rem; }
.jhb-day { margin-bottom: 1rem; }
.jhb-day-label { margin: 0 0 .4rem; font-size: 1rem; }
.jhb-times { display: flex; flex-wrap: wrap; gap: .5rem; }
.jhb-time {
    appearance: none;
    border: 1px solid #c7ccd1;
    background: #fff;
    border-radius: 999px;
    padding: .45rem .9rem;
    font: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.jhb-time:hover { border-color: #3a6ea5; }
.jhb-time.is-selected { background: #3a6ea5; border-color: #3a6ea5; color: #fff; }
.jhb-noslots { color: #555; }

/* Compact week-grid picker: columns = days, rows = times */
.jhb-week { margin: 0 0 1.1rem; }
.jhb-week-label { font-weight: 600; margin: 0 0 .35rem; font-size: .95rem; }
.jhb-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e2e6ea; border-radius: 8px; }
.jhb-grid { border-collapse: collapse; width: 100%; min-width: 430px; }
.jhb-grid th, .jhb-grid td { border: 1px solid #eef1f3; text-align: center; padding: 0; }
.jhb-grid thead th { background: #f3f6f8; font-size: .76rem; font-weight: 600; color: #3a4a52; padding: 4px 2px; line-height: 1.15; }
.jhb-grid thead .jhb-dnum { font-weight: 400; color: #6b777e; }
.jhb-grid .jhb-rowtime { background: #f7f9fa; font-size: .78rem; font-weight: 600; color: #3a4a52; padding: 4px 8px; white-space: nowrap; position: sticky; left: 0; z-index: 1; }
.jhb-grid .jhb-empty { background: #fcfdfd; }
.jhb-cell { display: block; width: 100%; min-width: 40px; height: 30px; border: 0; background: #e3f3e9; cursor: pointer; padding: 0; transition: background .1s; }
.jhb-cell:hover { background: #c8ecd6; }
.jhb-cell:focus-visible { outline: 2px solid #2f6f4f; outline-offset: -2px; }
.jhb-cell .jhb-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3a8a5a; opacity: .5; vertical-align: middle; }
.jhb-cell.is-selected { background: #2f6f4f; }
.jhb-cell.is-selected .jhb-dot { background: #fff; opacity: 1; }
@media (max-width: 480px) { .jhb-cell { min-width: 34px; height: 34px; } }

/* Week tabs (only the active week's grid is shown) */
.jhb-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.jhb-tab { appearance: none; border: 1px solid #c7ccd1; background: #fff; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.jhb-tab:hover { border-color: #3a6ea5; }
.jhb-tab.is-active { background: #2f6f4f; border-color: #2f6f4f; color: #fff; }
.jhb-panel { display: none; }
.jhb-panel.is-active { display: block; }

/* Submit + messages */
.jhb-submit {
    appearance: none;
    border: 0;
    background: #2f6f4f;
    color: #fff;
    border-radius: 8px;
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.jhb-submit:hover { background: #285f44; }
.jhb-submit[disabled] { opacity: .6; cursor: default; }
.jhb-selected { margin: .25rem 0 .5rem; font-weight: 600; color: #2f6f4f; min-height: 1.2em; }
.jhb-msg { margin: .75rem 0 0; min-height: 1.2em; }
.jhb-msg--error { color: #b3261e; font-weight: 600; }
.jhb-msg--ok { color: #2f6f4f; font-weight: 600; }
.jhb-fineprint { margin-top: .75rem; font-size: .85rem; color: #555; }

/* Manage page (cancel / reschedule) */
.jhb-manage-card { border: 1px solid #dbe8ea; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.jhb-manage-card p { margin: 0 0 .4rem; }
.jhb-manage-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.jhb-btn { appearance: none; border: 1px solid #c7ccd1; background: #fff; border-radius: 8px; padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; }
.jhb-btn:hover { border-color: #3a6ea5; }
.jhb-btn--danger { border-color: #e0b4b1; color: #b3261e; }
.jhb-btn--danger:hover { border-color: #b3261e; }

/* Honeypot — must stay invisible to humans but present in the DOM. */
.jhb-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 480px) {
    .jhb-time { padding: .55rem 1rem; }
}