/* ================== APPOINTMENTS (class.appointments.php) ==================
   ap_ classes. three homes: the public page (book.php, standalone), the landing page's demo
   drawer (inside lv_ markup), and the signed-in drawers (mchat shell, settings_row lists).
   the picker — days across, times under — is the same markup in all three. */

/* ---------- the picker ---------- */
.ap_picker { --ap_ink: #102d35; --ap_teal: #0f7777; --ap_line: rgba(16, 45, 53, .14); --ap_soft: rgba(15, 119, 119, .07); font-size: 15px; color: var(--ap_ink); }
.ap_nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ap_zone { font-size: 12px; color: rgba(16, 45, 53, .55); text-align: center; flex: 1; min-width: 0; }
.ap_pager { font: inherit; font-size: 13px; font-weight: 600; color: var(--ap_teal); background: transparent; border: 0; padding: 6px 4px; cursor: pointer; white-space: nowrap; }
.ap_pager i { font-size: 11px; }
.ap_days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ap_days::-webkit-scrollbar { display: none; }
.ap_day { flex: 0 0 auto; width: 64px; font: inherit; color: var(--ap_ink); background: #fff; border: 1.5px solid var(--ap_line); border-radius: 12px; padding: 8px 4px 7px; cursor: pointer; text-align: center; line-height: 1.15; }
.ap_day span { display: block; }
.ap_day_dow { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(16, 45, 53, .55); }
.ap_day_num { font-size: 22px; font-weight: 700; margin: 2px 0 0; }
.ap_day_mon { font-size: 11px; color: rgba(16, 45, 53, .55); }
.ap_day_count { font-size: 10px; color: var(--ap_teal); margin-top: 4px; font-weight: 600; }
.ap_day_lit { border-color: var(--ap_teal); background: var(--ap_soft); box-shadow: 0 0 0 1px var(--ap_teal) inset; }
.ap_times_head { font-size: 14px; font-weight: 700; margin: 6px 0 8px; }
.ap_slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap_slot { font: inherit; font-size: 14px; font-weight: 600; color: var(--ap_teal); background: #fff; border: 1.5px solid var(--ap_teal); border-radius: 10px; padding: 11px 6px; cursor: pointer; }
.ap_slot:hover { background: var(--ap_soft); }
.ap_slot_lit, .ap_slot:active { background: var(--ap_teal); color: #fff; }
.ap_hide { display: none !important; }
.ap_loading { padding: 28px 0; text-align: center; color: rgba(16, 45, 53, .55); font-size: 14px; }
.ap_empty { text-align: center; padding: 26px 12px; border: 1.5px dashed rgba(16, 45, 53, .18); border-radius: 12px; }
.ap_empty i { font-size: 28px; color: rgba(16, 45, 53, .35); }
.ap_empty_title { font-weight: 700; margin-top: 6px; }
.ap_empty_text { font-size: 13px; color: rgba(16, 45, 53, .6); margin-top: 4px; }

/* ---------- the card once booked (public + the guest email) ---------- */
.ap_booked { text-align: left; }
.ap_booked_tick { width: 56px; height: 56px; border-radius: 50%; background: #0f7777; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 4px 0 14px; }
.ap_booked_title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 12px; }
.ap_booked_line { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; margin: 6px 0; }
.ap_booked_line i { color: #0f7777; margin-top: 2px; }
.ap_booked_when { font-weight: 700; }
.ap_booked_note { font-size: 13.5px; color: rgba(16, 45, 53, .65); margin-top: 14px; line-height: 1.5; }
.ap_booked_note a { color: #0f7777; }

/* ---------- book.php ---------- */
body.ap_page { margin: 0; background: #f7fcfc; color: #102d35; font-family: "DM Sans", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.ap_top { max-width: 560px; margin: 0 auto; padding: 18px 16px 6px; }
.ap_brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.5px; color: #102d35; text-decoration: none; }
.ap_brand img { width: 30px; height: 30px; object-fit: contain; }
.ap_main { max-width: 560px; margin: 0 auto; padding: 8px 16px 24px; }
.ap_card { background: #fff; border: 1px solid rgba(16, 45, 53, .10); border-radius: 18px; padding: 22px 20px 24px; box-shadow: 0 14px 40px rgba(16, 45, 53, .08); }
.ap_who { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #0f7777; }
.ap_title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 10px; }
.ap_meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(16, 45, 53, .7); margin: 4px 0; }
.ap_meta i { color: #0f7777; }
.ap_lead { font-size: 15px; line-height: 1.55; color: rgba(16, 45, 53, .8); margin: 12px 0 4px; }
.ap_picker_host { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(16, 45, 53, .10); }
.ap_form { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(16, 45, 53, .10); }
.ap_form_when { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-bottom: 14px; }
.ap_form_when i { color: #0f7777; }
.ap_row { border: 1.5px solid rgba(16, 45, 53, .14); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.ap_row:focus-within { border-color: #0f7777; }
.ap_input { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #102d35; background: transparent; border: 0; padding: 13px 14px; outline: none; resize: vertical; }
.ap_input::placeholder { color: rgba(16, 45, 53, .4); }
.ap_error { background: #fdecec; color: #9b1c1c; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 4px 0 10px; }
.ap_btn { display: block; width: 100%; font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: #0f7777; border: 0; border-radius: 14px; padding: 15px; margin-top: 6px; cursor: pointer; }
.ap_btn[disabled] { opacity: .55; cursor: default; }
.ap_btn_danger { background: #b91c1c; }
.ap_link { display: block; width: 100%; text-align: center; font: inherit; font-size: 14px; font-weight: 600; color: #0f7777; background: transparent; border: 0; padding: 12px 0 0; cursor: pointer; text-decoration: none; }
.ap_off { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(16, 45, 53, .75); padding: 8px 0 0; }
.ap_off i { color: #0f7777; font-size: 20px; }
.ap_cancel_ask { font-size: 15px; line-height: 1.5; margin: 14px 0; }
.ap_foot { max-width: 560px; margin: 0 auto; padding: 0 16px 28px; font-size: 12px; color: rgba(16, 45, 53, .5); text-align: center; }
.ap_foot a { color: #0f7777; text-decoration: none; }
@media (max-width: 420px) { .ap_slots { grid-template-columns: repeat(2, 1fr); } .ap_title { font-size: 23px; } }

/* ---------- inside the landing page's demo drawer ---------- */
.lv_drawer_content .ap_picker { margin-top: 6px; }

/* ---------- the settings tile + drawers (signed in) ---------- */
.ap_tile_icon { width: 100px; height: 100px; margin-top: 10px; display: flex; align-items: center; justify-content: center; font-size: 58px; color: #0f7777; }
.ap_none { padding: 14px 16px; font-size: 14px; color: #6b7280; }
.ap_cap { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #0f7777; background: #e6f3f3; border-radius: 999px; padding: 3px 10px; }
.ap_cap_plus { background: #f1ecfb; color: #5b3fb8; }
.ap_row_off { color: #b06a00; font-weight: 700; }
.ap_icon_soft { background: #e9eef0 !important; color: #4b5b62 !important; }
.ap_link_block { margin-bottom: 14px; }
.ap_link_row { display: flex; gap: 6px; }
.ap_link_row .ap_link_text { flex: 1; min-width: 0; font-size: 13px; color: #0f7777; background: #f5f9f9; }
.ap_copy_link { flex: none; border: 1px solid #cfe5e6; background: #fff; color: #0f7777; border-radius: 6px; width: 40px; }
.ap_copy_link.ap_copied { background: #0f7777; color: #fff; }
.ap_dows { display: flex; gap: 6px; flex-wrap: wrap; }
.ap_dow { font-size: 13px; font-weight: 600; color: #4b5b62; background: #fff; border: 1.5px solid #d6e0e2; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.ap_dow_on { color: #fff; background: #0f7777; border-color: #0f7777; }
.ap_two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap_rules_title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0f7777; margin: 18px 0 6px; }
.ap_type_container .schedule_rule_field + .schedule_rule_field, .ap_type_container .ap_link_block + .schedule_rule_switch_row { margin-top: 12px; }
.ap_type_container .company_setting_footer { display: flex; gap: 8px; justify-content: flex-end; }
.ap_detail_name { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.ap_detail_row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; margin: 8px 0; line-height: 1.45; }
.ap_detail_row i { color: #0f7777; margin-top: 3px; flex: none; }
.ap_detail_row a { color: #0f7777; }

/* ---------- on the /home calendar (class.home.php build_appointment_card) ---------- */
.mac_cal_appt_card { background: #eef7f7; border: 1px solid #cfe5e6; }
.mac_cal_appt_accent { background: #17a29b; }
.mac_cal_appt_tag { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: #0f7777; margin-bottom: 2px; }
.mac_cal_chip.mcc_chip_appt { background: #e6f3f3; color: #0b5f5f; border-left-color: #17a29b; }

/* ---------- the room on a card / email ---------- */
.ap_room_url { font-size: 12px; color: rgba(16, 45, 53, .55); word-break: break-all; margin-top: 2px; }