.booking-addon-summary {
  --addon-ink: #27251f;
  --addon-muted: #655f53;
  --addon-surface: #faf8f4;
  --addon-border: #ded8ce;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--addon-border);
  border-radius: 14px;
  background: var(--addon-surface);
  color: var(--addon-ink);
}
.template-obscura .booking-addon-summary {
  --addon-ink: #f5f0e6;
  --addon-muted: #c5bdaf;
  --addon-surface: #1d1c19;
  --addon-border: #49453e;
}
.booking-addon-summary .addon-summary-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.booking-addon-summary .addon-summary-title { margin: 0; color: var(--addon-ink) !important; font-size: 17px; font-weight: 600; line-height: 1.4; }
.booking-addon-summary .addon-edit-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--addon-border); border-radius: 8px; background: transparent; color: var(--addon-ink) !important; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.booking-addon-summary .addon-edit-button:hover { background: var(--addon-border); }
.booking-addon-summary .addon-edit-button:focus-visible { outline: 3px solid var(--addon-ink); outline-offset: 3px; }
.booking-addon-summary .addon-summary-list { list-style: none; padding: 0; margin: 16px 0 0; }
.booking-addon-summary .addon-summary-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 10px 0; color: var(--addon-ink); border-top: 1px solid var(--addon-border); }
.booking-addon-summary .addon-summary-meta { color: var(--addon-muted); font-size: 14px; }
.booking-addon-summary .addon-summary-help { color: var(--addon-muted) !important; font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.booking-addon-summary-calendar { max-width: 960px; margin: 20px auto; }
@media (max-width: 600px) {
 .booking-addon-summary { padding: 16px; }
 .booking-addon-summary-calendar { margin: 16px; }
}
/* Keep the summary within the booking column, below its navigation. */
.booking-addon-summary-calendar { max-width: none; width: 100%; margin: 0 0 24px; padding: 16px 20px; border-radius: 10px; box-sizing: border-box; }
.booking-addon-summary-calendar .addon-summary-list { margin-top: 4px; }
.booking-addon-summary-calendar .addon-summary-row { border: 0; padding: 2px 0; font-size: 14px; }
.booking-addon-summary-calendar .addon-summary-help { display: none; }
/* Explicit component tokens prevent page-wide label/button rules bleeding in. */
#bookingAddonDialog {
 --dialog-bg: #fffdf9; --dialog-ink: #292720; --dialog-muted: #716b61; --dialog-line: #e5dfd4; --dialog-control: #f3efe8; --dialog-action: #292720; --dialog-on-action: #fffdf9;
 box-sizing: border-box; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 28px; overflow-y: auto;
 background: var(--dialog-bg) !important; color: var(--dialog-ink) !important; border: 1px solid var(--dialog-line); border-radius: 16px; box-shadow: 0 24px 80px #0005; font: 15px/1.5 var(--addon-body-font, sans-serif);
}
.template-obscura #bookingAddonDialog { --dialog-bg: #1c1b18; --dialog-ink: #f4efe5; --dialog-muted: #b9b1a4; --dialog-line: #403c34; --dialog-control: #292720; --dialog-action: #e9dcc3; --dialog-on-action: #242019; }
#bookingAddonDialog::backdrop { background: #111b; backdrop-filter: blur(5px); }
#bookingAddonDialog * { box-sizing: border-box; }
#bookingAddonDialog h2 { color: var(--dialog-ink) !important; font: 600 24px/1.25 var(--addon-heading-font, serif) !important; text-align: left !important; letter-spacing: -.5px !important; margin: 4px 32px 10px 0 !important; }
#bookingAddonDialog .addon-intro { color: var(--dialog-muted) !important; font: 14px/1.5 var(--addon-body-font, sans-serif); margin: 0 0 24px !important; }
#bookingAddonDialog .addon-close { float: right; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px 0 0; color: var(--dialog-muted) !important; font: 26px/1 var(--addon-body-font, sans-serif); text-decoration: none; }
#bookingAddonDialog .addon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--dialog-line); }
#bookingAddonDialog label { flex: 1; min-width: 0; margin: 0 !important; padding: 0 !important; color: var(--dialog-ink) !important; font: 500 15px/1.4 var(--addon-body-font, sans-serif) !important; text-align: left !important; }
#bookingAddonDialog small { display: block; margin-top: 6px; color: var(--dialog-muted) !important; font: 13px/1.4 var(--addon-body-font, sans-serif); }
#bookingAddonDialog .addon-stepper { display: flex; align-items: center; border: 1px solid var(--dialog-line); border-radius: 8px; overflow: hidden; background: var(--dialog-control); }
#bookingAddonDialog .addon-stepper button { width: 36px !important; height: 42px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--dialog-ink) !important; font: 20px/1 var(--addon-body-font, sans-serif) !important; letter-spacing: 0 !important; cursor: pointer; }
#bookingAddonDialog input[type=number] { appearance: textfield; width: 34px !important; height: 42px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--dialog-ink) !important; font: 500 15px var(--addon-body-font, sans-serif) !important; text-align: center; box-shadow: none !important; }
#bookingAddonDialog input::-webkit-inner-spin-button, #bookingAddonDialog input::-webkit-outer-spin-button { appearance: none; margin: 0; }
#bookingAddonDialog input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--dialog-action); }
#bookingAddonDialog .addon-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 20px 0; margin-top: 8px; border-top: 1px solid var(--dialog-line); color: var(--dialog-ink) !important; font: 600 14px/1.5 var(--addon-body-font, sans-serif); }
#bookingAddonDialog .addon-continue { display: block; width: 100%; min-height: 48px; padding: 14px 18px !important; border: 0 !important; border-radius: 8px !important; background: var(--dialog-action) !important; color: var(--dialog-on-action) !important; font: 600 14px/1.4 var(--addon-body-font, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
#bookingAddonDialog :focus-visible { outline: 2px solid var(--dialog-ink); outline-offset: 3px; }
html:has(#bookingAddonDialog[open]) { overflow: hidden; }
@media(max-width: 600px) { #bookingAddonDialog { padding: 22px; } .booking-addon-summary-calendar { margin: 0 0 20px; } }

/* Artist settings are shared by all three booking designs. */
.booking-addon-summary { font-family: var(--addon-body-font, inherit); }
.booking-addon-summary .addon-summary-title { font-family: var(--addon-heading-font, inherit); }
#bookingAddonDialog, .booking-addon-summary {
 --dialog-bg: var(--addon-theme-surface, var(--obscura-panel, #fffdf9));
 --dialog-ink: var(--addon-theme-ink, var(--obscura-text, #292720));
 --dialog-muted: color-mix(in srgb, var(--dialog-ink) 68%, var(--dialog-bg));
 --dialog-line: color-mix(in srgb, var(--dialog-ink) 18%, var(--dialog-bg));
 --dialog-control: color-mix(in srgb, var(--dialog-ink) 6%, var(--dialog-bg));
 --dialog-action: var(--addon-accent);
 --dialog-on-action: var(--addon-on-accent);
 --addon-surface: var(--dialog-bg);
 --addon-ink: var(--dialog-ink);
 --addon-muted: var(--dialog-muted);
 --addon-border: var(--dialog-line);
}
.template-obscura #bookingAddonDialog, .template-obscura .booking-addon-summary {
 --dialog-bg: var(--obscura-panel, #101010);
 --dialog-ink: var(--obscura-text, #fff);
 --dialog-muted: color-mix(in srgb, var(--dialog-ink) 68%, var(--dialog-bg));
 --dialog-line: color-mix(in srgb, var(--dialog-ink) 18%, var(--dialog-bg));
 --dialog-control: color-mix(in srgb, var(--dialog-ink) 6%, var(--dialog-bg));
 --dialog-action: var(--addon-accent);
 --dialog-on-action: var(--addon-on-accent);
 --addon-surface: var(--dialog-bg); --addon-ink: var(--dialog-ink); --addon-muted: var(--dialog-muted); --addon-border: var(--dialog-line);
}
#bookingAddonDialog .addon-continue:hover { background: var(--addon-accent-hover) !important; color: var(--addon-on-accent-hover) !important; }


/* Override the details page's broad paragraph color rule with muted theme text. */
body.template-obscura .booking-addon-summary .addon-summary-help {
 color: var(--obscura-muted, #b5b5b5) !important;
}