/* ============================================================
   TORNADOTOOLS — FILE-CONVERTER.CSS  v2.0
   Scoped prefix: fc-*
   Depends on:    main.css  ·  components.css

   WHAT'S IN THIS FILE (tool-unique only)
   ──────────────────────────────────────
   1.  PAGE SCOPE
   2.  TOAST  (fc-* variant: top-right slide-in, differs from copy-toast)
   3.  DROP ZONE  (drag-and-drop upload area)
   4.  FILE PREVIEW CARD
   5.  CONVERSION CONTROLS ROW  (from/swap/to selects)
   6.  CONVERT BUTTON OVERRIDES  (size + shimmer + disabled state)
   7.  PROGRESS BAR
   8.  RESULT PANEL
   9.  FORMAT CARDS GRID
   10. CANCEL BUTTON
   11. PANEL PADDING OVERRIDES
   12. RESPONSIVE  (680px · 420px)

   SHARED SYSTEMS USED — DO NOT REDECLARE
   ──────────────────────────────────────
   Layout:    .tool-page, .tool-panel, .tool-label
   Buttons:   .btn.primary, .btn.secondary, .btn.ghost, .btn.sm
   Badges:    .badge.cyan  (replaces .fc-badge)
   Inputs:    select.tool-input, .tool-label
   Feedback:  .alert.error / .alert.success  (inline states)
   Grids:     .feature-card  (used for fc-features-grid items)
   Tokens:    all --sp-*, --radius-*, --neon-*, --font-*
   Animations: fadeSlideUp (main.css), glowPulse (main.css)
   ============================================================ */

/* ============================================================
   1. PAGE SCOPE
   ============================================================ */
.fc-page {
  max-width: 760px;   /* narrower than default .tool-page max-width */
}

/* ============================================================
   2. TOAST  (top-right slide-in — different from .copy-toast)
   NOTE: Uses --radius-md, --font-mono from tokens.
         Only the positioning, bg, and error variant are unique here.
   ============================================================ */
.fc-toast {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(6, 12, 26, 0.96);
  border: 1px solid rgba(0, 245, 255, 0.24);
  border-radius: var(--radius-md);
  /* Single, cheaper backdrop blur */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  transform: translateX(120%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.fc-toast.show {
  transform: translateX(0);
}

.fc-toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: var(--neon-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Error variant */
.fc-toast.fc-toast-error {
  border-color: rgba(255, 80, 80, 0.28);
}

.fc-toast.fc-toast-error .fc-toast-icon {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 80, 80, 0.35);
  color: var(--neon-red);
}

/* ============================================================
   3. DROP ZONE
   ============================================================ */

/* Upload panel removes default .tool-panel padding — it controls its own spacing */
.fc-upload-panel {
  padding: 0;
  overflow: visible;
}

.fc-drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 34px 22px;
  border-radius: var(--radius-xl);
  border: 1.5px dashed rgba(0, 245, 255, 0.20);
  background:
    radial-gradient(circle at top, rgba(108, 99, 255, 0.12), transparent 52%),
    rgba(6, 12, 26, 0.58);
  /* Reduce backdrop-filter cost: use only once, smaller blur value */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  min-height: 250px;
}

/* Conic glow ring — shown on hover / drag-over */
.fc-drop-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(0, 245, 255, 0.22) 15%,
    transparent 30%,
    rgba(108, 99, 255, 0.18) 55%,
    transparent 70%,
    rgba(0, 245, 255, 0.14) 85%,
    transparent 100%
  );
  opacity: 0;
  /* will-change reduces per-frame recalc cost */
  will-change: transform, opacity;
  animation: fcGlowSpin 3.2s linear infinite;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

@keyframes fcGlowSpin {
  to { transform: rotate(360deg); }
}

.fc-drop-zone:hover .fc-drop-glow,
.fc-drop-zone.fc-drag-over .fc-drop-glow {
  opacity: 1;
}

.fc-drop-zone:hover,
.fc-drop-zone.fc-drag-over {
  border-color: rgba(0, 245, 255, 0.42);
  background:
    radial-gradient(circle at top, rgba(108, 99, 255, 0.18), transparent 48%),
    rgba(0, 245, 255, 0.04);
  box-shadow: 0 0 34px rgba(0, 245, 255, 0.08), inset 0 0 28px rgba(0, 245, 255, 0.03);
}

.fc-drop-zone.fc-drag-over {
  border-style: solid;
  transform: scale(1.01);
}

/* Upload icon */
.fc-drop-icon {
  color: var(--neon-cyan);
  opacity: 0.78;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-drop-zone:hover .fc-drop-icon,
.fc-drop-zone.fc-drag-over .fc-drop-icon {
  opacity: 1;
  transform: translateY(-3px);
}

/* Labels */
.fc-drop-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  line-height: 1.2;
}

.fc-drop-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -2px;
}

.fc-browse-btn {
  margin-top: 2px;
  /* Uses .btn.secondary from components.css */
}

.fc-drop-formats {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Hidden file input covering the whole zone */
.fc-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

/* Override components.css input[type="file"] styles inside drop zone */
.fc-drop-zone input[type="file"] {
  border: none;
  background: none;
  padding: 0;
}

/* ============================================================
   4. FILE PREVIEW CARD
   ============================================================ */
.fc-preview-section {
  margin-top: 12px;
}

/* Entrance — reuses fadeSlideUp from main.css */
.fc-preview-panel {
  animation: fadeSlideUp 0.35s ease forwards;
}

.fc-preview-card {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 14px var(--sp-md);
  /* Reuses result-item visual DNA without the hover translate */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* Thumbnail box */
.fc-preview-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: rgba(0, 245, 255, 0.05);
  border: 1px solid rgba(0, 245, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.fc-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.fc-file-icon {
  font-size: 26px;
  line-height: 1;
}

/* Meta block */
.fc-preview-meta {
  flex: 1;
  min-width: 0;
}

.fc-file-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-file-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/*
  fc-badge → replaced in HTML by .badge.cyan from components.css
  Keeping selector for backward-compat in case HTML hasn't been updated yet.
*/
.fc-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0, 245, 255, 0.10);
  border: 1px solid rgba(0, 245, 255, 0.28);
  color: var(--neon-cyan);
}

.fc-file-size {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* Remove file button — extends .btn.ghost.sm visually */
.fc-remove-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.fc-remove-btn:hover {
  color: var(--neon-red);
  border-color: rgba(255, 80, 80, 0.35);
  background: rgba(255, 80, 80, 0.07);
}

/* Panel header utility row */
.fc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* ============================================================
   5. CONVERSION CONTROLS ROW
   ============================================================ */
.fc-controls-section {
  margin-top: 12px;
}

/* 3-column: [from select] [swap btn] [to select] */
.fc-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.fc-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/*
  .fc-select extends select.tool-input from components.css.
  Only the font overrides needed for uppercase mono display are unique here.
*/
.fc-select {
  /* Layout and color from select.tool-input — only add what differs */
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  min-width: 0;
}

.fc-select option {
  background: #0a1220;
  color: var(--text-primary);
  text-transform: none;    /* keep dropdown text readable */
  letter-spacing: normal;
}

.fc-select option:disabled {
  color: rgba(122, 155, 181, 0.52);
  background: #08101c;
}

.fc-select optgroup {
  background: #0a1220;
  color: var(--neon-cyan);
  font-weight: 700;
}

/* Extra disabled state hint (backend-only formats) */
.fc-select option[value=""] {
  color: rgba(122, 155, 181, 0.70);
}

/* Swap button — circular icon button variant */
.fc-swap-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 245, 255, 0.20);
  background: rgba(0, 245, 255, 0.05);
  color: var(--neon-cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  align-self: flex-end;
  /* will-change avoids repaint on rotation */
  will-change: transform;
}

.fc-swap-btn:hover {
  background: rgba(0, 245, 255, 0.12);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 245, 255, 0.20);
  transform: rotate(180deg);
}

.fc-swap-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Label margin for the select wrap */
.fc-select-wrap .tool-label {
  margin-bottom: 6px;
}

/* ============================================================
   6. CONVERT BUTTON OVERRIDES
   Uses .btn.primary as base — only size + shimmer + disabled added here
   ============================================================ */
.fc-convert-btn {
  width: 100%;
  padding: 15px var(--sp-md);
  font-size: 14px;
  letter-spacing: 1.6px;
  min-height: 52px;
  /* overflow already on .btn; position already relative */
}

/* Right-to-left shimmer sweep on hover */
.fc-convert-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.fc-convert-btn:hover::after {
  transform: translateX(100%);
}

/* Disabled / backend-only state */
.fc-convert-btn:disabled {
  cursor: not-allowed;
  opacity: 0.76;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.18), rgba(0, 245, 255, 0.08));
  border: 1px solid rgba(0, 245, 255, 0.16);
  color: var(--text-primary);
  box-shadow: none;
  filter: saturate(0.92);
  transform: none;
}

.fc-convert-btn:disabled::after {
  display: none;
}

/* Backend-only label: turn off uppercase so sentence reads correctly */
.fc-convert-btn:disabled,
.fc-convert-btn[title*="backend"] {
  text-transform: none;
  letter-spacing: 0.9px;
}

.fc-convert-btn-icon {
  margin-right: var(--sp-sm);
}

/* Backend warmup status */
.fc-backend-status {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  min-height: 1.4em;
}
.fc-backend-status.is-ready { color: var(--neon-green); }
.fc-backend-status.is-error { color: var(--neon-red); }

/* Bottom padding override for controls panel */
.fc-controls-section .tool-panel {
  padding-bottom: var(--sp-lg);
}

/* ============================================================
   7. PROGRESS BAR
   ============================================================ */
.fc-progress-section {
  margin-top: 12px;
}

/* Percentage label */
.fc-progress-pct {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--neon-cyan);
  letter-spacing: 1px;
}

/* Track */
.fc-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-pill);
  overflow: visible;
  margin-bottom: 12px;
}

/* Fill bar */
.fc-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-1), var(--neon-cyan));
  transition: width 0.26s ease;
  position: relative;
  /* Composited layer — avoids layout cost during animation */
  will-change: width;
}

/* Glowing tip dot */
.fc-progress-glow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neon-cyan);
  /* Kept single-layer glow for perf — removed double box-shadow */
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.50);
  opacity: 0;
  transition: opacity 0.2s, left 0.2s linear;
  left: 0%;
  pointer-events: none;
  will-change: left, opacity;
}

/* Status text */
.fc-progress-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Header row: label + [pct + cancel] */
.fc-progress-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   8. RESULT PANEL
   ============================================================ */
.fc-result-section {
  margin-top: 12px;
}

.fc-result-panel {
  text-align: center;
  padding: 28px 22px;
  /* Entrance: reuses fadeSlideUp from main.css */
  animation: fadeSlideUp 0.42s ease forwards;
}

/* Success ring badge */
.fc-success-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.08);
  border: 2px solid rgba(0, 255, 136, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-md);
  box-shadow: 0 0 22px rgba(0, 255, 136, 0.12);
  animation: fcSuccessPop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fcSuccessPop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.fc-success-icon {
  font-size: 24px;
  color: var(--neon-green);
  font-weight: 700;
  line-height: 1;
}

.fc-result-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.fc-result-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* Output file info row */
.fc-result-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-md);
  max-width: 100%;
}

/* Download / convert-another buttons */
.fc-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.fc-download-btn { min-width: 170px; }
.fc-another-btn  { min-width: 150px; }

/* Mobile padding override */
@media (max-width: 680px) {
  .fc-result-panel { padding: 22px var(--sp-md); }
}

/* ============================================================
   9. FORMAT CARDS GRID
   ============================================================ */
.fc-formats-section {
  margin-top: 44px;
}

/* Section header — local override of shared .section-header centering */
.fc-section-header {
  text-align: center;
  margin-bottom: 22px;
}

.fc-section-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-top: 6px;
}

/* 4-column grid */
.fc-formats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.fc-format-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  cursor: default;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* Bottom accent line (color driven by --fmt-color custom prop set inline) */
.fc-format-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fmt-color, var(--neon-cyan)), transparent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.fc-format-card:hover::before {
  transform: scaleX(1);
}

.fc-format-card:hover {
  border-color: rgba(0, 245, 255, 0.20);
  background: rgba(0, 245, 255, 0.03);
  transform: translateY(-2px);
  /* Reduced shadow vs original for perf */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26);
}

.fc-format-icon {
  font-size: 26px;
  line-height: 1;
}

.fc-format-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--text-primary);
  text-transform: uppercase;
}

.fc-format-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Features 2-column grid (uses .feature-card from components.css for items) */
.fc-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* ============================================================
   10. CANCEL BUTTON
   Extends .btn.sm danger semantics — only pill shape + mono font differ
   ============================================================ */
.fc-cancel-btn {
  border: 1px solid rgba(255, 80, 80, 0.28);
  background: rgba(255, 80, 80, 0.08);
  color: var(--neon-red);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

.fc-cancel-btn:hover {
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.44);
  box-shadow: 0 0 10px rgba(255, 80, 80, 0.18);
}

/* ============================================================
   11. PANEL PADDING / POSITION OVERRIDES
   Scoped adjustments to .tool-panel for this page's sections
   ============================================================ */

/* All fc panels need position:relative for ::before accent line */
.fc-upload-panel .tool-panel,
.fc-progress-section .tool-panel,
.fc-result-panel {
  position: relative;
}

/* Consistent top padding across most panels */
.fc-preview-section .tool-panel,
.fc-controls-section .tool-panel,
.fc-progress-section .tool-panel,
.fc-result-section .tool-panel {
  padding-top: 22px;
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */

/* ── Mobile (≤680px) ── */
@media (max-width: 680px) {

  .fc-page {
    max-width: 100%;
  }

  /* Toast moves to bottom on mobile */
  .fc-toast {
    top: auto;
    bottom: 18px;
    right: 12px;
    left: 12px;
    transform: translateY(120%);
    max-width: none;
  }

  .fc-toast.show {
    transform: translateY(0);
  }

  /* Drop zone tightens */
  .fc-drop-zone {
    padding: 26px var(--sp-md);
    gap: var(--sp-sm);
    min-height: 220px;
  }

  .fc-drop-title   { font-size: 15px; }
  .fc-drop-sub     { font-size: 12px; }
  .fc-drop-formats { font-size: 9px; letter-spacing: 2px; }

  /* Controls row stacks vertically */
  .fc-controls-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Swap button rotates to point down */
  .fc-swap-btn {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    transform: rotate(90deg);
    align-self: center;
  }

  .fc-swap-btn:hover {
    transform: rotate(270deg);
  }

  /* Formats grid: 2 columns on mobile */
  .fc-formats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Features grid stacks */
  .fc-features-grid {
    grid-template-columns: 1fr;
  }

  /* Result actions stack full-width */
  .fc-result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fc-download-btn,
  .fc-another-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Preview card */
  .fc-preview-card {
    padding: 12px 14px;
    gap: 12px;
  }

  /* Long filenames wrap on mobile instead of being cut off */
  .fc-file-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ── Small mobile (≤420px) ── */
@media (max-width: 420px) {

  /* Preview card stacks vertically */
  .fc-preview-card {
    flex-direction: column;
    text-align: center;
  }

  .fc-file-detail {
    justify-content: center;
  }

  /* Panel header stacks */
  .fc-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Remove button fills row */
  .fc-remove-btn {
    width: 100%;
  }
}