/* ═══════════════════════════════════════════════════════════════════════════
   Booking widget → site tokens
   ───────────────────────────────────────────────────────────────────────────
   The embedded booking widget reads ~49 CSS custom properties prefixed --bw-,
   each with a built-in fallback. Setting them on an ancestor is all it takes to
   restyle it, so this file maps the site's --gm- tokens onto the widget's.

   Because --gm-clay and friends read from Elementor's Global Colors, changing
   the Accent color in Site Settings restyles the booking widget too. Nobody
   has to edit the embed code, ever.

   The widget's own defaults are light, and Elementor pages are light by
   default, so the base block below is the light treatment. Add the CSS class
   `gm-dark` to a section (Advanced → CSS Classes) and the widget inside it
   flips to the night palette.

   Widget docs: booking-engine/widget/README.md
   ═══════════════════════════════════════════════════════════════════════════ */

.bw-widget {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --bw-primary:       var(--gm-clay);
  --bw-primary-hover: var(--gm-clay-lit);
  --bw-on-primary:    #FFF6EF;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --bw-font:         var(--gm-font-body);
  --bw-font-heading: var(--gm-font-display);
  --bw-font-label:   var(--gm-font-mono);
  --bw-font-button:  var(--gm-font-mono);
  --bw-font-size:    15px;
  --bw-line-height:  1.55;

  --bw-label-size:       11px;
  --bw-label-spacing:    var(--gm-tracking-label);
  --bw-heading-weight:   700;
  --bw-heading-spacing:  -0.02em;
  --bw-button-transform: uppercase;
  --bw-button-spacing:   0.14em;

  /* ── Shape — square panels, pill buttons, no lift ──────────────────────── */
  --bw-radius:     3px;
  --bw-radius-lg:  0;
  --bw-radius-sm:  2px;
  --bw-radius-btn: 999px;
  --bw-shadow:     none;

  /* ── Light sections ────────────────────────────────────────────────────── */
  --bw-surface:        #FFFFFF;
  --bw-surface-2:      var(--gm-canvas-2);
  --bw-surface-3:      var(--gm-canvas-2);
  --bw-text:           var(--gm-ink);
  --bw-text-body:      var(--gm-body);
  --bw-text-muted:     var(--gm-muted-on-light);
  --bw-text-subtle:    #7B888E;
  --bw-text-disabled:  rgba(12, 20, 28, 0.3);
  --bw-border:         var(--gm-rule-on-light);
  --bw-border-input:   rgba(12, 20, 28, 0.24);
  --bw-border-subtle:  rgba(12, 20, 28, 0.08);
  --bw-spinner-track:  rgba(12, 20, 28, 0.15);

  /* Firefly is too pale to read as text on cream, so success states use a
     darkened version of it on light and the pure color on dark. */
  --bw-success:        #6E7524;
  --bw-success-text:   #4F5419;
  --bw-success-bg:     rgba(214, 222, 85, 0.18);
  --bw-success-border: rgba(110, 117, 36, 0.35);
  --bw-success-fill:   rgba(214, 222, 85, 0.3);
  --bw-danger:         #A83C1E;
  --bw-danger-text:    #A83C1E;
  --bw-danger-bg:      rgba(168, 60, 30, 0.08);
  --bw-danger-border:  rgba(168, 60, 30, 0.3);
}

/* ── Night sections ───────────────────────────────────────────────────────
   Only the values that differ; everything above still applies. */
.gm-dark .bw-widget,
.gm-dark-raised .bw-widget {
  --bw-surface:        var(--gm-ink-2);
  --bw-surface-2:      var(--gm-ink-3);
  --bw-surface-3:      var(--gm-ink-3);
  --bw-text:           var(--gm-canvas);
  --bw-text-body:      #C9BCA6;
  --bw-text-muted:     var(--gm-muted-on-dark);
  --bw-text-subtle:    #6E7F89;
  --bw-text-disabled:  rgba(233, 222, 203, 0.28);
  --bw-border:         var(--gm-rule-on-dark);
  --bw-border-input:   rgba(233, 222, 203, 0.24);
  --bw-border-subtle:  rgba(233, 222, 203, 0.09);
  --bw-spinner-track:  rgba(233, 222, 203, 0.2);

  --bw-success:        var(--gm-firefly);
  --bw-success-text:   var(--gm-firefly);
  --bw-success-bg:     rgba(214, 222, 85, 0.1);
  --bw-success-border: rgba(214, 222, 85, 0.35);
  --bw-success-fill:   rgba(214, 222, 85, 0.18);
  --bw-danger:         #E0836A;
  --bw-danger-text:    #E0836A;
  --bw-danger-bg:      rgba(224, 131, 106, 0.1);
  --bw-danger-border:  rgba(224, 131, 106, 0.35);
}

/* The widget centers itself in a 380–800px card. Let it fill an Elementor
   column instead, since the column already controls the width. */
.gm-booking-full .bw-card,
.gm-booking-full .bw-flow {
  max-width: 100%;
}