/* Book Appointment page, mirrors support-requests.css look. */
#appointments-page.page-section.active { justify-content: flex-start; align-items: stretch; }
#appointments-page .ap-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
#appointments-page .ap-tab { background:#fff; border:2px solid #e0e0e0; color:#667eea; padding:.6rem 1.1rem; border-radius:25px; font-size:.9rem; font-weight:600; cursor:pointer; }
#appointments-page .ap-tab.active { background:linear-gradient(135deg,#667eea,#764ba2); border-color:transparent; color:#fff; }
#appointments-page .ap-panel { display:none; }
#appointments-page .ap-panel.active { display:block; }
#appointments-page .ap-card { background:#fff; border-radius:12px; padding:1rem; margin-bottom:.9rem; box-shadow:0 2px 10px rgba(0,0,0,.08); }
#appointments-page .ap-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; margin-bottom:.4rem; }
#appointments-page .ap-h { font-size:1.05rem; font-weight:700; color:#333; margin:.8rem 0 .4rem; }
#appointments-page .ap-label { display:block; font-size:.85rem; font-weight:600; color:#555; margin:.7rem 0 .25rem; }
#appointments-page .ap-input { width:100%; box-sizing:border-box; padding:.6rem .75rem; border:1px solid #d5d5d5; border-radius:8px; font-size:.95rem; font-family:inherit; }
#appointments-page .ap-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
#appointments-page .ap-chip { background:#fff; border:1.5px solid #cfd3f5; color:#667eea; padding:.4rem .8rem; border-radius:18px; font-size:.85rem; font-weight:600; cursor:pointer; }
#appointments-page .ap-chip.active, #appointments-page .ap-chip.selected { background:#667eea; color:#fff; border-color:#667eea; }
#appointments-page .ap-chip-local { display:block; font-size:.7rem; font-weight:500; opacity:.85; line-height:1.2; }
#appointments-page .ap-btn { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; padding:.65rem 1.2rem; border-radius:8px; font-weight:600; cursor:pointer; margin-top:.8rem; }
#appointments-page .ap-btn:disabled { opacity:.6; cursor:not-allowed; }
#appointments-page .ap-link { background:none; border:none; color:#667eea; font-weight:600; cursor:pointer; padding:.3rem .5rem; }
#appointments-page .ap-danger { color:#c0392b; }
#appointments-page .ap-note { background:#fff8e6; border-left:4px solid #f39c12; padding:.6rem .8rem; border-radius:6px; font-size:.85rem; color:#7a5a00; margin:.6rem 0; }
#appointments-page .ap-hint { font-size:.8rem; color:#888; }
#appointments-page .ap-empty { text-align:center; color:#888; padding:1.5rem; }
#appointments-page .ap-msg { margin-top:.6rem; font-size:.9rem; }
#appointments-page .ap-status { font-size:.75rem; font-weight:700; padding:.2rem .6rem; border-radius:12px; background:#eee; color:#555; text-transform:capitalize; white-space:nowrap; }
#appointments-page .ap-status-submitted { background:#fff3cd; color:#8a6d00; }
#appointments-page .ap-status-approved { background:#d4edda; color:#1e6b34; }
#appointments-page .ap-status-rejected, #appointments-page .ap-status-cancelled { background:#f8d7da; color:#8a1f2b; }
#appointments-page .ap-day { margin-bottom:.7rem; }
#appointments-page .ap-day-title { font-size:.85rem; font-weight:700; color:#555; margin-bottom:.3rem; }
#appointments-page .ap-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
#appointments-page .ap-timeline { margin-top:.6rem; border-top:1px solid #eee; padding-top:.5rem; }
#appointments-page .ap-tl-row { font-size:.82rem; color:#555; padding:.2rem 0; }
#appointments-page .ap-rule { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.4rem; }

#appointments-page .ap-status-completed { background:#d1ecf1; color:#0c5460; }
#appointments-page .ap-status-no_show { background:#e2e3e5; color:#383d41; }
#appointments-page .ap-local { color:#777; font-size:.8rem; }

.ap-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}
.ap-modal{background:#fff;border-radius:16px;padding:1.4rem;max-width:420px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.ap-modal h3{margin:0 0 .5rem;color:#333}
.ap-modal p{margin:0 0 .8rem;color:#666;font-size:.9rem}
.ap-modal textarea{width:100%;box-sizing:border-box;border:2px solid #e0e0e0;border-radius:10px;padding:.6rem;font:inherit;margin-bottom:1rem}
.ap-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}
.ap-modal-actions button{border:none;border-radius:20px;padding:.55rem 1.1rem;font-weight:600;cursor:pointer}
.ap-modal-ok{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.ap-modal-cancel{background:#f0f0f5;color:#555}

#appointments-page .ap-chip.active { background:#667eea; color:#fff; }
#appointments-page .ap-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
#appointments-page .ap-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:.4rem 0; }
#appointments-page .ap-cal-h { text-align:center; font-size:.7rem; font-weight:700; color:#888; }
#appointments-page .ap-cal-d { padding:.6rem 0; border:1px solid #e1e1e1; border-radius:8px; background:#fff; font-size:.9rem; cursor:pointer; font-family:inherit; }
#appointments-page .ap-cal-d:disabled { opacity:.35; cursor:default; }
#appointments-page .ap-cal-d.has { background:#e6f6ec; border-color:#5cb87a; font-weight:700; }
#appointments-page .ap-cal-d.sel { outline:2px solid #667eea; }
#appointments-page .ap-cal-key { display:inline-block; width:.8rem; height:.8rem; background:#e6f6ec; border:1px solid #5cb87a; border-radius:3px; vertical-align:middle; }