/* 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%;
    min-height: 44px;
    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; }
.jhb-field-hint { display: block; margin: -.1rem 0 .5rem; color: #55636a; font-size: .88rem; line-height: 1.45; }

.jhb-service-group { border: 0; padding: 0; }
.jhb-service-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.jhb-service-choice { display: block; min-width: 0; }
.jhb-service-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.jhb-service-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .55rem .7rem;
    border: 1px solid #c7ccd1;
    border-radius: 8px;
    background: #fff;
    color: #24333a;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .12s, border-color .12s, color .12s;
}
.jhb-service-choice input:focus-visible + .jhb-service-button {
    outline: 2px solid #3a6ea5;
    outline-offset: 2px;
}
.jhb-service-choice input:checked + .jhb-service-button {
    background: #2f6f4f;
    border-color: #2f6f4f;
    color: #fff;
}
.jhb-service-choice:hover .jhb-service-button { border-color: #3a6ea5; }

/* Slot picker */
.jhb-slots { margin: 0 0 1.25rem; }
.jhb-timezone-note { margin: 0 0 .35rem; color: #3a4a52; font-size: .9rem; }
.jhb-slot-status { margin: 0 0 .55rem; color: #555; font-size: .9rem; min-height: 1.2em; }
.jhb-quick-heading { margin: 0 0 .5rem; font-weight: 700; color: #24333a; }
.jhb-quick-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 0 0 .65rem;
}
.jhb-quick-slot {
    appearance: none;
    min-width: 0;
    min-height: 58px;
    padding: .55rem .65rem;
    border: 1px solid #b9c4ca;
    border-radius: 8px;
    background: #fff;
    color: #24333a;
    font: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
.jhb-quick-slot:hover { border-color: #3a6ea5; background: #f5f9fc; }
.jhb-quick-slot:focus-visible,
.jhb-all-times-toggle:focus-visible,
.jhb-retry:focus-visible,
.jhb-note-summary:focus-visible { outline: 2px solid #3a6ea5; outline-offset: 2px; }
.jhb-quick-slot.is-selected { border-color: #2f6f4f; background: #2f6f4f; color: #fff; }
.jhb-quick-date,
.jhb-quick-time,
.jhb-quick-zoom { display: block; }
.jhb-quick-date { font-size: .86rem; }
.jhb-quick-time { margin-top: .18rem; font-weight: 700; font-size: 1.02rem; }
.jhb-quick-zoom { margin-top: .18rem; font-size: .78rem; }
.jhb-all-times-toggle,
.jhb-retry {
    appearance: none;
    min-height: 44px;
    padding: .55rem .85rem;
    border: 1px solid #aebbc2;
    border-radius: 8px;
    background: #fff;
    color: #235c78;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.jhb-all-times-toggle:hover,
.jhb-retry:hover { border-color: #3a6ea5; background: #f5f9fc; }
.jhb-all-times { margin-top: .75rem; }
.jhb-all-times[hidden] { display: none !important; }
.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-app .jhb-cell { min-width: 44px; height: 44px; }
.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-zoom-only { background: #dbeafe; color: #1f4f7a; }
.jhb-cell.is-zoom-only:hover { background: #bfdbfe; }
.jhb-cell.is-disabled { cursor: not-allowed; opacity: .78; }
.jhb-cell.is-disabled:hover { background: #dbeafe; }
.jhb-cell.is-selected { background: #2f6f4f; }
.jhb-cell.is-selected.is-zoom-only { background: #1f5f9b; }
.jhb-cell.is-selected .jhb-dot { background: #fff; opacity: 1; }
.jhb-zoom-badge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border: 1px solid #7aa9d9; border-radius: 50%; color: #1f4f7a; background: #eef6ff; font-size: .68rem; font-weight: 700; line-height: 1; vertical-align: middle; }
.jhb-cell.is-selected .jhb-zoom-badge { border-color: #fff; background: #fff; color: #1f5f9b; }
.jhb-grid thead th.jhb-day-zoom-only { background: #eaf3ff; color: #1f4f7a; }
.jhb-grid thead .jhb-head-zoom { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 3px; border: 1px solid #7aa9d9; border-radius: 50%; background: #eef6ff; color: #1f4f7a; font-size: .6rem; font-weight: 700; vertical-align: text-bottom; }
.jhb-zoom-legend { display: flex; align-items: center; gap: .4rem; margin: .55rem 0 0; color: #3a4a52; font-size: .9rem; }
@media (max-width: 480px) { .jhb-cell { min-width: 44px; height: 44px; } }

/* 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; min-height: 44px; border: 1px solid #c7ccd1; background: #fff; border-radius: 999px; padding: .45rem .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;
    min-height: 48px;
    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: .65rem 0 .85rem; padding: .65rem .75rem; border-left: 4px solid #2f6f4f; border-radius: 4px; background: #f1f8f4; font-weight: 600; color: #245b42; min-height: 1.2em; }
.jhb-selected:empty { display: none; }
.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; }
.jhb-note-details { margin: 0 0 1rem; border: 1px solid #d7dee2; border-radius: 8px; background: #fbfcfc; }
.jhb-note-summary { min-height: 44px; padding: .65rem .75rem; font-weight: 600; line-height: 1.4; cursor: pointer; box-sizing: border-box; }
.jhb-note-field { padding: .2rem .75rem .75rem; margin: 0; }

/* 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: 640px) {
    .jhb-quick-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jhb-submit { width: 100%; }
}

@media (max-width: 359px) {
    .jhb-service-options,
    .jhb-quick-slots { grid-template-columns: 1fr; }
    .jhb-time { padding: .55rem 1rem; }
}