/* Schedulosity Plus (class.staff_plus.php, plus.js): the settings tile, the checkout and
   membership drawer, the weekly-summary preview. The hero reuses the Insights tab's
   .ins_pro_* card rules (global.css) so the pitch reads the same on both doors. */

/* the settings tile */
.plus_tile_mark { width: 84px; height: 84px; border-radius: 50%; margin-top: 12px; background: #0F2044; color: white; display: flex; align-items: center; justify-content: center; font-size: 38px; position: relative; overflow: hidden; }
.plus_tile_mark::before { content: ''; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(155,39,175,.6), rgba(155,39,175,0) 70%); }
.plus_tile_mark i { position: relative; }
.plus_tile_mark.on { background: #9B27AF; }
.plus_tile_sub { font-size: 12.5px; color: #6b7c7d; padding-bottom: 12px; }

/* the drawer (and the Safari checkout page): the Insights palette the hero's .ins_pro_* rules
   read, since neither sits inside .ins_root */
.plus_drawer_container, .plus_page, .plus_summary_drawer { --pteal: #007A85; --pteal_deep: #0f7777; --ppurple: #9B27AF; --pnav: #0F2044; --ptext: #1a1a2e; --pmuted: #6c757d; --pborder: #e8eaed; }
.plus_panel { font-family: Gotham, Verdana, sans-serif; color: #1a1a2e; }
.plus_panel .ins_pro_card { margin: 0 0 14px; }
.plus_panel .plus_hero.compact .ins_pro_list { display: none; }
.plus_panel .plus_hero.compact .ins_pro_title { margin-bottom: 6px; }
.plus_price_line { display: flex; align-items: baseline; gap: 6px; padding: 0 2px; }
.plus_price_line b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #0F2044; }
.plus_price_line span { font-size: 12px; color: #6b7c7d; }
.plus_group_title { margin-top: 18px; }

/* Pay with: settings rows that are radio labels */
.plus_card_row { margin: 0; font-weight: 500; }
.plus_card_row input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 12px 0 0; accent-color: #0f7777; }
.plus_card_row .settings_row_icon { width: 32px; height: 32px; font-size: 15px; }
.plus_new_card { margin-top: 12px; }
.plus_new_card.hide_me { display: none; }
.plus_new_card .staff_dash_note { margin-top: 8px; }

/* the footer: the consent tick, then Confirm purchase */
.plus_consent { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 10px; }
.plus_consent .plus_consent_box { flex: none; margin: 0; width: 30px; height: 30px; padding: 4px; background: white; border: 2px solid #9aa5a5; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.plus_consent .plus_consent_box.checkbox_active { border-color: #0f7777; }
.plus_consent .plus_consent_box .custom_checkbox_checker { top: 0; line-height: 1; color: #0f7777; font-size: 13px; }
.plus_consent .plus_consent_box .custom_checkbox_checker.hide_me { display: none; }
.plus_consent_text { font-size: 12px; line-height: 1.45; color: #16211f; cursor: pointer; padding-top: 2px; }
.plus_consent_text a { color: #0f7777; text-decoration: underline; }
.plus_footer .plus_start_btn { margin-top: 0; }
.plus_footer .plus_start_btn:disabled { opacity: .45; cursor: not-allowed; }
.plus_fine { font-size: 11.5px; color: #6b7c7d; line-height: 1.45; text-align: center; margin-top: 10px; padding: 0 4px; }
.plus_error { margin-top: 12px; }
.plus_error.hide_me { display: none; }

/* the membership card */
.plus_box { background: white; border: 1px solid #d3e2e3; border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(11, 61, 64, 0.06); }
.plus_box_title { font-size: 14px; font-weight: 800; color: #0F2044; }
.plus_box_copy { font-size: 13px; color: #55707a; line-height: 1.45; margin-top: 8px; }
.plus_member_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.plus_member_line { font-size: 13px; color: #1a1a2e; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.plus_member_line i { color: #0f7777; }
.plus_state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 12px; padding: 3px 9px; white-space: nowrap; }
.plus_state.on { background: #e1f5ee; color: #147a55; }
.plus_state.ending { background: #fff1d6; color: #9a5b00; }
.plus_state.past_due { background: #fde2e1; color: #a33; }
.plus_member .ins_pro_btn { margin-top: 12px; }
.plus_cancel_btn { display: block; width: 100%; margin-top: 12px; background: transparent; color: #a33; border: 1px solid #e3b7b5; border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.plus_cancel_btn:hover, .plus_cancel_btn:focus { background: #fdf3f2; outline: none; }
.plus_cancel_btn:disabled, .plus_start_btn:disabled, .plus_resume_btn:disabled { opacity: .6; cursor: default; }

/* the weekly summary rows: a switch, and a row with a caret */
.plus_switch_row { margin: 0; font-weight: 500; }
.plus_switch { flex: 0 0 auto; position: relative; width: 44px; height: 26px; margin-left: 10px; }
.plus_switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.plus_switch i { position: absolute; inset: 0; border-radius: 13px; background: #cfd8d8; transition: background .15s; }
.plus_switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.plus_switch input:checked + i { background: #0f7777; }
.plus_switch input:checked + i::after { transform: translateX(18px); }

/* the summary preview: the email's own inline styles draw it; the page only gives it a width */
.plus_summary_page { font-family: Gotham, Verdana, sans-serif; color: #1a1a2e; }
.plus_summary_page table { max-width: 100%; }

/* in the app: the purchase happens in Safari */
.plus_app_box { margin-top: 14px; }
.plus_app_wait { margin-top: 12px; padding: 10px 12px; background: #eef3f3; border-radius: 8px; font-size: 12.5px; color: #55707a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plus_app_wait.hide_me { display: none; }
.plus_app_wait i { color: #0f7777; }
.plus_app_wait a { color: #0f7777; font-weight: 700; margin-left: auto; }
.plus_safari_btn:disabled { opacity: .6; cursor: default; }

/* a member's line on the Insights tab, where the sales card was */
.ins_plus_member_line { display: flex; align-items: center; gap: 8px; background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 700; color: #1a1a2e; text-decoration: none; margin-bottom: 14px; }
.ins_plus_member_line:hover, .ins_plus_member_line:focus { color: #1a1a2e; text-decoration: none; background: #f7f9f9; }
.ins_plus_member_line > i { color: #9B27AF; font-size: 16px; }
.ins_plus_member_line span { margin-left: auto; font-size: 12px; font-weight: 600; color: #0f7777; white-space: nowrap; }
.ins_plus_member_line span i { font-size: 11px; }