header { z-index: 10; }
.appointment-page { max-width: 960px; }
.appointment-page h2 { margin: 36px 0 12px; font-size: 1.4rem; }
.appointment-notice, .appointment-error { padding: 14px 18px; border-radius: 5px; margin-bottom: 25px; }
.appointment-notice { background: #edf5ed; color: #274c30; }
.appointment-error { background: #fff1ee; color: #742f26; }
.appointment-selector { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 22px; }
.appointment-selector label { width: 100%; }
.appointment-selector select, .appointment-request input:not([type=checkbox]), .appointment-request select { width: 100%; max-width: 600px; padding: 12px; border: 1px solid #c9c1b7; border-radius: 4px; font: inherit; }
.appointment-selector select { flex: 1; min-width: 240px; }
.appointment-selector button, .appointment-request button { padding: 12px 22px; background: var(--accent); color: white; border: 0; border-radius: 4px; font: inherit; cursor: pointer; }
.appointment-selector button:hover, .appointment-request button:hover { filter: brightness(.9); }
.appointment-week-nav { display: flex; justify-content: space-between; min-height: 2em; margin: 8px 0 22px; }
.appointment-week-nav a { color: var(--text); }
.appointment-week-nav a:last-child { margin-left: auto; }
.appointment-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.appointment-day { border: 1px solid #e5e0d9; border-radius: 6px; padding: 18px; }
.appointment-day h2 { margin: 0 0 12px; font-size: 1.12rem; }
.appointment-day p { font-size: .95rem; }
.appointment-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.appointment-slot { cursor: pointer; position: relative; display: inline-block; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 4px; font: inherit; background: white; color: var(--text); }
.appointment-slot-free:hover, .appointment-slot-free:focus-visible { background: var(--accent); color: white; }
.appointment-slot-busy { border-color: #ddd; background: #f5f5f5; color: #777; cursor: default; }
.appointment-day-request { margin-top: 18px; border: 0; background: none; color: var(--text); text-decoration: underline; font: inherit; cursor: pointer; padding: 2px 0; }
.appointment-day-request:hover { text-decoration-thickness: 2px; }
.appointment-dialog { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: calc(100% - 24px); max-width: 560px; max-height: min(90vh, 900px); overflow-y: auto; border: 0; border-radius: 8px; padding: 26px; box-shadow: 0 12px 50px #0005; }
.appointment-dialog::backdrop { background: #0008; }
.appointment-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.appointment-dialog-heading h2 { margin: 0; }
.appointment-dialog .appointment-request .appointment-dialog-close { border: 0; background: none; color: var(--text); padding: 0; font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.appointment-dialog .appointment-request > label:not(.appointment-consent) { margin-top: 14px; }
.appointment-request button:disabled { opacity: .55; cursor: default; }
.appointment-request > label:not(.appointment-consent) { display: block; margin: 18px 0 5px; }
.appointment-request > input { display: block; }
.appointment-hint { margin: 14px 0; font-size: .92rem; }
.appointment-consent { display: flex; gap: 8px; align-items: start; margin: 20px 0; }
.appointment-consent input { margin-top: 8px; }
.appointment-consent a { color: var(--text); }
@media (max-width: 600px) { .appointment-page { padding: 42px 20px; } .appointment-page h1 { font-size: 2.2rem; } }
.appointment-admin { max-width: 760px; }
.appointment-admin h1 { font-size: 2.4rem; }
.appointment-admin .subtitle { margin-bottom: 32px; }
.appointment-admin a { color: var(--text); }
.appointment-admin-login { display: grid; gap: 12px; max-width: 430px; margin: 0 auto; }
.appointment-admin-login input { width: 100%; padding: 12px; border: 1px solid #c9c1b7; border-radius: 4px; font: inherit; }
.appointment-admin-login button, .appointment-admin-form button { padding: 12px 22px; background: var(--accent); color: white; border: 0; border-radius: 4px; font: inherit; cursor: pointer; }
.appointment-admin-days { display: grid; gap: 12px; margin: 24px 0; }
.appointment-admin-day { display: grid; grid-template-columns: minmax(130px, 1fr) repeat(2, minmax(110px, 150px)); gap: 14px; align-items: center; padding: 14px; border: 1px solid #e5e0d9; border-radius: 6px; }
.appointment-admin-day label { display: grid; gap: 5px; }
.appointment-admin-day .appointment-admin-enabled { display: flex; align-items: center; gap: 10px; font-weight: bold; }
.appointment-admin-day input[type=time] { width: 100%; padding: 9px; border: 1px solid #c9c1b7; border-radius: 4px; font: inherit; }
.appointment-admin-notice { display: grid; gap: 5px; max-width: 180px; margin: 18px 0 28px; }
.appointment-admin-notice input { width: 100%; padding: 9px; border: 1px solid #c9c1b7; border-radius: 4px; font: inherit; }
.appointment-admin-buffers { display: grid; gap: 12px; margin: 20px 0 26px; }
.appointment-admin-buffer { display: grid; grid-template-columns: minmax(90px, 1fr) repeat(2, minmax(120px, 160px)); gap: 14px; align-items: center; padding: 14px; border: 1px solid #e5e0d9; border-radius: 6px; }
.appointment-admin-buffer label { display: grid; gap: 5px; }
.appointment-admin-buffer input { width: 100%; padding: 9px; border: 1px solid #c9c1b7; border-radius: 4px; font: inherit; }
.appointment-admin-logout { margin: 24px 0; }
.appointment-admin-logout button { border: 0; background: none; padding: 0; color: var(--text); text-decoration: underline; font: inherit; cursor: pointer; }
@media (max-width: 600px) { .appointment-admin { padding: 42px 20px; } .appointment-admin h1 { font-size: 2rem; } .appointment-admin-day, .appointment-admin-buffer { grid-template-columns: 1fr 1fr; } .appointment-admin-enabled, .appointment-admin-buffer strong { grid-column: 1 / -1; } .appointment-dialog { padding: 20px; } }