/* ============================================================
   Page Boxes — visual layout editor
   ============================================================ */

/* ───────── Boxes layer (always rendered, edit + view modes) ─────────
   Stretched to fill the body so it can receive pointer events anywhere
   in edit mode. Children (boxes + preview) are positioned absolutely
   within it. */
.ff-boxes-layer {
  /* Anchor at body's top-left, zero height so it can't push the
     document taller than its content. Boxes inside use position:
     absolute with top/left coordinates relative to this layer.

     No z-index in view mode so the layer doesn't create a stacking
     context — that lets individual boxes with `is-behind` use
     z-index: -1 to sit behind document content (text, headings).
     Edit mode adds z-index back below so handles & boxes stay on
     top of theme markup for reliable click targets. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 0 !important;
  pointer-events: none;
  overflow: visible !important;
}
body.ff-boxes-edit-mode .ff-boxes-layer { z-index: 5; }
/* "Behind text" — decorative boxes opted in via the selection toolbar.
   Sit beneath document content; never intercept clicks. */
.ff-box.is-behind {
  z-index: -1;
  pointer-events: none;
}
/* Edit mode: still show is-behind boxes on top so they remain editable;
   the visual style hints at their behind-the-scenes role. */
body.ff-boxes-edit-mode .ff-box.is-behind {
  z-index: 0;
  pointer-events: auto;
  outline: 1px dashed rgba(120, 80, 160, .6);
  outline-offset: -1px;
}
.ff-box {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
}
.ff-box-inner {
  width: 100%;
  height: 100%;
  display: block;
}
/* Use descendant selectors so this works both for PHP-rendered boxes
   (img is a direct child of .ff-box) and JS-rendered boxes (img is
   inside .ff-box-inner). */
.ff-box img,
.ff-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ff-box--text .ff-box-text {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink, #1f2a26);
}
.ff-box--button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-box--button .btn { margin: 0; }

/* ───────── Edit mode ───────── */
body.ff-boxes-edit-mode {
  /* Disable text selection while editing — gestures take precedence. */
  user-select: none;
  -webkit-user-select: none;
}
.ff-boxes-layer.is-edit {
  /* In edit mode, the layer needs to receive clicks on empty area too. */
  pointer-events: auto;
  /* Subtle grid so the user knows they're in edit mode */
  background-image:
    linear-gradient( to right,  rgba(0,0,0,.04) 1px, transparent 1px ),
    linear-gradient( to bottom, rgba(0,0,0,.04) 1px, transparent 1px );
  background-size: 40px 40px;
  /* Edit mode: give the layer real dimensions so the author can draw
     boxes anywhere on the page. View mode keeps height: 0 (see base rule)
     to avoid pushing the document taller than its content. */
  bottom: 0;
  height: auto;
  min-height: 100vh;
}
.ff-boxes-layer.is-edit::before {
  content: 'Edit mode — drag on empty space to draw a new box';
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99996;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.ff-box.is-editable {
  outline: 2px dashed rgba(80, 120, 80, .45);
  outline-offset: 2px;
  cursor: move;
}
.ff-box.is-editable:hover  { outline-color: rgba(80, 120, 80, .85); }
.ff-box.is-selected        { outline: 2px solid #2b6cb0; outline-offset: 2px; }

/* Mobile mode: dim boxes that have no mobile coordinates — they are
   hidden on production at the mobile breakpoint. The badge clarifies why. */
.ff-box.ff-box--mobile-hidden {
  opacity: 0.45;
  outline-style: dotted;
  outline-color: rgba(180, 90, 90, .75);
}
.ff-box.ff-box--mobile-hidden.is-selected { opacity: 0.75; }
.ff-box-mobile-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(180, 90, 90, .92);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.ff-box.is-editable .ff-box-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f3f1ec, #f3f1ec 8px, #ece9e2 8px, #ece9e2 16px);
  color: #666;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Resize handles */
.ff-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #2b6cb0;
  border-radius: 50%;
  pointer-events: auto;
  z-index: 2;
}
.ff-box:not(.is-selected) .ff-handle { display: none; }
.ff-handle-n  { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ff-handle-s  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ff-handle-e  { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ff-handle-w  { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ff-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.ff-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.ff-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ff-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* Delete button */
.ff-box-delete {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d33;
  color: #fff;
  border: 2px solid #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ff-box.is-selected .ff-box-delete { display: flex; }
.ff-box-delete:hover { background: #b22; }

/* Preview rectangle (while drawing) — high z-index + animated dashes so it's impossible to miss. */
.ff-box-preview {
  position: absolute;
  background: rgba(43, 108, 176, .22);
  border: 3px dashed #2b6cb0;
  pointer-events: none;
  z-index: 99990;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 8px 24px rgba(43,108,176,.3);
  animation: ff-preview-dash 0.6s linear infinite;
}
@keyframes ff-preview-dash {
  to { background-position: 12px 0; }
}

/* ───────── Toolbar (fixed top) ───────── */
.ff-boxes-toolbar {
  position: fixed;
  top: 110px;
  right: 20px;
  z-index: 99997;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  user-select: none;
}
.ff-boxes-toolbar-title {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}
.ff-boxes-toolbar-info {
  color: #666;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ff-boxes-btn {
  padding: 8px 16px;
  background: #2b6cb0;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}
.ff-boxes-btn:hover { background: #1f4d80; color: #fff; }
.ff-boxes-btn-ghost {
  background: transparent;
  color: #333;
  border: 1px solid #ccc;
}
.ff-boxes-btn-ghost:hover { background: #f6f6f6; color: #000; }

/* ───────── Modal ───────── */
.ff-boxes-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ff-boxes-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.ff-boxes-modal-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  width: 480px;
  max-width: 92vw;
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ff-boxes-modal h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #1a1a1a;
  font-weight: 600;
}
.ff-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ff-pick-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: #f6f6f6;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.ff-pick-grid button:hover {
  background: #eef4fb;
  border-color: #2b6cb0;
}
.ff-pick-icon {
  font-size: 28px;
  line-height: 1;
}
.ff-modal-label {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
}
.ff-modal-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.ff-modal-input:focus { outline: 2px solid #2b6cb0; outline-offset: -1px; border-color: #2b6cb0; }
textarea.ff-modal-input { resize: vertical; min-height: 120px; }
.ff-modal-help {
  margin-top: -8px;
  font-size: 12px;
  color: #888;
  margin-bottom: 16px;
}
.ff-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ───────── Read-only frontend rendering ───────── */
.ff-box img,
.ff-box video {
  border-radius: 4px;
}

/* Mobile fallback: collapse boxes to a flow layout. */
@media (max-width: 768px) {
  body:not(.ff-boxes-edit-mode) .ff-boxes-layer {
    position: static;
    padding: 32px 16px;
  }
  body:not(.ff-boxes-edit-mode) .ff-box {
    position: static !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
    min-height: 200px;
    margin: 0 0 24px;
  }
}

/* ============================================================
   Extended editor UI: selection toolbar, alignment guides,
   inspector mode, mobile preview, image fit modes.
   ============================================================ */

/* Image fit modes — applied via data-fit attribute on the box. */
.ff-box--image[data-fit="cover"]   img { object-fit: cover; }
.ff-box--image[data-fit="contain"] img { object-fit: contain; background: var(--surface, #f3f1ec); }
.ff-box--image[data-fit="fill"]    img { object-fit: fill; }

/* Per-box selection toolbar (floats above the selected box). */
.ff-boxes-selbar {
  position: fixed;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ff-boxes-btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.ff-boxes-btn-danger {
  background: #d33;
  color: #fff;
}
.ff-boxes-btn-danger:hover { background: #b22; color: #fff; }

/* Breakpoint segmented control */
.ff-boxes-bp {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.ff-boxes-bp .ff-boxes-btn {
  border-radius: 0;
  margin: 0;
  border: 0;
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  color: #333;
}
.ff-boxes-bp .ff-boxes-btn.is-active {
  background: #2b6cb0;
  color: #fff;
}

/* Inspector mode — outlines hoverable elements + tints the cursor.
   Critical:
   1. Force pointer-events: auto on EVERY element so decorative theme
      elements (e.g., images with .ff-intro-flowers that have pointer-events:
      none for visitors) can be clicked in inspector mode.
   2. The boxes-layer itself must still pass clicks through — higher
      specificity rule below wins. */
body.ff-boxes-inspector { cursor: crosshair !important; }
body.ff-boxes-inspector * { pointer-events: auto !important; }
body.ff-boxes-inspector .ff-boxes-layer,
body.ff-boxes-inspector .ff-boxes-layer * { pointer-events: none !important; }
body.ff-boxes-inspector *:hover:not(.ff-box):not(.ff-box *):not(.ff-boxes-toolbar):not(.ff-boxes-toolbar *):not(.ff-boxes-modal):not(.ff-boxes-modal *):not(.ff-boxes-selbar):not(.ff-boxes-selbar *):not(.ff-inspector-menu):not(.ff-inspector-menu *):not(#wpadminbar):not(#wpadminbar *):not(.ff-boxes-layer):not(.ff-boxes-layer *) {
  outline: 2px solid #d33 !important;
  outline-offset: -2px !important;
  cursor: crosshair !important;
}

/* Inspector menu (the popup that appears after clicking an element) */
.ff-inspector-menu {
  position: fixed;
  z-index: 99999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}
.ff-inspector-menu button {
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ff-inspector-menu button:hover { background: #eef4fb; color: #1f4d80; }
.ff-inspector-menu .ff-menu-danger:hover { background: #fde2e2; color: #b22; }
.ff-inspector-menu .ff-menu-sep { height: 1px; background: #eee; margin: 4px 0; }
.ff-inspector-menu .ff-menu-target { font-size: 11px; color: #888; padding: 4px 12px 8px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* Inspector toolbar button active state */
.ff-boxes-toolbar [data-action="inspector"].is-active {
  background: #d33;
  color: #fff;
  border-color: #d33;
}

/* Alignment guides during drag/resize */
.ff-guide {
  position: absolute;
  background: #2b6cb0;
  pointer-events: none;
  z-index: 99989;
  opacity: 0.7;
}
.ff-guide-v { top: 0; bottom: 0; width: 1px; }
.ff-guide-h { left: 0; right: 0; height: 1px; }

/* Mobile preview: clamp the body to a phone-ish width with a contrasting bg */
body.ff-boxes-mobile-preview {
  max-width: 414px;
  margin: 0 auto;
  box-shadow: 0 0 0 6000px #2a2a2a;
  border-left: 1px solid rgba(255,255,255,.1);
  border-right: 1px solid rgba(255,255,255,.1);
}
body.ff-boxes-mobile-preview .ff-boxes-toolbar,
body.ff-boxes-mobile-preview .ff-boxes-selbar,
body.ff-boxes-mobile-preview .ff-boxes-modal {
  /* Toolbars sit OUTSIDE the phone preview, on the dark gutters. */
}

/* Modal preview thumbnail for image edit */
.ff-modal-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin: 0 0 16px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* ───────── Crop mode ─────────
   The selected image box gets a grab cursor + dashed orange outline so it's
   clear that dragging will pan the image (not move the box). */
.ff-box.is-cropping {
  outline: 3px dashed #e07b00 !important;
  outline-offset: 2px !important;
  cursor: grab !important;
}
.ff-box.is-cropping:active,
body.ff-boxes-cropping .ff-box.is-cropping:hover {
  cursor: grabbing !important;
}
.ff-box.is-cropping .ff-handle,
.ff-box.is-cropping .ff-box-delete {
  /* Handles & delete hidden during crop — drag is reserved for panning. */
  display: none !important;
}
.ff-boxes-btn.is-active {
  background: #e07b00;
  color: #fff;
}

/* ============================================================
   Animated icon box-type — 10 SVG icons with CSS-driven motion.
   All icons use currentColor so the color variant just changes
   the wrapping element's color.
   ============================================================ */

.ff-box-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  --ff-bicon-accent: #c8a97e; /* warm clay highlight */
}
.ff-box-icon[data-icon-color="accent"]    { color: var(--accent-deep, #3f4f43); }
.ff-box-icon[data-icon-color="ink"]       { color: var(--ink, #1f2a26); }
.ff-box-icon[data-icon-color="highlight"] { color: var(--highlight, #c8a97e); }
.ff-box-icon[data-icon-color="mute"]      { color: var(--muted, #8a958f); }
.ff-bicon {
  width: 80%;
  height: 80%;
  max-width: 100%;
  max-height: 100%;
}

/* — Flow — */
.ff-bicon-flow-line {
  stroke-dasharray: 8 6;
  animation: ff-bicon-flow-dash 3.5s linear infinite;
}
.ff-bicon-flow-2 { animation-delay: -1s; }
.ff-bicon-flow-3 { animation-delay: -2s; }
@keyframes ff-bicon-flow-dash { to { stroke-dashoffset: -28; } }

/* — Equalizer — */
.ff-bicon-eq-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ff-bicon-eq-bounce 1.1s ease-in-out infinite;
}
.ff-bicon-eq-1 { animation-duration: 1.0s; }
.ff-bicon-eq-2 { animation-duration: 1.5s; animation-delay: -.2s; }
.ff-bicon-eq-3 { animation-duration: 1.2s; animation-delay: -.4s; }
.ff-bicon-eq-4 { animation-duration: 1.35s; animation-delay: -.6s; }
@keyframes ff-bicon-eq-bounce {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}

/* — Ripple — */
.ff-bicon-ripple-r {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-ripple-out 2.4s ease-out infinite;
  opacity: 0;
}
.ff-bicon-ripple-2 { animation-delay: .8s; }
.ff-bicon-ripple-3 { animation-delay: 1.6s; }
@keyframes ff-bicon-ripple-out {
  0%   { transform: scale(0.55); opacity: 0; }
  10%  { opacity: 0.85; }
  100% { transform: scale(2.3);  opacity: 0; }
}

/* — Wheel — */
.ff-bicon-wheel-rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-rotate 8s linear infinite;
}

/* — Counter-rotation — */
.ff-bicon-cr-out,
.ff-bicon-cr-mid,
.ff-bicon-cr-in {
  transform-box: fill-box;
  transform-origin: center;
}
.ff-bicon-cr-out { animation: ff-bicon-rotate   7s   linear infinite; }
.ff-bicon-cr-mid { animation: ff-bicon-rotate-r 5.5s linear infinite; }
.ff-bicon-cr-in  { animation: ff-bicon-rotate   9s   linear infinite; }
.ff-bicon-cr-breath {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-breath-pulse 4.6s ease-in-out infinite;
}
@keyframes ff-bicon-breath-pulse {
  0%, 100% { transform: scale(0.6); opacity: .85; }
  50%      { transform: scale(1.45); opacity: 1; }
}

/* — Breath circle — */
.ff-bicon-breath-ring,
.ff-bicon-breath-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-breath-expand 5s ease-in-out infinite;
}
.ff-bicon-breath-core { animation-delay: -.3s; }
@keyframes ff-bicon-breath-expand {
  0%, 100% { transform: scale(0.55); opacity: .6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* — Heartbeat — */
.ff-bicon-heart-shape {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-heartbeat 1.2s ease-in-out infinite;
}
@keyframes ff-bicon-heartbeat {
  0%, 100% { transform: scale(.92); }
  15%      { transform: scale(1.10); }
  30%      { transform: scale(.95); }
  45%      { transform: scale(1.05); }
}

/* — Compass — */
.ff-bicon-compass-needle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-rotate 18s linear infinite;
}

/* — Sun — */
.ff-bicon-sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-rotate 30s linear infinite, ff-bicon-pulse 3s ease-in-out infinite;
}
.ff-bicon-sun-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-pulse 3s ease-in-out infinite;
}
@keyframes ff-bicon-pulse {
  0%, 100% { opacity: .8;  transform: scale(.98); }
  50%      { opacity: 1;   transform: scale(1.02); }
}

/* — Lotus — */
.ff-bicon-lotus-petals {
  transform-box: fill-box;
  transform-origin: center;
  animation: ff-bicon-rotate 24s linear infinite;
}

/* — Shared rotation keyframes — */
@keyframes ff-bicon-rotate   { to { transform: rotate(360deg); } }
@keyframes ff-bicon-rotate-r { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ff-bicon-flow-line,
  .ff-bicon-eq-bar,
  .ff-bicon-ripple-r,
  .ff-bicon-wheel-rotor,
  .ff-bicon-cr-out, .ff-bicon-cr-mid, .ff-bicon-cr-in, .ff-bicon-cr-breath,
  .ff-bicon-breath-ring, .ff-bicon-breath-core,
  .ff-bicon-heart-shape,
  .ff-bicon-compass-needle,
  .ff-bicon-sun-rays, .ff-bicon-sun-core,
  .ff-bicon-lotus-petals { animation: none !important; }
}

/* ───── Icon picker modal ───── */
.ff-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.ff-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: #f6f6f6;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.ff-icon-tile:hover { background: #eef4fb; border-color: #2b6cb0; }
.ff-icon-tile.is-selected { border-color: #2b6cb0; background: #dbe9f6; }
.ff-icon-preview {
  width: 40px; height: 40px;
  color: var(--accent-deep, #3f4f43);
  display: grid; place-items: center;
}
.ff-icon-preview svg { width: 100%; height: 100%; }
.ff-icon-label {
  font-size: 11px;
  color: #444;
  text-align: center;
}

/* Type picker — let the icon button span both columns of the row */
.ff-pick-wide { grid-column: span 2; }

/* Modal icon preview (large) */
.ff-modal-icon-preview {
  display: grid;
  place-items: center;
  background: #f6f6f6;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.ff-modal-icon-preview .ff-box-icon { width: 96px; height: 96px; }