/* ==========================================================================
   Maison 812 — skin for the CRM plugin's interfaces
   --------------------------------------------------------------------------
   The plugin renders booking, checkout, agreements, login, the portal and
   invoices inside `.m812-crm-slot`. Rules here use :where() so they carry
   ZERO specificity: the plugin's own CSS always wins when it needs to, and
   anything it does not style inherits the Maison 812 look.

   Plugin developers can also use the design tokens directly (--m812-*,
   defined in style.css) and these helper classes:
     .m812-card   cream panel with a champagne hairline
     .m812-btn    same as the theme .btn (add .m812-btn--outline / --gold)
     .m812-muted  secondary text
     .m812-price  serif price figure
   See INTEGRATION.md.
   ========================================================================== */
.m812-crm-slot { width: 100%; font-family: var(--m812-sans, 'Glacial Indifference', 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif); color: var(--m812-ink, #3F3126); }
.m812-crm-slot :where(*, *::before, *::after) { box-sizing: border-box; }
.m812-crm-slot :where(h1, h2, h3, h4, h5) { font-family: var(--m812-serif, 'Tan Vivre Libre', 'Cormorant Garamond', Georgia, serif); font-weight: 400; color: var(--m812-ink, #3F3126); letter-spacing: -.02em; line-height: 1.15; }
.m812-crm-slot :where(h2) { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.m812-crm-slot :where(h3) { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.m812-crm-slot :where(h4, h5) { font-family: var(--m812-sans, 'Glacial Indifference', 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.m812-crm-slot :where(a) { color: var(--m812-gold, #8E5558); text-decoration: underline; text-underline-offset: 3px; }
.m812-crm-slot :where(a:hover) { color: var(--m812-ink, #3F3126); }
.m812-crm-slot :where(label, legend) { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.m812-crm-slot :where(label) { display: inline-block; margin-bottom: 8px; }
.m812-crm-slot :where(fieldset) { margin: 0 0 24px; padding: 22px; border: 1px solid var(--m812-line, #D9C8B2); border-radius: var(--m812-radius, 18px); }
.m812-crm-slot :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--m812-gold, #8E5558); width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }
.m812-crm-slot :where(hr) { border-color: var(--m812-line, #D9C8B2); }

/* Buttons */
.m812-crm-slot :where(button, input[type="submit"], input[type="button"], .button, .btn, .m812-btn) {
	display: inline-flex; align-items: center; justify-content: center; gap: .7em;
	min-height: 48px; padding: 14px 28px;
	font: 600 .72rem/1.2 var(--m812-sans, 'Glacial Indifference', 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
	color: #fff; background: var(--m812-green-grad, linear-gradient(135deg, #6A7855 0%, #4B563B 100%)); border: 1px solid transparent; border-radius: 999px; cursor: pointer;
	transition: background-color .3s var(--m812-ease, cubic-bezier(.2, .7, .2, 1)), color .3s var(--m812-ease, cubic-bezier(.2, .7, .2, 1)), border-color .3s var(--m812-ease, cubic-bezier(.2, .7, .2, 1)), box-shadow .3s;
}
.m812-crm-slot :where(button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover, .btn:hover, .m812-btn:hover) { background: var(--m812-gold, #8E5558); border-color: var(--m812-gold, #8E5558); color: #fff; }
.m812-crm-slot :where(button:disabled, input[type="submit"]:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
.m812-crm-slot :where(.m812-btn--outline, .button-secondary, .secondary) { background: transparent; color: var(--m812-ink, #3F3126); border-color: var(--m812-champagne, #C58C8E); }
.m812-crm-slot :where(.m812-btn--gold) { background: var(--m812-champagne, #C58C8E); border-color: var(--m812-champagne, #C58C8E); color: #2f2019; }
.m812-crm-slot :where(button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible) { outline: 2px solid var(--m812-gold, #8E5558); outline-offset: 3px; }

/* Cards, summaries, tables */
.m812-crm-slot .m812-card, .m812-crm-slot :where([class*="summary"], [class*="price-breakdown"], [class*="order-review"]) { padding: clamp(20px, 3vw, 32px); background: var(--m812-cream, #F8F3E9); border: 1px solid var(--m812-line, #D9C8B2); border-radius: var(--m812-radius-lg, 30px); }
.m812-crm-slot :where(table) { width: 100%; border-collapse: collapse; font-size: .94rem; }
.m812-crm-slot :where(th) { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--m812-muted, #5A4B3F); }
.m812-crm-slot :where(th, td) { padding: 12px 10px; border-bottom: 1px solid var(--m812-line, #D9C8B2); vertical-align: top; }
.m812-crm-slot :where(tfoot td, tfoot th, tr[class*="total"] td, tr[class*="total"] th) { font-weight: 600; border-top: 1px solid var(--m812-champagne, #C58C8E); color: var(--m812-ink, #3F3126); }
.m812-crm-slot .m812-price, .m812-crm-slot :where([class*="total-amount"], [class*="price-total"]) { font-family: var(--m812-serif, 'Tan Vivre Libre', 'Cormorant Garamond', Georgia, serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--m812-gold, #8E5558); }
.m812-crm-slot .m812-muted { color: var(--m812-muted, #5A4B3F); }

/* Wide tables (invoices, calendars) scroll inside their own box, never the page */
.m812-crm-slot :where(table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Calendars, package selectors and add-ons: generic hooks. Plugin-specific selectors
   belong in the plugin; these only catch common class-name patterns. */
.m812-crm-slot :where([class*="calendar"] td, [class*="calendar"] button, [class*="datepicker"] td) { text-align: center; border-radius: 10px; }
.m812-crm-slot :where([class*="calendar"] .available, [class*="calendar"] [aria-selected="true"], [class*="calendar"] .selected) { background: var(--m812-dark, #4A3A2D); color: #fff; }
.m812-crm-slot :where([class*="package"], [class*="experience"], [class*="addon"], [class*="add-on"], [class*="time-slot"], [class*="timeslot"]):where(label, li, article, button, [role="radio"]) { border: 1px solid var(--m812-line, #D9C8B2); border-radius: var(--m812-radius, 18px); background: var(--m812-paper, #FCF9F4); transition: border-color .25s, background-color .25s; }
.m812-crm-slot :where([class*="package"], [class*="experience"], [class*="addon"], [class*="add-on"], [class*="time-slot"], [class*="timeslot"]):where(label, li, article, button, [role="radio"]):hover { border-color: var(--m812-champagne, #C58C8E); }
.m812-crm-slot :where([aria-checked="true"], [aria-pressed="true"], .is-selected, .selected, .active) { border-color: var(--m812-gold, #8E5558); }

/* Signature / agreement areas */
.m812-crm-slot :where(canvas) { max-width: 100%; border: 1px dashed var(--m812-champagne, #C58C8E); border-radius: var(--m812-radius, 18px); background: var(--m812-paper, #FCF9F4); }
.m812-crm-slot :where([class*="agreement"], [class*="contract"]) { max-height: 420px; overflow: auto; padding: 22px; border: 1px solid var(--m812-line, #D9C8B2); border-radius: var(--m812-radius, 18px); background: var(--m812-paper, #FCF9F4); }

/* Messages from the plugin */
.m812-crm-slot :where(.notice, .alert, .message, [class*="notice"], [class*="alert"], [role="alert"], [role="status"]) { padding: 14px 18px; border: 1px solid var(--m812-line, #D9C8B2); border-left: 4px solid var(--m812-champagne, #C58C8E); border-radius: 10px; background: var(--m812-cream, #F8F3E9); }
.m812-crm-slot :where([class*="error"], .is-error, [role="alert"]) { border-left-color: #a4443a; background: #fbf1ef; }
.m812-crm-slot :where([class*="success"], .is-success) { border-left-color: #6d8a54; background: #f3f7ee; }

/* Payment iframes from processors sit in a quiet frame (their inner fields are styled by the processor) */
.m812-crm-slot :where(iframe) { max-width: 100%; border: 0; }

/* Spinner / loading states */
.m812-crm-slot :where([class*="loading"], [aria-busy="true"]) { opacity: .65; }

/* The fallback shown when nothing is connected */
.m812-crm-fallback { max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); text-align: center; background: var(--m812-glass, rgba(255, 255, 255, 0.78)); border: 1px solid var(--m812-glass-line, rgba(255, 255, 255, 0.85)); border-radius: var(--m812-radius-lg, 30px); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.m812-crm-fallback__title { font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.2 var(--m812-serif, 'Tan Vivre Libre', 'Cormorant Garamond', Georgia, serif); margin: 14px 0 .5em; }
.m812-crm-fallback .m812-actions { justify-content: center; }
.account__card .m812-crm-fallback { border-radius: var(--m812-radius-lg, 30px); padding: 24px 0 0; border: 0; background: none; text-align: left; }
.account__card .m812-crm-fallback .m812-actions { justify-content: flex-start; margin-top: 1.2rem; }

@media (max-width: 640px) {
	.m812-crm-slot :where(button, input[type="submit"], .button, .btn) { width: 100%; }
	.m812-crm-slot :where(fieldset) { padding: 16px; }
}