/* Dusan host-page chrome for <bb-widget>.
 *
 * The widget itself is brand-neutral. Everything ai-ordering-specific
 * — dark scrim, borderless cards, serif headlines, fade-in entry,
 * white-on-dark submitting overlay — lives here and reaches into the
 * widget's shadow DOM via ::part() + CSS custom properties.
 *
 * Fonts (Inter + Playfair Display) are loaded by index.html's existing
 * Google Fonts link.
 */

bb-widget {
  /* Palette + typography handed to widget interior via vars. */
  --bb-font: 'Inter', system-ui, sans-serif;
  --bb-serif: 'Playfair Display', Georgia, serif;
  --bb-primary: #1b3a5c;
  --bb-bg: #ffffff;
  --bb-fg: #152d4a;
  --bb-border: #e8e0d5;
  --bb-bot-bubble: #f5f0ea;
  --bb-muted: #8a857e;
}

/* ── Modal scaffold (fulfillment overlay, thank-you modal) ────────── */

bb-widget::part(modal-backdrop) {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

bb-widget::part(modal-card) {
  border: none;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 24px;
  max-width: 24rem;
  animation: bb-modal-fade-in 0.3s ease-out;
}

bb-widget::part(modal-title) {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  text-align: center;
}

@keyframes bb-modal-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Thank-you modal — editorial headline + monospace order chip. */
bb-widget::part(thankyou-headline) {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Submitting overlay — black scrim + white spinner + serif label. */

bb-widget::part(submitting-overlay) {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  backdrop-filter: blur(4px);
}

bb-widget::part(submitting-spinner) {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

bb-widget::part(submitting-label) {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
}

bb-widget::part(submitting-sub) {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Submit-confirm overlay — dusan brand chrome. The widget owns
   the modal/card scaffolding (parts modal/modal-backdrop/modal-card);
   we override colours + typography to match the rest of the page. */

bb-widget::part(modal-submit) {
  background: rgba(20, 20, 30, 0.55);
}

bb-widget::part(submit-card) {
  border-radius: 16px;
  border-color: #e8e0d5;
}

bb-widget::part(modal-title) {
  font-family: 'Playfair Display', Georgia, serif;
  color: #1b3a5c;
  font-size: 1.2rem;
}

bb-widget::part(submit-fulfillment) {
  color: #98a3b1;
  border-top-color: #e8e0d5;
}

bb-widget::part(submit-cta) {
  background: #1b3a5c;
  color: #fff;
  font-family: inherit;
}

bb-widget::part(submit-cta):hover:not([disabled]) {
  background: #2a4d75;
}

bb-widget::part(submit-dismiss) {
  color: #98a3b1;
}

/* ── Slotted contact form (light-DOM child of <bb-widget>). The
   form lives in the page's *light* DOM (slotted into the widget
   shadow), so style it with normal CSS instead of ::part(). */

.dusan-submit-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.dusan-submit-contact-intro {
  margin: 0 0 4px 0;
  font-size: 0.85rem;
  color: #98a3b1;
}

.dusan-submit-contact label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #152d4a;
  margin: 0;
}

.dusan-submit-contact input {
  background: #f5f0ea;
  color: #152d4a;
  border: 1px solid #e8e0d5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font: inherit;
  outline: none;
}

.dusan-submit-contact input:focus {
  border-color: #1b3a5c;
  box-shadow: 0 0 0 1px #1b3a5c;
}

.dusan-submit-contact input::placeholder {
  color: #98a3b1;
}

.dusan-submit-contact-error {
  margin: 0;
  font-size: 0.75rem;
  color: #dc2626;
}