/* =========================================================================
   Shared panel primitives — used across admin, customer area, public site.
   Renders as a rounded card with a slight drop shadow that contains a
   compact, multi-column form layout (VGM-inspired).
   ========================================================================= */

.ffg-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  padding: 1.25rem 1.5rem;
}

/* Section headings inside a panel. */
.ffg-panel h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4b5563;
  margin: 0 0 .65rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #f1f5f9;
}

/* 3-column layout. Stacks to single column under 900px. */
.ffg-panel-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem 1.75rem;
}
@media (max-width: 900px) {
  .ffg-panel-cols { grid-template-columns: 1fr; gap: 1rem; }
}

.ffg-panel-col { min-width: 0; }
.ffg-panel-col + .ffg-panel-col {
  border-left: 1px solid #f1f5f9;
  padding-left: 1.5rem;
}
@media (max-width: 900px) {
  .ffg-panel-col + .ffg-panel-col {
    border-left: 0; padding-left: 0;
    padding-top: 1rem; border-top: 1px solid #f1f5f9;
  }
}

/* Full-width sections that sit below the column row (services, extras). */
.ffg-panel-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Bottom action row. */
.ffg-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Sub-grids inside a column (e.g. mobile / phone side-by-side). */
.ffg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
.ffg-grid-3 { display: grid; grid-template-columns: auto 1fr 1fr; gap: .5rem .75rem; }
@media (max-width: 480px) {
  .ffg-grid-2, .ffg-grid-3 { grid-template-columns: 1fr; }
}

/* Service category mini-header. */
.ffg-cat {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  margin: .75rem 0 .4rem;
}
.ffg-cat:first-child { margin-top: 0; }

/* Compact ticklist grid — sits inside .ffg-panel-section.
   Each label = .adm-check pattern, but with reduced padding. */
.ffg-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .3rem .4rem;
}
.ffg-checks .adm-check {
  display: flex;          /* override base inline-flex so each fills its grid cell */
  padding: 4px 8px;
  font-size: 12.5px;
  gap: .35rem;
  align-items: center;
  min-height: 28px;
  line-height: 1.25;
  width: 100%;
  box-sizing: border-box;
}
.ffg-checks .adm-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}
.ffg-checks .adm-check span:first-of-type {
  flex: 1 1 auto;
  white-space: normal;     /* allow long names to wrap to a second line */
  overflow-wrap: anywhere; /* break inside very long words if needed */
  min-width: 0;
}
.ffg-checks .adm-check .muted { white-space: nowrap; font-size: 11px; flex: 0 0 auto; }