/* ═══════════════════════════════════════════════════════════════════════
   fretly-modal.css — reusable confirmation modal (FretlyModal.confirm).
   ═══════════════════════════════════════════════════════════════════════
   Every visual property is a CSS variable so theme + CMS overrides
   retune appearance without editing selectors.  Default values follow
   the rest of the Fretly UI palette (warm cream surface, accent
   orange, danger red).
   ─────────────────────────────────────────────────────────────────── */

.fly-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--fly-modal-backdrop, rgba(40, 32, 24, 0.45));
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--fly-modal-z, 9999);
  animation: fly-modal-fade 0.12s ease-out;
}

@keyframes fly-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fly-modal-card {
  background:    var(--fly-modal-bg,        var(--surface, #fff));
  color:         var(--fly-modal-fg,        var(--text,    #2a2a2a));
  border-radius: var(--fly-modal-radius,    var(--radius-lg, 12px));
  box-shadow:    var(--fly-modal-shadow,    var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.22)));
  border:        var(--fly-modal-border,    var(--border-w, 1px) solid var(--border, #d8d4c8));
  padding:       var(--fly-modal-pad,       var(--space-lg) var(--space-xl) var(--space-md));
  min-width:     var(--fly-modal-min-w,     25.7143rem);   /* ~360 px */
  max-width:     var(--fly-modal-max-w,     37.1429rem);   /* ~520 px */
  font-family:   var(--font-ui,             system-ui, -apple-system, sans-serif);
  animation:     fly-modal-pop 0.16s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}

@keyframes fly-modal-pop {
  from { transform: translateY(8px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.fly-modal-title {
  margin:      0 0 var(--space-sm);
  font-size:   var(--fly-modal-title-size, var(--font-lg, 18px));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight, 1.3);
  color:       var(--fly-modal-title-color, var(--text, #2a2a2a));
}

.fly-modal-body {
  margin:    0 0 var(--space-md);
  font-size: var(--fly-modal-body-size, var(--font-base, 14px));
  line-height: var(--leading-snug, 1.45);
  color:     var(--fly-modal-body-color, var(--text-2, #555));
}

.fly-modal-listhead {
  margin:      var(--space-md) 0 var(--space-xs);
  font-size:   var(--fly-modal-listhead-size, var(--font-sm, 13px));
  font-weight: var(--weight-medium);
  color:       var(--fly-modal-listhead-color, var(--text-2, #555));
}

.fly-modal-list {
  margin:    0 0 var(--space-xs);
  padding:   0;
  list-style: none;
}

.fly-modal-listitem {
  display:    flex;
  align-items: baseline;
  gap:        var(--space-sm);
  padding:    var(--space-xs) 0;
  font-size:  var(--fly-modal-list-size, var(--font-base, 14px));
  color:      var(--fly-modal-list-color, var(--text, #2a2a2a));
}

.fly-modal-listitem::before {
  content: '•';
  color:   var(--fly-modal-bullet-color, var(--accent, #c85a1a));
  font-weight: var(--weight-bold);
}

.fly-modal-listlabel {
  font-weight: var(--weight-medium);
}

.fly-modal-listsub {
  font-size: var(--font-sm);
  color:     var(--fly-modal-list-sub-color, var(--text-3, #888));
  font-style: italic;
}

/* ── Text input (FretlyModal.promptText) ────────────────────────────── */

.fly-modal-input {
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  margin:        var(--space-sm) 0 var(--space-xs);
  padding:       var(--space-sm) var(--space-md);
  background:    var(--fly-modal-input-bg, var(--surface, #fff));
  color:         var(--fly-modal-input-color, var(--text, #2a2a2a));
  border:        var(--border-w, 1px) solid var(--fly-modal-input-border, var(--border, #d8d4c8));
  border-radius: var(--fly-modal-btn-radius, var(--radius-md, 8px));
  font-family:   inherit;
  font-size:     var(--font-base);
}

.fly-modal-input:focus {
  outline:      none;
  border-color: var(--accent, #c85a1a);
  box-shadow:   0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, 0.2);
}

/* ── Option picker (FretlyModal.choose) ─────────────────────────────── */

.fly-modal-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  margin:         var(--space-sm) 0 var(--space-xs);
}

.fly-modal-option {
  appearance:    none;
  -webkit-appearance: none;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            calc(var(--space-xs) / 2);
  width:          100%;
  text-align:     left;
  background:     var(--fly-modal-opt-bg, var(--surface-2, #f5f1e6));
  color:          var(--fly-modal-opt-color, var(--text, #2a2a2a));
  border:         var(--border-w, 1px) solid var(--fly-modal-opt-border, var(--border, #d8d4c8));
  border-radius:  var(--fly-modal-btn-radius, var(--radius-md, 8px));
  padding:        var(--space-sm) var(--space-md);
  font-family:    inherit;
  font-size:      var(--font-base);
  cursor:         pointer;
  transition:     background var(--t-fast, .12s), border-color var(--t-fast, .12s);
}

.fly-modal-option:hover {
  border-color: var(--accent, #c85a1a);
}

.fly-modal-option:focus-visible {
  outline:        var(--border-w-thick, 2px) solid var(--accent, #c85a1a);
  outline-offset: var(--border-w-thick, 2px);
}

.fly-modal-option.is-selected {
  background:   var(--fly-modal-opt-sel-bg, var(--surface, #fff));
  border-color: var(--accent, #c85a1a);
  box-shadow:   inset 0 0 0 var(--border-w, 1px) var(--accent, #c85a1a);
}

.fly-modal-optlabel {
  font-weight: var(--weight-medium);
}

.fly-modal-optsub {
  font-size: var(--font-sm);
  color:     var(--fly-modal-opt-sub-color, var(--text-3, #888));
}

.fly-modal-btns {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--space-sm);
  margin-top:      var(--space-lg);
  padding-top:     var(--space-md);
  border-top:      var(--border-w, 1px) solid var(--fly-modal-divider, var(--border, #ece8dc));
}

.fly-modal-btn {
  appearance:    none;
  -webkit-appearance: none;
  border:        var(--border-w, 1px) solid transparent;
  border-radius: var(--fly-modal-btn-radius, var(--radius-md, 8px));
  padding:       var(--space-sm) var(--space-lg);
  font-family:   inherit;
  font-size:     var(--font-base);
  font-weight:   var(--weight-medium);
  line-height:   1;
  cursor:        pointer;
  transition:    background var(--t-fast, .12s), border-color var(--t-fast, .12s), color var(--t-fast, .12s);
}

.fly-modal-btn:focus-visible {
  outline:        var(--border-w-thick, 2px) solid var(--accent, #c85a1a);
  outline-offset: var(--border-w-thick, 2px);
}

.fly-modal-btn--cancel {
  background:    var(--fly-modal-cancel-bg,    transparent);
  color:         var(--fly-modal-cancel-color, var(--text-2, #555));
  border-color:  var(--fly-modal-cancel-border, var(--border, #d8d4c8));
}

.fly-modal-btn--cancel:hover {
  background:   var(--fly-modal-cancel-hover-bg, var(--surface-2, #f5f1e6));
  color:        var(--fly-modal-cancel-hover-color, var(--text, #2a2a2a));
}

.fly-modal-btn--confirm {
  background:   var(--fly-modal-confirm-bg,    var(--accent, #c85a1a));
  color:        var(--fly-modal-confirm-color, #fff);
  border-color: var(--fly-modal-confirm-bg,    var(--accent, #c85a1a));
}

.fly-modal-btn--confirm:hover {
  background:   var(--fly-modal-confirm-hover-bg, #a44712);
  border-color: var(--fly-modal-confirm-hover-bg, #a44712);
}

.fly-modal-btn--confirm.is-danger {
  background:   var(--fly-modal-danger-bg,    #c0392b);
  border-color: var(--fly-modal-danger-bg,    #c0392b);
}

.fly-modal-btn--confirm.is-danger:hover {
  background:   var(--fly-modal-danger-hover-bg,  #962d20);
  border-color: var(--fly-modal-danger-hover-bg,  #962d20);
}