/* Base */
.wpc-configurator {
  font-family: 'Red Hat Display', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin-top: 16px;
  padding-bottom: 100px; /* spacer for sticky bar */
}

.wpc-section { display: grid; gap: 16px; }

.wpc-open { margin-bottom: 12px; }

.wpc-label-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.wpc-label {
  font-size: 20px; /* label size */
  font-weight: 600;
  color: #111;
}

.wpc-required { color: #d32f2f; margin-left: 4px; }
.wpc-learn { font-size: 14px; color: #0073aa; text-decoration: none; }
.wpc-learn:hover { text-decoration: underline; }

.wpc-field { padding: 12px 0; border-bottom: 1px solid #eee; }

/* Grids */
.wpc-grid { display: grid; gap: 12px; }
.wpc-grid-1 { grid-template-columns: 1fr; }
.wpc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wpc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.wpc-grid-6 { grid-template-columns: repeat(6, 1fr); }

.wpc-col { display: flex; flex-direction: column; gap: 6px; }

.wpc-sub-label { font-size: 16px; font-weight: 500; color: #222; } /* options font size */
.wpc-input { font-size: 16px; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; }

.wpc-range { font-size: 13px; color: #666; }
.wpc-note { font-size: 13px; color: #444; margin-top: 6px; }

/* Select options */
.wpc-select { gap: 10px; }
.wpc-option {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wpc-option:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,115,170,0.2); }
.wpc-option-label { font-size: 16px; color: #222; }

.wpc-option-image {
  border-radius: 50%;
  background-size: cover; background-position: center;
  margin: 0 auto 8px;
  border: 1px solid #ddd;
}

.wpc-option.active {
  border-color: #1e90ff;
  box-shadow: 0 0 0 2px rgba(30,144,255,0.2);
}

/* Errors */
.wpc-error { margin-top: 6px; font-size: 13px; color: #d32f2f; min-height: 18px; }

/* Sticky bottom bar */
.wpc-sticky {
  position: fixed;
  left: 0; right: 0; bottom: -80px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 -6px 16px rgba(0,0,0,0.06);
  transition: bottom 0.2s ease;
  z-index: 999;
}
.wpc-sticky.show { bottom: 0; }

.wpc-sticky-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 120px 1fr 180px;
  gap: 12px;
  align-items: center;
}

.wpc-qty-label { font-size: 16px; margin-right: 6px; }
#wpc-qty { width: 64px; padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; }

.wpc-total { font-size: 18px; font-weight: 600; color: #111; text-align: center; }

/* Vibrant theme-following button */
.wpc-add {
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: 600;
  background: var(--wp--preset--color--primary, #0073aa); /* fallback to WP blue */
  transition: background 0.2s ease;
}
.wpc-add:hover {
  background: #005f8d;
}
.wpc-icon { margin-right: 6px; }

/* Responsive */
@media (max-width: 992px) {
  .wpc-grid-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .wpc-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .wpc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .wpc-sticky-inner { grid-template-columns: 1fr 1fr; }
  .wpc-total { text-align: right; }
}
@media (max-width: 480px) {
  .wpc-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .wpc-sticky-inner { grid-template-columns: 1fr; }
  .wpc-total { text-align: left; }
}